@fluentui/web-components 3.0.0-beta.25 → 3.0.0-beta.26

package/dist/web-components.d.ts

@@ -1065,591 +1065,476 @@ export declare const BadgeStyles: ElementStyles;
 export declare const BadgeTemplate: ElementViewTemplate<Badge>;
 
 /**
- * A base class for progress components.
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
+ *
  * @public
  */
-declare class BaseProgress extends FASTElement {
+declare class BaseCheckbox extends FASTElement {
     /**
-     * The value of the progress
+     * 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: value
+     * HTML Attribute: `autofocus`
      */
-    value: number | null;
-    protected valueChanged(): void;
+    autofocus: boolean;
     /**
-     * The minimum value
+     * The element's current checked state.
+     *
+     * @public
+     */
+    get checked(): boolean;
+    set checked(state: boolean);
+    /**
+     * The element's disabled state.
      * @public
      * @remarks
-     * HTML Attribute: min
+     * HTML Attribute: `disabled`
      */
-    min: number;
-    protected minChanged(): void;
+    disabled: boolean;
     /**
-     * The maximum value
+     * 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: max
+     * HTML Attribute: `form`
      */
-    max: number;
-    protected maxChanged(): void;
+    formAttribute?: string;
     /**
-     * Indicates progress in %
-     * @internal
+     * Indicates that the element is in an indeterminate or mixed state.
+     *
+     * @public
      */
-    percentComplete: number;
+    indeterminate?: boolean;
     /**
+     * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+     *
      * @internal
      */
-    connectedCallback(): void;
-    private updatePercentComplete;
-}
-
-/**
- * A Tabs component that wraps a collection of tab and tab panel elements.
- *
- * @public
- */
-declare class BaseTabs extends FASTElement {
+    indeterminateChanged(prev: boolean, next: boolean): void;
     /**
-     * The orientation
+     * The element's checked state.
+     *
      * @public
      * @remarks
-     * HTML Attribute: orientation
+     * HTML Attribute: `checked`
      */
-    orientation: TabsOrientation;
+    initialChecked?: boolean;
     /**
+     * Updates the form value when the checked state changes.
+     *
      * @internal
      */
-    orientationChanged(): void;
+    initialCheckedChanged(prev: boolean | undefined, next: boolean): void;
     /**
-     * The id of the active tab
+     * The initial value of the input.
      *
      * @public
      * @remarks
-     * HTML Attribute: activeid
+     * HTML Attribute: `value`
      */
-    activeid: string;
+    initialValue: string;
     /**
+     * Sets the value of the input when the value attribute changes.
+     *
+     * @param prev - The previous value
+     * @param next - The current value
      * @internal
      */
-    activeidChanged(oldValue: string, newValue: string): void;
+    initialValueChanged(prev: string, next: string): void;
     /**
-     * @internal
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
      */
-    tabs: HTMLElement[];
+    name: string;
     /**
-     * @internal
+     * The element's required state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
      */
-    tabsChanged(): void;
+    required: boolean;
     /**
+     * Sets the validity of the control when the required state changes.
+     *
+     * @param prev - The previous required state
+     * @param next - The current required state
      * @internal
      */
-    tabpanels: HTMLElement[];
+    requiredChanged(prev: boolean, next: boolean): void;
     /**
+     * The internal checked state of the control.
+     *
      * @internal
      */
-    tabpanelsChanged(): void;
-    /**
-     * A reference to the active tab
-     * @public
-     */
-    activetab: HTMLElement;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private tabpanelIds;
-    private change;
-    private isDisabledElement;
-    private isHiddenElement;
-    private isFocusableElement;
-    private getActiveIndex;
+    private _checked;
     /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
+     * Indicates that the checked state has been changed by the user.
      *
-     * @public
+     * @internal
      */
-    protected setTabs(): void;
-    private setTabPanels;
-    private getTabIds;
-    private getTabPanelIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
+    private dirtyChecked;
     /**
-     * The adjust method for FASTTabs
+     * The associated `<form>` element.
+     *
      * @public
      * @remarks
-     * This method allows the active index to be adjusted by numerical increments
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
      */
-    adjust(adjustment: number): void;
-    private adjustForward;
-    private adjustBackward;
-    private moveToTabByIndex;
-    private focusTab;
+    get form(): HTMLFormElement | null;
     /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
      * @internal
      */
-    connectedCallback(): 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 largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | `<button>`} element.
- *
- * @slot start - Content which can be provided before the button content
- * @slot end - Content which can be provided after the button content
- * @slot - The default slot for button content
- * @csspart content - The button content container
- *
- * @public
- */
-export declare class Button extends FASTElement {
+    elementInternals: ElementInternals;
     /**
-     * Indicates the styled appearance of the button.
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
      *
      * @public
-     * @remarks
-     * HTML Attribute: `appearance`
      */
-    appearance?: ButtonAppearance;
+    static formAssociated: boolean;
     /**
-     * Indicates the button should be focused when the page is loaded.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
+     * A reference to all associated `<label>` elements.
      *
      * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
      */
-    autofocus: boolean;
+    get labels(): ReadonlyArray<Node>;
     /**
-     * Default slotted content.
+     * The fallback validation message, taken from a native checkbox `<input>` element.
      *
-     * @public
+     * @internal
      */
-    defaultSlottedContent: HTMLElement[];
+    private _validationFallbackMessage;
     /**
-     * Sets the element's disabled state.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
      *
      * @public
      * @remarks
-     * HTML Attribute: `disabled`
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
      */
-    disabled?: boolean;
+    get validationMessage(): string;
     /**
-     * Indicates that the button is focusable while disabled.
+     * The element's validity state.
      *
      * @public
      * @remarks
-     * HTML Attribute: `disabled-focusable`
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
      */
-    disabledFocusable: boolean;
+    get validity(): ValidityState;
     /**
-     * Sets the element's internal disabled state when the element is focusable while disabled.
+     * The internal value of the input.
      *
-     * @param previous - the previous disabledFocusable value
-     * @param next - the current disabledFocusable value
      * @internal
      */
-    disabledFocusableChanged(previous: boolean, next: boolean): void;
+    private _value;
     /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The current value of the input.
      *
-     * @internal
+     * @public
      */
-    protected elementInternals: ElementInternals;
+    get value(): string;
+    set value(value: string);
     /**
-     * The associated form element.
+     * 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 form(): HTMLFormElement | null;
+    get willValidate(): boolean;
     /**
-     * The URL that processes the form submission.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction | `formaction`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `formaction`
-     */
-    formAction?: string;
-    /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     * Sets the `elementInternals.ariaChecked` value based on the checked state.
      *
-     * @public
+     * @internal
      */
-    static readonly formAssociated = true;
+    private setAriaChecked;
     /**
-     * The id of a form to associate the element to.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form | `form`} attribute
+     * Checks the validity of the element and returns the result.
      *
      * @public
      * @remarks
-     * HTML Attribute: `form`
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
      */
-    formAttribute?: string;
+    checkValidity(): boolean;
     /**
-     * The encoding type for the form submission.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formenctype | `formenctype`} attribute
+     * Toggles the checked state when the user clicks the element.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `formenctype`
+     * @param e - the event object
+     * @internal
      */
-    formEnctype?: string;
+    clickHandler(e: MouseEvent): boolean | void;
+    connectedCallback(): void;
+    constructor();
     /**
-     * The HTTP method that the browser uses to submit the form.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod | `formmethod`} attribute
+     * Updates the form value when a user changes the `checked` state.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `formmethod`
+     * @param e - the event object
+     * @internal
      */
-    formMethod?: string;
+    inputHandler(e: Event): boolean | void;
     /**
-     * Indicates that the form will not be validated when submitted.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formnovalidate | `formnovalidate`} attribute
+     * Prevents scrolling when the user presses the space key.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `formnovalidate`
+     * @param e - the event object
+     * @internal
      */
-    formNoValidate?: boolean;
+    keydownHandler(e: KeyboardEvent): boolean | void;
     /**
-     * The internal form submission fallback control.
+     * Toggles the checked state when the user releases the space key.
      *
+     * @param e - the event object
      * @internal
      */
-    private formSubmissionFallbackControl?;
+    keyupHandler(e: KeyboardEvent): boolean | void;
     /**
-     * The internal slot for the form submission fallback control.
+     * Resets the form value to its initial value when the form is reset.
      *
      * @internal
      */
-    private formSubmissionFallbackControlSlot?;
+    formResetCallback(): void;
     /**
-     * The target frame or window to open the form submission in.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formtarget | `formtarget`} attribute
+     * Reports the validity of the element.
      *
      * @public
      * @remarks
-     * HTML Attribute: `formtarget`
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
      */
-    formTarget?: ButtonFormTarget;
+    reportValidity(): boolean;
     /**
-     * Indicates that the button should only display as an icon with no text content.
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `icon-only`
+     * @internal
      */
-    iconOnly: boolean;
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
     /**
-     * A reference to all associated label elements.
+     * Sets a custom validity message.
      *
+     * @param message - The message to set
      * @public
      */
-    get labels(): ReadonlyArray<Node>;
+    setCustomValidity(message: string): void;
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name | `name`} attribute
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    /**
+     * Toggles the checked state of the control.
      *
      * @public
+     */
+    private toggleChecked;
+}
+
+/**
+ * A base class for progress components.
+ * @public
+ */
+declare class BaseProgress extends FASTElement {
+    /**
+     * The value of the progress
+     * @public
      * @remarks
-     * HTML Attribute: `name`
+     * HTML Attribute: value
      */
-    name?: string;
+    value: number | null;
+    protected valueChanged(): void;
     /**
-     * The shape of the button.
-     *
+     * The minimum value
      * @public
      * @remarks
-     * HTML Attribute: `shape`
+     * HTML Attribute: min
      */
-    shape?: ButtonShape;
+    min: number;
+    protected minChanged(): void;
     /**
-     * The size of the button.
-     *
+     * The maximum value
      * @public
      * @remarks
-     * HTML Attribute: `size`
+     * HTML Attribute: max
      */
-    size?: ButtonSize;
+    max: number;
+    protected maxChanged(): void;
     /**
-     * The button type.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute
-     *
+     * Indicates progress in %
+     * @internal
+     */
+    percentComplete: number;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private updatePercentComplete;
+}
+
+/**
+ * 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: `type`
+     * HTML Attribute: orientation
      */
-    type: ButtonType;
+    orientation: TabsOrientation;
     /**
-     * Removes the form submission fallback control when the type changes.
-     *
-     * @param previous - the previous type value
-     * @param next - the new type value
      * @internal
      */
-    typeChanged(previous: ButtonType, next: ButtonType): void;
+    orientationChanged(): void;
     /**
-     * The value attribute.
-     *
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value | `value`} attribute
+     * The id of the active tab
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: activeid
      */
-    value?: string;
+    activeid: string;
     /**
-     * Handles the button click event.
-     *
-     * @param e - The event object
      * @internal
      */
-    clickHandler(e: Event): boolean | void;
-    connectedCallback(): void;
-    constructor();
+    activeidChanged(oldValue: string, newValue: string): void;
     /**
-     * This fallback creates a new slot, then creates a submit button to mirror the custom element's
-     * properties. The submit button is then appended to the slot and the form is submitted.
-     *
      * @internal
-     * @privateRemarks
-     * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
      */
-    private createAndInsertFormSubmissionFallbackControl;
+    tabs: HTMLElement[];
     /**
-     * Invoked when a connected component's form or fieldset has its disabled state changed.
-     *
-     * @param disabled - the disabled value of the form / fieldset
-     *
      * @internal
      */
-    formDisabledCallback(disabled: boolean): void;
+    tabsChanged(): void;
     /**
-     * Handles keypress events for the button.
-     *
-     * @param e - the keyboard event
-     * @returns - the return value of the click handler
+     * @internal
+     */
+    tabpanels: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * A reference to the active tab
      * @public
      */
-    keypressHandler(e: KeyboardEvent): boolean | void;
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
     /**
-     * Presses the button.
+     * Function that is invoked whenever the selected tab or the tab collection changes.
      *
      * @public
      */
-    protected press(): void;
+    protected setTabs(): void;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
     /**
-     * Resets the associated form.
-     *
+     * The adjust method for FASTTabs
      * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
      */
-    resetForm(): void;
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
     /**
-     * Submits the associated form.
-     *
      * @internal
-     */
-    private submitForm;
-}
-
-/**
- * @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 secondary: "secondary";
-    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
- */
-declare type ButtonOptions = StartEndOptions<Button>;
-export { ButtonOptions }
-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>;
+     */
+    connectedCallback(): void;
+}
 
 /**
- * A Button can be a size of small, medium or large.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public
  */
-export declare const ButtonSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-};
+export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
 
 /**
- * A Button can be on of several preset sizes.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
  * @public
  */
-export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
+export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
 
 /**
- * The template for the Button component.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
  * @public
  */
-export declare const ButtonTemplate: ElementViewTemplate<Button>;
+export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
 
 /**
- * Button type values.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
  * @public
  */
-export declare const ButtonType: {
-    readonly submit: "submit";
-    readonly reset: "reset";
-    readonly button: "button";
-};
+export declare const borderRadiusNone = "var(--borderRadiusNone)";
 
 /**
- * Type for button type values.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
  * @public
  */
-export declare type ButtonType = ValuesOf<typeof ButtonType>;
-
-/**
- * Creates a checkable form associated component.
- * @beta
- */
-declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
 
 /**
- * Base class for providing Custom Element Form Association with checkable features.
- *
- * @beta
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
+ * @public
  */
-declare interface CheckableFormAssociated extends FormAssociated {
-    currentChecked: boolean;
-    dirtyChecked: boolean;
-    checkedAttribute: boolean;
-    defaultChecked: boolean;
-    defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
-    checked: boolean;
-    checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
-}
+export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
 
 /**
- * A Checkbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | `<button>`} element.
  *
- * @slot checked-indicator - The checked indicator
- * @slot indeterminate-indicator - The indeterminate indicator
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart content - The button content container
  *
  * @public
  */
-export declare class Checkbox extends FASTElement {
+export declare class Button extends FASTElement {
     /**
-     * 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
+     * Indicates the styled appearance of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * Indicates the button should be focused when the page is loaded.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
      *
      * @public
      * @remarks
@@ -1657,280 +1542,398 @@ export declare class Checkbox extends FASTElement {
      */
     autofocus: boolean;
     /**
-     * The element's current checked state.
+     * Default slotted content.
      *
      * @public
      */
-    get checked(): boolean;
-    set checked(state: boolean);
+    defaultSlottedContent: HTMLElement[];
     /**
-     * The element's disabled state.
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
+     *
      * @public
      * @remarks
      * HTML Attribute: `disabled`
      */
-    disabled: boolean;
+    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
+     * Indicates that the button is focusable while disabled.
      *
      * @public
      * @remarks
-     * HTML Attribute: `form`
+     * HTML Attribute: `disabled-focusable`
      */
-    formAttribute?: string;
+    disabledFocusable: boolean;
     /**
-     * Indicates that the element is in an indeterminate or mixed state.
+     * Sets the element's internal disabled state when the element is focusable while disabled.
      *
-     * @public
+     * @param previous - the previous disabledFocusable value
+     * @param next - the current disabledFocusable value
+     * @internal
      */
-    indeterminate?: boolean;
+    disabledFocusableChanged(previous: boolean, next: boolean): void;
     /**
-     * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
-    indeterminateChanged(prev: boolean, next: boolean): void;
+    protected elementInternals: ElementInternals;
     /**
-     * The element's checked state.
+     * The associated form element.
      *
      * @public
-     * @remarks
-     * HTML Attribute: `checked`
-     */
-    initialChecked?: boolean;
-    /**
-     * Updates the form value when the checked state changes.
-     *
-     * @internal
      */
-    initialCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    get form(): HTMLFormElement | null;
     /**
-     * The initial value of the input.
+     * The URL that processes the form submission.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction | `formaction`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: `formaction`
      */
-    initialValue: string;
+    formAction?: string;
     /**
-     * Sets the value of the input when the value attribute changes.
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
      *
-     * @param prev - The previous value
-     * @param next - The current value
-     * @internal
+     * @public
      */
-    initialValueChanged(prev: string, next: string): void;
+    static readonly formAssociated = true;
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form | `form`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `name`
+     * HTML Attribute: `form`
      */
-    name: string;
+    formAttribute?: string;
     /**
-     * The element's required state.
+     * The encoding type for the form submission.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formenctype | `formenctype`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `required`
-     */
-    required: boolean;
-    /**
-     * Sets the validity of the control when the required state changes.
-     *
-     * @param prev - The previous required state
-     * @param next - The current required state
-     * @internal
+     * HTML Attribute: `formenctype`
      */
-    requiredChanged(prev: boolean, next: boolean): void;
+    formEnctype?: string;
     /**
-     * Indicates the shape of the checkbox.
+     * The HTTP method that the browser uses to submit the form.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod | `formmethod`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `shape`
+     * HTML Attribute: `formmethod`
      */
-    shape: CheckboxShape;
+    formMethod?: string;
     /**
-     * Indicates the size of the checkbox.
+     * Indicates that the form will not be validated when submitted.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formnovalidate | `formnovalidate`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: `size`
+     * HTML Attribute: `formnovalidate`
      */
-    size?: CheckboxSize;
+    formNoValidate?: boolean;
     /**
-     * The internal checked state of the control.
+     * The internal form submission fallback control.
      *
      * @internal
      */
-    private _checked;
+    private formSubmissionFallbackControl?;
     /**
-     * Indicates that the checked state has been changed by the user.
+     * The internal slot for the form submission fallback control.
      *
      * @internal
      */
-    private dirtyChecked;
+    private formSubmissionFallbackControlSlot?;
     /**
-     * The associated `<form>` element.
+     * The target frame or window to open the form submission in.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formtarget | `formtarget`} attribute
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
-     */
-    get form(): HTMLFormElement | null;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
+     * HTML Attribute: `formtarget`
      */
-    elementInternals: ElementInternals;
+    formTarget?: ButtonFormTarget;
     /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     * Indicates that the button should only display as an icon with no text content.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `icon-only`
      */
-    static formAssociated: boolean;
+    iconOnly: boolean;
     /**
-     * A reference to all associated `<label>` elements.
+     * A reference to all associated label elements.
      *
      * @public
      */
     get labels(): ReadonlyArray<Node>;
     /**
-     * The fallback validation message, taken from a native checkbox `<input>` element.
-     *
-     * @internal
-     */
-    private _validationFallbackMessage;
-    /**
-     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
-     * specified (e.g., via `setCustomValidity`).
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name | `name`} attribute
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     * HTML Attribute: `name`
      */
-    get validationMessage(): string;
+    name?: string;
     /**
-     * The element's validity state.
+     * The shape of the button.
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
-     */
-    get validity(): ValidityState;
-    /**
-     * The internal value of the input.
-     *
-     * @internal
+     * HTML Attribute: `shape`
      */
-    private _value;
+    shape?: ButtonShape;
     /**
-     * The current value of the input.
+     * The size of the button.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `size`
      */
-    get value(): string;
-    set value(value: string);
+    size?: ButtonSize;
     /**
-     * Determines if the control can be submitted for constraint validation.
+     * The button type.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     * HTML Attribute: `type`
      */
-    get willValidate(): boolean;
+    type: ButtonType;
     /**
-     * Sets the `elementInternals.ariaChecked` value based on the checked state.
+     * Removes the form submission fallback control when the type changes.
      *
+     * @param previous - the previous type value
+     * @param next - the new type value
      * @internal
      */
-    private setAriaChecked;
+    typeChanged(previous: ButtonType, next: ButtonType): void;
     /**
-     * Checks the validity of the element and returns the result.
+     * The value attribute.
+     *
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value | `value`} attribute
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     * HTML Attribute: `value`
      */
-    checkValidity(): boolean;
+    value?: string;
     /**
-     * Toggles the checked state when the user clicks the element.
+     * Handles the button click event.
      *
-     * @param e - the event object
+     * @param e - The event object
      * @internal
      */
-    clickHandler(e: MouseEvent): boolean | void;
+    clickHandler(e: Event): boolean | void;
     connectedCallback(): void;
     constructor();
     /**
-     * Updates the form value when a user changes the `checked` state.
+     * This fallback creates a new slot, then creates a submit button to mirror the custom element's
+     * properties. The submit button is then appended to the slot and the form is submitted.
      *
-     * @param e - the event object
      * @internal
+     * @privateRemarks
+     * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
      */
-    inputHandler(e: Event): boolean | void;
+    private createAndInsertFormSubmissionFallbackControl;
     /**
-     * Prevents scrolling when the user presses the space key.
+     * Invoked when a connected component's form or fieldset has its disabled state changed.
+     *
+     * @param disabled - the disabled value of the form / fieldset
      *
-     * @param e - the event object
      * @internal
      */
-    keydownHandler(e: KeyboardEvent): boolean | void;
+    formDisabledCallback(disabled: boolean): void;
     /**
-     * Toggles the checked state when the user releases the space key.
+     * Handles keypress events for the button.
      *
-     * @param e - the event object
-     * @internal
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
      */
-    keyupHandler(e: KeyboardEvent): boolean | void;
+    keypressHandler(e: KeyboardEvent): boolean | void;
     /**
-     * Resets the form value to its initial value when the form is reset.
+     * Presses the button.
      *
-     * @internal
+     * @public
      */
-    formResetCallback(): void;
+    protected press(): void;
     /**
-     * Reports the validity of the element.
+     * Resets the associated form.
      *
      * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
      */
-    reportValidity(): boolean;
+    resetForm(): void;
     /**
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     * Submits the associated form.
      *
      * @internal
      */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    private submitForm;
+}
+
+/**
+ * @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 secondary: "secondary";
+    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
+ */
+declare type ButtonOptions = StartEndOptions<Button>;
+export { ButtonOptions }
+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>;
+
+/**
+ * Button type values.
+ *
+ * @public
+ */
+export declare const ButtonType: {
+    readonly submit: "submit";
+    readonly reset: "reset";
+    readonly button: "button";
+};
+
+/**
+ * Type for button type values.
+ *
+ * @public
+ */
+export declare type ButtonType = ValuesOf<typeof ButtonType>;
+
+/**
+ * Creates a checkable form associated component.
+ * @beta
+ */
+declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+
+/**
+ * Base class for providing Custom Element Form Association with checkable features.
+ *
+ * @beta
+ */
+declare interface CheckableFormAssociated extends FormAssociated {
+    currentChecked: boolean;
+    dirtyChecked: boolean;
+    checkedAttribute: boolean;
+    defaultChecked: boolean;
+    defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+    checked: boolean;
+    checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+}
+
+export declare class Checkbox extends BaseCheckbox {
     /**
-     * Sets a custom validity message.
+     * Indicates the shape of the checkbox.
      *
-     * @param message - The message to set
      * @public
+     * @remarks
+     * HTML Attribute: `shape`
      */
-    setCustomValidity(message: string): void;
-    /**
-     * Sets the validity of the control.
-     *
-     * @param flags - Validity flags to set.
-     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
-     * @param anchor - Optional anchor to use for the validation message.
-     *
-     * @internal
-     */
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    shape: CheckboxShape;
     /**
-     * Toggles the checked state of the control.
+     * Indicates the size of the checkbox.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `size`
      */
-    private toggleChecked;
+    size?: CheckboxSize;
 }
 
 /**
@@ -5054,15 +5057,6 @@ declare class FormAssociatedSlider extends FormAssociatedSlider_base {
 
 declare const FormAssociatedSlider_base: typeof _Slider;
 
-/**
- * @beta
- */
-declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
-    proxy: HTMLInputElement;
-}
-
-declare const FormAssociatedSwitch_base: typeof _Switch;
-
 /**
  * Determines the current localization direction of an element.
  *
@@ -7008,49 +7002,7 @@ declare const styles: ElementStyles;
 export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
 
-export declare class Switch extends FormAssociatedSwitch {
-    /**
-     * The label position of the switch
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: labelposition
-     */
-    labelPosition: SwitchLabelPosition | undefined;
-    /**
-     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: readonly
-     */
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
-     *
-     * @internal
-     */
-    initialValue: string;
-    /**
-     * @internal
-     */
-    defaultSlottedNodes: Node[];
-    constructor();
-    /**
-     * @internal
-     */
-    keypressHandler: (e: KeyboardEvent) => void;
-    /**
-     * @internal
-     */
-    clickHandler: (e: MouseEvent) => void;
-}
-
-declare class _Switch extends FASTElement {
-}
-
-declare interface _Switch extends CheckableFormAssociated {
+export declare class Switch extends BaseCheckbox {
 }
 
 /**