(vNext) update casing for style exports (#4618)

* update casing  for style exports to illustrate they are functions

* Change files

* add api report

change/@microsoft-fast-components-c60516f0-c41a-446e-9895-7cf69c4e4cf6.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "update name casing for style exports to lowercase as they are functions",
+  "packageName": "@microsoft/fast-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-foundation-37087d28-3565-4060-bb9e-7b328baa9aea.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix incorrect name for select tests",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/web-components/fast-components/docs/api-report.md

@@ -208,10 +208,10 @@ export const accentForegroundRest: SwatchRecipe;
 export const accentForegroundRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
 
 // @public
-export const AccordionItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const accordionItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const AccordionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const accordionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "Anchor" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -230,13 +230,13 @@ export class Anchor extends Anchor_2 {
 export type AnchorAppearance = ButtonAppearance | "hypertext";
 
 // @public
-export const AnchoredRegionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const anchoredRegionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const AnchorStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const anchorStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const BadgeStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const badgeStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "Button" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -254,16 +254,16 @@ export class Button extends Button_2 {
 export type ButtonAppearance = "accent" | "lightweight" | "neutral" | "outline" | "stealth";
 
 // @public
-export const ButtonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const buttonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
 export const CardStyles: import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const CheckboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const checkboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const ComboboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const comboboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
 export function createColorPalette(baseColor: any): string[];
@@ -278,7 +278,7 @@ export const DataGridRowStyles: import("@microsoft/fast-element").ElementStyles;
 export const DataGridStyles: import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const DialogStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const dialogStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "Disclosure" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -300,10 +300,10 @@ export class Disclosure extends Disclosure_2 {
 export type DisclosureAppearance = "accent" | "lightweight";
 
 // @public
-export const DisclosureStyles: import("@microsoft/fast-element").ElementStyles;
+export const disclosureStyles: import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const DividerStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const dividerStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
 export const fastAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -994,7 +994,7 @@ export const fastTreeView: (overrideDefinition?: import("@microsoft/fast-foundat
 }, typeof TreeView>;
 
 // @public
-export const FlipperStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const flipperStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "HorizontalScroll" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1014,13 +1014,13 @@ export const inlineStartBehavior: import("@microsoft/fast-foundation").CSSCustom
 export function isDarkMode(designSystem: FASTDesignSystem): boolean;
 
 // @public
-export const ListboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const listboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const MenuItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const menuItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const MenuStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const menuStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "neutralContrastFill" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1424,10 +1424,10 @@ export class NumberField extends NumberField_2 {
 export type NumberFieldAppearance = "filled" | "outline";
 
 // @public
-export const NumberFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const numberFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const OptionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const optionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
 export type Palette = Swatch[];
@@ -1449,22 +1449,22 @@ export enum PaletteType {
 export const parseColorString: (color: string) => ColorRGBA64;
 
 // @public
-export const ProgressRingStyles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles;
+export const progressRingStyles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const ProgressStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const progressStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const RadioGroupStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const radioGroupStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const RadioStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const radioStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const SelectStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const selectStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const SkeletonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const skeletonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "SliderLabel" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1475,10 +1475,10 @@ export class SliderLabel extends SliderLabel_2 {
 }
 
 // @public
-export const SliderLabelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const sliderLabelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const SliderStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const sliderStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
 export enum StandardLuminance {
@@ -1489,16 +1489,16 @@ export enum StandardLuminance {
 }
 
 // @public
-export const SwitchStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const switchStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const TabPanelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const tabPanelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const TabsStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const tabsStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const TabStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const tabStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "TextArea" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1514,7 +1514,7 @@ export class TextArea extends TextArea_2 {
 export type TextAreaAppearance = "filled" | "outline";
 
 // @public
-export const TextAreaStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const textAreaStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // Warning: (ae-internal-missing-underscore) The name "TextField" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -1530,13 +1530,13 @@ export class TextField extends TextField_2 {
 export type TextFieldAppearance = "filled" | "outline";
 
 // @public
-export const TextFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const textFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const TreeItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const treeItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 // @public
-export const TreeViewStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export const treeViewStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
 
 // (No @packageDocumentation comment for this package)

packages/web-components/fast-components/src/accordion-item/index.ts

@@ -23,4 +23,4 @@ export const fastAccordionItem = AccordionItem.compose({
  * Styles for AccordionItem
  * @public
  */
-export const AccordionItemStyles = styles;
+export const accordionItemStyles = styles;

packages/web-components/fast-components/src/accordion/index.ts

@@ -22,4 +22,4 @@ export const fastAccordion = Accordion.compose({
  * Styles for Accordion
  * @public
  */
-export const AccordionStyles = styles;
+export const accordionStyles = styles;

packages/web-components/fast-components/src/anchor/index.ts

@@ -66,7 +66,7 @@ export class Anchor extends FoundationAnchor {
  * Styles for Anchor
  * @public
  */
-export const AnchorStyles = styles;
+export const anchorStyles = styles;
 
 /**
  * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},

packages/web-components/fast-components/src/anchored-region/index.ts

@@ -23,4 +23,4 @@ export const fastAnchoredRegion = AnchoredRegion.compose({
  * Styles for AnchoredRegion
  * @public
  */
-export const AnchoredRegionStyles = styles;
+export const anchoredRegionStyles = styles;

packages/web-components/fast-components/src/badge/index.ts

@@ -20,4 +20,4 @@ export const fastBadge = Badge.compose({
  * Styles for Badge
  * @public
  */
-export const BadgeStyles = styles;
+export const badgeStyles = styles;

packages/web-components/fast-components/src/button/index.ts

@@ -79,4 +79,4 @@ export const fastButton = Button.compose({
  * Styles for Button
  * @public
  */
-export const ButtonStyles = styles;
+export const buttonStyles = styles;

packages/web-components/fast-components/src/checkbox/index.ts

@@ -20,4 +20,4 @@ export const fastCheckbox = Checkbox.compose({
  * Styles for Checkbox
  * @public
  */
-export const CheckboxStyles = styles;
+export const checkboxStyles = styles;

packages/web-components/fast-components/src/combobox/index.ts

@@ -20,4 +20,4 @@ export const fastCombobox = Combobox.compose({
  * Styles for combobox
  * @public
  */
-export const ComboboxStyles = styles;
+export const comboboxStyles = styles;

packages/web-components/fast-components/src/dialog/index.ts

@@ -20,4 +20,4 @@ export const fastDialog = Dialog.compose({
  * Styles for Dialog
  * @public
  */
-export const DialogStyles = styles;
+export const dialogStyles = styles;

packages/web-components/fast-components/src/disclosure/index.ts

@@ -81,7 +81,7 @@ export class Disclosure extends FoundationDisclosure {
  * Styles for Disclosure
  * @public
  */
-export const DisclosureStyles = styles;
+export const disclosureStyles = styles;
 
 /**
  * The FAST Disclosure Element. Implements {@link @microsoft/fast-foundation#Disclosure},

packages/web-components/fast-components/src/divider/index.ts

@@ -20,4 +20,4 @@ export const fastDivider = Divider.compose({
  * Styles for Divider
  * @public
  */
-export const DividerStyles = styles;
+export const dividerStyles = styles;

packages/web-components/fast-components/src/flipper/index.ts

@@ -20,4 +20,4 @@ export const fastFlipper = Flipper.compose({
  * Styles for Flipper
  * @public
  */
-export const FlipperStyles = styles;
+export const flipperStyles = styles;

packages/web-components/fast-components/src/listbox-option/index.ts

@@ -24,4 +24,4 @@ export const fastOption = ListboxOption.compose({
  * Styles for Option
  * @public
  */
-export const OptionStyles = styles;
+export const optionStyles = styles;

packages/web-components/fast-components/src/listbox/index.ts

@@ -21,4 +21,4 @@ export const fastListbox = Listbox.compose({
  * Styles for Listbox
  * @public
  */
-export const ListboxStyles = styles;
+export const listboxStyles = styles;

packages/web-components/fast-components/src/menu-item/index.ts

@@ -20,4 +20,4 @@ export const fastMenuItem = MenuItem.compose({
  * Styles for MenuItem
  * @public
  */
-export const MenuItemStyles = styles;
+export const menuItemStyles = styles;

packages/web-components/fast-components/src/menu/index.ts

@@ -20,4 +20,4 @@ export const fastMenu = Menu.compose({
  * Styles for Menu
  * @public
  */
-export const MenuStyles = styles;
+export const menuStyles = styles;

packages/web-components/fast-components/src/number-field/index.ts

@@ -41,7 +41,7 @@ export class NumberField extends FoundationNumberField {
  * Styles for NumberField
  * @public
  */
-export const NumberFieldStyles = styles;
+export const numberFieldStyles = styles;
 
 /**
  * The FAST Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField},

packages/web-components/fast-components/src/progress-ring/index.ts

@@ -23,4 +23,4 @@ export const fastProgressRing = Progress.compose({
  * Styles for ProgressRing
  * @public
  */
-export const ProgressRingStyles = styles;
+export const progressRingStyles = styles;

packages/web-components/fast-components/src/progress/index.ts

@@ -23,4 +23,4 @@ export const fastProgress = Progress.compose({
  * Styles for Progress
  * @public
  */
-export const ProgressStyles = styles;
+export const progressStyles = styles;

packages/web-components/fast-components/src/radio-group/index.ts

@@ -20,4 +20,4 @@ export const fastRadioGroup = RadioGroup.compose({
  * Styles for RadioGroup
  * @public
  */
-export const RadioGroupStyles = styles;
+export const radioGroupStyles = styles;

packages/web-components/fast-components/src/radio/index.ts

@@ -20,4 +20,4 @@ export const fastRadio = Radio.compose({
  * Styles for Radio
  * @public
  */
-export const RadioStyles = styles;
+export const radioStyles = styles;

packages/web-components/fast-components/src/select/index.ts

@@ -12,7 +12,7 @@ import { selectStyles as styles } from "./select.styles";
  *
  */
 export const fastSelect = Select.compose({
-    baseName: "fast",
+    baseName: "select",
     template,
     styles,
 });
@@ -21,4 +21,4 @@ export const fastSelect = Select.compose({
  * Styles for Select
  * @public
  */
-export const SelectStyles = styles;
+export const selectStyles = styles;

packages/web-components/fast-components/src/skeleton/index.ts

@@ -20,4 +20,4 @@ export const fastSkeleton = Skeleton.compose({
  * Styles for Skeleton
  * @public
  */
-export const SkeletonStyles = styles;
+export const skeletonStyles = styles;

packages/web-components/fast-components/src/slider-label/index.ts

@@ -44,4 +44,4 @@ export const fastSliderLabel = SliderLabel.compose({
  * Styles for SliderLabel
  * @public
  */
-export const SliderLabelStyles = styles;
+export const sliderLabelStyles = styles;

packages/web-components/fast-components/src/slider/index.ts

@@ -20,4 +20,4 @@ export const fastSlider = Slider.compose({
  * Styles for Slider
  * @public
  */
-export const SliderStyles = styles;
+export const sliderStyles = styles;

packages/web-components/fast-components/src/switch/index.ts

@@ -20,4 +20,4 @@ export const fastSwitch = Switch.compose({
  * Styles for Switch
  * @public
  */
-export const SwitchStyles = styles;
+export const switchStyles = styles;

packages/web-components/fast-components/src/tab-panel/index.ts

@@ -20,4 +20,4 @@ export const fastTabPanel = TabPanel.compose({
  * Styles for TabPanel
  * @public
  */
-export const TabPanelStyles = styles;
+export const tabPanelStyles = styles;