@fluentui/web-components 2.3.0 → 2.5.0

package/CHANGELOG.json

@@ -2,7 +2,75 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Tue, 01 Mar 2022 07:21:49 GMT",
+      "date": "Fri, 06 May 2022 07:36:21 GMT",
+      "tag": "@fluentui/web-components_v2.5.0",
+      "version": "2.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "47367562+bheston@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "b60bcd3b01d2927a03660523eea42b42f507e85b",
+            "comment": "Added support for Segoe UI Variable font with variant configurations Added type ramp helpers to conveniently and consistently apply all necessary font attributes."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 28 Apr 2022 07:39:56 GMT",
+      "tag": "@fluentui/web-components_v2.4.0",
+      "version": "2.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "7b73745e44fb4be6c228de0f1a500eea0d9db00b",
+            "comment": "update to latest versions of fast-element and fast-foundation for web components"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 08 Mar 2022 23:29:58 GMT",
+      "tag": "@fluentui/web-components_v2.3.1",
+      "version": "2.3.1",
+      "comments": {
+        "none": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "61d1ec16271c2beff80f449c35b10e0b8a1817b5",
+            "comment": "basic storybook upgrade without the new story store format"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 07 Mar 2022 07:41:14 GMT",
+      "tag": "@fluentui/web-components_v2.3.1",
+      "version": "2.3.1",
+      "comments": {
+        "none": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "415b189f76b7f5bca11ebc62d3a6855c01b59c53",
+            "comment": "update karma to latest stable version for web components"
+          }
+        ],
+        "patch": [
+          {
+            "author": "john.kreitlow@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "9d0611016f1e6f5a39b105df1d6e85beecb1e469",
+            "comment": "fix d.ts errors generated by api-extractor"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 07:23:43 GMT",
       "tag": "@fluentui/web-components_v2.3.0",
       "version": "2.3.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Tue, 01 Mar 2022 07:21:49 GMT and should not be manually modified.
+This log was last generated on Fri, 06 May 2022 07:36:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.0)
+
+Fri, 06 May 2022 07:36:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.4.0..@fluentui/web-components_v2.5.0)
+
+### Minor changes
+
+- Added support for Segoe UI Variable font with variant configurations Added type ramp helpers to conveniently and consistently apply all necessary font attributes. ([PR #22079](https://github.com/microsoft/fluentui/pull/22079) by 47367562+bheston@users.noreply.github.com)
+
+## [2.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.4.0)
+
+Thu, 28 Apr 2022 07:39:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.3.1..@fluentui/web-components_v2.4.0)
+
+### Minor changes
+
+- update to latest versions of fast-element and fast-foundation for web components ([PR #22648](https://github.com/microsoft/fluentui/pull/22648) by chhol@microsoft.com)
+
+## [2.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.3.1)
+
+Mon, 07 Mar 2022 07:41:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.3.0..@fluentui/web-components_v2.3.1)
+
+### Patches
+
+- fix d.ts errors generated by api-extractor ([PR #21945](https://github.com/microsoft/fluentui/pull/21945) by john.kreitlow@microsoft.com)
+
 ## [2.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.3.0)
 
-Tue, 01 Mar 2022 07:21:49 GMT 
+Tue, 01 Mar 2022 07:23:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.2.3..@fluentui/web-components_v2.3.0)
 
 ### Minor changes

package/dist/dts/custom-elements.d.ts

@@ -1,3 +1,4 @@
+import type { Accordion, AnchoredRegion, Breadcrumb, DataGrid, Dialog, Divider, ListboxOption, RadioGroup, Skeleton, SliderLabel, Tabs, TextArea, TextField, TreeView } from '@microsoft/fast-foundation';
 /**
  * Export all custom element definitions
  */
@@ -46,19 +47,19 @@ export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegio
  * @public
  */
 export declare const allComponents: {
-    fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Accordion>;
+    fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Accordion>;
     fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").AccordionItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").AccordionItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentAnchor: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./anchor/index").Anchor>;
-    fluentAnchoredRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").AnchoredRegion>;
+    fluentAnchoredRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof AnchoredRegion>;
     fluentBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./badge/index").Badge>;
-    fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Breadcrumb>;
+    fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Breadcrumb>;
     fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").BreadcrumbItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").BreadcrumbItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./button/index").Button>;
     fluentCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./card/index").Card>;
     fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CheckboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ComboboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ComboboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    fluentDataGrid: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").DataGrid>;
+    fluentDataGrid: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof DataGrid>;
     fluentDataGridCell: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").DataGridCell>;
     fluentDataGridRow: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").DataGridRow>;
     fluentDesignSystemProvider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -70,40 +71,40 @@ export declare const allComponents: {
         template: import("@microsoft/fast-element").ViewTemplate<any, any>;
         styles: import("@microsoft/fast-element").ElementStyles;
     }, typeof import("./design-system-provider/index").DesignSystemProvider>;
-    fluentDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Dialog>;
-    fluentDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Divider>;
+    fluentDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Dialog>;
+    fluentDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Divider>;
     fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FlipperOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FlipperOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").HorizontalScrollOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").HorizontalScrollOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./listbox/index").Listbox>;
-    fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").ListboxOption>;
+    fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof ListboxOption>;
     fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./menu/index").Menu>;
     fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").MenuItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").MenuItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").NumberFieldOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").NumberFieldOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ProgressOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ProgressOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ProgressRingOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ProgressRingOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").RadioOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").RadioOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").RadioGroup>;
+    fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof RadioGroup>;
     fluentSearch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SearchOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SearchOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Skeleton>;
+    fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Skeleton>;
     fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SliderOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SliderOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").SliderLabel>;
+    fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof SliderLabel>;
     fluentSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SwitchOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SwitchOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    fluentTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Tabs>;
+    fluentTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Tabs>;
     fluentTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Tab>;
     fluentTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").TabPanel>;
     fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
         baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextArea;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
+        baseClass: typeof TextArea;
+        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
         styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
         shadowOptions: {
             delegatesFocus: true;
         };
     }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
         baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextArea;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
+        baseClass: typeof TextArea;
+        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
         styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
         shadowOptions: {
             delegatesFocus: true;
@@ -111,16 +112,16 @@ export declare const allComponents: {
     }, typeof import("./text-area/index").TextArea>;
     fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
         baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextField;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
+        baseClass: typeof TextField;
+        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
         styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
         shadowOptions: {
             delegatesFocus: true;
         };
     }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
         baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextField;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
+        baseClass: typeof TextField;
+        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
         styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
         shadowOptions: {
             delegatesFocus: true;
@@ -128,7 +129,7 @@ export declare const allComponents: {
     }, typeof import("./text-field/index").TextField>;
     fluentToolbar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./toolbar/index").Toolbar>;
     fluentTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./tooltip/index").Tooltip>;
-    fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").TreeView>;
+    fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TreeView>;
     fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").TreeItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     register(container?: Container | undefined, ...rest: any[]): void;
 };

package/dist/dts/design-tokens.d.ts

@@ -38,42 +38,62 @@ export declare const focusStrokeWidth: import("@microsoft/fast-foundation").CSSD
 /** @public */
 export declare const bodyFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const fontWeight: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
 export declare const typeRampBaseFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampBaseLineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampBaseFontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampMinus1FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampMinus1LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampMinus1FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampMinus2FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampMinus2LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampMinus2FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampPlus1FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampPlus1LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampPlus1FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampPlus2FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampPlus2LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampPlus2FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampPlus3FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampPlus3LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampPlus3FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampPlus4FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampPlus4LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampPlus4FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampPlus5FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampPlus5LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampPlus5FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const typeRampPlus6FontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
 export declare const typeRampPlus6LineHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 /** @public */
+export declare const typeRampPlus6FontVariations: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
 export declare const baseLayerLuminance: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public */
 export declare const accentFillRestDelta: DesignToken<number>;

package/dist/dts/styles/patterns/index.d.ts

@@ -1,2 +1,3 @@
 export * from './button.styles';
 export * from './input.styles';
+export * from './type-ramp';

package/dist/dts/styles/patterns/type-ramp.d.ts

@@ -0,0 +1,18 @@
+/** @public */
+export declare const typeRampBase: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampMinus1: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampMinus2: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampPlus1: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampPlus2: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampPlus3: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampPlus4: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampPlus5: import("@microsoft/fast-element").CSSDirective;
+/** @public */
+export declare const typeRampPlus6: import("@microsoft/fast-element").CSSDirective;

package/dist/dts/utilities/type-ramp.d.ts

@@ -0,0 +1,12 @@
+/** @public */
+export declare const StandardFontWeight: {
+    readonly Thin: 100;
+    readonly ExtraLight: 200;
+    readonly Light: 300;
+    readonly Normal: 400;
+    readonly Medium: 500;
+    readonly SemiBold: 600;
+    readonly Bold: 700;
+    readonly ExtraBold: 800;
+    readonly Black: 900;
+};

package/dist/esm/accordion/accordion-item/accordion-item.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { DesignToken, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../../design-tokens';
+import { typeRampBase } from '../../styles/patterns/type-ramp';
 import { heightNumber } from '../../styles/size';
 const neutralFillStealthRestOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-rest-on-neutral-fill-layer-rest').withDefault((target) => {
     const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
@@ -21,10 +22,8 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
 export const accordionItemStyles = (context, definition) => css `
     ${display('flex')} :host {
       box-sizing: border-box;
-      font-family: ${bodyFont};
+      ${typeRampBase};
       flex-direction: column;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
       background: ${neutralFillLayerRest};
       color: ${neutralForegroundRest};
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
@@ -56,7 +55,7 @@ export const accordionItemStyles = (context, definition) => css `
       text-align: left;
       color: inherit;
       cursor: pointer;
-      font-family: inherit;
+      font: inherit;
     }
 
     .button::before {

package/dist/esm/accordion/accordion.styles.js

@@ -1,13 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, designUnit, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { designUnit, neutralForegroundRest } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const accordionStyles = (context, definition) => css `
     ${display('flex')} :host {
       box-sizing: border-box;
       flex-direction: column;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
       color: ${neutralForegroundRest};
       gap: calc(${designUnit} * 1px);
     }

package/dist/esm/badge/badge.styles.js

@@ -1,12 +1,11 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { accentFillRest, bodyFont, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens';
+import { accentFillRest, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1LineHeight, } from '../design-tokens';
+import { typeRampMinus1 } from '../styles/patterns/type-ramp';
 export const badgeStyles = (context, definition) => css `
     ${display('inline-block')} :host {
       box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampMinus1FontSize};
-      line-height: ${typeRampMinus1LineHeight};
+      ${typeRampMinus1};
     }
 
     .control {

package/dist/esm/breadcrumb/breadcrumb.styles.js

@@ -1,12 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const breadcrumbStyles = (context, definition) => css `
   ${display('inline-block')} :host {
     box-sizing: border-box;
-    font-family: ${bodyFont};
-    font-size: ${typeRampBaseFontSize};
-    line-height: ${typeRampBaseLineHeight};
+    ${typeRampBase};
   }
 
   .list {

package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { bodyFont, controlCornerRadius, focusStrokeOuter, focusStrokeWidth, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { controlCornerRadius, focusStrokeOuter, focusStrokeWidth, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 import { heightNumber } from '../styles/index';
 export const breadcrumbItemStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
@@ -9,9 +10,7 @@ export const breadcrumbItemStyles = (context, definition) => css `
       color: ${neutralForegroundRest};
       fill: currentcolor;
       box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase};
       min-width: calc(${heightNumber} * 1px);
       border-radius: calc(${controlCornerRadius} * 1px);
       outline: none;

package/dist/esm/calendar/calendar.styles.js

@@ -1,8 +1,9 @@
 import { css } from "@microsoft/fast-element";
 import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, baseHeightMultiplier, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { DirectionalStyleSheetBehavior } from '../styles';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 /**
  * LTR styles for calendar
  * @internal
@@ -29,9 +30,7 @@ export const calendarStyles = (context, definition) => css `
 ${display("inline-block")} :host {
   --calendar-cell-size: calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);
   --calendar-gap: 2px;
-  font-family: ${bodyFont};
-  font-size: ${typeRampBaseFontSize};
-  line-height: ${typeRampBaseLineHeight};
+  ${typeRampBase}
   color: ${neutralForegroundRest};
 }
 

package/dist/esm/checkbox/checkbox.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const checkboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       align-items: center;
@@ -32,14 +33,12 @@ export const checkboxStyles = (context, definition) => css `
     }
 
     .label {
-      font-family: ${bodyFont};
+      ${typeRampBase}
       color: ${neutralForegroundRest};
       ${
 /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} padding-inline-start: calc(${designUnit} * 2px + 2px);
       margin-inline-end: calc(${designUnit} * 2px + 2px);
       cursor: pointer;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
     }
 
     slot[name='checked-indicator'],

package/dist/esm/combobox/combobox.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+import { strokeWidth } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const comboboxStyles = (context, definition) => css `
     ${selectStyles(context, definition)}
 
@@ -25,8 +26,7 @@ export const comboboxStyles = (context, definition) => css `
         background: transparent;
         border: none;
         color: inherit;
-        font-size: ${typeRampBaseFontSize};
-        line-height: ${typeRampBaseLineHeight};
+        ${typeRampBase}
         height: calc(100% - ${strokeWidth} * 1px));
         margin: auto 0;
         width: 100%;

package/dist/esm/data-grid/data-grid-cell.styles.js

@@ -1,16 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const dataGridCellStyles = (context, definition) => css `
     :host {
       padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
       color: ${neutralForegroundRest};
       box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      font-weight: 400;
+      ${typeRampBase}
       border: transparent calc(${focusStrokeWidth} * 1px) solid;
       overflow: hidden;
       outline: none;