@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/web-components.d.ts

@@ -1,52 +1,65 @@
-import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
-import { DividerRole } from '@microsoft/fast-foundation/divider.js';
+import type { Constructable } from '@microsoft/fast-element';
+import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
-import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
-import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
-import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
-import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
-import { FASTMenuItem } from '@microsoft/fast-foundation/menu-item.js';
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
-import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
-import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
-import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
-import { FASTTab } from '@microsoft/fast-foundation/tab.js';
-import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
-import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
-import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
-import { MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
-import { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
-import { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
-import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
-import type { StaticallyComposableHTML } from '@microsoft/fast-foundation/utilities.js';
-import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
-import { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
+import { 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 type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 
 /**
- * The base class used for constructing a fluent-accordion custom element
+ * An Accordion Custom HTML Element
+ * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
  * @public
  */
-export declare class Accordion extends FASTAccordion {
+export declare class Accordion extends FASTElement {
+    /**
+     * Controls the expand mode of the Accordion, either allowing
+     * single or multiple item expansion.
+     * @public
+     *
+     * @remarks
+     * HTML attribute: expand-mode
+     */
+    expandmode: AccordionExpandMode;
+    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
+    /**
+     * @internal
+     */
+    slottedAccordionItems: HTMLElement[];
+    protected accordionItems: Element[];
+    /**
+     * @internal
+     */
+    slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    /**
+     * @internal
+     */
+    handleChange(source: any, propertyName: string): void;
+    private activeid;
+    private activeItemIndex;
+    private accordionIds;
+    private change;
+    private findExpandedItem;
+    private setItems;
+    private setSingleExpandMode;
+    private removeItemListeners;
+    private activeItemChange;
+    private handleExpandedChange;
+    private getItemIds;
+    private isSingleExpandMode;
+    private handleItemKeyDown;
+    private handleItemFocus;
+    private adjust;
+    private focusItem;
 }
 
 /**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-accordion\>
@@ -54,9 +67,72 @@ export declare class Accordion extends FASTAccordion {
 export declare const accordionDefinition: FASTElementDefinition<typeof Accordion>;
 
 /**
- * @internal
+ * Expand mode for {@link FASTAccordion}
+ * @public
+ */
+declare const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+
+/**
+ * Type for the {@link FASTAccordion} Expand Mode
+ * @public
+ */
+declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
+
+/**
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
  */
-export declare class AccordionItem extends FASTAccordionItem {
+export declare class AccordionItem extends FASTElement {
+    /**
+     * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+     * heading element.
+     *
+     * @defaultValue 2
+     * @public
+     * @remarks
+     * HTML attribute: heading-level
+     */
+    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Expands or collapses the item.
+     *
+     * @public
+     * @remarks
+     * HTML attribute: expanded
+     */
+    expanded: boolean;
+    /**
+     * Disables an accordion item
+     *
+     * @public
+     * @remarks
+     * HTML attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The item ID
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: id
+     */
+    id: string;
     /**
      * Defines accordion header font size.
      *
@@ -83,12 +159,26 @@ export declare class AccordionItem extends FASTAccordionItem {
      * HTML Attribute: expandIconPosition
      */
     expandIconPosition?: AccordionItemExpandIconPosition;
+    /**
+     * @internal
+     */
+    expandbutton: HTMLElement;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export declare interface AccordionItem extends StartEnd {
 }
 
 /**
- * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
- * {@link @microsoft/fast-foundation#accordionItemTemplate}
- *
  *
  * @public
  * @remarks
@@ -110,6 +200,15 @@ export declare const AccordionItemExpandIconPosition: {
  */
 export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
 
+/**
+ * Accordion Item configuration options
+ * @public
+ */
+export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+    expandedIcon?: StaticallyComposableHTML<AccordionItem>;
+    collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
+};
+
 /**
  * An Accordion Item header font size can be small, medium, large, and extra-large
  */
@@ -139,10 +238,85 @@ export declare const accordionStyles: ElementStyles;
 export declare const accordionTemplate: ElementViewTemplate<Accordion>;
 
 /**
- * The base class used for constructing a fluent-anchor-button custom element
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
  * @public
  */
-export declare class AnchorButton extends FASTAnchor {
+export declare class AnchorButton extends FASTElement {
+    /**
+     * Prompts the user to save the linked URL. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: download
+     */
+    download: string;
+    /**
+     * The URL the hyperlink references. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: href
+     */
+    href: string;
+    /**
+     * Hints at the language of the referenced resource. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: hreflang
+     */
+    hreflang: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: ping
+     */
+    ping: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: referrerpolicy
+     */
+    referrerpolicy: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: rel
+     */
+    rel: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: target
+     */
+    target: AnchorTarget;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: string;
+    /**
+     *
+     * Default slotted content
+     *
+     * @internal
+     */
+    defaultSlottedContent: HTMLElement[];
+    /**
+     * References the root element
+     */
+    control: HTMLAnchorElement;
     /**
      * The appearance the anchor button should have.
      *
@@ -201,6 +375,15 @@ export declare class AnchorButton extends FASTAnchor {
     disconnectedCallback(): void;
 }
 
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export declare interface AnchorButton extends StartEnd, DelegatesARIALink {
+}
+
 /**
  * Anchor Button Appearance constants
  * @public
@@ -220,17 +403,12 @@ export declare const AnchorButtonAppearance: {
 export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
 
 /**
- * The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
- * {@link @microsoft/fast-foundation#anchorTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-anchor-button\>
  */
 export declare const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
 
-export { AnchorButtonOptions }
-
 /**
  * An Anchor Button can be square, circular or rounded.
  * @public
@@ -269,6 +447,223 @@ export declare type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
  */
 export declare const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
 
+/**
+ * Anchor configuration options
+ * @public
+ */
+declare type AnchorOptions = StartEndOptions<AnchorButton>;
+export { AnchorOptions as AnchorButtonOptions }
+export { AnchorOptions }
+
+/**
+ * Anchor target values.
+ *
+ * @public
+ */
+export declare const AnchorTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+
+/**
+ * Type for anchor target values.
+ *
+ * @public
+ */
+export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
+
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+declare class ARIAGlobalStatesAndProperties {
+    /**
+     * Indicates whether assistive technologies will present all, or only parts of,
+     * the changed region based on the change notifications defined by the aria-relevant attribute.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-atomic}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-atomic
+     */
+    ariaAtomic: 'true' | 'false' | string | null;
+    /**
+     * Indicates an element is being modified and that assistive technologies MAY want to wait
+     * until the modifications are complete before exposing them to the user.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-busy}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-busy
+     */
+    ariaBusy: 'true' | 'false' | string | null;
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-controls}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-controls
+     */
+    ariaControls: string | null;
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-current}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-current
+     */
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-describedby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-describedby
+     */
+    ariaDescribedby: string | null;
+    /**
+     * Identifies the element that provides a detailed, extended description for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-details}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-details
+     */
+    ariaDetails: string | null;
+    /**
+     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-disabled}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-disabled
+     */
+    ariaDisabled: 'true' | 'false' | string | null;
+    /**
+     * Identifies the element that provides an error message for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-errormessage
+     */
+    ariaErrormessage: string | null;
+    /**
+     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+     * allows assistive technology to override the general default of reading in document source order.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-flowto}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-flowto
+     */
+    ariaFlowto: string | null;
+    /**
+     * Indicates the availability and type of interactive popup element,
+     * such as menu or dialog, that can be triggered by an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-haspopup
+     */
+    ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
+    /**
+     * Indicates whether the element is exposed to an accessibility API
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-hidden}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-hidden
+     */
+    ariaHidden: 'false' | 'true' | string | null;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-invalid}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-invalid
+     */
+    ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+    /**
+     * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-keyshortcuts
+     */
+    ariaKeyshortcuts: string | null;
+    /**
+     * Defines a string value that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-label}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
+    ariaLabel: string | null;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
+    ariaLabelledby: string | null;
+    /**
+     * Indicates that an element will be updated, and describes the types of updates the user agents,
+     * assistive technologies, and user can expect from the live region.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-live}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-live
+     */
+    ariaLive: 'assertive' | 'off' | 'polite' | string | null;
+    /**
+     * Identifies an element (or elements) in order to define a visual,
+     * functional, or contextual parent/child relationship between DOM elements
+     * where the DOM hierarchy cannot be used to represent the relationship.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-owns}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-owns
+     */
+    ariaOwns: string | null;
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-relevant}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-relevant
+     */
+    ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
+    /**
+     * Defines a human-readable, author-localized description for the role of an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-roledescription
+     */
+    ariaRoledescription: string | null;
+}
+
 /**
  * The base class used for constructing a fluent-avatar custom element
  * @public
@@ -621,9 +1016,6 @@ export declare const BadgeColor: {
 export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
 
 /**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
  *
  * @public
  * @remarks
@@ -680,37 +1072,245 @@ export declare const BadgeStyles: ElementStyles;
 
 export declare const BadgeTemplate: ElementViewTemplate<Badge>;
 
-export declare const borderRadiusCircular = "--borderRadiusCircular";
-
-export declare const borderRadiusLarge = "--borderRadiusLarge";
-
-export declare const borderRadiusMedium = "--borderRadiusMedium";
-
-export declare const borderRadiusNone = "--borderRadiusNone";
-
-export declare const borderRadiusSmall = "--borderRadiusSmall";
-
-export declare const borderRadiusXLarge = "--borderRadiusXLarge";
-
 /**
- * The base class used for constructing a fluent-button custom element
+ * A base class for progress components.
  * @public
  */
-export declare class Button extends FASTButton {
+declare class BaseProgress extends FASTElement {
     /**
-     * The appearance the button should have.
-     *
+     * The value of the progress
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: value
      */
-    appearance?: ButtonAppearance | undefined;
+    value: number | null;
+    protected valueChanged(): void;
     /**
-     * The shape the button should have.
-     *
+     * The minimum value
      * @public
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: min
+     */
+    min: number;
+    protected minChanged(): void;
+    /**
+     * The maximum value
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: number;
+    protected maxChanged(): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    percentComplete: number;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private updatePercentComplete;
+}
+
+/**
+ *
+ * @class TabList component
+ * @public
+ */
+export 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;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+
+export declare const borderRadiusCircular = "--borderRadiusCircular";
+
+export declare const borderRadiusLarge = "--borderRadiusLarge";
+
+export declare const borderRadiusMedium = "--borderRadiusMedium";
+
+export declare const borderRadiusNone = "--borderRadiusNone";
+
+export declare const borderRadiusSmall = "--borderRadiusSmall";
+
+export declare const borderRadiusXLarge = "--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 control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+export declare class Button extends FormAssociatedButton {
+    /**
+     * Determines if the element should receive document focus on page load.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    /**
+     * The id of a form to associate the element to.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: form
+     */
+    formId: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formaction
+     */
+    formaction: string;
+    protected formactionChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formenctype
+     */
+    formenctype: string;
+    protected formenctypeChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formmethod
+     */
+    formmethod: string;
+    protected formmethodChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formnovalidate
+     */
+    formnovalidate: boolean;
+    protected formnovalidateChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formtarget
+     */
+    formtarget: '_self' | '_blank' | '_parent' | '_top';
+    protected formtargetChanged(): void;
+    /**
+     * The button type.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: ButtonType;
+    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: ButtonAppearance | undefined;
+    /**
+     * The shape the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
      */
     shape?: ButtonShape | undefined;
     /**
@@ -742,8 +1342,45 @@ export declare class Button extends FASTButton {
      * Prevents disabledFocusable click events
      */
     private handleDisabledFocusableClick;
+    /**
+     *
+     * Default slotted content
+     *
+     * @public
+     * @remarks
+     */
+    defaultSlottedContent: HTMLElement[];
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    /**
+     * @internal
+     */
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Submits the parent form
+     */
+    private handleSubmission;
+    /**
+     * Resets the parent form
+     */
+    private handleFormReset;
+    control: HTMLButtonElement;
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export declare interface Button extends StartEnd, DelegatesARIAButton {
+}
+
+declare class _Button extends FASTElement {
+}
+
+declare interface _Button extends FormAssociated {
 }
 
 /**
@@ -765,15 +1402,17 @@ export declare const ButtonAppearance: {
 export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 
 /**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-button\>
  */
 export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
+/**
+ * Button configuration options
+ * @public
+ */
+declare type ButtonOptions = StartEndOptions<Button>;
 export { ButtonOptions }
 export { ButtonOptions as CompoundButtonOptions }
 export { ButtonOptions as MenuButtonOptions }
@@ -811,17 +1450,61 @@ export declare const ButtonSize: {
  */
 export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
 
+export declare const ButtonTemplate: ElementViewTemplate<Button>;
+
 /**
- * The template for the Button component.
+ * Button type values.
+ *
  * @public
  */
-export declare const ButtonTemplate: ElementViewTemplate<Button>;
+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;
+}
 
 /**
- * The base class used for constucting a fluent checkbox custom element
+ * 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
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
  * @public
  */
-export declare class Checkbox extends FASTCheckbox {
+export declare class Checkbox extends FormAssociatedCheckbox {
     /**
      * Sets shape of the checkbox.
      *
@@ -849,6 +1532,37 @@ export declare class Checkbox extends FASTCheckbox {
      * HTML Attribute: label-position
      */
     labelPosition?: CheckboxLabelPosition;
+    /**
+     * 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[];
+    /**
+     * The indeterminate state of the control
+     */
+    indeterminate: boolean;
+    constructor();
+    private toggleChecked;
+    /**
+     * @internal
+     */
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
+}
+
+declare class _Checkbox extends FASTElement {
+}
+
+declare interface _Checkbox extends CheckableFormAssociated {
 }
 
 /**
@@ -871,6 +1585,15 @@ export declare const CheckboxLabelPosition: {
 
 export declare type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
 
+/**
+ * Checkbox configuration options
+ * @public
+ */
+export declare type CheckboxOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Checkbox>;
+    indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
+};
+
 /**
  * Checkbox shape
  * @public
@@ -1515,6 +2238,10 @@ export declare const CompoundButtonAppearance: {
     readonly outline: "outline";
     readonly subtle: "subtle";
     readonly secondary: "secondary";
+    /**
+     * A Compound Button can be secondary, primary, outline, subtle, transparent
+     * @public
+     */
     readonly transparent: "transparent";
 };
 
@@ -1525,9 +2252,6 @@ export declare const CompoundButtonAppearance: {
 export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
 
 /**
- * The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-comopund-button\>
@@ -1556,10 +2280,6 @@ export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
  */
 export declare const CompoundButtonSize: {
     readonly small: "small";
-    /**
-     * A Compound Button can be on of several preset sizes.
-     * @public
-     */
     readonly medium: "medium";
     readonly large: "large";
 };
@@ -1578,6 +2298,13 @@ export declare const CompoundButtonStyles: ElementStyles;
  */
 export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
 
+/**
+ * Combined type to describe a Constructable Form-Associated type.
+ *
+ * @beta
+ */
+declare type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
+
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -1704,10 +2431,6 @@ export declare const CounterBadgeColor: {
 export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 
 /**
- * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
@@ -1784,33 +2507,99 @@ export declare const curveEasyEaseMax = "--curveEasyEaseMax";
 export declare const curveLinear = "--curveLinear";
 
 /**
- * Dialog component that extends the FASTElement class.
+ * Includes ARIA states and properties relating to the ARIA button role
  *
  * @public
- * @extends FASTElement
  */
-export declare class Dialog extends FASTElement {
-    /**
-     * @private
-     * Indicates whether focus is being trapped within the dialog
-     */
-    private isTrappingFocus;
+export declare class DelegatesARIAButton {
     /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
      * @public
-     * Lifecycle method called when the element is connected to the DOM
+     * @remarks
+     * HTML Attribute: aria-expanded
      */
-    connectedCallback(): void;
+    ariaExpanded: 'true' | 'false' | string | null;
     /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
      * @public
-     * Lifecycle method called when the element is disconnected from the DOM
+     * @remarks
+     * HTML Attribute: aria-pressed
      */
-    disconnectedCallback(): void;
+    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export declare interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
+}
+
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+export declare class DelegatesARIALink {
     /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#link} for more information
      * @public
-     * The dialog element
+     * @remarks
+     * HTML Attribute: aria-expanded
      */
-    dialog: HTMLDialogElement;
-    /**
+    ariaExpanded: 'true' | 'false' | string | null;
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+}
+
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+export declare class DelegatesARIATextbox {
+}
+
+export declare interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+
+/**
+ * Dialog component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class Dialog extends FASTElement {
+    /**
+     * @private
+     * Indicates whether focus is being trapped within the dialog
+     */
+    private isTrappingFocus;
+    /**
+     * @public
+     * Lifecycle method called when the element is connected to the DOM
+     */
+    connectedCallback(): void;
+    /**
+     * @public
+     * Lifecycle method called when the element is disconnected from the DOM
+     */
+    disconnectedCallback(): void;
+    /**
+     * @public
+     * The dialog element
+     */
+    dialog: HTMLDialogElement;
+    /**
      * @public
      * The title action elements
      */
@@ -2009,9 +2798,25 @@ export declare const DialogTemplate: ElementViewTemplate<Dialog>;
  * @class Divider component
  *
  * @remarks
- * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
  */
-export declare class Divider extends FASTDivider {
+export declare class Divider extends FASTElement {
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: DividerRole;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: DividerOrientation;
     /**
      * @property alignContent
      * @default center
@@ -2077,9 +2882,44 @@ export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
  */
 export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
 
-export { DividerOrientation }
+/**
+ * Divider orientation
+ * @public
+ */
+export declare const DividerOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * Divider roles
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+/**
+ * The types for Divider orientation
+ * @public
+ */
+export declare type DividerOrientation = ValuesOf<typeof DividerOrientation>;
+
+/**
+ * Divider roles
+ * @public
+ */
+export declare const DividerRole: {
+    /**
+     * The divider semantically separates content
+     */
+    readonly separator: "separator";
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    readonly presentation: "presentation";
+};
 
-export { DividerRole }
+/**
+ * The types for Divider roles
+ * @public
+ */
+export declare type DividerRole = ValuesOf<typeof DividerRole>;
 
 /** Divider styles
  * @public
@@ -2106,6 +2946,71 @@ export declare const durationUltraFast = "--durationUltraFast";
 
 export declare const durationUltraSlow = "--durationUltraSlow";
 
+/**
+ * Source:
+ * https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals
+ */
+declare interface ElementInternals_2 {
+    /**
+     * Returns the form owner of internals target element.
+     */
+    readonly form: HTMLFormElement | null;
+    /**
+     * Returns a NodeList of all the label elements that internals target element is associated with.
+     */
+    readonly labels: NodeList;
+    /**
+     * Returns the error message that would be shown to the user if internals target element was to be checked for validity.
+     */
+    readonly validationMessage: string;
+    /**
+     * Returns the ValidityState object for internals target element.
+     */
+    readonly validity: ValidityState;
+    /**
+     * Returns true if internals target element will be validated when the form is submitted; false otherwise.
+     */
+    readonly willValidate: boolean;
+    /**
+     * Returns true if internals target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
+     */
+    checkValidity(): boolean;
+    /**
+     * Returns true if internals target element has no validity problems; otherwise,
+     * returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets both the state and submission value of internals target element to value.
+     *
+     * While "null" isn't enumerated as a argument type (here)[https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface],
+     * In practice it appears to remove the value from the form data on submission. Adding it as a valid type here
+     * becuase that capability is required for checkbox and radio types
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Marks internals target element as suffering from the constraints indicated by the flags argument,
+     * and sets the element's validation message to message.
+     * If anchor is specified, the user agent might use
+     * it to indicate problems with the constraints of internals target
+     * element when the form owner is validated interactively or reportValidity() is called.
+     */
+    setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+}
+
+declare let ElementInternals_2: {
+    prototype: ElementInternals_2;
+    new (): ElementInternals_2;
+};
+
+/**
+ * End configuration options
+ * @public
+ */
+declare type EndOptions<TSource = any, TParent = any> = {
+    end?: StaticallyComposableHTML<TSource, TParent>;
+};
+
 export declare const FluentDesignSystem: Readonly<{
     prefix: "fluent";
     shadowRootMode: "open";
@@ -2146,6 +3051,102 @@ export declare const fontWeightRegular = "--fontWeightRegular";
 
 export declare const fontWeightSemibold = "--fontWeightSemibold";
 
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+declare function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+
+/**
+ * Base class for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+declare interface FormAssociated extends Omit<ElementInternals_2, 'labels'> {
+    dirtyValue: boolean;
+    disabled: boolean;
+    readonly elementInternals: ElementInternals_2 | null;
+    readonly formAssociated: boolean;
+    initialValue: string;
+    readonly labels: ReadonlyArray<Node[]>;
+    name: string;
+    required: boolean;
+    value: string;
+    currentValue: string;
+    attachProxy(): void;
+    detachProxy(): void;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+    requiredChanged(prev: boolean, next: boolean): void;
+    stopPropagation(e: Event): void;
+    /**
+     * Sets the validity of the custom element. By default this uses the proxy element to determine
+     * validity, but this can be extended or replaced in implementation.
+     *
+     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
+     */
+    validate(anchor?: HTMLElement): void;
+    valueChanged(previous: string, next: string): void;
+}
+
+/**
+ * @beta
+ */
+declare class FormAssociatedButton extends FormAssociatedButton_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedButton_base: typeof _Button;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedCheckbox extends FormAssociatedCheckbox_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedCheckbox_base: typeof _Checkbox;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedRadio_base: typeof _Radio;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedSlider extends FormAssociatedSlider_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedSlider_base: typeof _Slider;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedSwitch_base: typeof _Switch;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedTextField_base: typeof _TextField;
+
 /**
  * The base class used for constucting a fluent image custom element
  * @public
@@ -2571,9 +3572,6 @@ export declare const MenuButtonAppearance: {
 export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
 
 /**
- * The Fluent Menu Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-button\>
@@ -2628,50 +3626,287 @@ export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
 export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
 
 /**
- * The base class used for constructing a fluent-menu-item custom element
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
  * @public
  */
-export declare class MenuItem extends FASTMenuItem {
+export declare class MenuItem extends FASTElement {
+    /**
+     * The disabled state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The expanded state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: expanded
+     */
+    expanded: boolean;
+    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: MenuItemRole;
+    /**
+     * Cleanup function for the submenu positioner.
+     *
+     * @public
+     */
+    cleanup: () => void;
+    /**
+     * The checked value of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checked: boolean;
+    protected checkedChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * The hidden attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    hidden: boolean;
+    /**
+     * The submenu slotted content.
+     *
+     * @internal
+     */
+    slottedSubmenu: HTMLElement[];
+    /**
+     * @internal
+     */
+    get hasSubmenu(): boolean;
+    /**
+     * Sets the submenu and updates its position.
+     *
+     * @internal
+     */
+    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    /**
+     * The container for the submenu.
+     *
+     * @internal
+     */
+    submenuContainer: HTMLDivElement;
+    /**
+     * @internal
+     */
+    submenu: HTMLElement | undefined;
+    private focusSubmenuOnLoad;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    submenuLoaded: () => void;
+    /**
+     * @internal
+     */
+    handleMouseOver: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOut: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    private closeSubMenu;
+    /**
+     * @internal
+     */
+    private expandAndFocus;
+    /**
+     * @internal
+     */
+    private invoke;
+    /**
+     * Calculate and apply submenu positioning.
+     *
+     * @public
+     */
+    updateSubmenu(): void;
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export declare interface MenuItem extends StartEnd {
 }
 
 export declare type MenuItemColumnCount = 0 | 1 | 2;
 
 /**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-item>
  */
 export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
 
-export { MenuItemRole }
-
-/** MenuItem styles
- * @public
- */
-export declare const MenuItemStyles: ElementStyles;
-
-export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
-
 /**
- * The base class used for constructing a fluent-menu-list custom element
+ * Menu Item configuration options
  * @public
  */
-export declare class MenuList extends FASTMenu {
-    protected setItems(): void;
-    private static elementIndent;
-}
+export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
+    checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
+    expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
+    radioIndicator?: StaticallyComposableHTML<MenuItem>;
+};
 
 /**
- * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
- * {@link @microsoft/fast-foundation#menuTemplate}
- *
- *
+ * Menu items roles.
  * @public
- * @remarks
+ */
+export declare const MenuItemRole: {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    readonly menuitem: "menuitem";
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    readonly menuitemcheckbox: "menuitemcheckbox";
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    readonly menuitemradio: "menuitemradio";
+};
+
+/**
+ * The types for menu item roles
+ * @public
+ */
+export declare type MenuItemRole = ValuesOf<typeof MenuItemRole>;
+
+/** MenuItem styles
+ * @public
+ */
+export declare const MenuItemStyles: ElementStyles;
+
+export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
+
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
+ * @public
+ */
+export declare class MenuList extends FASTElement {
+    /**
+     * @internal
+     */
+    items: HTMLElement[];
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    protected menuItems: Element[] | undefined;
+    private expandedItem;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    private static focusableElementRoles;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * Collapses any expanded menu items.
+     *
+     * @public
+     */
+    collapseExpandedItem(): void;
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    handleFocusOut: (e: FocusEvent) => void;
+    private handleItemFocus;
+    private handleExpandedChanged;
+    private removeItemListeners;
+    private static elementIndent;
+    protected setItems(): void;
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * handle change from child element
+     */
+    private changeHandler;
+    /**
+     * check if the item is a menu item
+     */
+    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    /**
+     * check if the item is focusable
+     */
+    private isFocusableElement;
+    private setFocus;
+}
+
+/**
+ * @public
+ * @remarks
  * HTML Element: <fluent-menu-list>
  */
 export declare const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
@@ -2691,10 +3926,17 @@ export declare const MenuStyles: ElementStyles;
 export declare const MenuTemplate: ElementViewTemplate<Menu>;
 
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
-declare class ProgressBar_2 extends FASTProgress {
+declare class ProgressBar_2 extends BaseProgress {
     /**
      * The thickness of the progress bar
      *
@@ -2784,12 +4026,86 @@ export declare const ProgressBarValidationState: {
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
 /**
- * The base class used for constructing a fluent-radio custom element
+ * Progress configuration options
  * @public
  */
-export declare class Radio extends FASTRadio {
+export declare type ProgressOptions = {
+    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar_2>;
+    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar_2>;
+};
+
+/**
+ * An circular Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @slot determinate - The slot for a custom determinate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart background - The background
+ *
+ * @public
+ */
+declare class ProgressRing extends BaseProgress {
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Radio extends FormAssociatedRadio implements RadioControl {
+    /**
+     * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
+     */
+    name: string;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    private get radioGroup();
+    /**
+     * @internal
+     */
+    defaultCheckedChanged(): void;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private isInsideRadioGroup;
+    /**
+     * Handles key presses on the radio.
+     * @beta
+     */
+    keypressHandler(e: KeyboardEvent): boolean | void;
+}
+
+declare class _Radio extends FASTElement {
 }
 
+declare interface _Radio extends CheckableFormAssociated {
+}
+
+/**
+ * @public
+ */
+export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+
 /**
  * The Fluent Radio Element.
  *
@@ -2804,7 +4120,7 @@ export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
  * The base class used for constructing a fluent-radio-group custom element
  * @public
  */
-export declare class RadioGroup extends FASTRadioGroup {
+export declare class RadioGroup extends FASTElement {
     /**
      * sets radio layout styles
      *
@@ -2813,100 +4129,458 @@ export declare class RadioGroup extends FASTRadioGroup {
      * HTML Attribute: stacked
      */
     stacked: boolean;
+    /**
+     * When true, the child radios 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;
+    /**
+     * Disables the radio group and child radios.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The name of the radio group. Setting this value will set the name value
+     * for all child radio elements.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name: string;
+    protected nameChanged(): void;
+    /**
+     * The value of the checked radio
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: string;
+    protected valueChanged(): void;
+    /**
+     * The orientation of the group
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: RadioGroupOrientation;
+    childItems: HTMLElement[];
+    /**
+     * @internal
+     */
+    slottedRadioButtons: HTMLElement[];
+    protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
+    private selectedRadio;
+    private focusedRadio;
+    private direction;
+    private get parentToolbar();
+    private get isInsideToolbar();
+    private get isInsideFoundationToolbar();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupRadioButtons;
+    private radioChangeHandler;
+    private moveToRadioByIndex;
+    private moveRightOffGroup;
+    private moveLeftOffGroup;
+    /**
+     * @internal
+     */
+    focusOutHandler: (e: FocusEvent) => boolean | void;
+    /**
+     * @internal
+     */
+    handleDisabledClick: (e: MouseEvent) => void | boolean;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void | boolean;
+    private shouldMoveOffGroupToTheRight;
+    private shouldMoveOffGroupToTheLeft;
+    private checkFocusedRadio;
+    private moveRight;
+    private moveLeft;
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
+    keydownHandler: (e: KeyboardEvent) => boolean | void;
+}
+
+/**
+ * The Fluent RadioGroup Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio-group\>
+ */
+export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
+
+/**
+ * Radio Group orientation
+ * @public
+ */
+declare const RadioGroupOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * Radio Group orientation
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+/**
+ * Types of Radio Group orientation
+ * @public
+ */
+declare type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
+
+/** RadioGroup styles
+ * @public
+ */
+export declare const RadioGroupStyles: ElementStyles;
+
+export declare const RadioGroupTemplate: ElementViewTemplate<RadioGroup>;
+
+/**
+ * Radio configuration options
+ * @public
+ */
+export declare type RadioOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Radio>;
+};
+
+/** Radio styles
+ * @public
+ */
+export declare const RadioStyles: ElementStyles;
+
+export declare const RadioTemplate: ElementViewTemplate<Radio>;
+
+/**
+ * @internal
+ */
+export declare const roleForMenuItem: {
+    [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+};
+
+/**
+ * Sets the theme tokens on defaultNode.
+ * @param theme Flat object of theme token values.
+ */
+export declare const setTheme: (theme: Theme) => void;
+
+export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
+
+export declare const shadow16 = "--shadow16";
+
+export declare const shadow16Brand = "--shadow16Brand";
+
+export declare const shadow2 = "--shadow2";
+
+export declare const shadow28 = "--shadow28";
+
+export declare const shadow28Brand = "--shadow28Brand";
+
+export declare const shadow2Brand = "--shadow2Brand";
+
+export declare const shadow4 = "--shadow4";
+
+export declare const shadow4Brand = "--shadow4Brand";
+
+export declare const shadow64 = "--shadow64";
+
+export declare const shadow64Brand = "--shadow64Brand";
+
+export declare const shadow8 = "--shadow8";
+
+export declare const shadow8Brand = "--shadow8Brand";
+
+/**
+ * The base class used for constructing a fluent-slider custom element
+ * @public
+ */
+export declare class Slider extends FormAssociatedSlider implements SliderConfiguration {
+    /**
+     * The size of the slider
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SliderSize;
+    handleChange(source: any, propertyName: string): void;
+    private stepStyles?;
+    /**
+     * Handles changes to step styling based on the step value
+     * NOTE: This function is not a changed callback, stepStyles is not observable
+     */
+    private handleStepStyles;
+    /**
+     * 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;
+    /**
+     * @internal
+     */
+    track: HTMLDivElement;
+    /**
+     * @internal
+     */
+    thumb: HTMLDivElement;
+    /**
+     * @internal
+     */
+    stepMultiplier: number;
+    /**
+     * @internal
+     */
+    direction: Direction;
+    /**
+     * @internal
+     */
+    isDragging: boolean;
+    /**
+     * @internal
+     */
+    position: string;
+    /**
+     * @internal
+     */
+    trackWidth: number;
+    /**
+     * @internal
+     */
+    trackMinWidth: number;
+    /**
+     * @internal
+     */
+    trackHeight: number;
+    /**
+     * @internal
+     */
+    trackLeft: number;
+    /**
+     * @internal
+     */
+    trackMinHeight: number;
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+     *
+     * @public
+     */
+    valueTextFormatter: (value: string) => string | null;
+    /**
+     * @internal
+     */
+    valueChanged(previous: string, next: string): void;
+    /**
+     * The minimum allowed value.
+     *
+     * @defaultValue - 0
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: number;
+    protected minChanged(): void;
+    /**
+     * The maximum allowed value.
+     *
+     * @defaultValue - 10
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: number;
+    protected maxChanged(): void;
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: step
+     */
+    step: number | undefined;
+    protected stepChanged(): void;
+    /**
+     * The orientation of the slider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: Orientation;
+    protected orientationChanged(): void;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    mode: SliderMode;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment(): void;
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement(): void;
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * Gets the actual step value for the slider
+     *
+     */
+    private get stepValue();
+    /**
+     * Places the thumb based on the current value
+     *
+     * @public
+     * @param direction - writing mode
+     */
+    private setThumbPositionForOrientation;
+    /**
+     * Update the step multiplier used to ensure rounding errors from steps that
+     * are not whole numbers
+     */
+    private updateStepMultiplier;
+    private setupTrackConstraints;
+    private setupListeners;
+    /**
+     * @internal
+     */
+    initialValue: string;
+    private get midpoint();
+    private setupDefaultValue;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
+     */
+    handleThumbMouseDown: (event: MouseEvent | null) => void;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    private handleMouseMove;
+    /**
+     * Calculate the new value based on the given raw pixel value.
+     *
+     * @param rawValue - the value to be converted to a constrained value
+     * @returns the constrained value
+     *
+     * @internal
+     */
+    calculateNewValue(rawValue: number): number;
+    /**
+     * Handle a window mouse up during a drag operation
+     */
+    private handleWindowMouseUp;
+    private stopDragging;
+    /**
+     *
+     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     */
+    handleMouseDown: (e: MouseEvent | null) => void;
+    private convertToConstrainedValue;
+}
+
+declare class _Slider extends FASTElement {
+}
+
+declare interface _Slider extends FormAssociated {
 }
 
 /**
- * The Fluent RadioGroup Element.
+ * @public
+ */
+export declare interface SliderConfiguration {
+    max: number;
+    min: number;
+    orientation?: SliderOrientation;
+    direction?: Direction;
+    disabled?: boolean;
+}
+
+/**
+ * The Fluent Slider Element.
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fluent-radio-group\>
+ * HTML Element: \<fluent-slider\>
  */
-export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
-
-export { RadioGroupOrientation }
+export declare const SliderDefinition: FASTElementDefinition<typeof Slider>;
 
-/** RadioGroup styles
+/**
  * @public
  */
-export declare const RadioGroupStyles: ElementStyles;
-
-export declare const RadioGroupTemplate: ElementViewTemplate<RadioGroup>;
+export declare const SliderMode: {
+    readonly singleValue: "single-value";
+};
 
-/** Radio styles
+/**
+ * The types for the selection mode of the slider
  * @public
  */
-export declare const RadioStyles: ElementStyles;
-
-export declare const RadioTemplate: ElementViewTemplate<Radio>;
+export declare type SliderMode = ValuesOf<typeof SliderMode>;
 
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme Flat object of theme token values.
+ * Slider configuration options
+ * @public
  */
-export declare const setTheme: (theme: Theme) => void;
-
-export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
-
-export declare const shadow16 = "--shadow16";
-
-export declare const shadow16Brand = "--shadow16Brand";
-
-export declare const shadow2 = "--shadow2";
-
-export declare const shadow28 = "--shadow28";
-
-export declare const shadow28Brand = "--shadow28Brand";
-
-export declare const shadow2Brand = "--shadow2Brand";
-
-export declare const shadow4 = "--shadow4";
-
-export declare const shadow4Brand = "--shadow4Brand";
-
-export declare const shadow64 = "--shadow64";
-
-export declare const shadow64Brand = "--shadow64Brand";
-
-export declare const shadow8 = "--shadow8";
-
-export declare const shadow8Brand = "--shadow8Brand";
+export declare type SliderOptions = {
+    thumb?: StaticallyComposableHTML<Slider>;
+};
 
 /**
- * The base class used for constructing a fluent-slider custom element
  * @public
  */
-export declare class Slider extends FASTSlider {
-    /**
-     * The size of the slider
-     * @public
-     * @remarks
-     * HTML Attribute: size
-     */
-    size?: SliderSize;
-    handleChange(source: any, propertyName: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private stepStyles?;
-    /**
-     * Handles changes to step styling based on the step value
-     * NOTE: This function is not a changed callback, stepStyles is not observable
-     */
-    private handleStepStyles;
-}
+export declare const SliderOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
 
 /**
- * The Fluent Slider Element.
- *
- *
+ * The types for the orientation of the slider
  * @public
- * @remarks
- * HTML Element: \<fluent-slider\>
  */
-export declare const SliderDefinition: FASTElementDefinition<typeof Slider>;
-
-export { SliderOrientation }
+export declare type SliderOrientation = ValuesOf<typeof SliderOrientation>;
 
 /**
  * SliderSize Constants
@@ -2928,7 +4602,7 @@ export declare type SliderSize = ValuesOf<typeof SliderSize>;
  */
 export declare const SliderStyles: ElementStyles;
 
-export declare const SliderTemplate: ElementViewTemplate<FASTSlider>;
+export declare const SliderTemplate: ElementViewTemplate<Slider>;
 
 export declare const spacingHorizontalL = "--spacingHorizontalL";
 
@@ -2978,7 +4652,7 @@ export declare const spacingVerticalXXXL = "--spacingVerticalXXXL";
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export declare class Spinner extends FASTProgressRing {
+export declare class Spinner extends ProgressRing {
     /**
      * The size of the spinner
      *
@@ -3014,10 +4688,6 @@ export declare const SpinnerAppearance: {
 export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 
 /**
- * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
- * {@link @microsoft/fast-foundation#progress-ringTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-spinner\>
@@ -3048,6 +4718,40 @@ export declare const SpinnerStyles: ElementStyles;
 
 export declare const SpinnerTemplate: ElementViewTemplate<Spinner>;
 
+/**
+ * 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;
+
 export declare const strokeWidthThick = "--strokeWidthThick";
 
 export declare const strokeWidthThicker = "--strokeWidthThicker";
@@ -3060,7 +4764,7 @@ declare const styles: ElementStyles;
 export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
 
-export declare class Switch extends FASTSwitch {
+export declare class Switch extends FormAssociatedSwitch {
     /**
      * The label position of the switch
      *
@@ -3070,6 +4774,40 @@ export declare class Switch extends FASTSwitch {
      * 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 {
 }
 
 /**
@@ -3097,6 +4835,10 @@ export declare const SwitchLabelPosition: {
  */
 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>;
@@ -3104,29 +4846,39 @@ export declare const SwitchTemplate: ElementViewTemplate<Switch>;
 /**
  * Tab extends the FASTTab and is a child of the TabList
  */
-export declare class Tab extends FASTTab {
+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 class TabPanel extends FASTTabPanel {
+/**
+ * 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<FASTTabPanel, any>;
+export declare const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
 
-/**
- * TabList extends FASTTabs and is used for constructing a fluent-tab-list custom html element.
- *
- * @class TabList component
- * @public
- */
-export declare class Tabs extends FASTTabs {
+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.
@@ -3207,6 +4959,9 @@ export declare class Tabs extends FASTTabs {
     tabsChanged(): void;
 }
 
+export declare interface Tabs extends StartEnd {
+}
+
 export declare const TabsAppearance: {
     readonly subtle: "subtle";
     readonly transparent: "transparent";
@@ -3216,7 +4971,26 @@ export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
 
 export declare const TabsDefinition: FASTElementDefinition<typeof Tabs>;
 
-export { TabsOrientation }
+/**
+ * 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";
@@ -3228,11 +5002,11 @@ export declare type TabsSize = ValuesOf<typeof TabsSize>;
 
 export declare const TabsStyles: ElementStyles;
 
-export declare const TabsTemplate: ElementViewTemplate<FASTTabs, any>;
+export declare const TabsTemplate: ElementViewTemplate<Tabs, any>;
 
 export declare const TabStyles: ElementStyles;
 
-export declare const TabTemplate: ElementViewTemplate<FASTTab, any>;
+export declare const TabTemplate: ElementViewTemplate<Tab, any>;
 
 /**
  * The base class used for constructing a fluent-text custom element
@@ -3352,6 +5126,47 @@ export declare type TextAlign = ValuesOf<typeof TextAlign>;
  */
 export declare const TextDefinition: FASTElementDefinition<typeof Text_2>;
 
+declare class _TextField extends FASTElement {
+}
+
+declare interface _TextField extends FormAssociated {
+}
+
+export declare type TextFieldOptions = StartEndOptions<TextInput>;
+
+/**
+ * Text field sub-types
+ * @public
+ */
+export declare const TextFieldType: {
+    /**
+     * An email TextField
+     */
+    readonly email: "email";
+    /**
+     * A password TextField
+     */
+    readonly password: "password";
+    /**
+     * A telephone TextField
+     */
+    readonly tel: "tel";
+    /**
+     * A text TextField
+     */
+    readonly text: "text";
+    /**
+     * A URL TextField
+     */
+    readonly url: "url";
+};
+
+/**
+ * Types for the text field sub-types
+ * @public
+ */
+export declare type TextFieldType = ValuesOf<typeof TextFieldType>;
+
 /**
  * TextFont Constants
  * @public
@@ -3368,11 +5183,7 @@ export declare const TextFont: {
  */
 export declare type TextFont = ValuesOf<typeof TextFont>;
 
-/**
- * The base class used for constructing a fluent-text-input custom element
- * @public
- */
-export declare class TextInput extends FASTTextField {
+export declare class TextInput extends FormAssociatedTextField {
     /**
      * Defines TextInput control size
      *
@@ -3391,6 +5202,126 @@ export declare class TextInput extends FASTTextField {
      * HTML Attribute: appearance
      */
     appearance?: TextInputAppearance;
+    /**
+     * 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;
+    /**
+     * Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    protected autofocusChanged(): void;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute does is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    protected placeholderChanged(): void;
+    /**
+     * Allows setting a type or mode of text.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: TextFieldType;
+    private typeChanged;
+    /**
+     * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
+     * @public
+     * @remarks
+     * HTML Attribute: list
+     */
+    list: string;
+    protected listChanged(): void;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    protected maxlengthChanged(): void;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    protected minlengthChanged(): void;
+    /**
+     * A regular expression that the value must match to pass validation.
+     * @public
+     * @remarks
+     * HTMLAttribute: pattern
+     */
+    pattern: string;
+    protected patternChanged(): void;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    size: number;
+    protected sizeChanged(): void;
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    spellcheck: boolean;
+    protected spellcheckChanged(): void;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * A reference to the internal input element
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * Selects all the text in the text field
+     *
+     * @public
+     */
+    select(): void;
+    /**
+     * Handles the internal control's `input` event
+     * @internal
+     */
+    handleTextInput(): void;
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange(): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+}
+
+export declare interface TextInput extends StartEnd, DelegatesARIATextbox {
 }
 
 /**
@@ -3446,8 +5377,6 @@ export declare const TextInputStyles: ElementStyles;
  */
 export declare const TextInputTemplate: ElementViewTemplate<TextInput>;
 
-export { TextInputType }
-
 /**
  * TextSize constants
  * @public
@@ -3566,8 +5495,6 @@ export declare const ToggleButtonAppearance: {
 export declare type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
 
 /**
- * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
  *
  * @public
  * @remarks
@@ -3615,4 +5542,30 @@ export declare const ToggleButtonStyles: ElementStyles;
  */
 export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 
+/**
+ * This file enables typing support for ElementInternals APIs.
+ * It is largely taken from https://github.com/microsoft/TSJS-lib-generator/pull/818/files.
+ *
+ * When TypeScript adds support for these APIs we can delete this file.
+ */
+declare interface ValidityStateFlags {
+    badInput?: boolean;
+    customError?: boolean;
+    patternMismatch?: boolean;
+    rangeOverflow?: boolean;
+    rangeUnderflow?: boolean;
+    stepMismatch?: boolean;
+    tooLong?: boolean;
+    tooShort?: boolean;
+    typeMismatch?: boolean;
+    valueMissing?: boolean;
+}
+
+/**
+ * Helper for enumerating a type from a const object
+ * Example: export type Foo = ValuesOf\<typeof Foo\>
+ * @public
+ */
+declare type ValuesOf<T> = T[keyof T];
+
 export { }