update FAST dependencies for vNext and export all base classes

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"
+}

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"
   }

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;

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 };

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;

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 };

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(

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;

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 };

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;

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;

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 };

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};

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 };

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),

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;

packages/web-components/src/card/index.ts

@@ -4,15 +4,15 @@ 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
  */
 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

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;

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)}
 

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);

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;

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;

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 };

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;
   }

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 };

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;

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 };

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);

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 };

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;