@fluentui/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/web-components.d.ts

@@ -1,3 +1,2074 @@
-export declare const empty = "";
+import { CSSDesignToken } 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 { 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';
+
+/**
+ * The base class used for constructing a fluent-accordion custom element
+ * @public
+ */
+export declare class Accordion extends FASTAccordion {
+}
+
+/**
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
+ * {@link @microsoft/fast-foundation#accordionTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion\>
+ */
+export declare const accordionDefinition: FASTElementDefinition<typeof Accordion>;
+
+/**
+ * @internal
+ */
+export declare class AccordionItem extends FASTAccordionItem {
+    /**
+     * Defines accordion header font size.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: AccordionItemSize;
+    /**
+     * Sets the width of the focus state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+    /**
+     * Sets expand and collapsed icon position.
+     *
+     * @public
+     * @default 'start'
+     * @remarks
+     * HTML Attribute: expandIconPosition
+     */
+    expandIconPosition?: AccordionItemExpandIconPosition;
+}
+
+/**
+ * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion-item\>
+ */
+export declare const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
+
+/**
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
+ */
+export declare const AccordionItemExpandIconPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+
+/**
+ * Applies expand/collapse icon position
+ * @public
+ */
+export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+
+/**
+ * An Accordion Item header font size can be small, medium, large, and extra-large
+ */
+export declare const AccordionItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+
+/**
+ * Applies font size to accordion header
+ * @public
+ */
+export declare type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+
+export declare const accordionItemStyles: ElementStyles;
+
+/**
+ * The template for the fluent-accordion component.
+ * @public
+ */
+export declare const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
+
+export declare const accordionStyles: ElementStyles;
+
+export declare const accordionTemplate: ElementViewTemplate<Accordion>;
+
+/**
+ * The base class used for constructing a fluent-avatar custom element
+ * @public
+ */
+export declare class Avatar extends FASTElement {
+    /**
+     * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name?: string | undefined;
+    /**
+     * Provide custom initials rather than one generated via the name
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    initials?: string | undefined;
+    /**
+     * 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
+     *
+     */
+    size?: AvatarSize | undefined;
+    /**
+     * The avatar can have a circular or square shape.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: AvatarShape | undefined;
+    /**
+     * 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
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: active
+     */
+    active?: AvatarActive | undefined;
+    /**
+     * The appearance when `active="active"`
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: AvatarAppearance | undefined;
+    /**
+     * 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: 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.
+     */
+    colorId?: AvatarNamedColor | undefined;
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor(): AvatarColor | void;
+    /**
+     * Generates and sets the initials for the template
+     * @internal
+     */
+    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")[];
+}
+
+/**
+ * The Avatar "active" state
+ */
+export declare const AvatarActive: {
+    readonly active: "active";
+    readonly inactive: "inactive";
+};
+
+/**
+ * The types of Avatar active state
+ */
+export declare type AvatarActive = ValuesOf<typeof AvatarActive>;
+
+/**
+ * The Avatar Appearance when "active"
+ */
+export declare const AvatarAppearance: {
+    readonly ring: "ring";
+    readonly shadow: "shadow";
+    readonly ringShadow: "ring-shadow";
+};
+
+/**
+ * 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";
+};
+
+/**
+ * The Avatar Color
+ */
+export declare type AvatarColor = ValuesOf<typeof AvatarColor>;
+
+/**
+ * The Fluent Avatar Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-badge\>
+ */
+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";
+};
+
+/**
+ * An avatar can be one of named colors
+ * @public
+ */
+export declare type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+
+/**
+ * The Avatar Shape
+ */
+export declare const AvatarShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+
+/**
+ * The types of Avatar Shape
+ */
+export declare type AvatarShape = ValuesOf<typeof AvatarShape>;
+
+/**
+ * The Avatar Sizes
+ * @public
+ */
+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;
+};
+
+/**
+ * A Avatar can be on of several preset sizes.
+ * @public
+ */
+export declare type AvatarSize = ValuesOf<typeof AvatarSize>;
+
+/** Avatar styles
+ * @public
+ */
+export declare const AvatarStyles: ElementStyles;
+
+export declare const AvatarTemplate: ElementViewTemplate<Avatar>;
+
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class Badge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: BadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: BadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: BadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: BadgeSize;
+}
+
+/**
+ * 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 Badge extends StartEnd {
+}
+
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+export declare const BadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+    readonly outline: "outline";
+    readonly tint: "tint";
+};
+
+/**
+ * A Badge can be filled, outline, ghost, inverted
+ * @public
+ */
+export declare type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+
+/**
+ * BadgeColor constants
+ * @public
+ */
+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";
+};
+
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
+
+/**
+ * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-badge\>
+ */
+export declare const BadgeDefinition: FASTElementDefinition<typeof Badge>;
+
+/**
+ * @internal - marking as internal update when Badge PR for start/end is in
+ */
+export declare type BadgeOptions = StartEndOptions<Badge> & {
+    defaultContent?: StaticallyComposableHTML;
+};
+
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export declare type BadgeShape = ValuesOf<typeof BadgeShape>;
+
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+
+/**
+ * A Badge can be on of several preset sizes.
+ * @public
+ */
+export declare type BadgeSize = ValuesOf<typeof BadgeSize>;
+
+/** Badge styles
+ * @public
+ */
+export declare const BadgeStyles: ElementStyles;
+
+export declare const BadgeTemplate: ElementViewTemplate<Badge>;
+
+export declare const borderRadiusCircular: CSSDesignToken<string>;
+
+export declare const borderRadiusLarge: CSSDesignToken<string>;
+
+export declare const borderRadiusMedium: CSSDesignToken<string>;
+
+export declare const borderRadiusNone: CSSDesignToken<string>;
+
+export declare const borderRadiusSmall: CSSDesignToken<string>;
+
+export declare const borderRadiusXLarge: CSSDesignToken<string>;
+
+export declare const colorBackgroundOverlay: CSSDesignToken<string>;
+
+export declare const colorBrandBackground: CSSDesignToken<string>;
+
+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>;
+
+export declare const colorPaletteBrassBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteBrassForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBrownBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteBrownBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteBrownForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteCornflowerBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteCornflowerBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteCornflowerForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteCranberryBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteCranberryBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteCranberryForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkGreenBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkGreenBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkGreenForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkOrangeForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkRedBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkRedBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteDarkRedForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteForestBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteForestBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteForestForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGoldBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGoldBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteGoldForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGrapeBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGrapeBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteGrapeForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+
+export declare const colorPaletteLavenderBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLavenderBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteLavenderForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLightGreenForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteLightTealBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLightTealBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteLightTealForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLilacBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteLilacBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteLilacForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteMagentaBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteMagentaBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteMagentaForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteMarigoldForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteMinkBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteMinkBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteMinkForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteNavyBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteNavyBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteNavyForeground2: CSSDesignToken<string>;
+
+export declare const colorPalettePeachBackground2: CSSDesignToken<string>;
+
+export declare const colorPalettePeachBorderActive: CSSDesignToken<string>;
+
+export declare const colorPalettePeachForeground2: CSSDesignToken<string>;
+
+export declare const colorPalettePinkBackground2: CSSDesignToken<string>;
+
+export declare const colorPalettePinkBorderActive: CSSDesignToken<string>;
+
+export declare const colorPalettePinkForeground2: CSSDesignToken<string>;
+
+export declare const colorPalettePlatinumBackground2: CSSDesignToken<string>;
+
+export declare const colorPalettePlatinumBorderActive: CSSDesignToken<string>;
+
+export declare const colorPalettePlatinumForeground2: CSSDesignToken<string>;
+
+export declare const colorPalettePlumBackground2: CSSDesignToken<string>;
+
+export declare const colorPalettePlumBorderActive: CSSDesignToken<string>;
+
+export declare const colorPalettePlumForeground2: CSSDesignToken<string>;
+
+export declare const colorPalettePumpkinBackground2: CSSDesignToken<string>;
+
+export declare const colorPalettePumpkinBorderActive: CSSDesignToken<string>;
+
+export declare const colorPalettePumpkinForeground2: CSSDesignToken<string>;
+
+export declare const colorPalettePurpleBackground2: CSSDesignToken<string>;
+
+export declare const colorPalettePurpleBorderActive: CSSDesignToken<string>;
+
+export declare const colorPalettePurpleForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteRedBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteRedBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteRedBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteRedBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteRedBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteRedBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteRedForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteRedForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteRedForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+
+export declare const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteRoyalBlueBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteRoyalBlueForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteSeafoamBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteSeafoamBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteSeafoamForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteSteelBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteSteelBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteSteelForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteTealBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteTealBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteTealForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowBackground1: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowBackground2: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowBackground3: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowBorder1: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowBorder2: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowBorderActive: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowForeground1: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowForeground2: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowForeground3: CSSDesignToken<string>;
+
+export declare const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+
+export declare const colorScrollbarOverlay: CSSDesignToken<string>;
+
+export declare const colorStrokeFocus1: CSSDesignToken<string>;
+
+export declare const colorStrokeFocus2: CSSDesignToken<string>;
+
+export declare const colorSubtleBackground: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundHover: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundInverted: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundInvertedHover: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundInvertedPressed: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundInvertedSelected: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundLightAlphaHover: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundLightAlphaPressed: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundLightAlphaSelected: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundPressed: CSSDesignToken<string>;
+
+export declare const colorSubtleBackgroundSelected: CSSDesignToken<string>;
+
+export declare const colorTransparentBackground: CSSDesignToken<string>;
+
+export declare const colorTransparentBackgroundHover: CSSDesignToken<string>;
+
+export declare const colorTransparentBackgroundPressed: CSSDesignToken<string>;
+
+export declare const colorTransparentBackgroundSelected: CSSDesignToken<string>;
+
+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;
+}
+
+/**
+ * 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 {
+}
+
+/**
+ * CounterBadgeAppearance constants
+ * @public
+ */
+export declare const CounterBadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+};
+
+/**
+ * A CounterBadge can have an appearance of filled or ghost
+ * @public
+ */
+export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
+
+/**
+ * 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";
+};
+
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
+
+/**
+ * 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>;
+
+/**
+ * CounterBadge options
+ * @public
+ */
+export declare type CounterBadgeOptions = BadgeOptions;
+
+/**
+ * A CounterBadge shape can be circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+};
+
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
+
+/**
+ * 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";
+};
+
+/**
+ * A CounterBadge can be on of several preset sizes.
+ * @public
+ */
+export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
+
+/** Badge styles
+ * @public
+ */
+export declare const CounterBadgeStyles: ElementStyles;
+
+/**
+ * The template for the Counter Badge component.
+ * @public
+ */
+export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
+
+export declare const curveAccelerateMax: CSSDesignToken<string>;
+
+export declare const curveAccelerateMid: CSSDesignToken<string>;
+
+export declare const curveAccelerateMin: CSSDesignToken<string>;
+
+export declare const curveDecelerateMax: CSSDesignToken<string>;
+
+export declare const curveDecelerateMid: CSSDesignToken<string>;
+
+export declare const curveDecelerateMin: CSSDesignToken<string>;
+
+export declare const curveEasyEase: CSSDesignToken<string>;
+
+export declare const curveEasyEaseMax: CSSDesignToken<string>;
+
+export declare const curveLinear: CSSDesignToken<string>;
+
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const definition: FASTElementDefinition<typeof Switch>;
+
+/**
+ * @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;
+}
+
+/**
+ * Align content within divider
+ * @public
+ */
+export declare const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
+
+/**
+ * The types for DividerAlignContent
+ * @public
+ */
+export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+
+/**
+ * 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";
+};
+
+/**
+ * The types for Appearance
+ * @public
+ */
+export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+
+/**
+ * The Fluent Divider Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-divider\>
+ */
+export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
+
+export { DividerOrientation }
+
+export { DividerRole }
+
+/** Divider styles
+ * @public
+ */
+export declare const DividerStyles: ElementStyles;
+
+/**
+ * Template for the Divider component
+ * @public
+ */
+export declare const DividerTemplate: ElementViewTemplate<Divider>;
+
+export declare const durationFast: CSSDesignToken<string>;
+
+export declare const durationFaster: CSSDesignToken<string>;
+
+export declare const durationNormal: CSSDesignToken<string>;
+
+export declare const durationSlow: CSSDesignToken<string>;
+
+export declare const durationSlower: CSSDesignToken<string>;
+
+export declare const durationUltraFast: CSSDesignToken<string>;
+
+export declare const durationUltraSlow: CSSDesignToken<string>;
+
+export declare const fontFamilyBase: CSSDesignToken<string>;
+
+export declare const fontFamilyMonospace: CSSDesignToken<string>;
+
+export declare const fontFamilyNumeric: CSSDesignToken<string>;
+
+export declare const fontSizeBase100: CSSDesignToken<string>;
+
+export declare const fontSizeBase200: CSSDesignToken<string>;
+
+export declare const fontSizeBase300: CSSDesignToken<string>;
+
+export declare const fontSizeBase400: CSSDesignToken<string>;
+
+export declare const fontSizeBase500: CSSDesignToken<string>;
+
+export declare const fontSizeBase600: CSSDesignToken<string>;
+
+export declare const fontSizeHero1000: CSSDesignToken<string>;
+
+export declare const fontSizeHero700: CSSDesignToken<string>;
+
+export declare const fontSizeHero800: CSSDesignToken<string>;
+
+export declare const fontSizeHero900: CSSDesignToken<string>;
+
+export declare const fontWeightBold: CSSDesignToken<string>;
+
+export declare const fontWeightMedium: CSSDesignToken<string>;
+
+export declare const fontWeightRegular: CSSDesignToken<string>;
+
+export declare const fontWeightSemibold: CSSDesignToken<string>;
+
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+declare class Image_2 extends FASTElement {
+    /**
+     * Image layout
+     *
+     * @public
+     * @remarks
+     * HTML attribute: block.
+     */
+    block?: boolean;
+    /**
+     * 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.
+     */
+    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";
+};
+
+/**
+ * Types for image fit
+ * @public
+ */
+export declare type ImageFit = ValuesOf<typeof ImageFit>;
+
+/**
+ * Image shape
+ * @public
+ */
+export declare const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+export declare type ImageShape = ValuesOf<typeof ImageShape>;
+
+/** Image styles
+ *
+ * @public
+ */
+export declare const ImageStyles: ElementStyles;
+
+/**
+ * Template for the Image component
+ * @public
+ */
+export declare const ImageTemplate: ElementViewTemplate<Image_2>;
+
+export declare const lineHeightBase100: CSSDesignToken<string>;
+
+export declare const lineHeightBase200: CSSDesignToken<string>;
+
+export declare const lineHeightBase300: CSSDesignToken<string>;
+
+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>;
+
+/**
+ * The base class used for constructing a fluent-progress-bar custom element
+ * @public
+ */
+declare class ProgressBar_2 extends FASTProgress {
+    /**
+     * The thickness of the progress bar
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: thickness
+     */
+    thickness?: ProgressBarThickness;
+    /**
+     * The shape of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ProgressBarShape;
+    /**
+     * The validation state of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: validation-state
+     */
+    validationState: ProgressBarValidationState | null;
+}
+export { ProgressBar_2 as ProgressBar }
+
+/**
+ * The Fluent ProgressBar Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-progress-bar\>
+ */
+export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
+
+/**
+ * ProgressBarShape Constants
+ * @public
+ */
+export declare const ProgressBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * Applies bar shape to the content
+ * @public
+ */
+export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
+
+/** Text styles
+ * @public
+ */
+export declare const ProgressBarStyles: ElementStyles;
+
+export declare const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
+
+/**
+ * ProgressBarThickness Constants
+ * @public
+ */
+export declare const ProgressBarThickness: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * Applies bar thickness to the content
+ * @public
+ */
+export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
+
+/**
+ * ProgressBarValidationState Constants
+ * @public
+ */
+export declare const ProgressBarValidationState: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+
+/**
+ * Applies validation state to the content
+ * @public
+ */
+export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+
+/**
+ * Sets the theme tokens on defaultNode.
+ * @param theme Flat object of theme token values.
+ */
+export declare const setTheme: (theme: Theme) => void;
+
+export declare const shadow16: CSSDesignToken<string>;
+
+export declare const shadow16Brand: CSSDesignToken<string>;
+
+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 base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class Spinner extends FASTProgressRing {
+    /**
+     * The size of the spinner
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SpinnerSize;
+    /**
+     * The appearance of the spinner
+     * @public
+     * @default 'primary'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: SpinnerAppearance;
+}
+
+/**
+ * SpinnerAppearance constants
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
+
+/**
+ * A Spinner's appearance can be either primary or inverted
+ * @public
+ */
+export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+
+/**
+ * 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 SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
+
+/**
+ * SpinnerSize constants
+ * @public
+ */
+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";
+};
+
+/**
+ * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
+ * @public
+ */
+export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;
+
+export declare const SpinnerStyles: ElementStyles;
+
+export declare const SpinnerTemplate: ElementViewTemplate<Spinner>;
+
+export declare const strokeWidthThick: CSSDesignToken<string>;
+
+export declare const strokeWidthThicker: CSSDesignToken<string>;
+
+export declare const strokeWidthThickest: CSSDesignToken<string>;
+
+export declare const strokeWidthThin: CSSDesignToken<string>;
+
+export declare class Switch extends FASTSwitch {
+    /**
+     * The label position of the switch
+     *
+     * @public
+     * @default 'after'
+     * @remarks
+     * HTML Attribute: labelposition
+     */
+    labelPosition: SwitchLabelPosition | undefined;
+}
+
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+export declare const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+
+/**
+ * Applies label position
+ * @public
+ */
+export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
+
+export declare const switchStyles: ElementStyles;
+
+export declare const switchTemplate: ElementViewTemplate<Switch>;
+
+/**
+ * The base class used for constructing a fluent-text custom element
+ * @public
+ */
+declare class Text_2 extends FASTElement {
+    /**
+     * 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: nowrap
+     */
+    nowrap: boolean;
+    /**
+     * The text truncates
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: truncate
+     */
+    truncate: boolean;
+    /**
+     * The text style is italic
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: italic
+     */
+    italic: boolean;
+    /**
+     * The text style is underline
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: underline
+     */
+    underline: boolean;
+    /**
+     * The text style is strikethrough
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: strikethrough
+     */
+    strikethrough: boolean;
+    /**
+     * 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
+     */
+    align?: TextAlign;
+}
+export { Text_2 as Text }
+
+/**
+ * TextAlign Constants
+ * @public
+ */
+export declare const TextAlign: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
+
+/**
+ * Aligns the content
+ * @public
+ */
+export declare type TextAlign = ValuesOf<typeof TextAlign>;
+
+/**
+ * The Fluent Text Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text\>
+ */
+export declare const TextDefinition: FASTElementDefinition<typeof Text_2>;
+
+/**
+ * TextFont Constants
+ * @public
+ */
+export declare const TextFont: {
+    readonly base: "base";
+    readonly numeric: "numeric";
+    readonly monospace: "monospace";
+};
+
+/**
+ * Applies font family to the content
+ * @public
+ */
+export declare type TextFont = ValuesOf<typeof TextFont>;
+
+/**
+ * TextSize constants
+ * @public
+ */
+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";
+};
+
+/**
+ * The type for TextSize
+ * The font size and line height based on the theme tokens
+ * @public
+ */
+export declare type TextSize = ValuesOf<typeof TextSize>;
+
+/** Text styles
+ * @public
+ */
+export declare const TextStyles: ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const TextTemplate: ElementViewTemplate<Text_2>;
+
+/**
+ * TextWeight Constants
+ * @public
+ */
+export declare const TextWeight: {
+    readonly medium: "medium";
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+};
+
+/**
+ * Applies font weight to the content
+ * @public
+ */
+export declare type TextWeight = ValuesOf<typeof TextWeight>;
 
 export { }