@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

package/dist/web-components.d.ts

@@ -1,2982 +1,2074 @@
-import { Accordion } from '@microsoft/fast-foundation';
-import { AccordionItem } from '@microsoft/fast-foundation';
-import { AccordionItemOptions } from '@microsoft/fast-foundation';
-import { Anchor as Anchor_2 } from '@microsoft/fast-foundation';
-import { AnchoredRegion } from '@microsoft/fast-foundation';
-import { Badge as Badge_2 } from '@microsoft/fast-foundation';
-import { BaseProgress } from '@microsoft/fast-foundation';
-import { Behavior } from '@microsoft/fast-element';
-import { Breadcrumb } from '@microsoft/fast-foundation';
-import { BreadcrumbItem } from '@microsoft/fast-foundation';
-import { BreadcrumbItemOptions } from '@microsoft/fast-foundation';
-import { Button as Button_2 } from '@microsoft/fast-foundation';
-import { CalendarOptions } from '@microsoft/fast-foundation';
-import { Card as Card_2 } from '@microsoft/fast-foundation';
-import { CheckboxOptions } from '@microsoft/fast-foundation';
-import { Combobox as Combobox_2 } from '@microsoft/fast-foundation';
-import { ComboboxOptions } from '@microsoft/fast-foundation';
-import { Constructable } from '@microsoft/fast-element';
-import type { Container } from '@microsoft/fast-foundation';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
-import { CSSDirective } from '@microsoft/fast-element';
-import { DataGrid } from '@microsoft/fast-foundation';
-import { DataGridCell } from '@microsoft/fast-foundation';
-import { DataGridRow } from '@microsoft/fast-foundation';
-import { DesignSystem } from '@microsoft/fast-foundation';
-import { DesignToken } from '@microsoft/fast-foundation';
-import { Dialog } from '@microsoft/fast-foundation';
-import { Direction } from '@microsoft/fast-web-utilities';
-import { Divider } from '@microsoft/fast-foundation';
-import { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import { DividerOrientation } from '@microsoft/fast-foundation';
+import { DividerRole } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTAccordion } from '@microsoft/fast-foundation';
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
-import { Flipper } from '@microsoft/fast-foundation';
-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 { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
-import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
-import { Listbox as Listbox_2 } from '@microsoft/fast-foundation';
-import { ListboxOption } from '@microsoft/fast-foundation';
-import { Menu as Menu_2 } from '@microsoft/fast-foundation';
-import { MenuItem } from '@microsoft/fast-foundation';
-import { MenuItemOptions } from '@microsoft/fast-foundation';
-import { NumberField as NumberField_2 } from '@microsoft/fast-foundation';
-import { NumberFieldOptions } from '@microsoft/fast-foundation';
-import { OverrideFoundationElementDefinition } from '@microsoft/fast-foundation';
-import { ProgressOptions } from '@microsoft/fast-foundation';
-import { ProgressRingOptions } from '@microsoft/fast-foundation';
-import { Radio } from '@microsoft/fast-foundation';
-import { RadioGroup } from '@microsoft/fast-foundation';
-import { RadioOptions } from '@microsoft/fast-foundation';
-import { Search as Search_2 } from '@microsoft/fast-foundation';
-import { SearchOptions } from '@microsoft/fast-foundation';
-import { Select as Select_2 } from '@microsoft/fast-foundation';
-import { SelectOptions } from '@microsoft/fast-foundation';
-import { Skeleton } from '@microsoft/fast-foundation';
-import { Slider } from '@microsoft/fast-foundation';
-import { SliderLabel } from '@microsoft/fast-foundation';
-import { SliderOptions } from '@microsoft/fast-foundation';
-import { Switch } from '@microsoft/fast-foundation';
-import { SwitchOptions } from '@microsoft/fast-foundation';
-import { Tab } from '@microsoft/fast-foundation';
-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 { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation';
-import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation';
-import { TreeItem } from '@microsoft/fast-foundation';
-import { TreeItemOptions } from '@microsoft/fast-foundation';
-import { TreeView } from '@microsoft/fast-foundation';
-import { ViewTemplate } from '@microsoft/fast-element';
-
-/** @public */
-export declare const accentBaseColor: CSSDesignToken<Swatch>;
+import { FASTElementDefinition } from '@microsoft/fast-element';
+import { FASTProgress } from '@microsoft/fast-foundation';
+import { FASTProgressRing } from '@microsoft/fast-foundation';
+import { FASTSwitch } from '@microsoft/fast-foundation';
+import { StartEnd } from '@microsoft/fast-foundation';
+import { StartEndOptions } from '@microsoft/fast-foundation';
+import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
+import type { Theme } from '@fluentui/tokens';
+import { ValuesOf } from '@microsoft/fast-foundation';
 
 /**
- * @internal
- */
-export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
-
-/** @public */
-export declare const accentFillActive: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentFillActiveDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentFillFocus: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentFillFocusDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentFillHover: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentFillHoverDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentFillRecipe: DesignToken<InteractiveColorRecipe>;
-
-/** @public */
-export declare const accentFillRest: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentFillRestDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentForegroundActive: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentForegroundActiveDelta: DesignToken<number>;
-
-/** @public @deprecated Use foregroundOnAccentRest */
-export declare const accentForegroundCut: CSSDesignToken<Swatch>;
-
-/** @public @deprecated Use foregroundOnAccentRestLarge */
-export declare const accentForegroundCutLarge: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentForegroundFocus: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentForegroundFocusDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentForegroundHover: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentForegroundHoverDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>;
-
-/** @public */
-export declare const accentForegroundRest: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentForegroundRestDelta: DesignToken<number>;
-
-/** @public */
-export declare const accentPalette: DesignToken<Palette<Swatch>>;
-
-/** @public */
-export declare const accentStrokeControlActive: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentStrokeControlFocus: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentStrokeControlHover: CSSDesignToken<Swatch>;
-
-/** @public */
-export declare const accentStrokeControlRecipe: DesignToken<InteractiveColorRecipe>;
-
-/** @public */
-export declare const accentStrokeControlRest: CSSDesignToken<Swatch>;
-
-export { Accordion }
-
-export { AccordionItem }
-
-/**
- * Styles for AccordionItem
+ * The base class used for constructing a fluent-accordion custom element
  * @public
  */
-export declare const accordionItemStyles: (context: ElementDefinitionContext, definition: AccordionItemOptions) => ElementStyles;
-
-/**
- * Styles for Accordion
- * @public
- */
-export declare const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * All Fluent UI Web Components
- * @public
- */
-export declare const allComponents: {
-    fluentAccordion: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Accordion>;
-    fluentAccordionItem: (overrideDefinition?: OverrideFoundationElementDefinition<AccordionItemOptions> | undefined) => FoundationElementRegistry<AccordionItemOptions, Constructable<FoundationElement>>;
-    fluentAnchor: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Anchor>;
-    fluentAnchoredRegion: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof AnchoredRegion>;
-    fluentBadge: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Badge>;
-    fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Breadcrumb>;
-    fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition<BreadcrumbItemOptions> | undefined) => FoundationElementRegistry<BreadcrumbItemOptions, Constructable<FoundationElement>>;
-    fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Button>;
-    fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition<CalendarOptions> | undefined) => FoundationElementRegistry<CalendarOptions, Constructable<FoundationElement>>;
-    fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Card>;
-    fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => FoundationElementRegistry<CheckboxOptions, Constructable<FoundationElement>>;
-    fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition<ComboboxOptions> | undefined) => FoundationElementRegistry<ComboboxOptions, Constructable<FoundationElement>>;
-    fluentDataGrid: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGrid>;
-    fluentDataGridCell: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, DataGridCell>;
-    fluentDataGridRow: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, DataGridRow>;
-    fluentDesignSystemProvider: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-    baseName: string;
-    template: ViewTemplate<any, any>;
-    styles: ElementStyles;
-    }> | undefined) => FoundationElementRegistry<    {
-    baseName: string;
-    template: ViewTemplate<any, any>;
-    styles: ElementStyles;
-    }, DesignSystemProvider>;
-    fluentDialog: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Dialog>;
-    fluentDivider: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Divider>;
-    fluentFlipper: (overrideDefinition?: OverrideFoundationElementDefinition<FlipperOptions> | undefined) => FoundationElementRegistry<FlipperOptions, Constructable<FoundationElement>>;
-    fluentHorizontalScroll: (overrideDefinition?: OverrideFoundationElementDefinition<HorizontalScrollOptions> | undefined) => FoundationElementRegistry<HorizontalScrollOptions, Constructable<FoundationElement>>;
-    fluentListbox: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Listbox>;
-    fluentOption: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof ListboxOption>;
-    fluentMenu: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Menu>;
-    fluentMenuItem: (overrideDefinition?: OverrideFoundationElementDefinition<MenuItemOptions> | undefined) => FoundationElementRegistry<MenuItemOptions, Constructable<FoundationElement>>;
-    fluentNumberField: (overrideDefinition?: OverrideFoundationElementDefinition<NumberFieldOptions> | undefined) => FoundationElementRegistry<NumberFieldOptions, Constructable<FoundationElement>>;
-    fluentProgress: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressOptions> | undefined) => FoundationElementRegistry<ProgressOptions, Constructable<FoundationElement>>;
-    fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressRingOptions> | undefined) => FoundationElementRegistry<ProgressRingOptions, Constructable<FoundationElement>>;
-    fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition<RadioOptions> | undefined) => FoundationElementRegistry<RadioOptions, Constructable<FoundationElement>>;
-    fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof RadioGroup>;
-    fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition<SearchOptions> | undefined) => FoundationElementRegistry<SearchOptions, Constructable<FoundationElement>>;
-    fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition<SelectOptions> | undefined) => FoundationElementRegistry<SelectOptions, Constructable<FoundationElement>>;
-    fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Skeleton>;
-    fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition<SliderOptions> | undefined) => FoundationElementRegistry<SliderOptions, Constructable<FoundationElement>>;
-    fluentSliderLabel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof SliderLabel>;
-    fluentSwitch: (overrideDefinition?: OverrideFoundationElementDefinition<SwitchOptions> | undefined) => FoundationElementRegistry<SwitchOptions, Constructable<FoundationElement>>;
-    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<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>;
-    fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
-    register(container?: Container | undefined, ...rest: any[]): void;
-};
+export declare class Accordion extends FASTAccordion {
+}
 
 /**
- * Define shadow algorithms.
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
+ * {@link @microsoft/fast-foundation#accordionTemplate}
  *
- * TODO: The --background-luminance will need to be derived from JavaScript. For now
- * this is hard-coded to a 1, the relative luminance of pure white.
- * https://github.com/microsoft/fast/issues/2778
- * opacity was `calc(.11 * (2 - var(--background-luminance, 1)))`
  *
- * @internal
- * @deprecated Use elevationShadow design token
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion\>
  */
-export declare const ambientShadow = "0 0 2px rgba(0, 0, 0, 0.14)";
+export declare const accordionDefinition: FASTElementDefinition<typeof Accordion>;
 
 /**
- * The Fluent version of Anchor
  * @internal
  */
-export declare class Anchor extends Anchor_2 {
+export declare class AccordionItem extends FASTAccordionItem {
     /**
-     * The appearance the anchor should have.
+     * Defines accordion header font size.
      *
      * @public
+     * @default 'medium'
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: size
      */
-    appearance: AnchorAppearance;
-    appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void;
+    size?: AccordionItemSize;
     /**
-     * @internal
+     * Sets the width of the focus state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
      */
-    connectedCallback(): void;
+    block: boolean;
     /**
-     * Applies 'icon-only' class when there is only an SVG in the default slot
+     * Sets expand and collapsed icon position.
      *
-     * @internal
+     * @public
+     * @default 'start'
+     * @remarks
+     * HTML Attribute: expandIconPosition
      */
-    defaultSlottedContentChanged(): void;
+    expandIconPosition?: AccordionItemExpandIconPosition;
 }
 
 /**
- * Types of anchor appearance.
+ * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
+ *
+ *
  * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion-item\>
  */
-export declare type AnchorAppearance = ButtonAppearance | 'hypertext';
-
-export { AnchoredRegion }
+export declare const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
 
 /**
- * Styles for AnchoredRegion
- * @public
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
  */
-export declare const anchoredRegionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const AccordionItemExpandIconPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
 
 /**
- * Styles for Anchor
+ * Applies expand/collapse icon position
  * @public
  */
-export declare const anchorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * The Fluent Badge class
- * @internal
- */
-export declare class Badge extends Badge_2 {
-    appearance: BadgeAppearance;
-    private appearanceChanged;
-}
+export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
 
 /**
- * Badge appearance options.
- * @public
+ * An Accordion Item header font size can be small, medium, large, and extra-large
  */
-export declare type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string;
+export declare const AccordionItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
 
 /**
- * Styles for Badge
+ * Applies font size to accordion header
  * @public
  */
-export declare const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * The base styles for button controls, without `appearance` visual differences.
- *
- * @internal
- */
-export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
 
-/** @public */
-export declare const baseHeightMultiplier: CSSDesignToken<number>;
-
-/** @public */
-export declare const baseHorizontalSpacingMultiplier: CSSDesignToken<number>;
+export declare const accordionItemStyles: ElementStyles;
 
 /**
- * The base styles for input controls, without `appearance` visual differences.
- *
- * @internal
+ * The template for the fluent-accordion component.
+ * @public
  */
-export declare const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
+export declare const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
 
-/** @public */
-export declare const baseLayerLuminance: CSSDesignToken<number>;
+export declare const accordionStyles: ElementStyles;
 
-/** @public */
-export declare const bodyFont: CSSDesignToken<string>;
-
-export { Breadcrumb }
-
-export { BreadcrumbItem }
-
-/**
- * Styles for BreadcrumbItem
- * @public
- */
-export declare const breadcrumbItemStyles: (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) => ElementStyles;
+export declare const accordionTemplate: ElementViewTemplate<Accordion>;
 
 /**
- * Styles for Breadcrumb
+ * The base class used for constructing a fluent-avatar custom element
  * @public
  */
-export declare const breadcrumbStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * The Fluent button class
- * @internal
- */
-export declare class Button extends Button_2 {
+export declare class Avatar extends FASTElement {
     /**
-     * The appearance the button should have.
+     * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: name
      */
-    appearance: ButtonAppearance;
-    appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void;
+    name?: string | undefined;
     /**
-     * @internal
+     * Provide custom initials rather than one generated via the name
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
      */
-    connectedCallback(): void;
+    initials?: string | undefined;
     /**
-     * Applies 'icon-only' class when there is only an SVG in the default slot
+     * Size of the avatar in pixels.
+     *
+     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
+     * based on design guidelines for the Avatar control.
+     *
+     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
+     * to override the rendered size.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
      *
-     * @internal
      */
-    defaultSlottedContentChanged(): void;
-}
-
-/**
- * Types of button appearance.
- * @public
- */
-export declare type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth';
-
-/**
- * Styles for Button
- * @public
- */
-export declare const buttonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * @public
- */
-export declare class Card extends Card_2 {
+    size?: AvatarSize | undefined;
     /**
-     * Fill color for the card component. Sets context for the design system.
+     * The avatar can have a circular or square shape.
      *
-     * Updates the neutral palette and sets the card to the source color. For tinting use neutral-palette-source instead.
      * @public
      * @remarks
-     * HTML Attribute: card-fill-color
+     * HTML Attribute: shape
      */
-    cardFillColor: string;
-    private cardFillColorChanged;
+    shape?: AvatarShape | undefined;
     /**
-     * Neutral palette source color for the card component. Sets context for the design system.
+     * Optional activity indicator
+     * * active: the avatar will be decorated according to activeAppearance
+     * * inactive: the avatar will be reduced in size and partially transparent
+     * * undefined: normal display
      *
-     * This allows for tinting the card while maintaining the light or dark context. For a fixed color use card-fill-color instead.
      * @public
      * @remarks
-     * HTML Attribute: neutral-palette-source
+     * HTML Attribute: active
      */
-    neutralPaletteSource: string;
-    private neutralPaletteSourceChanged;
+    active?: AvatarActive | undefined;
     /**
-     * @internal
+     * The appearance when `active="active"`
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
      */
-    handleChange(source: any, propertyName: string): void;
-    connectedCallback(): void;
-}
-
-/**
- * Styles for Card
- * @public
- */
-export declare const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * Styles for Checkbox
- * @public
- */
-export declare const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles;
-
-/** @public */
-export declare interface ColorRecipe {
-    evaluate(element: HTMLElement, reference?: Swatch): Swatch;
-}
-
-/**
- * The Fluent combobox class
- * @internal
- */
-export declare class Combobox extends Combobox_2 {
+    appearance?: AvatarAppearance | undefined;
     /**
-     * The appearance of the element.
+     * The color when displaying either an icon or initials.
+     * * neutral (default): gray
+     * * brand: color from the brand palette
+     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
+     * * [AvatarNamedColor]: a specific color from the theme
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: color
+     */
+    color?: AvatarColor;
+    /**
+     * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
+     * Use this when a name is not available, but there is another unique identifier that can be used instead.
      */
-    appearance: ComboboxAppearance;
+    colorId?: AvatarNamedColor | undefined;
     /**
+     * Sets the data-color attribute used for the visual presentation
      * @internal
      */
-    appearanceChanged(oldValue: ComboboxAppearance, newValue: ComboboxAppearance): void;
+    generateColor(): AvatarColor | void;
     /**
+     * Generates and sets the initials for the template
      * @internal
      */
-    connectedCallback(): void;
+    generateInitials(): string | void;
+    /**
+     * An array of the available Avatar named colors
+     */
+    static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
 }
 
 /**
- * Combobox appearances
- * @public
+ * The Avatar "active" state
  */
-export declare type ComboboxAppearance = 'filled' | 'outline';
+export declare const AvatarActive: {
+    readonly active: "active";
+    readonly inactive: "inactive";
+};
 
 /**
- * Styles for combobox
- * @public
+ * The types of Avatar active state
  */
-export declare const comboboxStyles: (context: ElementDefinitionContext, definition: ComboboxOptions) => ElementStyles;
+export declare type AvatarActive = ValuesOf<typeof AvatarActive>;
 
-/** @public */
-export declare const controlCornerRadius: CSSDesignToken<number>;
+/**
+ * The Avatar Appearance when "active"
+ */
+export declare const AvatarAppearance: {
+    readonly ring: "ring";
+    readonly shadow: "shadow";
+    readonly ringShadow: "ring-shadow";
+};
 
-/** @public @deprecated Use controlCornerRadius */
-export declare const cornerRadius: CSSDesignToken<number>;
+/**
+ * The appearance when "active"
+ */
+export declare type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+
+/**
+ * Supported Avatar colors
+ */
+export declare const AvatarColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly colorful: "colorful";
+};
 
 /**
- * Creates a PaletteRGB from input R, G, B color values.
- * @param r - Red value represented as a number between 0 and 1.
- * @param g - Green value represented as a number between 0 and 1.
- * @param b - Blue value represented as a number between 0 and 1.
+ * The Avatar Color
  */
-declare function create(r: number, g: number, b: number): PaletteRGB;
+export declare type AvatarColor = ValuesOf<typeof AvatarColor>;
 
 /**
- * Creates a PaletteRGB from a source SwatchRGB object.
- * @deprecated - Use PaletteRGB.from()
+ * The Fluent Avatar Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-badge\>
  */
-declare function create(source: SwatchRGB): PaletteRGB;
-
-export { DataGrid }
-
-export { DataGridCell }
+export declare const AvatarDefinition: FASTElementDefinition<typeof Avatar>;
+
+/**
+ * A specific named color for the Avatar
+ */
+export declare const AvatarNamedColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+};
 
 /**
- * Styles for DataGrid cell
+ * An avatar can be one of named colors
  * @public
  */
-export declare const dataGridCellStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+
+/**
+ * The Avatar Shape
+ */
+export declare const AvatarShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
 
-export { DataGridRow }
+/**
+ * The types of Avatar Shape
+ */
+export declare type AvatarShape = ValuesOf<typeof AvatarShape>;
 
 /**
- * Styles for DataGrid row
+ * The Avatar Sizes
  * @public
  */
-export declare const dataGridRowStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const AvatarSize: {
+    readonly _16: 16;
+    readonly _20: 20;
+    readonly _24: 24;
+    readonly _28: 28;
+    readonly _32: 32;
+    readonly _36: 36;
+    readonly _40: 40;
+    readonly _48: 48;
+    readonly _56: 56;
+    readonly _64: 64;
+    readonly _72: 72;
+    readonly _96: 96;
+    readonly _120: 120;
+    readonly _128: 128;
+};
 
 /**
- * Styles for DataGrid
+ * A Avatar can be on of several preset sizes.
+ * @public
+ */
+export declare type AvatarSize = ValuesOf<typeof AvatarSize>;
+
+/** Avatar styles
  * @public
  */
-export declare const dataGridStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const AvatarStyles: ElementStyles;
 
-/** @public */
-export declare const density: CSSDesignToken<number>;
+export declare const AvatarTemplate: ElementViewTemplate<Avatar>;
 
 /**
- * The Fluent DesignSystemProvider Element.
+ * The base class used for constructing a fluent-badge custom element
  * @public
  */
-export declare class DesignSystemProvider extends FoundationElement {
-    constructor();
-    connectedCallback(): void;
-    /**
-     * Used to instruct the FluentDesignSystemProvider
-     * that it should not set the CSS
-     * background-color and color properties
-     *
-     * @remarks
-     * HTML boolean attribute: no-paint
-     */
-    noPaint: boolean;
-    private noPaintChanged;
-    /**
-     * Define design system property attributes
-     * @remarks
-     * HTML attribute: fill-color
-     *
-     * CSS custom property: --fill-color
-     */
-    fillColor: Swatch;
-    /**
-     * A convenience to recreate the accentPalette
-     * @remarks
-     * HTML attribute: accent-base-color
-     */
-    accentBaseColor: Swatch;
-    /**
-     * A convenience to recreate the neutralPalette
-     * @remarks
-     * HTML attribute: neutral-base-color
-     */
-    neutralBaseColor: Swatch;
-    /**
-     *
-     * The density offset, used with designUnit to calculate height and spacing.
-     *
-     * @remarks
-     * HTML attribute: density
-     *
-     * CSS custom property: --density
-     */
-    density: number;
-    /**
-     * The grid-unit that UI dimensions are derived from in pixels.
-     *
-     * @remarks
-     * HTML attribute: design-unit
-     *
-     * CSS custom property: --design-unit
-     */
-    designUnit: number;
-    /**
-     * The primary document direction.
-     *
-     * @remarks
-     * HTML attribute: direction
-     *
-     * CSS custom property: N/A
-     */
-    direction: Direction;
-    /**
-     * The number of designUnits used for component height at the base density.
-     *
-     * @remarks
-     * HTML attribute: base-height-multiplier
-     *
-     * CSS custom property: --base-height-multiplier
-     */
-    baseHeightMultiplier: number;
-    /**
-     * The number of designUnits used for horizontal spacing at the base density.
-     *
-     * @remarks
-     * HTML attribute: base-horizontal-spacing-multiplier
-     *
-     * CSS custom property: --base-horizontal-spacing-multiplier
-     */
-    baseHorizontalSpacingMultiplier: number;
-    /**
-     * The corner radius applied to controls.
-     *
-     * @remarks
-     * HTML attribute: control-corner-radius
-     *
-     * CSS custom property: --control-corner-radius
-     */
-    controlCornerRadius: number;
-    /**
-     * The corner radius applied to layers.
-     *
-     * @remarks
-     * HTML attribute: layer-corner-radius
-     *
-     * CSS custom property: --layer-corner-radius
-     */
-    layerCornerRadius: number;
-    /**
-     * The width of the standard stroke applied to stroke components in pixels.
-     *
-     * @remarks
-     * HTML attribute: stroke-width
-     *
-     * CSS custom property: --stroke-width
-     */
-    strokeWidth: number;
-    /**
-     * The width of the standard focus stroke in pixels.
-     *
-     * @remarks
-     * HTML attribute: focus-stroke-width
-     *
-     * CSS custom property: --focus-stroke-width
-     */
-    focusStrokeWidth: number;
+export declare class Badge extends FASTElement {
     /**
-     * The opacity of a disabled control.
-     *
-     * @remarks
-     * HTML attribute: disabled-opacity
-     *
-     * CSS custom property: --disabled-opacity
-     */
-    disabledOpacity: number;
-    /**
-     * The font-size two steps below the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-minus-2-font-size
-     *
-     * CSS custom property: --type-ramp-minus-2-font-size
-     */
-    typeRampMinus2FontSize: string;
-    /**
-     * The line-height two steps below the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-minus-2-line-height
-     *
-     * CSS custom property: --type-ramp-minus-2-line-height
-     */
-    typeRampMinus2LineHeight: string;
-    /**
-     * The font-size one step below the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-minus-1-font-size
-     *
-     * CSS custom property: --type-ramp-minus-1-font-size
-     */
-    typeRampMinus1FontSize: string;
-    /**
-     * The line-height one step below the base line-height
+     * The appearance the badge should have.
      *
+     * @public
      * @remarks
-     * HTML attribute: type-ramp-minus-1-line-height
-     *
-     * CSS custom property: --type-ramp-minus-1-line-height
+     * HTML Attribute: appearance
      */
-    typeRampMinus1LineHeight: string;
+    appearance: BadgeAppearance;
     /**
-     * The base font-size of the relative type-ramp scale
+     * The color the badge should have.
      *
+     * @public
      * @remarks
-     * HTML attribute: type-ramp-base-font-size
-     *
-     * CSS custom property: --type-ramp-base-font-size
+     * HTML Attribute: color
      */
-    typeRampBaseFontSize: string;
+    color: BadgeColor;
     /**
-     * The base line-height of the relative type-ramp scale
+     * The shape the badge should have.
      *
+     * @public
      * @remarks
-     * HTML attribute: type-ramp-base-line-height
-     *
-     * CSS custom property: --type-ramp-base-line-height
+     * HTML Attribute: shape
      */
-    typeRampBaseLineHeight: string;
+    shape?: BadgeShape;
     /**
-     * The font-size one step above the base font-size
+     * The size the badge should have.
      *
+     * @public
      * @remarks
-     * HTML attribute: type-ramp-plus-1-font-size
-     *
-     * CSS custom property: --type-ramp-plus-1-font-size
+     * HTML Attribute: size
      */
-    typeRampPlus1FontSize: string;
-    /**
-     * The line-height one step above the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-1-line-height
-     *
-     * CSS custom property: --type-ramp-plus-1-line-height
-     */
-    typeRampPlus1LineHeight: string;
-    /**
-     * The font-size two steps above the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-2-font-size
-     *
-     * CSS custom property: --type-ramp-plus-2-font-size
-     */
-    typeRampPlus2FontSize: string;
-    /**
-     * The line-height two steps above the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-2-line-height
-     *
-     * CSS custom property: --type-ramp-plus-2-line-height
-     */
-    typeRampPlus2LineHeight: string;
-    /**
-     * The font-size three steps above the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-3-font-size
-     *
-     * CSS custom property: --type-ramp-plus-3-font-size
-     */
-    typeRampPlus3FontSize: string;
-    /**
-     * The line-height three steps above the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-3-line-height
-     *
-     * CSS custom property: --type-ramp-plus-3-line-height
-     */
-    typeRampPlus3LineHeight: string;
-    /**
-     * The font-size four steps above the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-4-font-size
-     *
-     * CSS custom property: --type-ramp-plus-4-font-size
-     */
-    typeRampPlus4FontSize: string;
-    /**
-     * The line-height four steps above the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-4-line-height
-     *
-     * CSS custom property: --type-ramp-plus-4-line-height
-     */
-    typeRampPlus4LineHeight: string;
-    /**
-     * The font-size five steps above the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-5-font-size
-     *
-     * CSS custom property: --type-ramp-plus-5-font-size
-     */
-    typeRampPlus5FontSize: string;
-    /**
-     * The line-height five steps above the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-5-line-height
-     *
-     * CSS custom property: --type-ramp-plus-5-line-height
-     */
-    typeRampPlus5LineHeight: string;
-    /**
-     * The font-size six steps above the base font-size
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-6-font-size
-     *
-     * CSS custom property: --type-ramp-plus-6-font-size
-     */
-    typeRampPlus6FontSize: string;
-    /**
-     * The line-height six steps above the base line-height
-     *
-     * @remarks
-     * HTML attribute: type-ramp-plus-6-line-height
-     *
-     * CSS custom property: --type-ramp-plus-6-line-height
-     */
-    typeRampPlus6LineHeight: string;
-    /**
-     * The distance from the resolved accent fill color for the rest state of the accent-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-fill-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentFillRestDelta: number;
-    /**
-     * The distance from the resolved accent fill color for the hover state of the accent-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-fill-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentFillHoverDelta: number;
-    /**
-     * The distance from the resolved accent fill color for the active state of the accent-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-fill-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentFillActiveDelta: number;
-    /**
-     * The distance from the resolved accent fill color for the focus state of the accent-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-fill-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentFillFocusDelta: number;
-    /**
-     * The distance from the resolved accent foreground color for the rest state of the accent-foreground recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-foreground-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentForegroundRestDelta: number;
-    /**
-     * The distance from the resolved accent foreground color for the hover state of the accent-foreground recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-foreground-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentForegroundHoverDelta: number;
-    /**
-     * The distance from the resolved accent foreground color for the active state of the accent-foreground recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-foreground-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentForegroundActiveDelta: number;
-    /**
-     * The distance from the resolved accent foreground color for the focus state of the accent-foreground recipe.
-     *
-     * @remarks
-     * HTML attribute: accent-foreground-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    accentForegroundFocusDelta: number;
-    /**
-     * The distance from the resolved neutral fill color for the rest state of the neutral-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillRestDelta: number;
-    /**
-     * The distance from the resolved neutral fill color for the hover state of the neutral-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillHoverDelta: number;
-    /**
-     * The distance from the resolved neutral fill color for the active state of the neutral-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillActiveDelta: number;
-    /**
-     * The distance from the resolved neutral fill color for the focus state of the neutral-fill recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillFocusDelta: number;
-    /**
-     * The distance from the resolved neutral fill input color for the rest state of the neutral-fill-input recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-input-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillInputRestDelta: number;
-    /**
-     * The distance from the resolved neutral fill input color for the hover state of the neutral-fill-input recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-input-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillInputHoverDelta: number;
-    /**
-     * The distance from the resolved neutral fill input color for the active state of the neutral-fill-input recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-input-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillInputActiveDelta: number;
-    /**
-     * The distance from the resolved neutral fill input color for the focus state of the neutral-fill-input recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-input-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillInputFocusDelta: number;
-    /**
-     * The distance from the resolved neutral fill input color for the rest state of the neutral-fill-layer recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-layer-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillLayerRestDelta: number;
-    /**
-     * The distance from the resolved neutral fill stealth color for the rest state of the neutral-fill-stealth recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-stealth-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStealthRestDelta: number;
-    /**
-     * The distance from the resolved neutral fill stealth color for the hover state of the neutral-fill-stealth recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-stealth-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStealthHoverDelta: number;
-    /**
-     * The distance from the resolved neutral fill stealth color for the active state of the neutral-fill-stealth recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-stealth-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStealthActiveDelta: number;
-    /**
-     * The distance from the resolved neutral fill stealth color for the focus state of the neutral-fill-stealth recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-stealth-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStealthFocusDelta: number;
-    /**
-     * The distance from the resolved neutral fill strong color for the hover state of the neutral-fill-strong recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-strong-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStrongHoverDelta: number;
-    /**
-     * The distance from the resolved neutral fill strong color for the active state of the neutral-fill-strong recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-strong-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStrongActiveDelta: number;
-    /**
-     * The distance from the resolved neutral fill strong color for the focus state of the neutral-fill-strong recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-fill-strong-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralFillStrongFocusDelta: number;
-    /**
-     * The {@link https://www.w3.org/WAI/GL/wiki/Relative_luminance#:~:text=WCAG%20definition%20of%20relative%20luminance,and%201%20for%20lightest%20white|relative luminance} of the base layer of the application.
-     *
-     * @remarks
-     * When set to a number between 0 and 1
-     *
-     * HTML attribute: base-layer-luminance
-     *
-     * CSS custom property: N/A
-     */
-    baseLayerLuminance: number;
-    /**
-     * The distance from the resolved divider color for the rest state of the neutral-stroke-divider recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-stroke-divider-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralStrokeDividerRestDelta: number;
-    /**
-     * The distance from the resolved neutral stroke color for the rest state of the neutral-stroke recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-stroke-rest-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralStrokeRestDelta: number;
-    /**
-     * The distance from the resolved neutral stroke color for the hover state of the neutral-stroke recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-stroke-hover-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralStrokeHoverDelta: number;
-    /**
-     * The distance from the resolved neutral stroke color for the active state of the neutral-stroke recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-stroke-active-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralStrokeActiveDelta: number;
-    /**
-     * The distance from the resolved neutral stroke color for the focus state of the neutral-stroke recipe.
-     *
-     * @remarks
-     * HTML attribute: neutral-stroke-focus-delta
-     *
-     * CSS custom property: N/A
-     */
-    neutralStrokeFocusDelta: number;
+    size?: BadgeSize;
 }
 
-/** @public */
-export declare const designUnit: CSSDesignToken<number>;
-
-export { Dialog }
-
-/**
- * Styles for Dialog
- * @public
- */
-export declare const dialogStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/** @public */
-export declare const direction: CSSDesignToken<Direction>;
-
-/**
- * @internal
- * @deprecated Use elevationShadow design token
- */
-export declare const directionalShadow = "0 calc(var(--elevation) * 0.5px) calc((var(--elevation) * 1px)) rgba(0, 0, 0, 0.2)";
-
-/**
- * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
- * the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
- *
- * @public
- * @example
- * ```ts
- * import { css } from "@microsoft/fast-element";
- * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
- *
- * css`
- *  // ...
- * `.withBehaviors(new DirectionalStyleSheetBehavior(
- *   css`:host { content: "ltr"}`),
- *   css`:host { content: "rtl"}`),
- * )
- * ```
- */
-export declare class DirectionalStyleSheetBehavior implements Behavior {
-    private ltr;
-    private rtl;
-    private cache;
-    constructor(ltr: ElementStyles | null, rtl: ElementStyles | null);
-    /**
-     * @internal
-     */
-    bind(source: FASTElement & HTMLElement): void;
-    /**
-     * @internal
-     */
-    unbind(source: FASTElement & HTMLElement): void;
-    private attach;
-}
-
-/** @public */
-export declare const disabledOpacity: CSSDesignToken<number>;
-
-export { Divider }
-
-/**
- * Styles for Divider
- * @public
- */
-export declare const dividerStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/** @public @deprecated Use layerCornerRadius */
-export declare const elevatedCornerRadius: CSSDesignToken<number>;
-
-/**
- * Applies the box-shadow CSS rule set to the elevation formula.
- * Control this formula with the --elevation CSS Custom Property
- * by setting --elevation to a number.
- *
- * @public
- * @deprecated Use elevationShadow design token
- */
-export declare const elevation: string;
-
-/** @public */
-export declare interface ElevationRecipe {
-    evaluate(element: HTMLElement, size: number, reference?: Swatch): string;
-}
-
-/** @public */
-export declare const elevationShadowCardActive: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowCardActiveSize: CSSDesignToken<number>;
-
-/** @public */
-export declare const elevationShadowCardFocus: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowCardFocusSize: CSSDesignToken<number>;
-
-/** @public */
-export declare const elevationShadowCardHover: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowCardHoverSize: CSSDesignToken<number>;
-
-/** @public */
-export declare const elevationShadowCardRest: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowCardRestSize: CSSDesignToken<number>;
-
-/** @public */
-export declare const elevationShadowDialog: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowDialogSize: CSSDesignToken<number>;
-
-/** @public */
-export declare const elevationShadowFlyout: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowFlyoutSize: CSSDesignToken<number>;
-
-/**
- * @public
- */
-export declare const elevationShadowRecipe: DesignToken<ElevationRecipe>;
-
-/** @public */
-export declare const elevationShadowTooltip: CSSDesignToken<string>;
-
-/** @public */
-export declare const elevationShadowTooltipSize: CSSDesignToken<number>;
-
-/** @public */
-export declare const fillColor: CSSDesignToken<Swatch>;
-
-export { Flipper }
-
-/**
- * Styles for Flipper
- * @public
- */
-export declare const flipperStyles: (context: ElementDefinitionContext, definition: FlipperOptions) => ElementStyles;
-
-/**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-accordion\>
- */
-export declare const fluentAccordion: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Accordion>;
-
-/**
- * The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
- * {@link @microsoft/fast-foundation#accordionItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-accordion-item\>
- */
-export declare const fluentAccordionItem: (overrideDefinition?: OverrideFoundationElementDefinition<AccordionItemOptions> | undefined) => FoundationElementRegistry<AccordionItemOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
- * {@link @microsoft/fast-foundation#anchorTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-anchor\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export declare const fluentAnchor: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Anchor>;
-
-/**
- * The Fluent AnchoredRegion Element. Implements {@link @microsoft/fast-foundation#AnchoredRegion},
- * {@link @microsoft/fast-foundation#anchoredRegionTemplate}
- *
- *
- * @beta
- * @remarks
- * HTML Element: \<fluent-anchored-region\>
- */
-export declare const fluentAnchoredRegion: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof AnchoredRegion>;
-
-/**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
- */
-export declare const fluentBadge: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Badge>;
-
-/**
- * The Fluent Breadcrumb Element. Implements {@link @microsoft/fast-foundation#Breadcrumb},
- * {@link @microsoft/fast-foundation#breadcrumbTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-breadcrumb\>
- */
-export declare const fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Breadcrumb>;
-
-/**
- * The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
- * {@link @microsoft/fast-foundation#breadcrumbItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-breadcrumb-item\>
- */
-export declare const fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition<BreadcrumbItemOptions> | undefined) => FoundationElementRegistry<BreadcrumbItemOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button},
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-button\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export declare const fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Button>;
-
-/**
- * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
- * {@link @microsoft/fast-foundation#calendarTemplate}
- *
- * @public
- * @remarks
- * HTML Element \<fluent-calendar\>
- */
-export declare const fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition<CalendarOptions> | undefined) => FoundationElementRegistry<CalendarOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
- * {@link @microsoft/fast-foundation#CardTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-card\>
- */
-export declare const fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Card>;
-
-/**
- * The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
- * {@link @microsoft/fast-foundation#checkboxTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-checkbox\>
- */
-export declare const fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => FoundationElementRegistry<CheckboxOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox},
- * {@link @microsoft/fast-foundation#comboboxTemplate}
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-combobox\>
- *
- */
-export declare const fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition<ComboboxOptions> | undefined) => FoundationElementRegistry<ComboboxOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent Data Grid Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-data-grid\>
- */
-export declare const fluentDataGrid: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGrid>;
-
-/**
- * The Fluent Data Grid Cell Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-data-grid-cell\>
- */
-export declare const fluentDataGridCell: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGridCell>;
-
-/**
- * The Fluent Data Grid Row Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-data-grid-row\>
- */
-export declare const fluentDataGridRow: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGridRow>;
-
-/**
- * The Fluent Design System Provider Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-design-system-provider\>
- */
-export declare const fluentDesignSystemProvider: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-baseName: string;
-template: ViewTemplate<any, any>;
-styles: ElementStyles;
-}> | undefined) => FoundationElementRegistry<    {
-baseName: string;
-template: ViewTemplate<any, any>;
-styles: ElementStyles;
-}, typeof DesignSystemProvider>;
-
-/**
- * The Fluent Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog},
- * {@link @microsoft/fast-foundation#dialogTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-dialog\>
- */
-export declare const fluentDialog: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Dialog>;
-
-/**
- * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
- * {@link @microsoft/fast-foundation#dividerTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-divider\>
- */
-export declare const fluentDivider: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Divider>;
-
-/**
- * The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
- * {@link @microsoft/fast-foundation#flipperTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-flipper\>
- */
-export declare const fluentFlipper: (overrideDefinition?: OverrideFoundationElementDefinition<FlipperOptions> | undefined) => FoundationElementRegistry<FlipperOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent HorizontalScroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScroll},
- * {@link @microsoft/fast-foundation#horizontalScrollTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-horizontal-scroll\>
- */
-export declare const fluentHorizontalScroll: (overrideDefinition?: OverrideFoundationElementDefinition<HorizontalScrollOptions> | undefined) => FoundationElementRegistry<HorizontalScrollOptions, Constructable<FoundationElement>>;
-
-/**
- * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
- * {@link @microsoft/fast-foundation#listboxTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-listbox\>
- *
- */
-export declare const fluentListbox: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Listbox>;
-
-/**
- * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
- * {@link @microsoft/fast-foundation#menuTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-menu\>
- */
-export declare const fluentMenu: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Menu>;
-
 /**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem},
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-menu-item\>
+ * Mark internal because exporting class and interface of the same name
+ * confuses API extractor.
+ * TODO: Below will be unnecessary when Badge class gets updated
+ * @internal
  */
-export declare const fluentMenuItem: (overrideDefinition?: OverrideFoundationElementDefinition<MenuItemOptions> | undefined) => FoundationElementRegistry<MenuItemOptions, Constructable<FoundationElement>>;
+export declare interface Badge extends StartEnd {
+}
 
 /**
- * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField},
- * {@link @microsoft/fast-foundation#numberFieldTemplate}
- *
- *
+ * BadgeAppearance constants
  * @public
- * @remarks
- * HTML Element: \<fluent-number-field\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export declare const fluentNumberField: (overrideDefinition?: OverrideFoundationElementDefinition<NumberFieldOptions> | undefined) => FoundationElementRegistry<NumberFieldOptions, Constructable<FoundationElement>>;
+export declare const BadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+    readonly outline: "outline";
+    readonly tint: "tint";
+};
 
 /**
- * The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption}
- * {@link @microsoft/fast-foundation#listboxOptionTemplate}
- *
- *
+ * A Badge can be filled, outline, ghost, inverted
  * @public
- * @remarks
- * HTML Element: \<fluent-option\>
- *
  */
-export declare const fluentOption: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof ListboxOption>;
+export declare type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
 
 /**
- * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
- * {@link @microsoft/fast-foundation#progressTemplate}
- *
- *
+ * BadgeColor constants
  * @public
- * @remarks
- * HTML Element: \<fluent-progress\>
  */
-export declare const fluentProgress: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressOptions> | undefined) => FoundationElementRegistry<ProgressOptions, Constructable<FoundationElement>>;
+export declare const BadgeColor: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
 
 /**
- * The Fluent Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
- * {@link @microsoft/fast-foundation#progressRingTemplate}
- *
- *
+ * A Badge can be one of preset colors
  * @public
- * @remarks
- * HTML Element: \<fluent-progress-ring\>
  */
-export declare const fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressRingOptions> | undefined) => FoundationElementRegistry<ProgressRingOptions, Constructable<FoundationElement>>;
+export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
 
 /**
- * The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
- * {@link @microsoft/fast-foundation#radioTemplate}
+ * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fluent-radio\>
+ * HTML Element: \<fluent-badge\>
  */
-export declare const fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition<RadioOptions> | undefined) => FoundationElementRegistry<RadioOptions, Constructable<FoundationElement>>;
+export declare const BadgeDefinition: FASTElementDefinition<typeof Badge>;
 
 /**
- * The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
- * {@link @microsoft/fast-foundation#radioGroupTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-radio-group\>
+ * @internal - marking as internal update when Badge PR for start/end is in
  */
-export declare const fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof RadioGroup>;
+export declare type BadgeOptions = StartEndOptions<Badge> & {
+    defaultContent?: StaticallyComposableHTML;
+};
 
 /**
- * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
- * {@link @microsoft/fast-foundation#searchTemplate}
- *
- *
+ * A Badge can be square, circular or rounded.
  * @public
- * @remarks
- * HTML Element: \<fluent-search\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export declare const fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition<SearchOptions> | undefined) => FoundationElementRegistry<SearchOptions, Constructable<FoundationElement>>;
+export declare const BadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
 
 /**
- * The Fluent select Custom Element. Implements, {@link @microsoft/fast-foundation#Select}
- * {@link @microsoft/fast-foundation#selectTemplate}
- *
- *
+ * A Badge can be one of preset colors
  * @public
- * @remarks
- * HTML Element: \<fluent-select\>
- *
  */
-export declare const fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition<SelectOptions> | undefined) => FoundationElementRegistry<SelectOptions, Constructable<FoundationElement>>;
+export declare type BadgeShape = ValuesOf<typeof BadgeShape>;
 
 /**
- * The Fluent Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton},
- * {@link @microsoft/fast-foundation#skeletonTemplate}
- *
- *
+ * A Badge can be square, circular or rounded.
  * @public
- * @remarks
- * HTML Element: \<fluent-skeleton\>
  */
-export declare const fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Skeleton>;
+export declare const BadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
 
 /**
- * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#(Slider:class)},
- * {@link @microsoft/fast-foundation#sliderTemplate}
- *
- *
+ * A Badge can be on of several preset sizes.
  * @public
- * @remarks
- * HTML Element: \<fluent-slider\>
  */
-export declare const fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition<SliderOptions> | undefined) => FoundationElementRegistry<SliderOptions, Constructable<FoundationElement>>;
+export declare type BadgeSize = ValuesOf<typeof BadgeSize>;
 
-/**
- * The Fluent Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#SliderLabel},
- * {@link @microsoft/fast-foundation#sliderLabelTemplate}
- *
- *
+/** Badge styles
  * @public
- * @remarks
- * HTML Element: \<fluent-slider-label\>
  */
-export declare const fluentSliderLabel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof SliderLabel>;
+export declare const BadgeStyles: ElementStyles;
 
-/**
- * The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
- * {@link @microsoft/fast-foundation#SwitchTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-switch\>
- */
-export declare const fluentSwitch: (overrideDefinition?: OverrideFoundationElementDefinition<SwitchOptions> | undefined) => FoundationElementRegistry<SwitchOptions, Constructable<FoundationElement>>;
+export declare const BadgeTemplate: ElementViewTemplate<Badge>;
 
-/**
- * The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
- * {@link @microsoft/fast-foundation#tabTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tab\>
- */
-export declare const fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tab>;
+export declare const borderRadiusCircular: CSSDesignToken<string>;
 
-/**
- * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
- * {@link @microsoft/fast-foundation#tabPanelTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tab-panel\>
- */
-export declare const fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TabPanel>;
+export declare const borderRadiusLarge: CSSDesignToken<string>;
 
-/**
- * The Fluent Tabs Custom Element. Implements {@link @microsoft/fast-foundation#Tabs},
- * {@link @microsoft/fast-foundation#tabsTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tabs\>
- */
-export declare const fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tabs>;
+export declare const borderRadiusMedium: CSSDesignToken<string>;
 
-/**
- * The Fluent Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea},
- * {@link @microsoft/fast-foundation#textAreaTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-text-area\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export declare const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextArea>;
+export declare const borderRadiusNone: CSSDesignToken<string>;
 
-/**
- * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
- * {@link @microsoft/fast-foundation#textFieldTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-text-field\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export declare const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextField>;
+export declare const borderRadiusSmall: CSSDesignToken<string>;
 
-/**
- * The Fluent Toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar},
- * {@link @microsoft/fast-foundation#toolbarTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-toolbar\>
- */
-export declare const fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Toolbar>;
+export declare const borderRadiusXLarge: CSSDesignToken<string>;
 
-/**
- * The Fluent Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip},
- * {@link @microsoft/fast-foundation#tooltipTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tooltip\>
- */
-export declare const fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tooltip>;
+export declare const colorBackgroundOverlay: CSSDesignToken<string>;
 
-/**
- * The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
- * {@link @microsoft/fast-foundation#treeItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-item\>
- *
- */
-export declare const fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
+export declare const colorBrandBackground: CSSDesignToken<string>;
 
-/**
- * The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
- * {@link @microsoft/fast-foundation#treeViewTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-view\>
- *
- */
-export declare const fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
+export declare const colorBrandBackground2: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundHover: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundInverted: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundInvertedHover: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundInvertedPressed: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundInvertedSelected: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundPressed: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundSelected: CSSDesignToken<string>;
+
+export declare const colorBrandBackgroundStatic: CSSDesignToken<string>;
+
+export declare const colorBrandForeground1: CSSDesignToken<string>;
+
+export declare const colorBrandForeground2: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundInverted: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundInvertedHover: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundInvertedPressed: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundLink: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundLinkHover: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundLinkPressed: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundLinkSelected: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundOnLight: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundOnLightHover: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundOnLightPressed: CSSDesignToken<string>;
+
+export declare const colorBrandForegroundOnLightSelected: CSSDesignToken<string>;
+
+export declare const colorBrandShadowAmbient: CSSDesignToken<string>;
+
+export declare const colorBrandShadowKey: CSSDesignToken<string>;
+
+export declare const colorBrandStroke1: CSSDesignToken<string>;
+
+export declare const colorBrandStroke2: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandBackground: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandBackgroundHover: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandBackgroundPressed: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandForeground1: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandForeground1Hover: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandForeground1Pressed: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandStroke: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandStrokeHover: CSSDesignToken<string>;
+
+export declare const colorCompoundBrandStrokePressed: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground1: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground1Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground1Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground1Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground2: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground2Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground2Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground2Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground3: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground3Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground3Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground3Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground4: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground4Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground4Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground4Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground5: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground5Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground5Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground5Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralBackground6: CSSDesignToken<string>;
+
+export declare const colorNeutralBackgroundDisabled: CSSDesignToken<string>;
+
+export declare const colorNeutralBackgroundInverted: CSSDesignToken<string>;
+
+export declare const colorNeutralBackgroundInvertedDisabled: CSSDesignToken<string>;
+
+export declare const colorNeutralBackgroundStatic: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground1: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground1Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground1Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground1Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground1Static: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2BrandHover: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2BrandPressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2BrandSelected: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2Link: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2LinkHover: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2LinkPressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2LinkSelected: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground2Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3BrandHover: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3BrandPressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3BrandSelected: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground3Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralForeground4: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundDisabled: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInverted: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInverted2: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedDisabled: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedHover: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedLink: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedLinkHover: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedLinkPressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedLinkSelected: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedPressed: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundInvertedSelected: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundOnBrand: CSSDesignToken<string>;
+
+export declare const colorNeutralForegroundStaticInverted: CSSDesignToken<string>;
+
+export declare const colorNeutralShadowAmbient: CSSDesignToken<string>;
+
+export declare const colorNeutralShadowAmbientDarker: CSSDesignToken<string>;
+
+export declare const colorNeutralShadowAmbientLighter: CSSDesignToken<string>;
+
+export declare const colorNeutralShadowKey: CSSDesignToken<string>;
+
+export declare const colorNeutralShadowKeyDarker: CSSDesignToken<string>;
+
+export declare const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
+
+export declare const colorNeutralStencil1: CSSDesignToken<string>;
+
+export declare const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+
+export declare const colorNeutralStencil2: CSSDesignToken<string>;
+
+export declare const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+
+export declare const colorNeutralStroke1: CSSDesignToken<string>;
+
+export declare const colorNeutralStroke1Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralStroke1Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralStroke1Selected: CSSDesignToken<string>;
+
+export declare const colorNeutralStroke2: CSSDesignToken<string>;
+
+export declare const colorNeutralStroke3: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeAccessible: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeAccessibleHover: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeAccessiblePressed: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeAccessibleSelected: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeDisabled: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeInvertedDisabled: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeOnBrand: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeOnBrand2: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeOnBrand2Hover: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeOnBrand2Pressed: CSSDesignToken<string>;
+
+export declare const colorNeutralStrokeOnBrand2Selected: CSSDesignToken<string>;
+
+export declare const colorPaletteAnchorBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteAnchorBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteAnchorForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBeigeBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBeigeBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteBeigeForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBerryForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteBlueBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBlueBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteBlueForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBrassBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use focusStrokeWidth */
-export declare const focusOutlineWidth: CSSDesignToken<number>;
+export declare const colorPaletteBrassBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const focusStrokeInner: CSSDesignToken<Swatch>;
+export declare const colorPaletteBrassForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const focusStrokeInnerRecipe: DesignToken<ColorRecipe>;
+export declare const colorPaletteBrownBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const focusStrokeOuter: CSSDesignToken<Swatch>;
+export declare const colorPaletteBrownBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const focusStrokeOuterRecipe: DesignToken<ColorRecipe>;
+export declare const colorPaletteBrownForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const focusStrokeWidth: CSSDesignToken<number>;
+export declare const colorPaletteCornflowerBackground2: CSSDesignToken<string>;
 
-/**
- * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
- *
- * @public
- */
-export declare const focusTreatmentBase: CSSDirective;
+export declare const colorPaletteCornflowerBorderActive: CSSDesignToken<string>;
 
-/**
- * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
- * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
- *
- * @public
- */
-export declare const focusTreatmentTight: CSSDirective;
+export declare const colorPaletteCornflowerForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const fontWeight: CSSDesignToken<number>;
+export declare const colorPaletteCranberryBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const foregroundOnAccentActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteCranberryBorderActive: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentActiveLarge: CSSDesignToken<Swatch>;
+export declare const colorPaletteCranberryForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const foregroundOnAccentFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteDarkGreenBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentFocusLarge: CSSDesignToken<Swatch>;
+export declare const colorPaletteDarkGreenBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const foregroundOnAccentHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteDarkGreenForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentHoverLarge: CSSDesignToken<Swatch>;
+export declare const colorPaletteDarkOrangeBackground1: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentLargeRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteDarkOrangeBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const foregroundOnAccentRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteDarkOrangeBackground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const foregroundOnAccentRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteDarkOrangeBorder1: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentRestLarge: CSSDesignToken<Swatch>;
+export declare const colorPaletteDarkOrangeBorder2: CSSDesignToken<string>;
 
-/**
- * Creates a PaletteRGB from a source color object.
- * @param source - The source color
- */
-declare function from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+export declare const colorPaletteDarkOrangeBorderActive: CSSDesignToken<string>;
 
-/**
- * A formula to retrieve the control height.
- * Use this as the value of any CSS property that
- * accepts a pixel size.
- * @public
- */
-export declare const heightNumber: CSSDirective;
+export declare const colorPaletteDarkOrangeForeground1: CSSDesignToken<string>;
 
-/**
- * @internal
- */
-export declare class HorizontalScroll extends HorizontalScroll_2 {
-    /**
-     * @public
-     */
-    connectedCallback(): void;
-}
+export declare const colorPaletteDarkOrangeForeground2: CSSDesignToken<string>;
 
-/**
- * Styles for horizontal scroll
- * @public
- */
-export declare const horizontalScrollStyles: (context: ElementDefinitionContext, definition: HorizontalScrollOptions) => ElementStyles;
+export declare const colorPaletteDarkOrangeForeground3: CSSDesignToken<string>;
 
-/**
- * @internal
- */
-export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const colorPaletteDarkRedBackground2: CSSDesignToken<string>;
 
-/**
- * The visual styles for inputs with `appearance='filled'`.
- *
- * @internal
- */
-export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
+export declare const colorPaletteDarkRedBorderActive: CSSDesignToken<string>;
 
-/**
- * @internal
- */
-export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
+export declare const colorPaletteDarkRedForeground2: CSSDesignToken<string>;
 
-/**
- * The visual styles for inputs with `appearance='outline'`.
- *
- * @internal
- */
-export declare const inputOutlineStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
+export declare const colorPaletteForestBackground2: CSSDesignToken<string>;
 
-/**
- * The styles for active and focus interactions for input controls.
- *
- * @internal
- */
-export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
+export declare const colorPaletteForestBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare interface InteractiveColorRecipe {
-    evaluate(element: HTMLElement, reference?: Swatch): InteractiveSwatchSet;
-}
+export declare const colorPaletteForestForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare interface InteractiveSwatchSet {
-    /**
-     * The swatch to apply to the rest state
-     */
-    rest: Swatch;
-    /**
-     * The swatch to apply to the hover state
-     */
-    hover: Swatch;
-    /**
-     * The swatch to apply to the active state
-     */
-    active: Swatch;
-    /**
-     * The swatch to apply to the focus state
-     */
-    focus: Swatch;
-}
+export declare const colorPaletteGoldBackground2: CSSDesignToken<string>;
 
-/**
- * Determines if a color should be considered Dark Mode
- * @param color - The color to check to mode of
- * @returns boolean
- *
- * @internal
- */
-export declare function isDark(color: Swatch): boolean;
+export declare const colorPaletteGoldBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const layerCornerRadius: CSSDesignToken<number>;
+export declare const colorPaletteGoldForeground2: CSSDesignToken<string>;
 
-/**
- * @internal
- */
-export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const colorPaletteGrapeBackground2: CSSDesignToken<string>;
 
-export declare class Listbox extends Listbox_2 {
-}
+export declare const colorPaletteGrapeBorderActive: CSSDesignToken<string>;
 
-/**
- * Styles for Listbox
- * @public
- */
-export declare const listboxStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const colorPaletteGrapeForeground2: CSSDesignToken<string>;
 
-/**
- * The Fluent menu class
- * @public
- */
-export declare class Menu extends Menu_2 {
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-}
+export declare const colorPaletteGreenBackground1: CSSDesignToken<string>;
 
-export { MenuItem }
+export declare const colorPaletteGreenBackground2: CSSDesignToken<string>;
 
-/**
- * Styles for MenuItem
- * @public
- */
-export declare const menuItemStyles: (context: ElementDefinitionContext, definition: MenuItemOptions) => ElementStyles;
+export declare const colorPaletteGreenBackground3: CSSDesignToken<string>;
 
-/**
- * Styles for Menu
- * @public
- */
-export declare const menuStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const colorPaletteGreenBorder1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralBaseColor: CSSDesignToken<Swatch>;
+export declare const colorPaletteGreenBorder2: CSSDesignToken<string>;
 
-/**
- * @internal
- */
-export declare const NeutralButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const colorPaletteGreenBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseActive */
-export declare const neutralContrastFillActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteGreenForeground3: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseActiveDelta */
-export declare const neutralContrastFillActiveDelta: CSSDesignToken<number>;
+export declare const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseFocus */
-export declare const neutralContrastFillFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteLavenderBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseFocusDelta */
-export declare const neutralContrastFillFocusDelta: CSSDesignToken<number>;
+export declare const colorPaletteLavenderBorderActive: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseHover */
-export declare const neutralContrastFillHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteLavenderForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseHoverDelta */
-export declare const neutralContrastFillHoverDelta: CSSDesignToken<number>;
+export declare const colorPaletteLightGreenBackground1: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseRest */
-export declare const neutralContrastFillRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteLightGreenBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillInverseRestDelta */
-export declare const neutralContrastFillRestDelta: CSSDesignToken<number>;
+export declare const colorPaletteLightGreenBackground3: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralStrokeDividerRest */
-export declare const neutralDivider: CSSDesignToken<Swatch>;
+export declare const colorPaletteLightGreenBorder1: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralStrokeDividerRestDelta */
-export declare const neutralDividerRestDelta: DesignToken<number>;
+export declare const colorPaletteLightGreenBorder2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteLightGreenBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillActiveDelta: DesignToken<number>;
+export declare const colorPaletteLightGreenForeground1: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillLayerRest */
-export declare const neutralFillCard: CSSDesignToken<Swatch>;
+export declare const colorPaletteLightGreenForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillLayerRestDelta */
-export declare const neutralFillCardDelta: DesignToken<number>;
+export declare const colorPaletteLightGreenForeground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteLightTealBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillFocusDelta: DesignToken<number>;
+export declare const colorPaletteLightTealBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteLightTealForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillHoverDelta: DesignToken<number>;
+export declare const colorPaletteLilacBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteLilacBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputActiveDelta: DesignToken<number>;
+export declare const colorPaletteLilacForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteMagentaBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltActiveDelta: DesignToken<number>;
+export declare const colorPaletteMagentaBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteMagentaForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltFocusDelta: DesignToken<number>;
+export declare const colorPaletteMarigoldBackground1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteMarigoldBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltHoverDelta: DesignToken<number>;
+export declare const colorPaletteMarigoldBackground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteMarigoldBorder1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteMarigoldBorder2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputAltRestDelta: DesignToken<number>;
+export declare const colorPaletteMarigoldBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteMarigoldForeground1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputFocusDelta: DesignToken<number>;
+export declare const colorPaletteMarigoldForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteMarigoldForeground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputHoverDelta: DesignToken<number>;
+export declare const colorPaletteMinkBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteMinkBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteMinkForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillInputRestDelta: DesignToken<number>;
+export declare const colorPaletteNavyBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteNavyBorderActive: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseActiveDelta: CSSDesignToken<number>;
+export declare const colorPaletteNavyForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseFocus: CSSDesignToken<Swatch>;
+export declare const colorPalettePeachBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseFocusDelta: CSSDesignToken<number>;
+export declare const colorPalettePeachBorderActive: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseHover: CSSDesignToken<Swatch>;
+export declare const colorPalettePeachForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseHoverDelta: CSSDesignToken<number>;
+export declare const colorPalettePinkBackground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPalettePinkBorderActive: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseRest: CSSDesignToken<Swatch>;
+export declare const colorPalettePinkForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Not used */
-export declare const neutralFillInverseRestDelta: CSSDesignToken<number>;
+export declare const colorPalettePlatinumBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerActive: CSSDesignToken<Swatch>;
+export declare const colorPalettePlatinumBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerActiveDelta: DesignToken<number>;
+export declare const colorPalettePlatinumForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerAltRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPalettePlumBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerAltRest: CSSDesignToken<Swatch>;
+export declare const colorPalettePlumBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerAltRestDelta: DesignToken<number>;
+export declare const colorPalettePlumForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerHover: CSSDesignToken<Swatch>;
+export declare const colorPalettePumpkinBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerHoverDelta: DesignToken<number>;
+export declare const colorPalettePumpkinBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPalettePumpkinForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerRest: CSSDesignToken<Swatch>;
+export declare const colorPalettePurpleBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillLayerRestDelta: DesignToken<number>;
+export declare const colorPalettePurpleBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPalettePurpleForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteRedBackground1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillRestDelta: DesignToken<number>;
+export declare const colorPaletteRedBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteRedBackground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryActiveDelta: DesignToken<number>;
+export declare const colorPaletteRedBorder1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteRedBorder2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryFocusDelta: DesignToken<number>;
+export declare const colorPaletteRedBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteRedForeground1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryHoverDelta: DesignToken<number>;
+export declare const colorPaletteRedForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteRedForeground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillSecondaryRestDelta: DesignToken<number>;
+export declare const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteRoyalBlueBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthActiveDelta: DesignToken<number>;
+export declare const colorPaletteRoyalBlueForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteSeafoamBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthFocusDelta: DesignToken<number>;
+export declare const colorPaletteSeafoamBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteSeafoamForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthHoverDelta: DesignToken<number>;
+export declare const colorPaletteSteelBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteSteelBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteSteelForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStealthRestDelta: DesignToken<number>;
+export declare const colorPaletteTealBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteTealBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongActiveDelta: DesignToken<number>;
+export declare const colorPaletteTealForeground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteYellowBackground1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongFocusDelta: DesignToken<number>;
+export declare const colorPaletteYellowBackground2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongHover: CSSDesignToken<Swatch>;
+export declare const colorPaletteYellowBackground3: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongHoverDelta: DesignToken<number>;
+export declare const colorPaletteYellowBorder1: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorPaletteYellowBorder2: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongRest: CSSDesignToken<Swatch>;
+export declare const colorPaletteYellowBorderActive: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralFillStrongRestDelta: DesignToken<number>;
+export declare const colorPaletteYellowForeground1: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongActive */
-export declare const neutralFillToggleActive: CSSDesignToken<Swatch>;
+export declare const colorPaletteYellowForeground2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongActiveDelta */
-export declare const neutralFillToggleActiveDelta: DesignToken<number>;
+export declare const colorPaletteYellowForeground3: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongFocus */
-export declare const neutralFillToggleFocus: CSSDesignToken<Swatch>;
+export declare const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongFocusDelta */
-export declare const neutralFillToggleFocusDelta: DesignToken<number>;
+export declare const colorScrollbarOverlay: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongHover */
-export declare const neutralFillToggleHover: CSSDesignToken<Swatch>;
+export declare const colorStrokeFocus1: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongHoverDelta */
-export declare const neutralFillToggleHoverDelta: DesignToken<number>;
+export declare const colorStrokeFocus2: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongRest */
-export declare const neutralFillToggleRest: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackground: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralFillStrongRestDelta */
-export declare const neutralFillToggleRestDelta: DesignToken<number>;
+export declare const colorSubtleBackgroundHover: CSSDesignToken<string>;
 
-/** @public @deprecated Use focusStrokeOuter */
-export declare const neutralFocus: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundInverted: CSSDesignToken<string>;
 
-/** @public @deprecated Use focusStrokeInner */
-export declare const neutralFocusInnerAccent: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundInvertedHover: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundActive: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundInvertedPressed: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundFocus: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundInvertedSelected: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundHint: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundLightAlphaHover: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundHintRecipe: DesignToken<ColorRecipe>;
+export declare const colorSubtleBackgroundLightAlphaPressed: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundHover: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundLightAlphaSelected: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const colorSubtleBackgroundPressed: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralForegroundRest: CSSDesignToken<Swatch>;
+export declare const colorSubtleBackgroundSelected: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralLayer1: CSSDesignToken<Swatch>;
+export declare const colorTransparentBackground: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralLayer1Recipe: DesignToken<ColorRecipe>;
+export declare const colorTransparentBackgroundHover: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralLayer2: CSSDesignToken<Swatch>;
+export declare const colorTransparentBackgroundPressed: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralLayer2Recipe: DesignToken<ColorRecipe>;
+export declare const colorTransparentBackgroundSelected: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralLayer3: CSSDesignToken<Swatch>;
+export declare const colorTransparentStroke: CSSDesignToken<string>;
+
+export declare const colorTransparentStrokeDisabled: CSSDesignToken<string>;
+
+export declare const colorTransparentStrokeInteractive: CSSDesignToken<string>;
+
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class CounterBadge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: CounterBadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color?: CounterBadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: CounterBadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: CounterBadgeSize;
+    /**
+     * The count the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: count
+     */
+    count: number;
+    protected countChanged(): void;
+    /**
+     * Max number to be displayed
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: overflow-count
+     */
+    overflowCount: number;
+    protected overflowCountChanged(): void;
+    /**
+     * If the badge should be shown when count is 0
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: show-zero
+     */
+    showZero: boolean;
+    /**
+     * If a dot should be displayed without the count
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: dot
+     */
+    dot: boolean;
+    /**
+     * @internal
+     * Function to set the count
+     * This is the default slotted content for the counter badge
+     * If children are slotted, that will override the value returned
+     */
+    setCount(): string | void;
+}
 
-/** @public */
-export declare const neutralLayer3Recipe: DesignToken<ColorRecipe>;
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API extractor.
+ * TODO: Below will be unnecessary when Badge class gets updated
+ * @internal
+ */
+export declare interface CounterBadge extends StartEnd {
+}
 
-/** @public */
-export declare const neutralLayer4: CSSDesignToken<Swatch>;
+/**
+ * CounterBadgeAppearance constants
+ * @public
+ */
+export declare const CounterBadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+};
 
-/** @public */
-export declare const neutralLayer4Recipe: DesignToken<ColorRecipe>;
+/**
+ * A CounterBadge can have an appearance of filled or ghost
+ * @public
+ */
+export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
 
-/** @public */
-export declare const neutralLayerCardContainer: CSSDesignToken<Swatch>;
+/**
+ * CounterBadgeColor constants
+ * @public
+ */
+export declare const CounterBadgeColor: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
 
-/** @public */
-export declare const neutralLayerCardContainerRecipe: DesignToken<ColorRecipe>;
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 
-/** @public */
-export declare const neutralLayerFloating: CSSDesignToken<Swatch>;
+/**
+ * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-counter-badge\>
+ */
+export declare const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
 
-/** @public */
-export declare const neutralLayerFloatingRecipe: DesignToken<ColorRecipe>;
+/**
+ * CounterBadge options
+ * @public
+ */
+export declare type CounterBadgeOptions = BadgeOptions;
 
-/** @public @deprecated Use neutralLayer1 */
-export declare const neutralLayerL1: CSSDesignToken<Swatch>;
+/**
+ * A CounterBadge shape can be circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+};
 
-/** @public @deprecated Use neutralLayer2 */
-export declare const neutralLayerL2: CSSDesignToken<Swatch>;
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
 
-/** @public @deprecated Use neutralLayer3 */
-export declare const neutralLayerL3: CSSDesignToken<Swatch>;
+/**
+ * A CounterBadge can be square, circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
 
-/** @public @deprecated Use neutralLayer4 */
-export declare const neutralLayerL4: CSSDesignToken<Swatch>;
+/**
+ * A CounterBadge can be on of several preset sizes.
+ * @public
+ */
+export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
 
-/** @public @deprecated Use neutralStrokeActive */
-export declare const neutralOutlineActive: CSSDesignToken<Swatch>;
+/** Badge styles
+ * @public
+ */
+export declare const CounterBadgeStyles: ElementStyles;
 
-/** @public @deprecated Use neutralStrokeFocus */
-export declare const neutralOutlineFocus: CSSDesignToken<Swatch>;
+/**
+ * The template for the Counter Badge component.
+ * @public
+ */
+export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
-/** @public @deprecated Use neutralStrokeHover */
-export declare const neutralOutlineHover: CSSDesignToken<Swatch>;
+export declare const curveAccelerateMax: CSSDesignToken<string>;
 
-/** @public @deprecated Use neutralStrokeRest */
-export declare const neutralOutlineRest: CSSDesignToken<Swatch>;
+export declare const curveAccelerateMid: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralPalette: DesignToken<Palette<Swatch>>;
+export declare const curveAccelerateMin: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeActive: CSSDesignToken<Swatch>;
+export declare const curveDecelerateMax: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeActiveDelta: DesignToken<number>;
+export declare const curveDecelerateMid: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeControlActive: CSSDesignToken<Swatch>;
+export declare const curveDecelerateMin: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeControlActiveDelta: DesignToken<number>;
+export declare const curveEasyEase: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeControlFocus: CSSDesignToken<Swatch>;
+export declare const curveEasyEaseMax: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeControlFocusDelta: DesignToken<number>;
+export declare const curveLinear: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeControlHover: CSSDesignToken<Swatch>;
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const definition: FASTElementDefinition<typeof Switch>;
 
-/** @public */
-export declare const neutralStrokeControlHoverDelta: DesignToken<number>;
+/**
+ * @class Divider component
+ *
+ * @remarks
+ * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ */
+export declare class Divider extends FASTDivider {
+    /**
+     * @property alignContent
+     * @default center
+     * @remarks
+     * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
+     */
+    alignContent?: DividerAlignContent;
+    /**
+     * @property appearance
+     * @default default
+     * @remarks
+     * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
+     */
+    appearance?: DividerAppearance;
+    /**
+     * @property inset
+     * @default false
+     * @remarks
+     * Adds padding to the beginning and end of the divider.
+     */
+    inset?: boolean;
+}
 
-/** @public */
-export declare const neutralStrokeControlRecipe: DesignToken<InteractiveColorRecipe>;
+/**
+ * Align content within divider
+ * @public
+ */
+export declare const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
 
-/** @public */
-export declare const neutralStrokeControlRest: CSSDesignToken<Swatch>;
+/**
+ * The types for DividerAlignContent
+ * @public
+ */
+export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
 
-/** @public */
-export declare const neutralStrokeControlRestDelta: DesignToken<number>;
+/**
+ * DividerAppearance - divider color defined by a design token alias.
+ * @public
+ */
+export declare const DividerAppearance: {
+    readonly strong: "strong";
+    readonly brand: "brand";
+    readonly subtle: "subtle";
+    readonly default: "default";
+};
 
-/** @public */
-export declare const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
+/**
+ * The types for Appearance
+ * @public
+ */
+export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
 
-/** @public */
-export declare const neutralStrokeDividerRest: CSSDesignToken<Swatch>;
+/**
+ * The Fluent Divider Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-divider\>
+ */
+export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
 
-/** @public */
-export declare const neutralStrokeDividerRestDelta: DesignToken<number>;
+export { DividerOrientation }
 
-/** @public */
-export declare const neutralStrokeFocus: CSSDesignToken<Swatch>;
+export { DividerRole }
 
-/** @public */
-export declare const neutralStrokeFocusDelta: DesignToken<number>;
+/** Divider styles
+ * @public
+ */
+export declare const DividerStyles: ElementStyles;
 
-/** @public */
-export declare const neutralStrokeHover: CSSDesignToken<Swatch>;
+/**
+ * Template for the Divider component
+ * @public
+ */
+export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
-/** @public */
-export declare const neutralStrokeHoverDelta: DesignToken<number>;
+export declare const durationFast: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeInputActive: CSSDesignToken<Swatch>;
+export declare const durationFaster: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeInputFocus: CSSDesignToken<Swatch>;
+export declare const durationNormal: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeInputHover: CSSDesignToken<Swatch>;
+export declare const durationSlow: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeInputRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const durationSlower: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeInputRest: CSSDesignToken<Swatch>;
+export declare const durationUltraFast: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerActive: CSSDesignToken<Swatch>;
+export declare const durationUltraSlow: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerActiveDelta: DesignToken<number>;
+export declare const fontFamilyBase: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerHover: CSSDesignToken<Swatch>;
+export declare const fontFamilyMonospace: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerHoverDelta: DesignToken<number>;
+export declare const fontFamilyNumeric: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const fontSizeBase100: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerRest: CSSDesignToken<Swatch>;
+export declare const fontSizeBase200: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeLayerRestDelta: DesignToken<number>;
+export declare const fontSizeBase300: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const fontSizeBase400: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeRest: CSSDesignToken<Swatch>;
+export declare const fontSizeBase500: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeRestDelta: DesignToken<number>;
+export declare const fontSizeBase600: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongActive: CSSDesignToken<Swatch>;
+export declare const fontSizeHero1000: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongActiveDelta: DesignToken<number>;
+export declare const fontSizeHero700: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongFocus: CSSDesignToken<Swatch>;
+export declare const fontSizeHero800: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongFocusDelta: DesignToken<number>;
+export declare const fontSizeHero900: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongHover: CSSDesignToken<Swatch>;
+export declare const fontWeightBold: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongHoverDelta: DesignToken<number>;
+export declare const fontWeightMedium: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongRecipe: DesignToken<InteractiveColorRecipe>;
+export declare const fontWeightRegular: CSSDesignToken<string>;
 
-/** @public */
-export declare const neutralStrokeStrongRest: CSSDesignToken<Swatch>;
+export declare const fontWeightSemibold: CSSDesignToken<string>;
 
 /**
- * The Fluent number field class
- * @internal
+ * The base class used for constucting a fluent image custom element
+ * @public
  */
-export declare class NumberField extends NumberField_2 {
+declare class Image_2 extends FASTElement {
     /**
-     * The appearance of the element.
+     * Image layout
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML attribute: block.
      */
-    appearance: NumberFieldAppearance;
+    block?: boolean;
     /**
-     * @internal
+     * Image border
+     *
+     * @public
+     * @remarks
+     * HTML attribute: border.
+     */
+    bordered?: boolean;
+    /**
+     * Image shadow
+     *
+     * @public
+     * @remarks
+     * HTML attribute: shadow.
+     */
+    shadow?: boolean;
+    /**
+     * Image fit
+     *
+     * @public
+     * @remarks
+     * HTML attribute: fit.
      */
-    connectedCallback(): void;
+    fit?: ImageFit;
+    /**
+     * Image shape
+     *
+     * @public
+     * @remarks
+     * HTML attribute: shape.
+     */
+    shape?: ImageShape;
 }
+export { Image_2 as Image }
+
+/**
+ * The Fluent Image Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-image\>
+ */
+export declare const ImageDefinition: FASTElementDefinition<typeof Image_2>;
+
+/**
+ * Image fit
+ * @public
+ */
+export declare const ImageFit: {
+    readonly none: "none";
+    readonly center: "center";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly default: "default";
+};
 
 /**
- * Number field appearances
+ * Types for image fit
  * @public
  */
-export declare type NumberFieldAppearance = 'filled' | 'outline';
+export declare type ImageFit = ValuesOf<typeof ImageFit>;
 
 /**
- * Styles for NumberField
+ * Image shape
  * @public
  */
-export declare const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles;
+export declare const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
 
-/**
- * Styles for Option
+export declare type ImageShape = ValuesOf<typeof ImageShape>;
+
+/** Image styles
+ *
  * @public
  */
-export declare const OptionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const ImageStyles: ElementStyles;
 
 /**
- * @internal
+ * Template for the Image component
+ * @public
  */
-export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const ImageTemplate: ElementViewTemplate<Image_2>;
 
-/** @public @deprecated Use strokeWidth */
-export declare const outlineWidth: CSSDesignToken<number>;
+export declare const lineHeightBase100: CSSDesignToken<string>;
 
-/**
- * A collection of {@link Swatch} instances
- * @public
- */
-export declare interface Palette<T extends Swatch = Swatch> {
-    readonly source: T;
-    readonly swatches: ReadonlyArray<T>;
-    /**
-     * Returns a swatch from the palette that most closely matches
-     * the contrast ratio provided to a provided reference.
-     */
-    colorContrast(reference: Swatch, contrast: number, initialIndex?: number, direction?: 1 | -1): T;
-    /**
-     * Returns the index of the palette that most closely matches
-     * the relativeLuminance of the provided swatch
-     */
-    closestIndexOf(reference: RelativeLuminance): number;
-    /**
-     * Gets a swatch by index. Index is clamped to the limits
-     * of the palette so a Swatch will always be returned.
-     */
-    get(index: number): T;
-}
+export declare const lineHeightBase200: CSSDesignToken<string>;
 
-/** @public */
-export declare type PaletteRGB = Palette<SwatchRGB>;
+export declare const lineHeightBase300: CSSDesignToken<string>;
 
-/** @public */
-export declare const PaletteRGB: Readonly<{
-    create: typeof create;
-    from: typeof from;
-}>;
+export declare const lineHeightBase400: CSSDesignToken<string>;
+
+export declare const lineHeightBase500: CSSDesignToken<string>;
+
+export declare const lineHeightBase600: CSSDesignToken<string>;
+
+export declare const lineHeightHero1000: CSSDesignToken<string>;
+
+export declare const lineHeightHero700: CSSDesignToken<string>;
+
+export declare const lineHeightHero800: CSSDesignToken<string>;
+
+export declare const lineHeightHero900: CSSDesignToken<string>;
 
 /**
- * Options to tailor the generation of the color palette.
+ * The base class used for constructing a fluent-progress-bar custom element
  * @public
  */
-declare interface PaletteRGBOptions {
+declare class ProgressBar_2 extends FASTProgress {
     /**
-     * The minimum amount of contrast between steps in the palette. Default 1.03.
-     * Recommended increments by hundredths.
+     * The thickness of the progress bar
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: thickness
      */
-    stepContrast: number;
+    thickness?: ProgressBarThickness;
     /**
-     * Multiplier for increasing step contrast as the swatches darken. Default 0.03.
-     * Recommended increments by hundredths.
+     * The shape of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: shape
      */
-    stepContrastRamp: number;
+    shape?: ProgressBarShape;
     /**
-     * Whether to keep the exact source color in the target palette. Default false.
-     * Only recommended when the exact color is required and used in stateful interaction recipes like hover.
-     * Note that custom recipes can still access the source color even if it's not in the ramp,
-     * but turning this on will potentially increase the contrast between steps toward the ends of the palette.
+     * The validation state of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: validation-state
      */
-    preserveSource: boolean;
+    validationState: ProgressBarValidationState | null;
 }
+export { ProgressBar_2 as ProgressBar }
 
 /**
- * Progress base class
+ * The Fluent ProgressBar Element.
+ *
+ *
  * @public
+ * @remarks
+ * HTML Element: \<fluent-progress-bar\>
  */
-export declare class Progress extends BaseProgress {
-}
+export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
 
 /**
- * Progress Ring base class
+ * ProgressBarShape Constants
  * @public
  */
-export declare class ProgressRing extends BaseProgress {
-}
+export declare const ProgressBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
 
 /**
- * Styles for ProgressRing
+ * Applies bar shape to the content
  * @public
  */
-export declare const progressRingStyles: (context: ElementDefinitionContext, definition: ProgressRingOptions) => ElementStyles;
+export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 
-/**
- * Styles for Progress
+/** Text styles
  * @public
  */
-export declare const progressStyles: (context: ElementDefinitionContext, definition: ProgressOptions) => ElementStyles;
+export declare const ProgressBarStyles: ElementStyles;
+
+export declare const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
 
 /**
- * Provides a design system for the specified element either by returning one that was
- * already created for that element or creating one.
- * @param element - The element to root the design system at. By default, this is the body.
- * @returns A Fluent Design System
+ * ProgressBarThickness Constants
  * @public
  */
-export declare function provideFluentDesignSystem(element?: HTMLElement): DesignSystem;
-
-export { Radio }
-
-export { RadioGroup }
+export declare const ProgressBarThickness: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
 
 /**
- * Styles for RadioGroup
+ * Applies bar thickness to the content
  * @public
  */
-export declare const radioGroupStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
 
 /**
- * Styles for Radio
+ * ProgressBarValidationState Constants
  * @public
  */
-export declare const RadioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles;
-
-/** @public @deprecated Use ColorRecipe instead */
-export declare interface Recipe<T> {
-    evaluate(element: HTMLElement, reference?: Swatch): T;
-}
+export declare const ProgressBarValidationState: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
 
 /**
+ * Applies validation state to the content
  * @public
  */
-declare interface RelativeLuminance {
-    /**
-     * A number between 0 and 1, calculated by {@link https://www.w3.org/WAI/GL/wiki/Relative_luminance}
-     */
-    readonly relativeLuminance: number;
-}
+export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
 /**
- * The Fluent search class
- * @internal
+ * Sets the theme tokens on defaultNode.
+ * @param theme Flat object of theme token values.
  */
-export declare class Search extends Search_2 {
-    /**
-     * The appearance of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance: SearchAppearance;
-}
+export declare const setTheme: (theme: Theme) => void;
 
-/**
- * Search appearances
- * @public
- */
-export declare type SearchAppearance = 'filled' | 'outline';
+export declare const shadow16: CSSDesignToken<string>;
 
-/**
- * Styles for Search
- * @public
- */
-export declare const searchStyles: (context: ElementDefinitionContext, definition: SearchOptions) => ElementStyles;
+export declare const shadow16Brand: CSSDesignToken<string>;
 
-/**
- * @public
- */
-export declare const searchTemplate: (context: ElementDefinitionContext, definition: SearchOptions) => ViewTemplate<Search_2>;
+export declare const shadow2: CSSDesignToken<string>;
+
+export declare const shadow28: CSSDesignToken<string>;
+
+export declare const shadow28Brand: CSSDesignToken<string>;
+
+export declare const shadow2Brand: CSSDesignToken<string>;
+
+export declare const shadow4: CSSDesignToken<string>;
+
+export declare const shadow4Brand: CSSDesignToken<string>;
+
+export declare const shadow64: CSSDesignToken<string>;
+
+export declare const shadow64Brand: CSSDesignToken<string>;
+
+export declare const shadow8: CSSDesignToken<string>;
+
+export declare const shadow8Brand: CSSDesignToken<string>;
+
+export declare const spacingHorizontalL: CSSDesignToken<string>;
+
+export declare const spacingHorizontalM: CSSDesignToken<string>;
+
+export declare const spacingHorizontalMNudge: CSSDesignToken<string>;
+
+export declare const spacingHorizontalNone: CSSDesignToken<string>;
+
+export declare const spacingHorizontalS: CSSDesignToken<string>;
+
+export declare const spacingHorizontalSNudge: CSSDesignToken<string>;
+
+export declare const spacingHorizontalXL: CSSDesignToken<string>;
+
+export declare const spacingHorizontalXS: CSSDesignToken<string>;
+
+export declare const spacingHorizontalXXL: CSSDesignToken<string>;
+
+export declare const spacingHorizontalXXS: CSSDesignToken<string>;
+
+export declare const spacingHorizontalXXXL: CSSDesignToken<string>;
+
+export declare const spacingVerticalL: CSSDesignToken<string>;
+
+export declare const spacingVerticalM: CSSDesignToken<string>;
+
+export declare const spacingVerticalMNudge: CSSDesignToken<string>;
+
+export declare const spacingVerticalNone: CSSDesignToken<string>;
+
+export declare const spacingVerticalS: CSSDesignToken<string>;
+
+export declare const spacingVerticalSNudge: CSSDesignToken<string>;
+
+export declare const spacingVerticalXL: CSSDesignToken<string>;
+
+export declare const spacingVerticalXS: CSSDesignToken<string>;
+
+export declare const spacingVerticalXXL: CSSDesignToken<string>;
+
+export declare const spacingVerticalXXS: CSSDesignToken<string>;
+
+export declare const spacingVerticalXXXL: CSSDesignToken<string>;
 
 /**
- * The Fluent select class
- * @internal
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
  */
-export declare class Select extends Select_2 {
+export declare class Spinner extends FASTProgressRing {
     /**
-     * The appearance of the element.
+     * The size of the spinner
      *
      * @public
+     * @default 'medium'
      * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance: SelectAppearance;
-    /**
-     * @internal
+     * HTML Attribute: size
      */
-    appearanceChanged(oldValue: SelectAppearance, newValue: SelectAppearance): void;
+    size?: SpinnerSize;
     /**
-     * @internal
+     * The appearance of the spinner
+     * @public
+     * @default 'primary'
+     * @remarks
+     * HTML Attribute: appearance
      */
-    connectedCallback(): void;
+    appearance?: SpinnerAppearance;
 }
 
 /**
- * Select appearances
+ * SpinnerAppearance constants
  * @public
  */
-export declare type SelectAppearance = 'filled' | 'outline' | 'stealth';
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
 
 /**
- * Styles for Select
+ * A Spinner's appearance can be either primary or inverted
  * @public
  */
-export declare const selectStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
-
-export { Skeleton }
+export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 
 /**
- * Styles for Skeleton
+ * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
+ * {@link @microsoft/fast-foundation#progress-ringTemplate}
+ *
+ *
  * @public
+ * @remarks
+ * HTML Element: \<fluent-spinner\>
  */
-export declare const skeletonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-export { Slider }
-
-export { SliderLabel }
+export declare const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
 /**
- * Styles for SliderLabel
+ * SpinnerSize constants
  * @public
  */
-export declare const sliderLabelStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const SpinnerSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+    readonly huge: "huge";
+};
 
 /**
- * Styles for Slider
+ * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
  * @public
  */
-export declare const sliderStyles: (context: ElementDefinitionContext, definition: SliderOptions) => ElementStyles;
+export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;
 
-/**
- * Recommended values for light and dark mode for {@link @fluentui/web-components#baseLayerLuminance}.
- *
- * @public
- */
-export declare enum StandardLuminance {
-    LightMode = 0.98,
-    DarkMode = 0.15
-}
+export declare const SpinnerStyles: ElementStyles;
 
-/**
- * @internal
- */
-export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const SpinnerTemplate: ElementViewTemplate<Spinner>;
 
-/** @public */
-export declare const strokeWidth: CSSDesignToken<number>;
+export declare const strokeWidthThick: CSSDesignToken<string>;
 
-/**
- * Represents a color in a {@link Palette}
- * @public
- */
-export declare interface Swatch extends RelativeLuminance {
-    toColorString(): string;
-    contrast(target: RelativeLuminance): number;
-}
+export declare const strokeWidthThicker: CSSDesignToken<string>;
 
-/** @public */
-export declare interface SwatchRGB extends Swatch {
-    r: number;
-    g: number;
-    b: number;
-}
+export declare const strokeWidthThickest: CSSDesignToken<string>;
 
-/** @public */
-export declare const SwatchRGB: Readonly<{
-    create(r: number, g: number, b: number): SwatchRGB;
-    from(obj: {
-        r: number;
-        g: number;
-        b: number;
-    }): SwatchRGB;
-}>;
+export declare const strokeWidthThin: CSSDesignToken<string>;
 
-export { Switch }
+export declare class Switch extends FASTSwitch {
+    /**
+     * The label position of the switch
+     *
+     * @public
+     * @default 'after'
+     * @remarks
+     * HTML Attribute: labelposition
+     */
+    labelPosition: SwitchLabelPosition | undefined;
+}
 
 /**
- * Styles for Switch
+ * SwitchLabelPosition Constants
  * @public
  */
-export declare const switchStyles: (context: ElementDefinitionContext, definition: SwitchOptions) => ElementStyles;
-
-export { Tab }
-
-export { TabPanel }
+export declare const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
 
 /**
- * Styles for TabPanel
+ * Applies label position
  * @public
  */
-export declare const tabPanelStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
 
-export { Tabs }
+export declare const switchStyles: ElementStyles;
 
-/**
- * Styles for Tabs
- * @public
- */
-export declare const tabsStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const switchTemplate: ElementViewTemplate<Switch>;
 
 /**
- * Styles for Tab
+ * The base class used for constructing a fluent-text custom element
  * @public
  */
-export declare const tabStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * The Fluent TextArea class
- * @internal
- */
-export declare class TextArea extends TextArea_2 {
+declare class Text_2 extends FASTElement {
     /**
-     * The appearance of the element.
+     * The text will not wrap
+     * NOTE: In Fluent UI React v9 this is "wrap"
+     * Boolean attributes which default to true in HTML can't be switched off in the DOM
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: nowrap
      */
-    appearance: TextAreaAppearance;
+    nowrap: boolean;
     /**
-     * @internal
+     * The text truncates
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: truncate
      */
-    appearanceChanged(oldValue: TextAreaAppearance, newValue: TextAreaAppearance): void;
+    truncate: boolean;
     /**
-     * @internal
+     * The text style is italic
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: italic
      */
-    connectedCallback(): void;
-}
-
-/**
- * Text area appearances
- * @public
- */
-export declare type TextAreaAppearance = 'filled' | 'outline';
-
-/**
- * Styles for TextArea
- * @public
- */
-export declare const textAreaStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/**
- * The Fluent text field class
- * @internal
- */
-export declare class TextField extends TextField_2 {
+    italic: boolean;
     /**
-     * The appearance of the element.
+     * The text style is underline
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: underline
      */
-    appearance: TextFieldAppearance;
+    underline: boolean;
     /**
-     * @internal
+     * The text style is strikethrough
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: strikethrough
      */
-    appearanceChanged(oldValue: TextFieldAppearance, newValue: TextFieldAppearance): void;
+    strikethrough: boolean;
     /**
-     * @internal
+     * An text can take up the width of its container.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+    /**
+     * THe Text size
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     *
+     */
+    size?: TextSize;
+    /**
+     * THe Text font
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: font
+     */
+    font?: TextFont;
+    /**
+     * THe Text weight
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: weight
+     */
+    weight?: TextWeight;
+    /**
+     * THe Text align
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: align
      */
-    connectedCallback(): void;
+    align?: TextAlign;
 }
+export { Text_2 as Text }
 
 /**
- * Text field appearances
+ * TextAlign Constants
  * @public
  */
-export declare type TextFieldAppearance = 'filled' | 'outline';
+export declare const TextAlign: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
 
 /**
- * Styles for TextField
+ * Aligns the content
  * @public
  */
-export declare const textFieldStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare type TextAlign = ValuesOf<typeof TextAlign>;
 
 /**
- * The Fluent toolbar class
- * @internal
+ * The Fluent Text Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text\>
  */
-export declare class Toolbar extends Toolbar_2 {
-}
+export declare const TextDefinition: FASTElementDefinition<typeof Text_2>;
 
 /**
- * The Fluent tooltip class
- * @internal
+ * TextFont Constants
+ * @public
  */
-export declare class Tooltip extends Tooltip_2 {
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-}
-
-export { TreeItem }
+export declare const TextFont: {
+    readonly base: "base";
+    readonly numeric: "numeric";
+    readonly monospace: "monospace";
+};
 
 /**
- * Styles for TreeItem
+ * Applies font family to the content
  * @public
  */
-export declare const treeItemStyles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;
-
-export { TreeView }
+export declare type TextFont = ValuesOf<typeof TextFont>;
 
 /**
- * Styles for TreeView
+ * TextSize constants
  * @public
  */
-export declare const treeViewStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-
-/** @public */
-export declare const typeRampBase: CSSDirective;
-
-/** @public */
-export declare const typeRampBaseFontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampBaseFontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampBaseLineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampMinus1: CSSDirective;
-
-/** @public */
-export declare const typeRampMinus1FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampMinus1FontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampMinus1LineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampMinus2: CSSDirective;
-
-/** @public */
-export declare const typeRampMinus2FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampMinus2FontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampMinus2LineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus1: CSSDirective;
-
-/** @public */
-export declare const typeRampPlus1FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus1FontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus1LineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus2: CSSDirective;
-
-/** @public */
-export declare const typeRampPlus2FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus2FontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus2LineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus3: CSSDirective;
-
-/** @public */
-export declare const typeRampPlus3FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus3FontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus3LineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus4: CSSDirective;
-
-/** @public */
-export declare const typeRampPlus4FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus4FontVariations: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus4LineHeight: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus5: CSSDirective;
-
-/** @public */
-export declare const typeRampPlus5FontSize: CSSDesignToken<string>;
-
-/** @public */
-export declare const typeRampPlus5FontVariations: CSSDesignToken<string>;
+export declare const TextSize: {
+    readonly _100: "100";
+    readonly _200: "200";
+    readonly _300: "300";
+    readonly _400: "400";
+    readonly _500: "500";
+    readonly _600: "600";
+    readonly _700: "700";
+    readonly _800: "800";
+    readonly _900: "900";
+    readonly _1000: "1000";
+};
 
-/** @public */
-export declare const typeRampPlus5LineHeight: CSSDesignToken<string>;
+/**
+ * The type for TextSize
+ * The font size and line height based on the theme tokens
+ * @public
+ */
+export declare type TextSize = ValuesOf<typeof TextSize>;
 
-/** @public */
-export declare const typeRampPlus6: CSSDirective;
+/** Text styles
+ * @public
+ */
+export declare const TextStyles: ElementStyles;
 
-/** @public */
-export declare const typeRampPlus6FontSize: CSSDesignToken<string>;
+/**
+ * @internal
+ */
+export declare const TextTemplate: ElementViewTemplate<Text_2>;
 
-/** @public */
-export declare const typeRampPlus6FontVariations: CSSDesignToken<string>;
+/**
+ * TextWeight Constants
+ * @public
+ */
+export declare const TextWeight: {
+    readonly medium: "medium";
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+};
 
-/** @public */
-export declare const typeRampPlus6LineHeight: CSSDesignToken<string>;
+/**
+ * Applies font weight to the content
+ * @public
+ */
+export declare type TextWeight = ValuesOf<typeof TextWeight>;
 
 export { }