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

package/dist/web-components.d.ts

@@ -1,3 +1,1462 @@
-export declare const empty = "";
+import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementViewTemplate } from '@microsoft/fast-element';
+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 { 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-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 colorNeutralStencil2: 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 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 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 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>;
+
+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>;
+
+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
+ */
+export declare class ProgressBar 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;
+}
+
+/**
+ * The Fluent ProgressBar Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-progress-bar\>
+ */
+export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+
+/**
+ * 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>;
+
+/**
+ * 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>;
+
+/**
+ * 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 { }