@fluentui/web-components 2.5.6 → 2.5.8

package/docs/api-report.md

@@ -41,7 +41,6 @@ import { FlipperOptions } from '@microsoft/fast-foundation';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
 import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
 import { Listbox as Listbox_2 } from '@microsoft/fast-foundation';
@@ -72,7 +71,6 @@ import { TabPanel } from '@microsoft/fast-foundation';
 import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea as TextArea_2 } from '@microsoft/fast-foundation';
 import { TextField as TextField_2 } from '@microsoft/fast-foundation';
-import { TextFieldOptions } from '@microsoft/fast-foundation';
 import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation';
 import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation';
 import { TreeItem } from '@microsoft/fast-foundation';
@@ -86,7 +84,7 @@ export const accentBaseColor: CSSDesignToken<Swatch>;
 // Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 // @public (undocumented)
 export const accentFillActive: CSSDesignToken<Swatch>;
@@ -224,40 +222,8 @@ export const allComponents: {
     fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tabs>;
     fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tab>;
     fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TabPanel>;
-    fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-    baseName: string;
-    baseClass: typeof TextArea_2;
-    template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }> | undefined) => FoundationElementRegistry<    {
-    baseName: string;
-    baseClass: typeof TextArea_2;
-    template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }, TextArea>;
-    fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-    baseName: string;
-    baseClass: typeof TextField_2;
-    template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }> | undefined) => FoundationElementRegistry<    {
-    baseName: string;
-    baseClass: typeof TextField_2;
-    template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }, TextField>;
+    fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextArea>;
+    fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextField>;
     fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Toolbar>;
     fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
     fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
@@ -310,8 +276,8 @@ export const badgeStyles: (context: ElementDefinitionContext, definition: Founda
 
 // Warning: (ae-internal-missing-underscore) The name "baseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
-// @internal (undocumented)
-export const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+// @internal
+export const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 // @public (undocumented)
 export const baseHeightMultiplier: CSSDesignToken<number>;
@@ -319,6 +285,11 @@ export const baseHeightMultiplier: CSSDesignToken<number>;
 // @public (undocumented)
 export const baseHorizontalSpacingMultiplier: CSSDesignToken<number>;
 
+// Warning: (ae-internal-missing-underscore) The name "baseInputStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
+
 // @public (undocumented)
 export const baseLayerLuminance: CSSDesignToken<number>;
 
@@ -716,44 +687,12 @@ export const fluentTabs: (overrideDefinition?: OverrideFoundationElementDefiniti
 // Warning: (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal
 //
 // @public
-export const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-baseName: string;
-baseClass: typeof TextArea_2;
-template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}> | undefined) => FoundationElementRegistry<    {
-baseName: string;
-baseClass: typeof TextArea_2;
-template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}, typeof TextArea>;
+export const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextArea>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal
 //
 // @public
-export const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-baseName: string;
-baseClass: typeof TextField_2;
-template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}> | undefined) => FoundationElementRegistry<    {
-baseName: string;
-baseClass: typeof TextField_2;
-template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}, typeof TextField>;
+export const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextField>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal
 //
@@ -845,32 +784,27 @@ export const horizontalScrollStyles: (context: ElementDefinitionContext, definit
 // Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
-
-// Warning: (ae-internal-missing-underscore) The name "inputFilledForcedColorStyles" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal (undocumented)
-export const inputFilledForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "inputFilledStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
-// @internal (undocumented)
-export const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+// @internal
+export const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "inputForcedColorStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 
-// Warning: (ae-internal-missing-underscore) The name "inputStateStyles" should be prefixed with an underscore because the declaration is marked as @internal
+// Warning: (ae-internal-missing-underscore) The name "inputOutlineStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
-// @internal (undocumented)
-export const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+// @internal
+export const inputOutlineStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 
-// Warning: (ae-internal-missing-underscore) The name "inputStyles" should be prefixed with an underscore because the declaration is marked as @internal
+// Warning: (ae-internal-missing-underscore) The name "inputStateStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
-// @internal (undocumented)
-export const inputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+// @internal
+export const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
 
 // @public (undocumented)
 export interface InteractiveColorRecipe {
@@ -897,7 +831,7 @@ export const layerCornerRadius: CSSDesignToken<number>;
 // Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 // @public (undocumented)
 export class Listbox extends Listbox_2 {
@@ -923,6 +857,11 @@ export const menuStyles: (context: ElementDefinitionContext, definition: Foundat
 // @public (undocumented)
 export const neutralBaseColor: CSSDesignToken<Swatch>;
 
+// Warning: (ae-internal-missing-underscore) The name "NeutralButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const NeutralButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+
 // @public @deprecated (undocumented)
 export const neutralContrastFillActive: CSSDesignToken<Swatch>;
 
@@ -1429,7 +1368,7 @@ export class NumberField extends NumberField_2 {
 export type NumberFieldAppearance = 'filled' | 'outline';
 
 // @public
-export const numberFieldStyles: (context: any, definition: any) => ElementStyles;
+export const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles;
 
 // @public
 export const OptionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
@@ -1437,7 +1376,7 @@ export const OptionStyles: (context: ElementDefinitionContext, definition: Found
 // Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 // @public @deprecated (undocumented)
 export const outlineWidth: CSSDesignToken<number>;
@@ -1508,7 +1447,7 @@ export class Search extends Search_2 {
 export type SearchAppearance = 'filled' | 'outline';
 
 // @public
-export const searchStyles: (context: any, definition: any) => ElementStyles;
+export const searchStyles: (context: ElementDefinitionContext, definition: SearchOptions) => ElementStyles;
 
 // @public (undocumented)
 export const searchTemplate: (context: ElementDefinitionContext, definition: SearchOptions) => ViewTemplate<Search_2>;
@@ -1529,7 +1468,7 @@ export class Select extends Select_2 {
 export type SelectAppearance = 'filled' | 'outline' | 'stealth';
 
 // @public
-export const selectStyles: (context: any, definition: any) => ElementStyles;
+export const selectStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
 
 export { Skeleton }
 
@@ -1557,7 +1496,7 @@ export enum StandardLuminance {
 // Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 // @public (undocumented)
 export const strokeWidth: CSSDesignToken<number>;
@@ -1626,7 +1565,7 @@ export class TextArea extends TextArea_2 {
 export type TextAreaAppearance = 'filled' | 'outline';
 
 // @public
-export const textAreaStyles: (context: any, definition: any) => ElementStyles;
+export const textAreaStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "TextField" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1644,7 +1583,7 @@ export class TextField extends TextField_2 {
 export type TextFieldAppearance = 'filled' | 'outline';
 
 // @public
-export const textFieldStyles: (context: any, definition: any) => ElementStyles;
+export const textFieldStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "Toolbar" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1786,9 +1725,9 @@ export const typeRampPlus6LineHeight: CSSDesignToken<string>;
 // dist/dts/custom-elements.d.ts:54:5 - (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal
 // dist/dts/custom-elements.d.ts:57:5 - (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal
 // dist/dts/custom-elements.d.ts:96:5 - (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal
-// dist/dts/custom-elements.d.ts:113:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal
-// dist/dts/custom-elements.d.ts:130:5 - (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal
-// dist/dts/custom-elements.d.ts:131:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal
+// dist/dts/custom-elements.d.ts:97:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal
+// dist/dts/custom-elements.d.ts:98:5 - (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal
+// dist/dts/custom-elements.d.ts:99:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal
 
 // (No @packageDocumentation comment for this package)
 

package/karma.conf.js

@@ -33,7 +33,7 @@ module.exports = function (config) {
     basePath,
     browserDisconnectTimeout: 10000,
     processKillTimeout: 10000,
-    frameworks: ['source-map-support', 'mocha'],
+    frameworks: ['source-map-support', 'mocha', 'webpack'],
     plugins: [
       require('karma-mocha'),
       require('karma-mocha-reporter'),
@@ -65,19 +65,16 @@ module.exports = function (config) {
         hints: false,
       },
       optimization: {
-        namedModules: false,
-        namedChunks: false,
         nodeEnv: false,
         usedExports: true,
         flagIncludedChunks: false,
-        occurrenceOrder: false,
         sideEffects: true,
         concatenateModules: true,
         splitChunks: {
           name: false,
         },
         runtimeChunk: false,
-        noEmitOnErrors: false,
+        emitOnErrors: true,
         checkWasmTypes: false,
         minimize: false,
       },
@@ -89,12 +86,10 @@ module.exports = function (config) {
           },
           {
             test: /\.js$/,
+            enforce: 'pre',
             use: [
               {
                 loader: 'source-map-loader',
-                options: {
-                  enforce: 'pre',
-                },
               },
             ],
           },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "2.5.6",
+  "version": "2.5.8",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -22,18 +22,18 @@
     "clean": "node ./build/clean.js dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run --local",
-    "build": "tsc -p ./tsconfig.json && rollup -c && npm run doc",
+    "build": "tsc -p ./tsconfig.json && rollup -c && yarn doc",
     "dev": "tsc -p ./tsconfig.json -w",
-    "tdd": "npm run dev & npm run test-chrome:watch",
+    "tdd": "yarn dev & yarn test-chrome:watch",
     "prepare": "yarn clean && yarn build",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
-    "prettier": "prettier --config ../../prettier.config.js --write 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
-    "prettier:diff": "prettier --config ../../prettier.config.js 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore --list-different",
-    "code-style": "npm run prettier && npm run lint",
+    "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
+    "format:check": "yarn format -c",
+    "code-style": "yarn format:check && yarn lint",
     "start": "yarn start-storybook -p 6006 --docs",
-    "start-storybook": "node node_modules/@storybook/html/bin/index.js",
-    "build-storybook": "node node_modules/@storybook/html/bin/build.js -o ./dist/storybook --docs",
+    "start-storybook": "node node_modules/@storybook/html/bin/index",
+    "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
     "test": "yarn doc:ci && yarn test-chrome:verbose",
     "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
@@ -48,46 +48,33 @@
   },
   "devDependencies": {
     "@storybook/html": "6.5.5",
-    "@types/chai": "^4.2.11",
-    "@types/chai-spies": "^1.0.1",
-    "@types/karma": "^5.0.0",
-    "@types/mocha": "^7.0.2",
-    "chai": "^4.2.0",
+    "@types/chai": "4.3.3",
+    "@types/chai-spies": "1.0.3",
+    "@types/karma": "6.3.3",
+    "@types/mocha": "7.0.2",
+    "chai": "4.3.6",
     "chai-spies": "1.0.0",
-    "circular-dependency-plugin": "^5.0.2",
-    "eslint-plugin-import": "^2.22.1",
-    "esm": "^3.2.25",
-    "ignore-loader": "^0.1.2",
-    "istanbul": "^0.4.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "esm": "3.2.25",
+    "ignore-loader": "0.1.2",
+    "istanbul": "0.4.5",
+    "istanbul-instrumenter-loader": "3.0.1",
     "jsdom-global": "3.0.2",
-    "karma": "^6.3.0",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.2",
-    "karma-coverage-istanbul-reporter": "^3.0.0",
+    "karma": "6.4.0",
+    "karma-chrome-launcher": "3.1.1",
+    "karma-coverage": "2.2.0",
+    "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-firefox-launcher": "^1.3.0",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-source-map-support": "^1.4.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
-    "mocha": "^7.1.2",
-    "rollup": "^2.41.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-filesize": "^8.0.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-transform-tagged-template": "^0.0.3",
-    "rollup-plugin-typescript2": "^0.27.0",
-    "source-map": "^0.7.3",
-    "source-map-loader": "^0.2.4",
-    "ts-loader": "^7.0.2",
-    "webpack": "^4.43.0"
+    "karma-mocha": "2.0.1",
+    "karma-mocha-reporter": "2.2.5",
+    "karma-source-map-support": "1.4.0",
+    "karma-sourcemap-loader": "0.3.8",
+    "karma-webpack": "5.0.0",
+    "mocha": "7.2.0"
   },
   "dependencies": {
     "@microsoft/fast-colors": "^5.3.0",
-    "@microsoft/fast-element": "^1.10.5",
-    "@microsoft/fast-foundation": "^2.46.14",
+    "@microsoft/fast-element": "^1.11.0",
+    "@microsoft/fast-foundation": "^2.47.0",
     "@microsoft/fast-web-utilities": "^5.4.0",
     "tslib": "^1.13.0"
   }