@fluentui/web-components 3.0.0-beta.47 → 3.0.0-beta.49

package/dist/web-components.d.ts

@@ -11,7 +11,6 @@ import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
-import type { Theme } from '@fluentui/tokens';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 /**
@@ -446,47 +445,12 @@ export declare const AnchorTarget: {
 export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
 
 /**
- * The base class used for constructing a fluent-avatar custom element
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
  * @public
  */
-export declare class Avatar extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * 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;
+export declare class Avatar extends BaseAvatar {
     /**
      * The avatar can have a circular or square shape.
      *
@@ -495,17 +459,6 @@ export declare class Avatar extends FASTElement {
      * 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"`
      *
@@ -514,51 +467,6 @@ export declare class Avatar extends FASTElement {
      * 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 | undefined;
-    /**
-     * 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;
-    /**
-     * Holds the current color state
-     */
-    private currentColor;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Handles changes to observable properties
-     * @internal
-     * @param source - the source of the change
-     * @param propertyName - the property name being changed
-     */
-    handleChange(source: any, propertyName: string): void;
-    /**
-     * Sets the data-color attribute used for the visual presentation
-     * @internal
-     */
-    generateColor(): 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")[];
 }
 
 /**
@@ -1039,6 +947,106 @@ declare class BaseAnchor extends FASTElement {
     private createProxyElement;
 }
 
+/**
+ * The base class used for constructing a fluent-avatar custom element
+ * @public
+ */
+export declare class BaseAvatar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * 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;
+    /**
+     * 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 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 | undefined;
+    /**
+     * 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;
+    /**
+     * Holds the current color state
+     */
+    private currentColor;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor(): 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")[];
+}
+
 /**
  * A Button Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | `<button>`} element.
@@ -1617,55 +1625,141 @@ export declare class BaseDivider extends FASTElement {
 }
 
 /**
- * A Tabs component that wraps a collection of tab and tab panel elements.
+ * A Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
  * @public
  */
-declare class BaseTabs extends FASTElement {
-    /**
-     * The orientation
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
-     */
-    orientation: TabsOrientation;
+export declare class BaseProgressBar extends FASTElement {
     /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
      * @internal
      */
-    orientationChanged(): void;
+    elementInternals: ElementInternals;
     /**
-     * The id of the active tab
-     *
+     * The validation state of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: activeid
+     * HTML Attribute: `validation-state`
      */
-    activeid: string;
+    validationState: ProgressBarValidationState | null;
     /**
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
+    /**
+     * The value of the progress
      * @internal
+     * HTML Attribute: `value`
      */
-    activeidChanged(oldValue: string, newValue: string): void;
+    value?: number;
     /**
+     * Updates the percent complete when the `value` property changes.
+     *
      * @internal
      */
-    tabs: HTMLElement[];
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
     /**
+     * The minimum value
      * @internal
+     * HTML Attribute: `min`
      */
-    tabsChanged(): void;
+    min?: number;
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
     /**
+     * The maximum value
      * @internal
+     * HTML Attribute: `max`
      */
-    tabpanels: HTMLElement[];
+    max?: number;
     /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
      * @internal
      */
-    tabpanelsChanged(): void;
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
     /**
-     * A reference to the active tab
-     * @public
+     * Indicates progress in %
+     * @internal
      */
-    activetab: HTMLElement;
+    get percentComplete(): number;
+    constructor();
+}
+
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class BaseSpinner extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+}
+
+/**
+ * A Tabs component that wraps a collection of tab and tab panel elements.
+ *
+ * @public
+ */
+declare class BaseTabs extends FASTElement {
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TabsOrientation;
+    /**
+     * @internal
+     */
+    orientationChanged(): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabsChanged(): void;
+    /**
+     * @internal
+     */
+    tabpanels: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
     private prevActiveTabIndex;
     private activeTabIndex;
     private tabIds;
@@ -1706,159 +1800,541 @@ declare class BaseTabs extends FASTElement {
 }
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
- * @public
- */
-export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
- * @public
- */
-export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
- * @public
- */
-export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
- * @public
- */
-export declare const borderRadiusNone = "var(--borderRadiusNone)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
- * @public
- */
-export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
- * @public
- */
-export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
-
-/**
- * A Button Custom HTML Element.
- * Based on BaseButton and includes style and layout specific attributes
+ * A Text Input Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
  *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot - The default slot for button content
+ * @csspart label - The internal `<label>` element
+ * @csspart root - the root container for the internal control
+ * @csspart control - The internal `<input>` control
  * @public
  */
-export declare class Button extends BaseButton {
+export declare class BaseTextInput extends FASTElement {
     /**
-     * Indicates the styled appearance of the button.
+     * Indicates the element's autocomplete state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `appearance`
+     * HTML Attribute: `autocomplete`
      */
-    appearance?: ButtonAppearance;
+    autocomplete?: string;
     /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
+     * Indicates that the element should get focus after the page finishes loading.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autofocus`
      */
-    appearanceChanged(prev: ButtonAppearance | undefined, next: ButtonAppearance | undefined): void;
+    autofocus: boolean;
     /**
-     * The shape of the button.
+     * The default slotted content. This is the content that appears in the text field label.
+     *
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * Updates the control label visibility based on the presence of default slotted content.
+     *
+     * @internal
+     */
+    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * Sets the directionality of the element to be submitted with form data.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `shape`
+     * HTML Attribute: `dirname`
      */
-    shape?: ButtonShape;
+    dirname?: string;
     /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    shapeChanged(prev: ButtonShape | undefined, next: ButtonShape | undefined): void;
+    disabled?: boolean;
     /**
-     * The size of the button.
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `size`
+     * HTML Attribute: `form`
      */
-    size?: ButtonSize;
+    formAttribute?: string;
     /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
+     * The initial value of the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
      */
-    sizeChanged(prev: ButtonSize | undefined, next: ButtonSize | undefined): void;
+    initialValue: string;
     /**
-     * Indicates that the button should only display as an icon with no text content.
+     * Sets the value of the element to the initial value.
+     *
+     * @internal
+     */
+    initialValueChanged(): void;
+    /**
+     * Allows associating a `<datalist>` to the element by ID.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `icon-only`
+     * HTML Attribute: `list`
      */
-    iconOnly: boolean;
+    list: string;
     /**
-     * Handles changes to icon only custom states
-     * @param prev - the previous state
-     * @param next - the next state
+     * The maximum number of characters a user can enter.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `maxlength`
      */
-    iconOnlyChanged(prev: boolean, next: boolean): void;
-}
-
-/**
- * @internal
- * @privateRemarks
- * Mark internal because exporting class and interface of the same name confuses API documenter.
- * TODO: https://github.com/microsoft/fast/issues/3317
- */
-export declare interface Button extends StartEnd {
-}
-
-/**
- * ButtonAppearance constants
- * @public
- */
-export declare const ButtonAppearance: {
-    readonly primary: "primary";
-    readonly outline: "outline";
-    readonly subtle: "subtle";
-    readonly transparent: "transparent";
-};
-
-/**
- * A Button can be secondary, primary, outline, subtle, transparent
- * @public
- */
-export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
-
-/**
- * The definition for the Fluent Button component.
- *
- * @public
- * @remarks
- * HTML Element: `<fluent-button>`
- */
-export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
-
-/**
- * Button `formtarget` attribute values.
- * @public
- */
-export declare const ButtonFormTarget: {
-    readonly blank: "_blank";
-    readonly self: "_self";
-    readonly parent: "_parent";
-    readonly top: "_top";
-};
-
-/**
- * Types for the `formtarget` attribute values.
- * @public
- */
-export declare type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;
-
-/**
+    maxlength: number;
+    /**
+     * The minimum number of characters a user can enter.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `minlength`
+     */
+    minlength: number;
+    /**
+     * Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple | `multiple`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `multiple`
+     */
+    multiple: boolean;
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * A regular expression that the value must match to pass validation.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `pattern`
+     */
+    pattern: string;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `placeholder`
+     * This attribute is not a valid substitute for a label.
+     */
+    placeholder: string;
+    /**
+     * When true, the control will be immutable by user interaction.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `readonly`
+     */
+    readOnly?: boolean;
+    /**
+     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
+     *
+     * @internal
+     */
+    readOnlyChanged(): void;
+    /**
+     * The element's required attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
+     */
+    required: boolean;
+    /**
+     * Syncs the element's internal `aria-required` state with the `required` attribute.
+     *
+     * @param previous - the previous required state
+     * @param next - the current required state
+     *
+     * @internal
+     */
+    requiredChanged(previous: boolean, next: boolean): void;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size: number;
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `spellcheck`
+     */
+    spellcheck: boolean;
+    /**
+     * Allows setting a type or mode of text.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
+     */
+    type: TextInputType;
+    /**
+     * The current value of the input.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * A reference to the internal input element.
+     *
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * A reference to the internal label element.
+     *
+     * @internal
+     */
+    controlLabel: HTMLLabelElement;
+    /**
+     * Indicates that the value has been changed by the user.
+     *
+     * @internal
+     */
+    private dirtyValue;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static readonly formAssociated = true;
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * The current value of the input.
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Determines if the control can be submitted for constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * The associated form element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Handles the internal control's `keypress` event.
+     *
+     * @internal
+     */
+    beforeinputHandler(e: InputEvent): boolean | void;
+    /**
+     * Change event handler for inner control.
+     *
+     * @internal
+     * @privateRemarks
+     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
+     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+     */
+    changeHandler(e: InputEvent): boolean | void;
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Clicks the inner control when the component is clicked.
+     *
+     * @param e - the event object
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    connectedCallback(): void;
+    /**
+     * Focuses the inner control when the component is focused.
+     *
+     * @param e - the event object
+     * @public
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Resets the value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Handles implicit form submission when the user presses the "Enter" key.
+     *
+     * @internal
+     */
+    private implicitSubmit;
+    /**
+     * Handles the internal control's `input` event.
+     *
+     * @internal
+     */
+    inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Handles the internal control's `keydown` event.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Selects all the text in the text field.
+     *
+     * @public
+     * @privateRemarks
+     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
+     * emitting a `select` event whenever the internal control emits a `select` event
+     *
+     */
+    select(): void;
+    /**
+     * Sets the custom validity message.
+     * @param message - The message to set
+     *
+     * @public
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
+     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+}
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
+ * @public
+ */
+export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
+ * @public
+ */
+export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
+ * @public
+ */
+export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
+ * @public
+ */
+export declare const borderRadiusNone = "var(--borderRadiusNone)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
+ * @public
+ */
+export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
+ * @public
+ */
+export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
+
+/**
+ * A Button Custom HTML Element.
+ * Based on BaseButton and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class Button extends BaseButton {
+    /**
+     * Indicates the styled appearance of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: ButtonAppearance | undefined, next: ButtonAppearance | undefined): void;
+    /**
+     * The shape of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `shape`
+     */
+    shape?: ButtonShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: ButtonShape | undefined, next: ButtonShape | undefined): void;
+    /**
+     * The size of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: ButtonSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: ButtonSize | undefined, next: ButtonSize | undefined): void;
+    /**
+     * Indicates that the button should only display as an icon with no text content.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `icon-only`
+     */
+    iconOnly: boolean;
+    /**
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    iconOnlyChanged(prev: boolean, next: boolean): void;
+}
+
+/**
+ * @internal
+ * @privateRemarks
+ * Mark internal because exporting class and interface of the same name confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ */
+export declare interface Button extends StartEnd {
+}
+
+/**
+ * ButtonAppearance constants
+ * @public
+ */
+export declare const ButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+
+/**
+ * The definition for the Fluent Button component.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-button>`
+ */
+export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
+
+/**
+ * Button `formtarget` attribute values.
+ * @public
+ */
+export declare const ButtonFormTarget: {
+    readonly blank: "_blank";
+    readonly self: "_self";
+    readonly parent: "_parent";
+    readonly top: "_top";
+};
+
+/**
+ * Types for the `formtarget` attribute values.
+ * @public
+ */
+export declare type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;
+
+/**
  * Button configuration options.
  * @public
  */
@@ -6367,100 +6843,37 @@ export declare const MenuStyles: ElementStyles;
 export declare const MenuTemplate: ElementViewTemplate<Menu>;
 
 /**
- * An Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ * A Progress HTML Element.
+ * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @public
  */
-export declare class ProgressBar extends FASTElement {
+export declare class ProgressBar extends BaseProgressBar {
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * The thickness of the progress bar
-     *
-     * @public
-     * HTML Attribute: `thickness`
-     */
-    thickness?: ProgressBarThickness;
-    /**
-     * Handles changes to thickness attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void;
-    /**
-     * The shape of the progress bar
-     * @public
-     * HTML Attribute: `shape`
-     */
-    shape?: ProgressBarShape;
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
-    /**
-     * The validation state of the progress bar
-     * @public
-     * HTML Attribute: `validation-state`
-     */
-    validationState: ProgressBarValidationState | null;
-    /**
-     * Handles changes to validation-state attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
-    /**
-     * The value of the progress
-     * @internal
-     * HTML Attribute: `value`
-     */
-    value?: number;
-    /**
-     * Updates the percent complete when the `value` property changes.
-     *
-     * @internal
-     */
-    protected valueChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * The minimum value
-     * @internal
-     * HTML Attribute: `min`
-     */
-    min?: number;
-    /**
-     * Updates the percent complete when the `min` property changes.
+     * The thickness of the progress bar
      *
-     * @param prev - The previous min value
-     * @param next - The current min value
+     * @public
+     * HTML Attribute: `thickness`
      */
-    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    thickness?: ProgressBarThickness;
     /**
-     * The maximum value
-     * @internal
-     * HTML Attribute: `max`
+     * Handles changes to thickness attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    max?: number;
+    thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void;
     /**
-     * Updates the percent complete when the `max` property changes.
-     *
-     * @param prev - The previous max value
-     * @param next - The current max value
-     * @internal
+     * The shape of the progress bar
+     * @public
+     * HTML Attribute: `shape`
      */
-    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    shape?: ProgressBarShape;
     /**
-     * Indicates progress in %
-     * @internal
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    get percentComplete(): number;
-    constructor();
+    shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
 }
 
 /**
@@ -7677,858 +8090,431 @@ export declare const spacingHorizontalXXS = "var(--spacingHorizontalXXS)";
 export declare const spacingHorizontalXXXL = "var(--spacingHorizontalXXXL)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalL | `spacingVerticalL`} design token.
- * @public
- */
-export declare const spacingVerticalL = "var(--spacingVerticalL)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalM | `spacingVerticalM`} design token.
- * @public
- */
-export declare const spacingVerticalM = "var(--spacingVerticalM)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalMNudge | `spacingVerticalMNudge`} design token.
- * @public
- */
-export declare const spacingVerticalMNudge = "var(--spacingVerticalMNudge)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalNone | `spacingVerticalNone`} design token.
- * @public
- */
-export declare const spacingVerticalNone = "var(--spacingVerticalNone)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalS | `spacingVerticalS`} design token.
- * @public
- */
-export declare const spacingVerticalS = "var(--spacingVerticalS)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token.
- * @public
- */
-export declare const spacingVerticalSNudge = "var(--spacingVerticalSNudge)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXL | `spacingVerticalXL`} design token.
- * @public
- */
-export declare const spacingVerticalXL = "var(--spacingVerticalXL)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token.
- * @public
- */
-export declare const spacingVerticalXS = "var(--spacingVerticalXS)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXL | `spacingVerticalXXL`} design token.
- * @public
- */
-export declare const spacingVerticalXXL = "var(--spacingVerticalXXL)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXS | `spacingVerticalXXS`} design token.
- * @public
- */
-export declare const spacingVerticalXXS = "var(--spacingVerticalXXS)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXXL | `spacingVerticalXXXL`} design token.
- * @public
- */
-export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
-
-/**
- * The base class used for constructing a fluent-spinner custom element
- * @public
- */
-export declare class Spinner extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * The size of the spinner
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: size
-     */
-    size?: SpinnerSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined): void;
-    /**
-     * The appearance of the spinner
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance?: SpinnerAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
-    constructor();
-}
-
-/**
- * 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>;
-
-/**
- * @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: ViewTemplate<Spinner, any>;
-
-/**
- * A mixin class implementing start and end slots.
- * These are generally used to decorate text elements with icons or other visual indicators.
- * @public
- */
-declare class StartEnd {
-    start: HTMLSlotElement;
-    end: HTMLSlotElement;
-}
-
-/**
- * Start/End configuration options
- * @public
- */
-declare type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
-
-/**
- * Start configuration options
- * @public
- */
-declare type StartOptions<TSource = any, TParent = any> = {
-    start?: StaticallyComposableHTML<TSource, TParent>;
-};
-
-/**
- * A value that can be statically composed into a
- * foundation template.
- * @remarks
- * When providing a string, take care to ensure that it is
- * safe and will not enable an XSS attack.
- * @public
- */
-declare type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThick | `strokeWidthThick`} design token.
- * @public
- */
-export declare const strokeWidthThick = "var(--strokeWidthThick)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token.
- * @public
- */
-export declare const strokeWidthThicker = "var(--strokeWidthThicker)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThickest | `strokeWidthThickest`} design token.
- * @public
- */
-export declare const strokeWidthThickest = "var(--strokeWidthThickest)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token.
- * @public
- */
-export declare const strokeWidthThin = "var(--strokeWidthThin)";
-
-/**
- * The styles for the Button component.
- *
- * @public
- */
-declare const styles: ElementStyles;
-export { styles as ButtonStyles }
-export { styles as MenuButtonStyles }
-
-export declare class Switch extends BaseCheckbox {
-    constructor();
-}
-
-/**
- * The Fluent Switch Element.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalL | `spacingVerticalL`} design token.
  * @public
- * @remarks
- * HTML Element: \<fluent-switch\>
  */
-export declare const SwitchDefinition: FASTElementDefinition<typeof Switch>;
+export declare const spacingVerticalL = "var(--spacingVerticalL)";
 
 /**
- * SwitchLabelPosition Constants
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalM | `spacingVerticalM`} design token.
  * @public
  */
-export declare const SwitchLabelPosition: {
-    readonly above: "above";
-    readonly after: "after";
-    readonly before: "before";
-};
+export declare const spacingVerticalM = "var(--spacingVerticalM)";
 
 /**
- * Applies label position
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalMNudge | `spacingVerticalMNudge`} design token.
  * @public
  */
-export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
-
-export declare type SwitchOptions = {
-    switch?: StaticallyComposableHTML<Switch>;
-};
-
-export declare const SwitchStyles: ElementStyles;
-
-export declare const SwitchTemplate: ElementViewTemplate<Switch>;
+export declare const spacingVerticalMNudge = "var(--spacingVerticalMNudge)";
 
 /**
- * Tab extends the FASTTab and is a child of the TabList
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalNone | `spacingVerticalNone`} design token.
+ * @public
  */
-export declare class Tab extends FASTElement {
-    /**
-     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: disabled
-     */
-    disabled: boolean;
-    private styles;
-    connectedCallback(): void;
-}
-
-export declare interface Tab extends StartEnd {
-}
-
-export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
+export declare const spacingVerticalNone = "var(--spacingVerticalNone)";
 
 /**
- * Tab configuration options
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalS | `spacingVerticalS`} design token.
  * @public
  */
-export declare type TabOptions = StartEndOptions<Tab>;
-
-export declare class TabPanel extends FASTElement {
-}
-
-export declare const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
-
-export declare const TabPanelStyles: ElementStyles;
-
-export declare const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
-
-export declare class Tabs extends BaseTabs {
-    /**
-     * 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;
-    /**
-     * Calculates and applies updated values to CSS variables.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private applyUpdatedCSSValues;
-    /**
-     * 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 - the tab element to apply the updated values to
-     * @internal
-     */
-    private animationLoop;
-    /**
-     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-     * tab indicator.
-     *
-     * @internal
-     */
-    private setTabData;
-    private setTabOffsetCSSVar;
-    private setTabScaleCSSVar;
-    activeidChanged(oldValue: string, newValue: string): void;
-    tabsChanged(): void;
-}
-
-export declare interface Tabs extends StartEnd {
-}
-
-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 declare const spacingVerticalS = "var(--spacingVerticalS)";
 
 /**
- * Tabs option configuration options
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token.
  * @public
  */
-export declare type TabsOptions = StartEndOptions<Tabs>;
+export declare const spacingVerticalSNudge = "var(--spacingVerticalSNudge)";
 
 /**
- * The orientation of the component
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXL | `spacingVerticalXL`} design token.
  * @public
  */
-export declare const TabsOrientation: {
-    readonly horizontal: "horizontal";
-    readonly vertical: "vertical";
-};
+export declare const spacingVerticalXL = "var(--spacingVerticalXL)";
 
 /**
- * The types for the Tabs component
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token.
  * @public
  */
-export declare type TabsOrientation = ValuesOf<typeof 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<Tabs, any>;
-
-export declare const TabStyles: ElementStyles;
+export declare const spacingVerticalXS = "var(--spacingVerticalXS)";
 
-export declare const TabTemplate: ElementViewTemplate<Tab, any>;
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXL | `spacingVerticalXXL`} design token.
+ * @public
+ */
+export declare const spacingVerticalXXL = "var(--spacingVerticalXXL)";
 
 /**
- * The base class used for constructing a fluent-text custom element
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXS | `spacingVerticalXXS`} design token.
  * @public
  */
-declare class Text_2 extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * 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;
+export declare const spacingVerticalXXS = "var(--spacingVerticalXXS)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXXL | `spacingVerticalXXXL`} design token.
+ * @public
+ */
+export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
+
+/**
+ * A Spinner Custom HTML Element.
+ * Based on BaseSpinner and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class Spinner extends BaseSpinner {
     /**
-     * THe Text size
+     * The size of the spinner
      *
      * @public
      * @remarks
      * HTML Attribute: size
-     *
      */
-    size?: TextSize;
+    size?: SpinnerSize;
     /**
      * Handles changes to size attribute custom states
      * @param prev - the previous state
      * @param next - the next state
      */
-    sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
-    /**
-     * THe Text font
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: font
-     */
-    font?: TextFont;
-    /**
-     * Handles changes to font attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
-    /**
-     * The Text weight
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: weight
-     */
-    weight?: TextWeight;
-    /**
-     * Handles changes to weight attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
+    sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined): void;
     /**
-     * THe Text align
-     *
+     * The appearance of the spinner
      * @public
      * @remarks
-     * HTML Attribute: align
+     * HTML Attribute: appearance
      */
-    align?: TextAlign;
+    appearance?: SpinnerAppearance;
     /**
-     * Handles changes to align attribute custom states
+     * Handles changes to appearance attribute custom states
      * @param prev - the previous state
      * @param next - the next state
      */
-    alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Handles changes to observable properties
-     * @internal
-     * @param source - the source of the change
-     * @param propertyName - the property name being changed
-     */
-    handleChange(source: any, propertyName: string): void;
+    appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
 }
-export { Text_2 as Text }
 
 /**
- * TextAlign Constants
+ * SpinnerAppearance constants
  * @public
  */
-export declare const TextAlign: {
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly justify: "justify";
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
 };
 
 /**
- * Aligns the content
+ * A Spinner's appearance can be either primary or inverted
  * @public
  */
-export declare type TextAlign = ValuesOf<typeof TextAlign>;
+export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 
 /**
- * The Fluent Text Element.
- *
- *
  * @public
  * @remarks
- * HTML Element: \<fluent-text\>
+ * HTML Element: \<fluent-spinner\>
  */
-export declare const TextDefinition: FASTElementDefinition<typeof Text_2>;
+export declare const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
 /**
- * TextFont Constants
+ * SpinnerSize constants
  * @public
  */
-export declare const TextFont: {
-    readonly base: "base";
-    readonly numeric: "numeric";
-    readonly monospace: "monospace";
+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";
 };
 
 /**
- * Applies font family to the content
+ * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
  * @public
  */
-export declare type TextFont = ValuesOf<typeof TextFont>;
+export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;
+
+export declare const SpinnerStyles: ElementStyles;
+
+export declare const SpinnerTemplate: ViewTemplate<Spinner, any>;
 
 /**
- * A Text Input Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
- *
- * @slot start - Content which can be provided before the input
- * @slot end - Content which can be provided after the input
- * @slot - The default slot for button content
- * @csspart label - The internal `<label>` element
- * @csspart root - the root container for the internal control
- * @csspart control - The internal `<input>` control
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
  * @public
  */
-export declare class TextInput extends FASTElement {
-    /**
-     * Indicates the styled appearance of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `appearance`
-     */
-    appearance?: TextInputAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined): void;
-    /**
-     * Indicates the element's autocomplete state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autocomplete`
-     */
-    autocomplete?: string;
-    /**
-     * Indicates that the element should get focus after the page finishes loading.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
-    /**
-     * Sets the size of the control.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `control-size`
-     */
-    controlSize?: TextInputControlSize;
-    /**
-     * Handles changes to `control-size` attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined): void;
-    /**
-     * The default slotted content. This is the content that appears in the text field label.
-     *
-     * @internal
-     */
-    defaultSlottedNodes: Node[];
-    /**
-     * Updates the control label visibility based on the presence of default slotted content.
-     *
-     * @internal
-     */
-    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
-    /**
-     * Sets the directionality of the element to be submitted with form data.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `dirname`
-     */
-    dirname?: string;
-    /**
-     * Sets the element's disabled state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled`
-     */
-    disabled?: boolean;
-    /**
-     * The id of a form to associate the element to.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `form`
-     */
-    formAttribute?: string;
-    /**
-     * The initial value of the input.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `value`
-     */
-    initialValue: string;
-    /**
-     * Sets the value of the element to the initial value.
-     *
-     * @internal
-     */
-    initialValueChanged(): void;
-    /**
-     * Allows associating a `<datalist>` to the element by ID.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `list`
-     */
-    list: string;
-    /**
-     * The maximum number of characters a user can enter.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `maxlength`
-     */
-    maxlength: number;
-    /**
-     * The minimum number of characters a user can enter.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `minlength`
-     */
-    minlength: number;
+declare class StartEnd {
+    start: HTMLSlotElement;
+    end: HTMLSlotElement;
+}
+
+/**
+ * Start/End configuration options
+ * @public
+ */
+declare type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
+
+/**
+ * Start configuration options
+ * @public
+ */
+declare type StartOptions<TSource = any, TParent = any> = {
+    start?: StaticallyComposableHTML<TSource, TParent>;
+};
+
+/**
+ * A value that can be statically composed into a
+ * foundation template.
+ * @remarks
+ * When providing a string, take care to ensure that it is
+ * safe and will not enable an XSS attack.
+ * @public
+ */
+declare type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThick | `strokeWidthThick`} design token.
+ * @public
+ */
+export declare const strokeWidthThick = "var(--strokeWidthThick)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token.
+ * @public
+ */
+export declare const strokeWidthThicker = "var(--strokeWidthThicker)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThickest | `strokeWidthThickest`} design token.
+ * @public
+ */
+export declare const strokeWidthThickest = "var(--strokeWidthThickest)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token.
+ * @public
+ */
+export declare const strokeWidthThin = "var(--strokeWidthThin)";
+
+/**
+ * The styles for the Button component.
+ *
+ * @public
+ */
+declare const styles: ElementStyles;
+export { styles as ButtonStyles }
+export { styles as MenuButtonStyles }
+
+export declare class Switch extends BaseCheckbox {
+    constructor();
+}
+
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const SwitchDefinition: FASTElementDefinition<typeof Switch>;
+
+/**
+ * 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 type SwitchOptions = {
+    switch?: StaticallyComposableHTML<Switch>;
+};
+
+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 FASTElement {
     /**
-     * Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple | `multiple`} attribute
-     *
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
      * @public
      * @remarks
-     * HTML Attribute: `multiple`
+     * HTML Attribute: disabled
      */
-    multiple: boolean;
+    disabled: boolean;
+    private styles;
+    connectedCallback(): void;
+}
+
+export declare interface Tab extends StartEnd {
+}
+
+export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
+
+/**
+ * Tab configuration options
+ * @public
+ */
+export declare type TabOptions = StartEndOptions<Tab>;
+
+export declare class TabPanel extends FASTElement {
+}
+
+export declare const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
+
+export declare const TabPanelStyles: ElementStyles;
+
+export declare const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
+
+export declare class Tabs extends BaseTabs {
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `name`
+     * activeTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
      */
-    name: string;
+    private activeTabData;
     /**
-     * A regular expression that the value must match to pass validation.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `pattern`
+     * previousActiveTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
      */
-    pattern: string;
+    private previousActiveTabData;
     /**
-     * Sets the placeholder value of the element, generally used to provide a hint to the user.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `placeholder`
-     * This attribute is not a valid substitute for a label.
+     * activeTabOffset
+     * Used to position the active indicator for animations of the active indicator on active tab changes.
      */
-    placeholder: string;
+    private activeTabOffset;
     /**
-     * When true, the control will be immutable by user interaction.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `readonly`
+     * activeTabScale
+     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
      */
-    readOnly?: boolean;
+    private activeTabScale;
     /**
-     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
-     *
-     * @internal
+     * styles
+     * used in the class for storing the css variables required for animations
      */
-    readOnlyChanged(): void;
+    private styles;
     /**
-     * The element's required attribute.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `required`
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
      */
-    required: boolean;
+    appearance?: TabsAppearance;
     /**
-     * Syncs the element's internal `aria-required` state with the `required` attribute.
-     *
-     * @param previous - the previous required state
-     * @param next - the current required state
-     *
-     * @internal
+     * 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."
      */
-    requiredChanged(previous: boolean, next: boolean): void;
+    disabled?: boolean;
     /**
-     * Sets the width of the element to a specified number of characters.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `size`
+     * 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: number;
+    size?: TabsSize;
     /**
-     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
+     * calculateAnimationProperties
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `spellcheck`
+     * Recalculates the active tab offset and scale.
+     * These values will be applied to css variables that control the tab active indicator position animations
      */
-    spellcheck: boolean;
+    private calculateAnimationProperties;
     /**
-     * Allows setting a type or mode of text.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `type`
+     * getSelectedTabPosition - gets the x or y coordinates of the tab
      */
-    type: TextInputType;
+    private getTabPosition;
     /**
-     * The current value of the input.
-     *
-     * @internal
+     * getSelectedTabScale - gets the scale of the tab
      */
-    private _value;
+    private getTabScale;
     /**
-     * A reference to the internal input element.
+     * Calculates and applies updated values to CSS variables.
      *
+     * @param tab - the tab element to apply the updated values to
      * @internal
      */
-    control: HTMLInputElement;
+    private applyUpdatedCSSValues;
     /**
-     * A reference to the internal label element.
+     * 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 - the tab element to apply the updated values to
      * @internal
      */
-    controlLabel: HTMLLabelElement;
+    private animationLoop;
     /**
-     * Indicates that the value has been changed by the user.
+     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
+     * tab indicator.
      *
      * @internal
      */
-    private dirtyValue;
+    private setTabData;
+    private setTabOffsetCSSVar;
+    private setTabScaleCSSVar;
+    activeidChanged(oldValue: string, newValue: string): void;
+    tabsChanged(): void;
+}
+
+export declare interface Tabs extends StartEnd {
+}
+
+export declare const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+
+export declare const TabsDefinition: FASTElementDefinition<typeof Tabs>;
+
+/**
+ * Tabs option configuration options
+ * @public
+ */
+export declare type TabsOptions = StartEndOptions<Tabs>;
+
+/**
+ * The orientation of the component
+ * @public
+ */
+export declare const TabsOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+
+/**
+ * The types for the Tabs component
+ * @public
+ */
+export declare type TabsOrientation = ValuesOf<typeof 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<Tabs, any>;
+
+export declare const TabStyles: ElementStyles;
+
+export declare const TabTemplate: ElementViewTemplate<Tab, any>;
+
+/**
+ * The base class used for constructing a fluent-text custom element
+ * @public
+ */
+declare class Text_2 extends FASTElement {
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -8536,153 +8522,202 @@ export declare class TextInput extends FASTElement {
      */
     elementInternals: ElementInternals;
     /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     * 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
      */
-    static readonly formAssociated = true;
+    nowrap: boolean;
     /**
-     * The element's validity state.
+     * The text truncates
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     * HTML Attribute: truncate
      */
-    get validity(): ValidityState;
+    truncate: boolean;
     /**
-     * The validation message.
+     * The text style is italic
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     * HTML Attribute: italic
      */
-    get validationMessage(): string;
+    italic: boolean;
     /**
-     * The current value of the input.
+     * The text style is underline
+     *
      * @public
+     * @remarks
+     * HTML Attribute: underline
      */
-    get value(): string;
-    set value(value: string);
+    underline: boolean;
     /**
-     * Determines if the control can be submitted for constraint validation.
+     * The text style is strikethrough
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     * HTML Attribute: strikethrough
      */
-    get willValidate(): boolean;
+    strikethrough: boolean;
     /**
-     * The associated form element.
+     * An text can take up the width of its container.
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     * HTML Attribute: block
      */
-    get form(): HTMLFormElement | null;
+    block: boolean;
     /**
-     * Handles the internal control's `keypress` event.
+     * THe Text size
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
      *
-     * @internal
      */
-    beforeinputHandler(e: InputEvent): boolean | void;
+    size?: TextSize;
     /**
-     * Change event handler for inner control.
-     *
-     * @internal
-     * @privateRemarks
-     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
-     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    changeHandler(e: InputEvent): boolean | void;
+    sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
     /**
-     * Checks the validity of the element and returns the result.
+     * THe Text font
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     * HTML Attribute: font
      */
-    checkValidity(): boolean;
+    font?: TextFont;
     /**
-     * Clicks the inner control when the component is clicked.
-     *
-     * @param e - the event object
+     * Handles changes to font attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    clickHandler(e: MouseEvent): boolean | void;
-    connectedCallback(): void;
+    fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
     /**
-     * Focuses the inner control when the component is focused.
+     * The Text weight
      *
-     * @param e - the event object
      * @public
+     * @remarks
+     * HTML Attribute: weight
      */
-    focusinHandler(e: FocusEvent): boolean | void;
+    weight?: TextWeight;
     /**
-     * Resets the value to its initial value when the form is reset.
-     *
-     * @internal
+     * Handles changes to weight attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    formResetCallback(): void;
+    weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
     /**
-     * Handles implicit form submission when the user presses the "Enter" key.
+     * THe Text align
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: align
      */
-    private implicitSubmit;
+    align?: TextAlign;
     /**
-     * Handles the internal control's `input` event.
-     *
-     * @internal
+     * Handles changes to align attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    inputHandler(e: InputEvent): boolean | void;
+    alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
-     * Handles the internal control's `keydown` event.
-     *
-     * @param e - the event object
+     * Handles changes to observable properties
      * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
      */
-    keydownHandler(e: KeyboardEvent): boolean | void;
+    handleChange(source: any, propertyName: string): void;
+}
+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>;
+
+/**
+ * A Text Input Custom HTML Element.
+ * Based on BaseTextInput and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class TextInput extends BaseTextInput {
     /**
-     * Selects all the text in the text field.
+     * Indicates the styled appearance of the element.
      *
      * @public
-     * @privateRemarks
-     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
-     * emitting a `select` event whenever the internal control emits a `select` event
-     *
+     * @remarks
+     * HTML Attribute: `appearance`
      */
-    select(): void;
+    appearance?: TextInputAppearance;
     /**
-     * Sets the custom validity message.
-     * @param message - The message to set
-     *
-     * @public
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    setCustomValidity(message: string): void;
+    appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined): void;
     /**
-     * Reports the validity of the element.
+     * Sets the size of the control.
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
-     */
-    reportValidity(): boolean;
-    /**
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
-     *
-     * @internal
+     * HTML Attribute: `control-size`
      */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    controlSize?: TextInputControlSize;
     /**
-     * Sets the validity of the control.
-     *
-     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
-     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
-     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
-     *
-     * @internal
+     * Handles changes to `control-size` attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined): void;
 }
 
 /**
@@ -8816,6 +8851,13 @@ export declare const TextWeight: {
  */
 export declare type TextWeight = ValuesOf<typeof TextWeight>;
 
+/**
+ * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
+ * tokens to be added.
+ * @internal
+ */
+export declare type Theme = Record<string, string | number>;
+
 /**
  * The base class used for constructing a `<fluent-toggle-button>` custom element.
  *