@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.2

package/dist/web-components.d.ts

@@ -1,21 +1,40 @@
-import { CSSDesignToken } from '@microsoft/fast-foundation';
-import { DividerOrientation } from '@microsoft/fast-foundation';
-import { DividerRole } from '@microsoft/fast-foundation';
+import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
+import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
+import { CSSDesignToken } from '@microsoft/fast-foundation/design-token.js';
+import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
+import { DividerRole } from '@microsoft/fast-foundation/divider.js';
 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 { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
+import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
+import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
+import { FASTButton } from '@microsoft/fast-foundation/button.js';
+import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
+import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
 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 { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+import { FASTMenuItem } from '@microsoft/fast-foundation/menu-item.js';
+import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
+import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
+import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
+import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
+import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
+import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
+import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
+import { MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
+import { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
+import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
+import type { StaticallyComposableHTML } from '@microsoft/fast-foundation/utilities.js';
+import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
 import type { Theme } from '@fluentui/tokens';
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 
 /**
  * The base class used for constructing a fluent-accordion custom element
@@ -120,6 +139,137 @@ export declare const accordionStyles: ElementStyles;
 
 export declare const accordionTemplate: ElementViewTemplate<Accordion>;
 
+/**
+ * The base class used for constructing a fluent-anchor-button custom element
+ * @public
+ */
+export declare class AnchorButton extends FASTAnchor {
+    /**
+     * The appearance the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: AnchorButtonAppearance | undefined;
+    /**
+     * The shape the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: AnchorButtonShape | undefined;
+    /**
+     * The size the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: AnchorButtonSize;
+    /**
+     * The anchor button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * The anchor button is disabled
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabled?: boolean;
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The anchor button is disabled but focusable
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabledFocusable?: boolean;
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    /**
+     * Prevents disabledFocusable click events
+     */
+    private handleDisabledFocusableClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+/**
+ * Anchor Button Appearance constants
+ * @public
+ */
+export declare const AnchorButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * An Anchor Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
+
+/**
+ * The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
+ * {@link @microsoft/fast-foundation#anchorTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-anchor-button\>
+ */
+export declare const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
+
+export { AnchorButtonOptions }
+
+/**
+ * An Anchor Button can be square, circular or rounded.
+ * @public
+ */
+export declare const AnchorButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * An Anchor Button can be square, circular or rounded
+ * @public
+ */
+export declare type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
+
+/**
+ * An Anchor Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const AnchorButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * An Anchor Button can be on of several preset sizes.
+ * @public
+ */
+export declare type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
+
 /**
  * The base class used for constructing a fluent-avatar custom element
  * @public
@@ -543,6 +693,219 @@ export declare const borderRadiusSmall: CSSDesignToken<string>;
 
 export declare const borderRadiusXLarge: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-button custom element
+ * @public
+ */
+export declare class Button extends FASTButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: ButtonAppearance | undefined;
+    /**
+     * The shape the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ButtonShape | undefined;
+    /**
+     * The size the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: ButtonSize;
+    /**
+     * The button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * The button is disabled but focusable
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabledFocusable?: boolean;
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    /**
+     * Prevents disabledFocusable click events
+     */
+    private handleDisabledFocusableClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+/**
+ * ButtonAppearance constants
+ * @public
+ */
+export declare const ButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+
+/**
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
+
+export { ButtonOptions }
+export { ButtonOptions as CompoundButtonOptions }
+export { ButtonOptions as MenuButtonOptions }
+export { ButtonOptions as ToggleButtonOptions }
+
+/**
+ * A Button can be square, circular or rounded.
+ * @public
+ */
+export declare const ButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Button can be square, circular or rounded
+ * @public
+ */
+export declare type ButtonShape = ValuesOf<typeof ButtonShape>;
+
+/**
+ * A Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const ButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Button can be on of several preset sizes.
+ * @public
+ */
+export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const ButtonTemplate: ElementViewTemplate<Button>;
+
+/**
+ * The base class used for constucting a fluent checkbox custom element
+ * @public
+ */
+export declare class Checkbox extends FASTCheckbox {
+    /**
+     * Sets shape of the checkbox.
+     *
+     * @public
+     * @default 'square'
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: CheckboxShape;
+    /**
+     * Sets size of the checkbox.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: CheckboxSize;
+    /**
+     * Sets position of the label relative to the input
+     *
+     * @public
+     * @default 'after'
+     * @remarks
+     * HTML Attribute: label-position
+     */
+    labelPosition?: CheckboxLabelPosition;
+}
+
+/**
+ * The Fluent Checkbox Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-checkbox\>
+ */
+export declare const CheckboxDefinition: FASTElementDefinition<typeof Checkbox>;
+
+/**
+ * Checkbox label position
+ * @public
+ */
+export declare const CheckboxLabelPosition: {
+    readonly before: "before";
+    readonly after: "after";
+};
+
+export declare type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
+
+/**
+ * Checkbox shape
+ * @public
+ */
+export declare const CheckboxShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+
+export declare type CheckboxShape = ValuesOf<typeof CheckboxShape>;
+
+/**
+ * Checkbox size
+ * @public
+ */
+export declare const CheckboxSize: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+export declare type CheckboxSize = ValuesOf<typeof CheckboxSize>;
+
+/** Checkbox styles
+ *
+ * @public
+ */
+export declare const CheckboxStyles: ElementStyles;
+
+/**
+ * Template for the Checkbox component
+ * @public
+ */
+export declare const CheckboxTemplate: ElementViewTemplate<Checkbox>;
+
 export declare const colorBackgroundOverlay: CSSDesignToken<string>;
 
 export declare const colorBrandBackground: CSSDesignToken<string>;
@@ -1138,33 +1501,112 @@ export declare const colorTransparentStrokeDisabled: CSSDesignToken<string>;
 export declare const colorTransparentStrokeInteractive: CSSDesignToken<string>;
 
 /**
- * The base class used for constructing a fluent-badge custom element
+ * The base class used for constructing a fluent-compound-button 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
-     */
+export declare class CompoundButton extends Button {
+}
+
+/**
+ * Compound Button Appearance constants
+ * @public
+ */
+export declare const CompoundButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Compound Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
+
+/**
+ * The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-comopund-button\>
+ */
+export declare const CompoundButtonDefinition: FASTElementDefinition<typeof CompoundButton>;
+
+/**
+ * A Compound Button can be square, circular or rounded.
+ * @public
+ */
+export declare const CompoundButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Compound Button can be square, circular or rounded
+ * @public
+ */
+export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
+
+/**
+ * A Compound Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const CompoundButtonSize: {
+    readonly small: "small";
+    /**
+     * A Compound Button can be on of several preset sizes.
+     * @public
+     */
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Compound Button can be on of several preset sizes.
+ * @public
+ */
+export declare type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
+
+export declare const CompoundButtonStyles: ElementStyles;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
+
+/**
+ * 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.
@@ -1342,15 +1784,6 @@ 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
  *
@@ -1452,6 +1885,12 @@ export declare const durationUltraFast: CSSDesignToken<string>;
 
 export declare const durationUltraSlow: CSSDesignToken<string>;
 
+export declare const FluentDesignSystem: Readonly<{
+    prefix: "fluent";
+    shadowRootMode: "open";
+    registry: CustomElementRegistry;
+}>;
+
 export declare const fontFamilyBase: CSSDesignToken<string>;
 
 export declare const fontFamilyMonospace: CSSDesignToken<string>;
@@ -1585,6 +2024,93 @@ export declare const ImageStyles: ElementStyles;
  */
 export declare const ImageTemplate: ElementViewTemplate<Image_2>;
 
+/**
+ * The base class used for constructing a fluent-label custom element
+ * @public
+ */
+export declare class Label extends FASTElement {
+    /**
+     * 	Specifies font size of a label
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: LabelSize;
+    /**
+     * 	Specifies font weight of a label
+     *
+     * @public
+     * @default 'regular'
+     * @remarks
+     * HTML Attribute: weight
+     */
+    weight?: LabelWeight;
+    /**
+     * 	Specifies styles for label when associated input is disabled
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * 	Specifies styles for label when associated input is a required field
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: required
+     */
+    required: boolean;
+}
+
+/**
+ * The Fluent Label Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-label\>
+ */
+export declare const LabelDefinition: FASTElementDefinition<typeof Label>;
+
+/**
+ * A Labels font size can be small, medium, or large
+ */
+declare const LabelSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * Applies font size to label
+ * @public
+ */
+declare type LabelSize = ValuesOf<typeof LabelSize>;
+
+/** Label styles
+ * @public
+ */
+export declare const LabelStyles: ElementStyles;
+
+export declare const LabelTemplate: ElementViewTemplate<Label>;
+
+/**
+ * A label can have a font weight of regular or strong
+ */
+declare const LabelWeight: {
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+};
+
+/**
+ * Applies font weight to label
+ * @public
+ */
+declare type LabelWeight = ValuesOf<typeof LabelWeight>;
+
 export declare const lineHeightBase100: CSSDesignToken<string>;
 
 export declare const lineHeightBase200: CSSDesignToken<string>;
@@ -1605,6 +2131,135 @@ export declare const lineHeightHero800: CSSDesignToken<string>;
 
 export declare const lineHeightHero900: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-menu-button custom element
+ * @public
+ */
+export declare class MenuButton extends Button {
+}
+
+/**
+ * Menu Button Appearance constants
+ * @public
+ */
+export declare const MenuButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Menu Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
+
+/**
+ * The Fluent Menu Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export declare const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
+
+/**
+ * A Menu Button can be square, circular or rounded.
+ * @public
+ */
+export declare const MenuButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Menu Button can be square, circular or rounded
+ * @public
+ */
+export declare type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
+
+/**
+ * A Menu Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const MenuButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Menu Button can be on of several preset sizes.
+ * @public
+ */
+export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
+
+/**
+ * The base class used for constructing a fluent-menu-item custom element
+ * @public
+ */
+export declare class MenuItem extends FASTMenuItem {
+}
+
+export declare type MenuItemColumnCount = 0 | 1 | 2;
+
+/**
+ * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
+ * {@link @microsoft/fast-foundation#menuItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu-item>
+ */
+export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
+
+export { MenuItemRole }
+
+/** MenuItem styles
+ * @public
+ */
+export declare const MenuItemStyles: ElementStyles;
+
+export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
+
+/**
+ * The base class used for constructing a fluent-menu-list custom element
+ * @public
+ */
+export declare class MenuList extends FASTMenu {
+    protected setItems(): void;
+    private static elementIndent;
+}
+
+/**
+ * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
+ * {@link @microsoft/fast-foundation#menuTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu-list>
+ */
+export declare const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
+
+/** MenuList styles
+ * @public
+ */
+export declare const MenuListStyles: ElementStyles;
+
+export declare const MenuListTemplate: ElementViewTemplate<MenuList>;
+
 /**
  * The base class used for constructing a fluent-progress-bar custom element
  * @public
@@ -1660,7 +2315,7 @@ export declare const ProgressBarShape: {
  */
 export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 
-/** Text styles
+/** ProgressBar styles
  * @public
  */
 export declare const ProgressBarStyles: ElementStyles;
@@ -1698,12 +2353,72 @@ export declare const ProgressBarValidationState: {
  */
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
+/**
+ * The base class used for constructing a fluent-radio custom element
+ * @public
+ */
+export declare class Radio extends FASTRadio {
+}
+
+/**
+ * The Fluent Radio Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio\>
+ */
+export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
+
+/**
+ * The base class used for constructing a fluent-radio-group custom element
+ * @public
+ */
+export declare class RadioGroup extends FASTRadioGroup {
+    /**
+     * sets radio layout styles
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: stacked
+     */
+    stacked: boolean;
+}
+
+/**
+ * The Fluent RadioGroup Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio-group\>
+ */
+export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
+
+export { RadioGroupOrientation }
+
+/** RadioGroup styles
+ * @public
+ */
+export declare const RadioGroupStyles: ElementStyles;
+
+export declare const RadioGroupTemplate: ElementViewTemplate<RadioGroup>;
+
+/** Radio styles
+ * @public
+ */
+export declare const RadioStyles: ElementStyles;
+
+export declare const RadioTemplate: ElementViewTemplate<Radio>;
+
 /**
  * Sets the theme tokens on defaultNode.
  * @param theme Flat object of theme token values.
  */
 export declare const setTheme: (theme: Theme) => void;
 
+export declare const setThemeFor: (element: FASTElement, theme: Theme) => void;
+
 export declare const shadow16: CSSDesignToken<string>;
 
 export declare const shadow16Brand: CSSDesignToken<string>;
@@ -1728,6 +2443,63 @@ export declare const shadow8: CSSDesignToken<string>;
 
 export declare const shadow8Brand: CSSDesignToken<string>;
 
+/**
+ * The base class used for constructing a fluent-slider custom element
+ * @public
+ */
+export declare class Slider extends FASTSlider {
+    /**
+     * The size of the slider
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SliderSize;
+    handleChange(source: any, propertyName: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private stepStyles?;
+    /**
+     * Handles changes to step styling based on the step value
+     * NOTE: This function is not a changed callback, stepStyles is not observable
+     */
+    private handleStepStyles;
+}
+
+/**
+ * The Fluent Slider Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-slider\>
+ */
+export declare const SliderDefinition: FASTElementDefinition<typeof Slider>;
+
+export { SliderOrientation }
+
+/**
+ * SliderSize Constants
+ * @public
+ */
+export declare const SliderSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+
+/**
+ * Applies bar height to the slider rail and diameter to the slider thumbs
+ * @public
+ */
+export declare type SliderSize = ValuesOf<typeof SliderSize>;
+
+/** Text styles
+ * @public
+ */
+export declare const SliderStyles: ElementStyles;
+
+export declare const SliderTemplate: ElementViewTemplate<FASTSlider>;
+
 export declare const spacingHorizontalL: CSSDesignToken<string>;
 
 export declare const spacingHorizontalM: CSSDesignToken<string>;
@@ -1854,6 +2626,10 @@ export declare const strokeWidthThickest: CSSDesignToken<string>;
 
 export declare const strokeWidthThin: CSSDesignToken<string>;
 
+declare const styles: ElementStyles;
+export { styles as ButtonStyles }
+export { styles as MenuButtonStyles }
+
 export declare class Switch extends FASTSwitch {
     /**
      * The label position of the switch
@@ -1866,6 +2642,15 @@ export declare class Switch extends FASTSwitch {
     labelPosition: SwitchLabelPosition | undefined;
 }
 
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const SwitchDefinition: FASTElementDefinition<typeof Switch>;
+
 /**
  * SwitchLabelPosition Constants
  * @public
@@ -1882,9 +2667,142 @@ export declare const SwitchLabelPosition: {
  */
 export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
 
-export declare const switchStyles: ElementStyles;
+export declare const SwitchStyles: ElementStyles;
+
+export declare const SwitchTemplate: ElementViewTemplate<Switch>;
+
+/**
+ * Tab extends the FASTTab and is a child of the TabList
+ */
+export declare class Tab extends FASTTab {
+    private styles;
+    connectedCallback(): void;
+}
+
+export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
+
+export declare class TabPanel extends FASTTabPanel {
+}
+
+export declare const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
+
+export declare const TabPanelStyles: ElementStyles;
 
-export declare const switchTemplate: ElementViewTemplate<Switch>;
+export declare const TabPanelTemplate: ElementViewTemplate<FASTTabPanel, any>;
+
+/**
+ * TabList extends FASTTabs and is used for constructing a fluent-tab-list custom html element.
+ *
+ * @class TabList component
+ * @public
+ */
+export declare class Tabs extends FASTTabs {
+    /**
+     * activeTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private activeTabData;
+    /**
+     * previousActiveTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private previousActiveTabData;
+    /**
+     * activeTabOffset
+     * Used to position the active indicator for animations of the active indicator on active tab changes.
+     */
+    private activeTabOffset;
+    /**
+     * activeTabScale
+     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
+     */
+    private activeTabScale;
+    /**
+     * styles
+     * used in the class for storing the css variables required for animations
+     */
+    private styles;
+    /**
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
+     */
+    appearance?: TabsAppearance;
+    /**
+     * disabled
+     * Used for disabling all click and keyboard events for the tabs, child tab elements and tab panel elements. UI styling of content and tabs will appear as "grayed out."
+     */
+    disabled?: boolean;
+    /**
+     * size
+     * defaults to medium.
+     * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
+     */
+    size?: TabsSize;
+    /**
+     * calculateAnimationProperties
+     *
+     * Recalculates the active tab offset and scale.
+     * These values will be applied to css variables that control the tab active indicator position animations
+     */
+    private calculateAnimationProperties;
+    /**
+     * getSelectedTabPosition - gets the x or y coordinates of the tab
+     */
+    private getTabPosition;
+    /**
+     * getSelectedTabScale - gets the scale of the tab
+     */
+    private getTabScale;
+    /**
+     * applyUpdatedCSSValues
+     *
+     * calculates and applies updated values to CSS variables
+     * @param tab
+     */
+    private applyUpdatedCSSValues;
+    /**
+     * animationLoop
+     * runs through all the operations required for setting the tab active indicator to its starting location, ending location, and applying the animated css class to the tab.
+     * @param tab
+     */
+    private animationLoop;
+    /**
+     * setTabData
+     * sets the data from the active tab onto the class. used for making all the animation calculations for the active tab indicator.
+     */
+    private setTabData;
+    private setTabOffsetCSSVar;
+    private setTabScaleCSSVar;
+    activeidChanged(oldValue: string, newValue: string): void;
+    tabsChanged(): void;
+}
+
+export declare const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+
+export declare const TabsDefinition: FASTElementDefinition<typeof Tabs>;
+
+export { TabsOrientation }
+
+export declare const TabsSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+export declare type TabsSize = ValuesOf<typeof TabsSize>;
+
+export declare const TabsStyles: ElementStyles;
+
+export declare const TabsTemplate: ElementViewTemplate<FASTTabs, any>;
+
+export declare const TabStyles: ElementStyles;
+
+export declare const TabTemplate: ElementViewTemplate<FASTTab, any>;
 
 /**
  * The base class used for constructing a fluent-text custom element
@@ -2020,6 +2938,86 @@ export declare const TextFont: {
  */
 export declare type TextFont = ValuesOf<typeof TextFont>;
 
+/**
+ * The base class used for constructing a fluent-text-input custom element
+ * @public
+ */
+export declare class TextInput extends FASTTextField {
+    /**
+     * Defines TextInput control size
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: control-size
+     */
+    controlSize?: TextInputControlSize;
+    /**
+     * Defines TextInput appearance.
+     *
+     * @public
+     * @default 'outline'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: TextInputAppearance;
+}
+
+/**
+ * TextInput appearance constants
+ * @public
+ */
+export declare const TextInputAppearance: {
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+
+/**
+ * Applies appearance styling to TextInput
+ * @public
+ */
+export declare type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
+
+/**
+ * TextInput size constants
+ * @public
+ */
+export declare const TextInputControlSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * Applies size styling to TextInput
+ * @public
+ */
+export declare type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
+
+/**
+ * The Fluent TextInput Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text-input\>
+ */
+export declare const TextInputDefinition: FASTElementDefinition<typeof TextInput>;
+
+/** TextInput styles
+ * @public
+ */
+export declare const TextInputStyles: ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const TextInputTemplate: ElementViewTemplate<TextInput>;
+
+export { TextInputType }
+
 /**
  * TextSize constants
  * @public
@@ -2071,4 +3069,120 @@ export declare const TextWeight: {
  */
 export declare type TextWeight = ValuesOf<typeof TextWeight>;
 
+/**
+ * The base class used for constructing a fluent-toggle-button custom element
+ * @public
+ */
+export declare class ToggleButton extends Button {
+    /**
+     * Tracks whether the "checked" property has been changed.
+     * This is necessary to provide consistent behavior with
+     * normal input checkboxes
+     */
+    protected dirtyChecked: boolean;
+    /**
+     * Provides the default checkedness of the input element
+     * Passed down to proxy
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checkedAttribute: boolean;
+    protected checkedAttributeChanged(): void;
+    defaultChecked: boolean;
+    protected defaultCheckedChanged(): void;
+    /**
+     * The checked state of the control.
+     *
+     * @public
+     */
+    checked: boolean;
+    protected checkedChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * The current checkedness of the element. This property serves as a mechanism
+     * to set the `checked` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's checkedness
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentChecked: boolean;
+    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    protected handleToggleButtonClick: (e: MouseEvent) => void;
+}
+
+/**
+ * Toggle Button Appearance constants
+ * @public
+ */
+export declare const ToggleButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Toggle Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
+
+/**
+ * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-toggle-button\>
+ */
+export declare const ToggleButtonDefinition: FASTElementDefinition<typeof ToggleButton>;
+
+/**
+ * A Toggle Button can be square, circular or rounded.
+ * @public
+ */
+export declare const ToggleButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * A Toggle Button can be square, circular or rounded
+ * @public
+ */
+export declare type ToggleButtonShape = ValuesOf<typeof ToggleButtonShape>;
+
+/**
+ * A Toggle Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const ToggleButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Toggle Button can be on of several preset sizes.
+ * @public
+ */
+export declare type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
+
+export declare const ToggleButtonStyles: ElementStyles;
+
+/**
+ * The template for the ToggleButton component.
+ * @public
+ */
+export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
+
 export { }