diff --git a/change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json b/change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json
new file mode 100644
index 0000000000000..3c89df8ed8159
--- /dev/null
+++ b/change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update typings for context and definition, export base classes",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index c2aebdab89815..4dfd12727b487 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -99,7 +99,7 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-element": "^1.4.0",
-    "@microsoft/fast-foundation": "2.0.0-1",
+    "@microsoft/fast-foundation": "^2.0.0",
     "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"
   }
diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index e45f567e6e2fe..fe7c2dee0dcf9 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { AccordionItemOptions, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   accentFillRest,
@@ -16,7 +16,7 @@ import {
 } from '../../design-tokens';
 import { heightNumber } from '../../styles/size';
 
-export const accordionItemStyles = (context, definition) =>
+export const accordionItemStyles: (context: ElementDefinitionContext, definition: AccordionItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: AccordionItemOptions) =>
   css`
     ${display('flex')} :host {
         box-sizing: border-box;
diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/packages/web-components/src/accordion/accordion-item/index.ts
index 59a8bf8251155..22f508d6e21fb 100644
--- a/packages/web-components/src/accordion/accordion-item/index.ts
+++ b/packages/web-components/src/accordion/accordion-item/index.ts
@@ -49,3 +49,5 @@ export const fluentAccordionItem = AccordionItem.compose<AccordionItemOptions>({
  * @public
  */
 export const accordionItemStyles = styles;
+
+export { AccordionItem };
diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts
index 9014c76a0e411..a130f80534161 100644
--- a/packages/web-components/src/accordion/accordion.styles.ts
+++ b/packages/web-components/src/accordion/accordion.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import {
   bodyFont,
   neutralForegroundRest,
@@ -9,7 +9,7 @@ import {
   typeRampMinus1LineHeight,
 } from '../design-tokens';
 
-export const accordionStyles = (context, definition) =>
+export const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('flex')} :host {
       box-sizing: border-box;
diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts
index 703521cbd08a1..5a20490172bb7 100644
--- a/packages/web-components/src/accordion/index.ts
+++ b/packages/web-components/src/accordion/index.ts
@@ -23,3 +23,9 @@ export const fluentAccordion = Accordion.compose({
  * @public
  */
 export const accordionStyles = styles;
+
+/**
+ * Base class for Accordion
+ * @public
+ */
+export { Accordion };
diff --git a/packages/web-components/src/anchor/anchor.styles.ts b/packages/web-components/src/anchor/anchor.styles.ts
index 19168fb4ea278..627450f4cb21d 100644
--- a/packages/web-components/src/anchor/anchor.styles.ts
+++ b/packages/web-components/src/anchor/anchor.styles.ts
@@ -1,4 +1,5 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import {
   AccentButtonStyles,
   baseButtonStyles,
@@ -9,7 +10,7 @@ import {
 } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 
-export const anchorStyles = (context, definition) =>
+export const anchorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${baseButtonStyles(context, definition)}
   `.withBehaviors(
diff --git a/packages/web-components/src/anchored-region/anchored-region.styles.ts b/packages/web-components/src/anchored-region/anchored-region.styles.ts
index 9a04f200205b6..6c4f3ae1f89b7 100644
--- a/packages/web-components/src/anchored-region/anchored-region.styles.ts
+++ b/packages/web-components/src/anchored-region/anchored-region.styles.ts
@@ -1,6 +1,7 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 
-export const anchoredRegionStyles = (context, definition) => css`
+export const anchoredRegionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   :host {
     contain: layout;
     display: block;
diff --git a/packages/web-components/src/anchored-region/index.ts b/packages/web-components/src/anchored-region/index.ts
index 4e95503654cea..957d68885fe2d 100644
--- a/packages/web-components/src/anchored-region/index.ts
+++ b/packages/web-components/src/anchored-region/index.ts
@@ -21,3 +21,9 @@ export const fluentAnchoredRegion = AnchoredRegion.compose({
  * @public
  */
 export const anchoredRegionStyles = styles;
+
+/**
+ * Base class for AnchoredRegion
+ * @public
+ */
+export { AnchoredRegion };
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
index 2fe7afaeea1e7..cf1b8a6ebb050 100644
--- a/packages/web-components/src/badge/badge.styles.ts
+++ b/packages/web-components/src/badge/badge.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import {
   accentFillRest,
   bodyFont,
@@ -12,7 +12,7 @@ import {
   typeRampMinus1LineHeight,
 } from '../design-tokens';
 
-export const badgeStyles = (context, definition) =>
+export const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('inline-block')} :host {
       box-sizing: border-box;
diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
index 9f4f8d5bce881..0b7184fe6122d 100644
--- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { BreadcrumbItemOptions, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   accentForegroundActive,
@@ -14,7 +14,7 @@ import {
 } from '../design-tokens';
 import { heightNumber } from '../styles/index';
 
-export const breadcrumbItemStyles = (context, definition) =>
+export const breadcrumbItemStyles: (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) =>
   css`
     ${display('inline-flex')} :host {
       background: transparent;
diff --git a/packages/web-components/src/breadcrumb-item/index.ts b/packages/web-components/src/breadcrumb-item/index.ts
index 422576629a3a5..740d25b2e42f2 100644
--- a/packages/web-components/src/breadcrumb-item/index.ts
+++ b/packages/web-components/src/breadcrumb-item/index.ts
@@ -31,3 +31,9 @@ export const fluentBreadcrumbItem = BreadcrumbItem.compose<BreadcrumbItemOptions
  * @public
  */
 export const breadcrumbItemStyles = styles;
+
+/**
+ * Base class for BreadcrumbItem
+ * @public
+ */
+export { BreadcrumbItem };
diff --git a/packages/web-components/src/breadcrumb/breadcrumb.styles.ts b/packages/web-components/src/breadcrumb/breadcrumb.styles.ts
index f9989ef7ea7c5..e6c815ae06616 100644
--- a/packages/web-components/src/breadcrumb/breadcrumb.styles.ts
+++ b/packages/web-components/src/breadcrumb/breadcrumb.styles.ts
@@ -1,8 +1,8 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
 
-export const breadcrumbStyles = (context, definition) => css`
+export const breadcrumbStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   ${display('inline-block')} :host {
     box-sizing: border-box;
     font-family: ${bodyFont};
diff --git a/packages/web-components/src/breadcrumb/index.ts b/packages/web-components/src/breadcrumb/index.ts
index b26abe7ddf251..088c4388b6431 100644
--- a/packages/web-components/src/breadcrumb/index.ts
+++ b/packages/web-components/src/breadcrumb/index.ts
@@ -21,3 +21,9 @@ export const fluentBreadcrumb = Breadcrumb.compose({
  * @public
  */
 export const breadcrumbStyles = styles;
+
+/**
+ * Base class for Breadcrumb
+ * @public
+ */
+export { Breadcrumb };
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index f2df497aa744e..7db2e8db4c090 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   AccentButtonStyles,
@@ -18,7 +18,7 @@ import {
   neutralStrokeRest,
 } from '../design-tokens';
 
-export const buttonStyles = (context, definition) =>
+export const buttonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     :host([disabled]),
     :host([disabled]:hover),
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index 69ef340bd01dc..d2db0b68895b2 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -1,10 +1,10 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevation } from '../styles';
 import { fillColor, layerCornerRadius } from '../design-tokens';
 
-export const CardStyles = css`
+export const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   ${display('block')} :host {
     --elevation: 4;
     display: block;
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
index b5b9903ca1ea0..9e2cdd5d2bb0a 100644
--- a/packages/web-components/src/card/index.ts
+++ b/packages/web-components/src/card/index.ts
@@ -4,7 +4,7 @@ import { parseColorHexRGB } from '@microsoft/fast-colors';
 import { fillColor, neutralFillLayerRecipe, neutralPalette } from '../design-tokens';
 import { Swatch, SwatchRGB } from '../color-vNext/swatch';
 import { PaletteRGB } from '../color-vNext/palette';
-import { CardStyles as styles } from './card.styles';
+import { cardStyles as styles } from './card.styles';
 
 /**
  * @public
@@ -12,7 +12,7 @@ import { CardStyles as styles } from './card.styles';
 export class Card extends FoundationCard {
   /**
    * Fill color for the card component. Sets context for the design system.
-   * 
+   *
    * Updates the neutral palette and sets the card to the source color. For tinting use neutral-palette-source instead.
    * @public
    * @remarks
@@ -39,7 +39,7 @@ export class Card extends FoundationCard {
 
   /**
    * Neutral palette source color for the card component. Sets context for the design system.
-   * 
+   *
    * This allows for tinting the card while maintaining the light or dark context. For a fixed color use card-fill-color instead.
    * @public
    * @remarks
diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
index ecbadd8c42a66..8a5b2cbb9b8fe 100644
--- a/packages/web-components/src/checkbox/checkbox.styles.ts
+++ b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { CheckboxOptions, disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
@@ -21,7 +21,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const checkboxStyles = (context, definition) =>
+export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles = (context: ElementDefinitionContext, definition: CheckboxOptions) =>
   css`
     ${display('inline-flex')} :host {
         align-items: center;
diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts
index 472ee96f1e91b..b41253a0be000 100644
--- a/packages/web-components/src/combobox/combobox.styles.ts
+++ b/packages/web-components/src/combobox/combobox.styles.ts
@@ -1,10 +1,10 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { ComboboxOptions, disabledCursor, ElementDefinitionContext, focusVisible } from '@microsoft/fast-foundation';
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
 
-export const comboboxStyles = (context, definition) =>
+export const comboboxStyles: (context: ElementDefinitionContext, definition: ComboboxOptions) => ElementStyles = (context: ElementDefinitionContext, definition: ComboboxOptions) =>
   css`
     ${selectStyles(context, definition)}
 
diff --git a/packages/web-components/src/data-grid/data-grid-cell.styles.ts b/packages/web-components/src/data-grid/data-grid-cell.styles.ts
index 6d7efe4f90000..9d1e44a736538 100644
--- a/packages/web-components/src/data-grid/data-grid-cell.styles.ts
+++ b/packages/web-components/src/data-grid/data-grid-cell.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import {
   bodyFont,
   controlCornerRadius,
@@ -12,7 +12,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const dataGridCellStyles = (context, definition) =>
+export const dataGridCellStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     :host {
         padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
diff --git a/packages/web-components/src/data-grid/data-grid-row.styles.ts b/packages/web-components/src/data-grid/data-grid-row.styles.ts
index afd8a4ef6c991..90efd7230172f 100644
--- a/packages/web-components/src/data-grid/data-grid-row.styles.ts
+++ b/packages/web-components/src/data-grid/data-grid-row.styles.ts
@@ -1,8 +1,8 @@
-import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { neutralFillRest, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
 
-export const dataGridRowStyles = (context, defintion) =>
+export const dataGridRowStyles: (context: ElementDefinitionContext, defintion: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, defintion: FoundationElementDefinition) =>
   css`
     :host {
       display: grid;
diff --git a/packages/web-components/src/data-grid/data-grid.styles.ts b/packages/web-components/src/data-grid/data-grid.styles.ts
index 13b50f12a9b8f..0351b0179de6a 100644
--- a/packages/web-components/src/data-grid/data-grid.styles.ts
+++ b/packages/web-components/src/data-grid/data-grid.styles.ts
@@ -1,6 +1,7 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 
-export const dataGridStyles = (context, definition) => css`
+export const dataGridStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   :host {
     display: flex;
     position: relative;
diff --git a/packages/web-components/src/data-grid/index.ts b/packages/web-components/src/data-grid/index.ts
index 558a9ed938ee4..5ec3177a55317 100644
--- a/packages/web-components/src/data-grid/index.ts
+++ b/packages/web-components/src/data-grid/index.ts
@@ -66,3 +66,9 @@ export const fluentDataGrid = DataGrid.compose({
  * @public
  */
 export const dataGridStyles = gridStyles;
+
+/**
+ * Data grid base class definitions
+ * @public
+ */
+export { DataGrid, DataGridCell, DataGridRow };
diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
index 73f10ac5d00df..a1e42030b2438 100644
--- a/packages/web-components/src/dialog/dialog.styles.ts
+++ b/packages/web-components/src/dialog/dialog.styles.ts
@@ -1,8 +1,9 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { elevation } from '../styles';
 import { fillColor, layerCornerRadius, strokeWidth } from '../design-tokens';
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 
-export const dialogStyles = (context, definition) => css`
+export const dialogStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   :host([hidden]) {
     display: none;
   }
diff --git a/packages/web-components/src/dialog/index.ts b/packages/web-components/src/dialog/index.ts
index 1f7575db7c63a..f49c056c9aa6e 100644
--- a/packages/web-components/src/dialog/index.ts
+++ b/packages/web-components/src/dialog/index.ts
@@ -21,3 +21,9 @@ export const fluentDialog = Dialog.compose({
  * @public
  */
 export const dialogStyles = styles;
+
+/**
+ * Base Dialog Class
+ * @public
+ */
+export { Dialog };
diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
index bb12d95e8125f..ca87de8e6f820 100644
--- a/packages/web-components/src/divider/divider.styles.ts
+++ b/packages/web-components/src/divider/divider.styles.ts
@@ -1,8 +1,8 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
 
-export const dividerStyles = (context, definition) =>
+export const dividerStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('block')} :host {
       box-sizing: content-box;
diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts
index b0550a9f0fcf6..d468f34455180 100644
--- a/packages/web-components/src/divider/index.ts
+++ b/packages/web-components/src/divider/index.ts
@@ -21,3 +21,9 @@ export const fluentDivider = Divider.compose({
  * @public
  */
 export const dividerStyles = styles;
+
+/**
+ * Base class for Fluent Divider
+ * @public
+ */
+export { Divider };
diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
index 24593e67211cc..0e393a41e8653 100644
--- a/packages/web-components/src/flipper/flipper.styles.ts
+++ b/packages/web-components/src/flipper/flipper.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, FlipperOptions, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
@@ -15,7 +15,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 
-export const flipperStyles = (context, definition) =>
+export const flipperStyles: (context: ElementDefinitionContext, definition: FlipperOptions) => ElementStyles = (context: ElementDefinitionContext, definition: FlipperOptions) =>
   css`
     ${display('inline-flex')} :host {
         width: calc(${heightNumber} * 1px);
diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts
index 6dadf9645d78d..9f1231e0dfdce 100644
--- a/packages/web-components/src/flipper/index.ts
+++ b/packages/web-components/src/flipper/index.ts
@@ -35,3 +35,9 @@ export const fluentFlipper = Flipper.compose<FlipperOptions>({
  * @public
  */
 export const flipperStyles = styles;
+
+/**
+ * Base class for Flipper
+ * @public
+ */
+export { Flipper };
diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
index e7aeea2644605..333507e266269 100644
--- a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
+++ b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, HorizontalScrollOptions } from '@microsoft/fast-foundation';
 import { DirectionalStyleSheetBehavior } from '../styles';
 
 const ltrActionsStyles = css`
@@ -108,7 +108,7 @@ export const ActionsStyles = css`
  * Styles handling the scroll container and content
  * @public
  */
-export const horizontalScrollStyles = (context, definition) => css`
+export const horizontalScrollStyles: (context: ElementDefinitionContext, definition: HorizontalScrollOptions) => ElementStyles = (context: ElementDefinitionContext, definition: HorizontalScrollOptions) => css`
   ${display('block')} :host {
     --scroll-align: center;
     --scroll-item-spacing: 4px;
diff --git a/packages/web-components/src/horizontal-scroll/index.ts b/packages/web-components/src/horizontal-scroll/index.ts
index df86bba7ec89f..1919984f547fe 100644
--- a/packages/web-components/src/horizontal-scroll/index.ts
+++ b/packages/web-components/src/horizontal-scroll/index.ts
@@ -1,5 +1,7 @@
+import { html } from "@microsoft/fast-element";
 import {
   HorizontalScroll as FoundationHorizontalScroll,
+  HorizontalScrollOptions,
   horizontalScrollTemplate as template,
 } from '@microsoft/fast-foundation';
 import { ActionsStyles, horizontalScrollStyles as styles } from './horizontal-scroll.styles';
@@ -29,8 +31,21 @@ export class HorizontalScroll extends FoundationHorizontalScroll {
  * @remarks
  * HTML Element: \<fluent-horizontal-scroll\>
  */
-export const fluentHorizontalScroll = HorizontalScroll.compose({
+export const fluentHorizontalScroll = HorizontalScroll.compose<HorizontalScrollOptions>({
   baseName: 'horizontal-scroll',
   template,
   styles,
+  nextFlipper: html`
+    <fluent-flipper
+        @click="${x => x.scrollToNext()}"
+        aria-hidden="${x => x.flippersHiddenFromAT}"
+    ></fluent-flipper>
+  `,
+  previousFlipper: html`
+    <fluent-flipper
+        @click="${x => x.scrollToPrevious()}"
+        direction="previous"
+        aria-hidden="${x => x.flippersHiddenFromAT}"
+    ></fluent-flipper>
+  `,
 });
diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
index 24bd8bb7bca5b..4a122135da91a 100644
--- a/packages/web-components/src/listbox-option/listbox-option.styles.ts
+++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/size';
 import {
@@ -20,7 +20,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const optionStyles = (context, definition) =>
+export const optionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('inline-flex')} :host {
         font-family: ${bodyFont};
diff --git a/packages/web-components/src/listbox/index.ts b/packages/web-components/src/listbox/index.ts
index 02200efb2f824..f3496a62a5f3e 100644
--- a/packages/web-components/src/listbox/index.ts
+++ b/packages/web-components/src/listbox/index.ts
@@ -22,3 +22,9 @@ export const fluentListbox = Listbox.compose({
  * @public
  */
 export const listboxStyles = styles;
+
+/**
+ * Listbox base class
+ * @public
+ */
+export { Listbox };
diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts
index 30e01804dde89..91eb30487a578 100644
--- a/packages/web-components/src/listbox/listbox.styles.ts
+++ b/packages/web-components/src/listbox/listbox.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   controlCornerRadius,
@@ -11,7 +11,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 
-export const listboxStyles = (context, definition) =>
+export const listboxStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('inline-flex')} :host {
       background: ${neutralLayerFloating};
diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts
index cfe82822f35cf..7148170dbb93c 100644
--- a/packages/web-components/src/menu-item/index.ts
+++ b/packages/web-components/src/menu-item/index.ts
@@ -63,3 +63,9 @@ export const fluentMenuItem = MenuItem.compose<MenuItemOptions>({
  * @public
  */
 export const menuItemStyles = styles;
+
+/**
+ * Menu item base class
+ * @public
+ */
+export { MenuItem };
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 28f8654ac185a..8baf8968c566c 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, MenuItemOptions } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/index';
 import {
@@ -18,7 +18,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const menuItemStyles = (context, definition) =>
+export const menuItemStyles: (context: ElementDefinitionContext, definition: MenuItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: MenuItemOptions) =>
   css`
     ${display('grid')} :host {
         contain: layout;
diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts
index 3fd9767ee96fd..2a8951daee654 100644
--- a/packages/web-components/src/menu/index.ts
+++ b/packages/web-components/src/menu/index.ts
@@ -21,3 +21,9 @@ export const fluentMenu = Menu.compose({
  * @public
  */
 export const menuStyles = styles;
+
+/**
+ * Base class for Menu
+ * @public
+ */
+export { Menu };
diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
index 12538d2a8fb23..944d6f3a2ccf7 100644
--- a/packages/web-components/src/menu/menu.styles.ts
+++ b/packages/web-components/src/menu/menu.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { elevation } from '../styles/index';
 import {
   controlCornerRadius,
@@ -10,7 +10,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 
-export const menuStyles = (context, definition) =>
+export const menuStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('block')} :host {
       --elevation: 11;
diff --git a/packages/web-components/src/number-field/number-field.styles.ts b/packages/web-components/src/number-field/number-field.styles.ts
index 9467c34e53af2..c4a52373fd970 100644
--- a/packages/web-components/src/number-field/number-field.styles.ts
+++ b/packages/web-components/src/number-field/number-field.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, NumberFieldOptions } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { fillStateStyles, heightNumber } from '../styles/index';
 import { appearanceBehavior } from '../utilities/behaviors';
@@ -23,7 +23,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const numberFieldFilledStyles = (context, definition) =>
+export const numberFieldFilledStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles = (context: ElementDefinitionContext, definition: NumberFieldOptions) =>
   css`
     :host([appearance='filled']) .root {
       background: ${neutralFillRest};
diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts
index ceaf92cb3bd20..9a6ae77446830 100644
--- a/packages/web-components/src/progress/progress-ring/index.ts
+++ b/packages/web-components/src/progress/progress-ring/index.ts
@@ -1,5 +1,5 @@
 import {
-  BaseProgress as Progress,
+  BaseProgress as ProgressRing,
   ProgressRingOptions,
   progressRingTemplate as template,
 } from '@microsoft/fast-foundation';
@@ -14,7 +14,7 @@ import { progressRingStyles as styles } from './progress-ring.styles';
  * @remarks
  * HTML Element: \<fluent-progress-ring\>
  */
-export const fluentProgressRing = Progress.compose<ProgressRingOptions>({
+export const fluentProgressRing = ProgressRing.compose<ProgressRingOptions>({
   baseName: 'progress-ring',
   template,
   styles,
@@ -43,3 +43,9 @@ export const fluentProgressRing = Progress.compose<ProgressRingOptions>({
  * @public
  */
 export const progressRingStyles = styles;
+
+/**
+ * Progress Ring base class
+ * @public
+ */
+export { ProgressRing };
diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
index 3b906c0874e0e..8c174aea82ada 100644
--- a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
+++ b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
@@ -1,10 +1,10 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, ProgressRingOptions } from '@microsoft/fast-foundation';
 import { heightNumber } from '../../styles';
 import { accentForegroundRest, neutralFillRest, neutralForegroundHint } from '../../design-tokens';
 
-export const progressRingStyles = (context, definition) =>
+export const progressRingStyles: (context: ElementDefinitionContext, definition: ProgressRingOptions) => ElementStyles = (context: ElementDefinitionContext, definition: ProgressRingOptions) =>
   css`
     ${display('flex')} :host {
       align-items: center;
diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts
index bfc1daa70a1a3..796e97d3000a3 100644
--- a/packages/web-components/src/progress/progress/index.ts
+++ b/packages/web-components/src/progress/progress/index.ts
@@ -27,3 +27,9 @@ export const fluentProgress = Progress.compose<ProgressOptions>({
  * @public
  */
 export const progressStyles = styles;
+
+/**
+ * Progress base class
+ * @public
+ */
+export { Progress };
diff --git a/packages/web-components/src/progress/progress/progress.styles.ts b/packages/web-components/src/progress/progress/progress.styles.ts
index 5a8936a5ecdb3..e2c352bb57152 100644
--- a/packages/web-components/src/progress/progress/progress.styles.ts
+++ b/packages/web-components/src/progress/progress/progress.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, ProgressOptions } from '@microsoft/fast-foundation';
 import {
   accentForegroundRest,
   designUnit,
@@ -9,7 +9,7 @@ import {
   strokeWidth,
 } from '../../design-tokens';
 
-export const progressStyles = (context, definition) =>
+export const progressStyles: (context: ElementDefinitionContext, definition: ProgressOptions) => ElementStyles = (context: ElementDefinitionContext, definition: ProgressOptions) =>
   css`
     ${display('flex')} :host {
       align-items: center;
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index f8457be8c3631..9e1fc00bdeedd 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -21,3 +21,9 @@ export const fluentRadioGroup = RadioGroup.compose({
  * @public
  */
 export const radioGroupStyles = styles;
+
+/**
+ * Radio group base class
+ * @public
+ */
+export { RadioGroup };
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 47f61b936fcbd..1b6acafcc6f52 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,8 +1,8 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { designUnit } from '../design-tokens';
 
-export const radioGroupStyles = (context, definition) => css`
+export const radioGroupStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   ${display('flex')} :host {
     align-items: flex-start;
     margin: calc(${designUnit} * 1px) 0;
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
index 1ec7604faf98c..07a72b0c1fcaa 100644
--- a/packages/web-components/src/radio/index.ts
+++ b/packages/web-components/src/radio/index.ts
@@ -24,3 +24,9 @@ export const fluentRadio = Radio.compose<RadioOptions>({
  * @public
  */
 export const RadioStyles = styles;
+
+/**
+ * Radio base class
+ * @public
+ */
+export { Radio };
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index f1fe7a693e119..ff4616b11c7a7 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, RadioOptions } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
 import {
   designUnit,
@@ -17,7 +17,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 
-export const radioStyles = (context, definition) =>
+export const radioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles = (context: ElementDefinitionContext, definition: RadioOptions) =>
   css`
     ${display('inline-flex')} :host {
         --input-size: calc((${heightNumber} / 2) + ${designUnit});
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
index f46d41891b84b..12fbb92507a2b 100644
--- a/packages/web-components/src/select/select.styles.ts
+++ b/packages/web-components/src/select/select.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, SelectOptions } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevation } from '../styles/elevation';
 import { heightNumber } from '../styles/size';
@@ -29,7 +29,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const selectFilledStyles = (context, definition) => css`
+export const selectFilledStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles = (context: ElementDefinitionContext, definition: SelectOptions) => css`
   :host([appearance="filled"]) {
     background: ${neutralFillRest};
     border-color: transparent;
diff --git a/packages/web-components/src/skeleton/index.ts b/packages/web-components/src/skeleton/index.ts
index 081cc03c893cb..446e17ee58d62 100644
--- a/packages/web-components/src/skeleton/index.ts
+++ b/packages/web-components/src/skeleton/index.ts
@@ -21,3 +21,9 @@ export const fluentSkeleton = Skeleton.compose({
  * @public
  */
 export const skeletonStyles = styles;
+
+/**
+ * Skeleton base class
+ * @public
+ */
+export { Skeleton };
diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts
index 610145e35baf9..d6624eb7f8053 100644
--- a/packages/web-components/src/skeleton/skeleton.styles.ts
+++ b/packages/web-components/src/skeleton/skeleton.styles.ts
@@ -1,8 +1,8 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { controlCornerRadius, neutralFillRest } from '../design-tokens';
 
-export const skeletonStyles = (context, definition) =>
+export const skeletonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('block')} :host {
       --skeleton-fill-default: #e1dfdd;
diff --git a/packages/web-components/src/slider-label/index.ts b/packages/web-components/src/slider-label/index.ts
index 87dd8269d3fce..843d96e1b9a4e 100644
--- a/packages/web-components/src/slider-label/index.ts
+++ b/packages/web-components/src/slider-label/index.ts
@@ -21,3 +21,9 @@ export const fluentSliderLabel = SliderLabel.compose({
  * @public
  */
 export const sliderLabelStyles = styles;
+
+/**
+ * Slider label base class
+ * @public
+ */
+export { SliderLabel };
diff --git a/packages/web-components/src/slider-label/slider-label.styles.ts b/packages/web-components/src/slider-label/slider-label.styles.ts
index aa1b45a904c44..d1be92a7bdee8 100644
--- a/packages/web-components/src/slider-label/slider-label.styles.ts
+++ b/packages/web-components/src/slider-label/slider-label.styles.ts
@@ -1,10 +1,10 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
 import { bodyFont, designUnit, disabledOpacity, neutralStrokeRest } from '../design-tokens';
 
-export const sliderLabelStyles = (context, definition) =>
+export const sliderLabelStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('block')} :host {
       font-family: ${bodyFont};
diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts
index 82900e186370d..96128b7f5c8c9 100644
--- a/packages/web-components/src/slider/index.ts
+++ b/packages/web-components/src/slider/index.ts
@@ -24,3 +24,9 @@ export const fluentSlider = Slider.compose<SliderOptions>({
  * @public
  */
 export const sliderStyles = styles;
+
+/**
+ * Slider base class
+ * @public
+ */
+export { Slider };
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index d6b6bd1fd669f..a34cc85fe82ae 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, SliderOptions } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
 import {
   controlCornerRadius,
@@ -15,7 +15,7 @@ import {
   neutralStrokeRest,
 } from '../design-tokens';
 
-export const sliderStyles = (context, defintion) =>
+export const sliderStyles: (context: ElementDefinitionContext, definition: SliderOptions) => ElementStyles = (context: ElementDefinitionContext, definition: SliderOptions) =>
   css`
     ${display('inline-grid')} :host {
         --thumb-size: calc(${heightNumber} * 0.5);
diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts
index a665ac2a783eb..0ac9cd1d088b9 100644
--- a/packages/web-components/src/switch/index.ts
+++ b/packages/web-components/src/switch/index.ts
@@ -24,3 +24,9 @@ export const fluentSwitch = Switch.compose<SwitchOptions>({
  * @public
  */
 export const switchStyles = styles;
+
+/**
+ * Switch Base class
+ * @public
+ */
+export { Switch };
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 1b2d3641ad1b1..d7a490e30adbb 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, SwitchOptions } from '@microsoft/fast-foundation';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
 import {
   accentFillActive,
@@ -24,7 +24,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const switchStyles = (context, defintiion) =>
+export const switchStyles: (context: ElementDefinitionContext, defintiion: SwitchOptions) => ElementStyles = (context: ElementDefinitionContext, defintiion: SwitchOptions) =>
   css`
     :host([hidden]) {
         display: none;
diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts
index 0db87c281efe4..ab4708ede7e66 100644
--- a/packages/web-components/src/tabs/index.ts
+++ b/packages/web-components/src/tabs/index.ts
@@ -24,3 +24,9 @@ export * from './tab-panel';
  * @public
  */
 export const tabsStyles = styles;
+
+/**
+ * Tabs base class
+ * @public
+ */
+export { Tabs };
diff --git a/packages/web-components/src/tabs/tab-panel/index.ts b/packages/web-components/src/tabs/tab-panel/index.ts
index ef8529e1bb066..859f86dd461ba 100644
--- a/packages/web-components/src/tabs/tab-panel/index.ts
+++ b/packages/web-components/src/tabs/tab-panel/index.ts
@@ -21,3 +21,9 @@ export const fluentTabPanel = TabPanel.compose({
  * @public
  */
 export const tabPanelStyles = styles;
+
+/**
+ * Tab panel base styles
+ * @public
+ */
+export { TabPanel };
diff --git a/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts b/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts
index 0c52a83893481..5ce5717b0a925 100644
--- a/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts
+++ b/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts
@@ -1,8 +1,8 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { bodyFont, density, designUnit, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../../design-tokens';
 
-export const tabPanelStyles = (context, definition) => css`
+export const tabPanelStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   ${display('flex')} :host {
     box-sizing: border-box;
     font-family: ${bodyFont};
diff --git a/packages/web-components/src/tabs/tab/index.ts b/packages/web-components/src/tabs/tab/index.ts
index a20c76d8a4194..a64c9af9f23e8 100644
--- a/packages/web-components/src/tabs/tab/index.ts
+++ b/packages/web-components/src/tabs/tab/index.ts
@@ -21,3 +21,9 @@ export const fluentTab = Tab.compose({
  * @public
  */
 export const tabStyles = styles;
+
+/**
+ * Tab base class
+ * @public
+ */
+export { Tab };
diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts
index 31431ed92f8bd..44a858d266c04 100644
--- a/packages/web-components/src/tabs/tab/tab.styles.ts
+++ b/packages/web-components/src/tabs/tab/tab.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { heightNumber } from '../../styles';
 import {
   bodyFont,
@@ -15,7 +15,7 @@ import {
   typeRampBaseLineHeight,
 } from '../../design-tokens';
 
-export const tabStyles = (context, definition) =>
+export const tabStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('inline-flex')} :host {
         box-sizing: border-box;
diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
index 3f0a24d55dc72..120368bc8fe9f 100644
--- a/packages/web-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/src/tabs/tabs.styles.ts
@@ -1,6 +1,6 @@
-import { css } from '@microsoft/fast-element';
+import { css, ElementStyles } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import {
   accentFillRest,
   bodyFont,
@@ -10,7 +10,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const tabsStyles = (context, definition) =>
+export const tabsStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     ${display('grid')} :host {
       box-sizing: border-box;
diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts
index e1889651aa17b..a7c047de2fe65 100644
--- a/packages/web-components/src/text-area/text-area.styles.ts
+++ b/packages/web-components/src/text-area/text-area.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { fillStateStyles, heightNumber } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
@@ -18,7 +18,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const textAreaFilledStyles = (context, definition) =>
+export const textAreaFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     :host([appearance='filled']) .control {
       background: ${neutralFillRest};
diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
index 23ec8bd02cb2e..3dfe46262f284 100644
--- a/packages/web-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/src/text-field/text-field.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { fillStateStyles, heightNumber } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
@@ -20,7 +20,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const textFieldFilledStyles = (context, definition) =>
+export const textFieldFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     :host([appearance='filled']) .root {
       background: ${neutralFillRest};
diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts
index f38c97fe4a7db..ebc136223b23a 100644
--- a/packages/web-components/src/tooltip/tooltip.styles.ts
+++ b/packages/web-components/src/tooltip/tooltip.styles.ts
@@ -1,5 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { elevation } from '../styles/index';
 import {
   bodyFont,
@@ -11,7 +11,7 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const tooltipStyles = (context, definition) =>
+export const tooltipStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     :host {
       --elevation: 11;
diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts
index 3882297a6825d..e809e8a8f2428 100644
--- a/packages/web-components/src/tree-item/index.ts
+++ b/packages/web-components/src/tree-item/index.ts
@@ -33,3 +33,9 @@ export const fluentTreeItem = TreeItem.compose<TreeItemOptions>({
  * @public
  */
 export const treeItemStyles = styles;
+
+/**
+ * Tree item base class
+ * @public
+ */
+export { TreeItem };
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 3aa493d4948f6..95ce67825b66c 100644
--- a/packages/web-components/src/tree-item/tree-item.styles.ts
+++ b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -1,10 +1,12 @@
-import { css, cssPartial } from '@microsoft/fast-element';
+import { css, cssPartial, ElementStyles } from '@microsoft/fast-element';
 import {
   DesignToken,
   disabledCursor,
   display,
+  ElementDefinitionContext,
   focusVisible,
   forcedColorsStylesheetBehavior,
+  TreeItemOptions,
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
@@ -77,7 +79,7 @@ const selectedExpandCollapseHoverBehavior = DesignToken.create<Swatch>(
   return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
 });
 
-export const treeItemStyles = (context, definition) =>
+export const treeItemStyles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: TreeItemOptions) =>
   css`
     ${display('block')} :host {
         contain: content;
diff --git a/packages/web-components/src/tree-view/index.ts b/packages/web-components/src/tree-view/index.ts
index 7ca6c9aed1029..3c445c472899c 100644
--- a/packages/web-components/src/tree-view/index.ts
+++ b/packages/web-components/src/tree-view/index.ts
@@ -22,3 +22,9 @@ export const fluentTreeView = TreeView.compose({
  * @public
  */
 export const treeViewStyles = styles;
+
+/**
+ * Tree View base class
+ * @public
+ */
+export { TreeView };
diff --git a/packages/web-components/src/tree-view/tree-view.styles.ts b/packages/web-components/src/tree-view/tree-view.styles.ts
index d4564ea099ab7..c04a69828f283 100644
--- a/packages/web-components/src/tree-view/tree-view.styles.ts
+++ b/packages/web-components/src/tree-view/tree-view.styles.ts
@@ -1,7 +1,7 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 
-export const treeViewStyles = (context, definition) => css`
+export const treeViewStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   :host([hidden]) {
     display: none;
   }
diff --git a/yarn.lock b/yarn.lock
index 366f9fa0d717d..bae464fa50ae1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2698,17 +2698,17 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966"
   integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng==
 
-"@microsoft/fast-element@^1.3.0", "@microsoft/fast-element@^1.4.0":
+"@microsoft/fast-element@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.4.0.tgz#761b5ebdde1a271c5f96f7c15fab9f5a2a10657f"
   integrity sha512-7BC/juFc7S4HMGt/tNCP9bjwtUslheGiPM2jtIibe1bj+PO34woUfH5TxaklOT6sRStig/0fODX4R5oqY4DYLA==
 
-"@microsoft/fast-foundation@2.0.0-1":
-  version "2.0.0-1"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0-1.tgz#a294ef0df7343420dc327ffbccd724d9d9d8a5ed"
-  integrity sha512-CHWxUoYAv/r5NWTQkpnyKRAf5BNtRPfcTIvADSucLODliyniYnJ9kGk+4IdUMt1VuducgI77vtB1a0IA/9W0Dw==
+"@microsoft/fast-foundation@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0.tgz#edf62deb981735566d70fa01b281d1ff5bd3971c"
+  integrity sha512-l+a235QoZRsz4GbmK3LVkIE4IwNeuS7s1868hoU121Ii6jti3r5gEt4OPY+zAp9/gwoIh4OU+km4bD+vQdmr0g==
   dependencies:
-    "@microsoft/fast-element" "^1.3.0"
+    "@microsoft/fast-element" "^1.4.0"
     "@microsoft/fast-web-utilities" "^4.8.0"
     "@microsoft/tsdoc-config" "^0.13.4"
     tabbable "^5.2.0"