@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.8

package/dist/web-components.d.ts

@@ -1,53 +1,65 @@
-import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import { CSSDesignToken } from '@microsoft/fast-foundation/design-token.js';
-import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
-import { DividerRole } from '@microsoft/fast-foundation/divider.js';
+import 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\>
@@ -55,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.
      *
@@ -84,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
@@ -111,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
  */
@@ -140,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.
      *
@@ -202,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
@@ -221,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
@@ -270,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
@@ -622,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
@@ -681,49 +1072,257 @@ export declare const BadgeStyles: ElementStyles;
 
 export declare const BadgeTemplate: ElementViewTemplate<Badge>;
 
-export declare const borderRadiusCircular: CSSDesignToken<string>;
-
-export declare const borderRadiusLarge: CSSDesignToken<string>;
-
-export declare const borderRadiusMedium: CSSDesignToken<string>;
-
-export declare const borderRadiusNone: CSSDesignToken<string>;
-
-export declare const borderRadiusSmall: CSSDesignToken<string>;
-
-export declare const borderRadiusXLarge: CSSDesignToken<string>;
-
 /**
- * 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
      */
-    shape?: ButtonShape | undefined;
+    min: number;
+    protected minChanged(): void;
     /**
-     * The size the button should have.
-     *
+     * The maximum value
      * @public
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: max
      */
-    size?: ButtonSize;
+    max: number;
+    protected maxChanged(): void;
     /**
-     * The button has an icon only, no text content
+     * 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;
+    /**
+     * The size the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: ButtonSize;
+    /**
+     * The button has an icon only, no text content
      *
      * @public
      * @remarks
@@ -743,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 {
 }
 
 /**
@@ -766,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 }
@@ -812,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.
      *
@@ -850,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 {
 }
 
 /**
@@ -872,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
@@ -906,599 +1628,599 @@ export declare const CheckboxStyles: ElementStyles;
  */
 export declare const CheckboxTemplate: ElementViewTemplate<Checkbox>;
 
-export declare const colorBackgroundOverlay: CSSDesignToken<string>;
+export declare const colorBackgroundOverlay = "--colorBackgroundOverlay";
 
-export declare const colorBrandBackground: CSSDesignToken<string>;
+export declare const colorBrandBackground = "--colorBrandBackground";
 
-export declare const colorBrandBackground2: CSSDesignToken<string>;
+export declare const colorBrandBackground2 = "--colorBrandBackground2";
 
-export declare const colorBrandBackgroundHover: CSSDesignToken<string>;
+export declare const colorBrandBackgroundHover = "--colorBrandBackgroundHover";
 
-export declare const colorBrandBackgroundInverted: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInverted = "--colorBrandBackgroundInverted";
 
-export declare const colorBrandBackgroundInvertedHover: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedHover = "--colorBrandBackgroundInvertedHover";
 
-export declare const colorBrandBackgroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedPressed = "--colorBrandBackgroundInvertedPressed";
 
-export declare const colorBrandBackgroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedSelected = "--colorBrandBackgroundInvertedSelected";
 
-export declare const colorBrandBackgroundPressed: CSSDesignToken<string>;
+export declare const colorBrandBackgroundPressed = "--colorBrandBackgroundPressed";
 
-export declare const colorBrandBackgroundSelected: CSSDesignToken<string>;
+export declare const colorBrandBackgroundSelected = "--colorBrandBackgroundSelected";
 
-export declare const colorBrandBackgroundStatic: CSSDesignToken<string>;
+export declare const colorBrandBackgroundStatic = "--colorBrandBackgroundStatic";
 
-export declare const colorBrandForeground1: CSSDesignToken<string>;
+export declare const colorBrandForeground1 = "--colorBrandForeground1";
 
-export declare const colorBrandForeground2: CSSDesignToken<string>;
+export declare const colorBrandForeground2 = "--colorBrandForeground2";
 
-export declare const colorBrandForegroundInverted: CSSDesignToken<string>;
+export declare const colorBrandForegroundInverted = "--colorBrandForegroundInverted";
 
-export declare const colorBrandForegroundInvertedHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundInvertedHover = "--colorBrandForegroundInvertedHover";
 
-export declare const colorBrandForegroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundInvertedPressed = "--colorBrandForegroundInvertedPressed";
 
-export declare const colorBrandForegroundLink: CSSDesignToken<string>;
+export declare const colorBrandForegroundLink = "--colorBrandForegroundLink";
 
-export declare const colorBrandForegroundLinkHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkHover = "--colorBrandForegroundLinkHover";
 
-export declare const colorBrandForegroundLinkPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkPressed = "--colorBrandForegroundLinkPressed";
 
-export declare const colorBrandForegroundLinkSelected: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkSelected = "--colorBrandForegroundLinkSelected";
 
-export declare const colorBrandForegroundOnLight: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLight = "--colorBrandForegroundOnLight";
 
-export declare const colorBrandForegroundOnLightHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightHover = "--colorBrandForegroundOnLightHover";
 
-export declare const colorBrandForegroundOnLightPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightPressed = "--colorBrandForegroundOnLightPressed";
 
-export declare const colorBrandForegroundOnLightSelected: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightSelected = "--colorBrandForegroundOnLightSelected";
 
-export declare const colorBrandShadowAmbient: CSSDesignToken<string>;
+export declare const colorBrandShadowAmbient = "--colorBrandShadowAmbient";
 
-export declare const colorBrandShadowKey: CSSDesignToken<string>;
+export declare const colorBrandShadowKey = "--colorBrandShadowKey";
 
-export declare const colorBrandStroke1: CSSDesignToken<string>;
+export declare const colorBrandStroke1 = "--colorBrandStroke1";
 
-export declare const colorBrandStroke2: CSSDesignToken<string>;
+export declare const colorBrandStroke2 = "--colorBrandStroke2";
 
-export declare const colorCompoundBrandBackground: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackground = "--colorCompoundBrandBackground";
 
-export declare const colorCompoundBrandBackgroundHover: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackgroundHover = "--colorCompoundBrandBackgroundHover";
 
-export declare const colorCompoundBrandBackgroundPressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackgroundPressed = "--colorCompoundBrandBackgroundPressed";
 
-export declare const colorCompoundBrandForeground1: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1 = "--colorCompoundBrandForeground1";
 
-export declare const colorCompoundBrandForeground1Hover: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1Hover = "--colorCompoundBrandForeground1Hover";
 
-export declare const colorCompoundBrandForeground1Pressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1Pressed = "--colorCompoundBrandForeground1Pressed";
 
-export declare const colorCompoundBrandStroke: CSSDesignToken<string>;
+export declare const colorCompoundBrandStroke = "--colorCompoundBrandStroke";
 
-export declare const colorCompoundBrandStrokeHover: CSSDesignToken<string>;
+export declare const colorCompoundBrandStrokeHover = "--colorCompoundBrandStrokeHover";
 
-export declare const colorCompoundBrandStrokePressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandStrokePressed = "--colorCompoundBrandStrokePressed";
 
-export declare const colorNeutralBackground1: CSSDesignToken<string>;
+export declare const colorNeutralBackground1 = "--colorNeutralBackground1";
 
-export declare const colorNeutralBackground1Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Hover = "--colorNeutralBackground1Hover";
 
-export declare const colorNeutralBackground1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Pressed = "--colorNeutralBackground1Pressed";
 
-export declare const colorNeutralBackground1Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Selected = "--colorNeutralBackground1Selected";
 
-export declare const colorNeutralBackground2: CSSDesignToken<string>;
+export declare const colorNeutralBackground2 = "--colorNeutralBackground2";
 
-export declare const colorNeutralBackground2Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Hover = "--colorNeutralBackground2Hover";
 
-export declare const colorNeutralBackground2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Pressed = "--colorNeutralBackground2Pressed";
 
-export declare const colorNeutralBackground2Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Selected = "--colorNeutralBackground2Selected";
 
-export declare const colorNeutralBackground3: CSSDesignToken<string>;
+export declare const colorNeutralBackground3 = "--colorNeutralBackground3";
 
-export declare const colorNeutralBackground3Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Hover = "--colorNeutralBackground3Hover";
 
-export declare const colorNeutralBackground3Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Pressed = "--colorNeutralBackground3Pressed";
 
-export declare const colorNeutralBackground3Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Selected = "--colorNeutralBackground3Selected";
 
-export declare const colorNeutralBackground4: CSSDesignToken<string>;
+export declare const colorNeutralBackground4 = "--colorNeutralBackground4";
 
-export declare const colorNeutralBackground4Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Hover = "--colorNeutralBackground4Hover";
 
-export declare const colorNeutralBackground4Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Pressed = "--colorNeutralBackground4Pressed";
 
-export declare const colorNeutralBackground4Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Selected = "--colorNeutralBackground4Selected";
 
-export declare const colorNeutralBackground5: CSSDesignToken<string>;
+export declare const colorNeutralBackground5 = "--colorNeutralBackground5";
 
-export declare const colorNeutralBackground5Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Hover = "--colorNeutralBackground5Hover";
 
-export declare const colorNeutralBackground5Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Pressed = "--colorNeutralBackground5Pressed";
 
-export declare const colorNeutralBackground5Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Selected = "--colorNeutralBackground5Selected";
 
-export declare const colorNeutralBackground6: CSSDesignToken<string>;
+export declare const colorNeutralBackground6 = "--colorNeutralBackground6";
 
-export declare const colorNeutralBackgroundDisabled: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundDisabled = "--colorNeutralBackgroundDisabled";
 
-export declare const colorNeutralBackgroundInverted: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundInverted = "--colorNeutralBackgroundInverted";
 
-export declare const colorNeutralBackgroundInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundInvertedDisabled = "--colorNeutralBackgroundInvertedDisabled";
 
-export declare const colorNeutralBackgroundStatic: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundStatic = "--colorNeutralBackgroundStatic";
 
-export declare const colorNeutralForeground1: CSSDesignToken<string>;
+export declare const colorNeutralForeground1 = "--colorNeutralForeground1";
 
-export declare const colorNeutralForeground1Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Hover = "--colorNeutralForeground1Hover";
 
-export declare const colorNeutralForeground1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Pressed = "--colorNeutralForeground1Pressed";
 
-export declare const colorNeutralForeground1Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Selected = "--colorNeutralForeground1Selected";
 
-export declare const colorNeutralForeground1Static: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Static = "--colorNeutralForeground1Static";
 
-export declare const colorNeutralForeground2: CSSDesignToken<string>;
+export declare const colorNeutralForeground2 = "--colorNeutralForeground2";
 
-export declare const colorNeutralForeground2BrandHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandHover = "--colorNeutralForeground2BrandHover";
 
-export declare const colorNeutralForeground2BrandPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandPressed = "--colorNeutralForeground2BrandPressed";
 
-export declare const colorNeutralForeground2BrandSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandSelected = "--colorNeutralForeground2BrandSelected";
 
-export declare const colorNeutralForeground2Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Hover = "--colorNeutralForeground2Hover";
 
-export declare const colorNeutralForeground2Link: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Link = "--colorNeutralForeground2Link";
 
-export declare const colorNeutralForeground2LinkHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkHover = "--colorNeutralForeground2LinkHover";
 
-export declare const colorNeutralForeground2LinkPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkPressed = "--colorNeutralForeground2LinkPressed";
 
-export declare const colorNeutralForeground2LinkSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkSelected = "--colorNeutralForeground2LinkSelected";
 
-export declare const colorNeutralForeground2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Pressed = "--colorNeutralForeground2Pressed";
 
-export declare const colorNeutralForeground2Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Selected = "--colorNeutralForeground2Selected";
 
-export declare const colorNeutralForeground3: CSSDesignToken<string>;
+export declare const colorNeutralForeground3 = "--colorNeutralForeground3";
 
-export declare const colorNeutralForeground3BrandHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandHover = "--colorNeutralForeground3BrandHover";
 
-export declare const colorNeutralForeground3BrandPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandPressed = "--colorNeutralForeground3BrandPressed";
 
-export declare const colorNeutralForeground3BrandSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandSelected = "--colorNeutralForeground3BrandSelected";
 
-export declare const colorNeutralForeground3Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Hover = "--colorNeutralForeground3Hover";
 
-export declare const colorNeutralForeground3Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Pressed = "--colorNeutralForeground3Pressed";
 
-export declare const colorNeutralForeground3Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Selected = "--colorNeutralForeground3Selected";
 
-export declare const colorNeutralForeground4: CSSDesignToken<string>;
+export declare const colorNeutralForeground4 = "--colorNeutralForeground4";
 
-export declare const colorNeutralForegroundDisabled: CSSDesignToken<string>;
+export declare const colorNeutralForegroundDisabled = "--colorNeutralForegroundDisabled";
 
-export declare const colorNeutralForegroundInverted: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInverted = "--colorNeutralForegroundInverted";
 
-export declare const colorNeutralForegroundInverted2: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInverted2 = "--colorNeutralForegroundInverted2";
 
-export declare const colorNeutralForegroundInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedDisabled = "--colorNeutralForegroundInvertedDisabled";
 
-export declare const colorNeutralForegroundInvertedHover: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedHover = "--colorNeutralForegroundInvertedHover";
 
-export declare const colorNeutralForegroundInvertedLink: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLink = "--colorNeutralForegroundInvertedLink";
 
-export declare const colorNeutralForegroundInvertedLinkHover: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkHover = "--colorNeutralForegroundInvertedLinkHover";
 
-export declare const colorNeutralForegroundInvertedLinkPressed: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkPressed = "--colorNeutralForegroundInvertedLinkPressed";
 
-export declare const colorNeutralForegroundInvertedLinkSelected: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkSelected = "--colorNeutralForegroundInvertedLinkSelected";
 
-export declare const colorNeutralForegroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedPressed = "--colorNeutralForegroundInvertedPressed";
 
-export declare const colorNeutralForegroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedSelected = "--colorNeutralForegroundInvertedSelected";
 
-export declare const colorNeutralForegroundOnBrand: CSSDesignToken<string>;
+export declare const colorNeutralForegroundOnBrand = "--colorNeutralForegroundOnBrand";
 
-export declare const colorNeutralForegroundStaticInverted: CSSDesignToken<string>;
+export declare const colorNeutralForegroundStaticInverted = "--colorNeutralForegroundStaticInverted";
 
-export declare const colorNeutralShadowAmbient: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbient = "--colorNeutralShadowAmbient";
 
-export declare const colorNeutralShadowAmbientDarker: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbientDarker = "--colorNeutralShadowAmbientDarker";
 
-export declare const colorNeutralShadowAmbientLighter: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbientLighter = "--colorNeutralShadowAmbientLighter";
 
-export declare const colorNeutralShadowKey: CSSDesignToken<string>;
+export declare const colorNeutralShadowKey = "--colorNeutralShadowKey";
 
-export declare const colorNeutralShadowKeyDarker: CSSDesignToken<string>;
+export declare const colorNeutralShadowKeyDarker = "--colorNeutralShadowKeyDarker";
 
-export declare const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
+export declare const colorNeutralShadowKeyLighter = "--colorNeutralShadowKeyLighter";
 
-export declare const colorNeutralStencil1: CSSDesignToken<string>;
+export declare const colorNeutralStencil1 = "--colorNeutralStencil1";
 
-export declare const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+export declare const colorNeutralStencil1Alpha = "--colorNeutralStencil1Alpha";
 
-export declare const colorNeutralStencil2: CSSDesignToken<string>;
+export declare const colorNeutralStencil2 = "--colorNeutralStencil2";
 
-export declare const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+export declare const colorNeutralStencil2Alpha = "--colorNeutralStencil2Alpha";
 
-export declare const colorNeutralStroke1: CSSDesignToken<string>;
+export declare const colorNeutralStroke1 = "--colorNeutralStroke1";
 
-export declare const colorNeutralStroke1Hover: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Hover = "--colorNeutralStroke1Hover";
 
-export declare const colorNeutralStroke1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Pressed = "--colorNeutralStroke1Pressed";
 
-export declare const colorNeutralStroke1Selected: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Selected = "--colorNeutralStroke1Selected";
 
-export declare const colorNeutralStroke2: CSSDesignToken<string>;
+export declare const colorNeutralStroke2 = "--colorNeutralStroke2";
 
-export declare const colorNeutralStroke3: CSSDesignToken<string>;
+export declare const colorNeutralStroke3 = "--colorNeutralStroke3";
 
-export declare const colorNeutralStrokeAccessible: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessible = "--colorNeutralStrokeAccessible";
 
-export declare const colorNeutralStrokeAccessibleHover: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessibleHover = "--colorNeutralStrokeAccessibleHover";
 
-export declare const colorNeutralStrokeAccessiblePressed: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessiblePressed = "--colorNeutralStrokeAccessiblePressed";
 
-export declare const colorNeutralStrokeAccessibleSelected: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessibleSelected = "--colorNeutralStrokeAccessibleSelected";
 
-export declare const colorNeutralStrokeDisabled: CSSDesignToken<string>;
+export declare const colorNeutralStrokeDisabled = "--colorNeutralStrokeDisabled";
 
-export declare const colorNeutralStrokeInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralStrokeInvertedDisabled = "--colorNeutralStrokeInvertedDisabled";
 
-export declare const colorNeutralStrokeOnBrand: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand = "--colorNeutralStrokeOnBrand";
 
-export declare const colorNeutralStrokeOnBrand2: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2 = "--colorNeutralStrokeOnBrand2";
 
-export declare const colorNeutralStrokeOnBrand2Hover: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Hover = "--colorNeutralStrokeOnBrand2Hover";
 
-export declare const colorNeutralStrokeOnBrand2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Pressed = "--colorNeutralStrokeOnBrand2Pressed";
 
-export declare const colorNeutralStrokeOnBrand2Selected: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Selected = "--colorNeutralStrokeOnBrand2Selected";
 
-export declare const colorPaletteAnchorBackground2: CSSDesignToken<string>;
+export declare const colorPaletteAnchorBackground2 = "--colorPaletteAnchorBackground2";
 
-export declare const colorPaletteAnchorBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteAnchorBorderActive = "--colorPaletteAnchorBorderActive";
 
-export declare const colorPaletteAnchorForeground2: CSSDesignToken<string>;
+export declare const colorPaletteAnchorForeground2 = "--colorPaletteAnchorForeground2";
 
-export declare const colorPaletteBeigeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBeigeBackground2 = "--colorPaletteBeigeBackground2";
 
-export declare const colorPaletteBeigeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBeigeBorderActive = "--colorPaletteBeigeBorderActive";
 
-export declare const colorPaletteBeigeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBeigeForeground2 = "--colorPaletteBeigeForeground2";
 
-export declare const colorPaletteBerryBackground1: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground1 = "--colorPaletteBerryBackground1";
 
-export declare const colorPaletteBerryBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground2 = "--colorPaletteBerryBackground2";
 
-export declare const colorPaletteBerryBackground3: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground3 = "--colorPaletteBerryBackground3";
 
-export declare const colorPaletteBerryBorder1: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorder1 = "--colorPaletteBerryBorder1";
 
-export declare const colorPaletteBerryBorder2: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorder2 = "--colorPaletteBerryBorder2";
 
-export declare const colorPaletteBerryBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorderActive = "--colorPaletteBerryBorderActive";
 
-export declare const colorPaletteBerryForeground1: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground1 = "--colorPaletteBerryForeground1";
 
-export declare const colorPaletteBerryForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground2 = "--colorPaletteBerryForeground2";
 
-export declare const colorPaletteBerryForeground3: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground3 = "--colorPaletteBerryForeground3";
 
-export declare const colorPaletteBlueBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBlueBackground2 = "--colorPaletteBlueBackground2";
 
-export declare const colorPaletteBlueBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBlueBorderActive = "--colorPaletteBlueBorderActive";
 
-export declare const colorPaletteBlueForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBlueForeground2 = "--colorPaletteBlueForeground2";
 
-export declare const colorPaletteBrassBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBrassBackground2 = "--colorPaletteBrassBackground2";
 
-export declare const colorPaletteBrassBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBrassBorderActive = "--colorPaletteBrassBorderActive";
 
-export declare const colorPaletteBrassForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBrassForeground2 = "--colorPaletteBrassForeground2";
 
-export declare const colorPaletteBrownBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBrownBackground2 = "--colorPaletteBrownBackground2";
 
-export declare const colorPaletteBrownBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBrownBorderActive = "--colorPaletteBrownBorderActive";
 
-export declare const colorPaletteBrownForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBrownForeground2 = "--colorPaletteBrownForeground2";
 
-export declare const colorPaletteCornflowerBackground2: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerBackground2 = "--colorPaletteCornflowerBackground2";
 
-export declare const colorPaletteCornflowerBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerBorderActive = "--colorPaletteCornflowerBorderActive";
 
-export declare const colorPaletteCornflowerForeground2: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerForeground2 = "--colorPaletteCornflowerForeground2";
 
-export declare const colorPaletteCranberryBackground2: CSSDesignToken<string>;
+export declare const colorPaletteCranberryBackground2 = "--colorPaletteCranberryBackground2";
 
-export declare const colorPaletteCranberryBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteCranberryBorderActive = "--colorPaletteCranberryBorderActive";
 
-export declare const colorPaletteCranberryForeground2: CSSDesignToken<string>;
+export declare const colorPaletteCranberryForeground2 = "--colorPaletteCranberryForeground2";
 
-export declare const colorPaletteDarkGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenBackground2 = "--colorPaletteDarkGreenBackground2";
 
-export declare const colorPaletteDarkGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenBorderActive = "--colorPaletteDarkGreenBorderActive";
 
-export declare const colorPaletteDarkGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenForeground2 = "--colorPaletteDarkGreenForeground2";
 
-export declare const colorPaletteDarkOrangeBackground1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground1 = "--colorPaletteDarkOrangeBackground1";
 
-export declare const colorPaletteDarkOrangeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground2 = "--colorPaletteDarkOrangeBackground2";
 
-export declare const colorPaletteDarkOrangeBackground3: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground3 = "--colorPaletteDarkOrangeBackground3";
 
-export declare const colorPaletteDarkOrangeBorder1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorder1 = "--colorPaletteDarkOrangeBorder1";
 
-export declare const colorPaletteDarkOrangeBorder2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorder2 = "--colorPaletteDarkOrangeBorder2";
 
-export declare const colorPaletteDarkOrangeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorderActive = "--colorPaletteDarkOrangeBorderActive";
 
-export declare const colorPaletteDarkOrangeForeground1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground1 = "--colorPaletteDarkOrangeForeground1";
 
-export declare const colorPaletteDarkOrangeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground2 = "--colorPaletteDarkOrangeForeground2";
 
-export declare const colorPaletteDarkOrangeForeground3: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground3 = "--colorPaletteDarkOrangeForeground3";
 
-export declare const colorPaletteDarkRedBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedBackground2 = "--colorPaletteDarkRedBackground2";
 
-export declare const colorPaletteDarkRedBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedBorderActive = "--colorPaletteDarkRedBorderActive";
 
-export declare const colorPaletteDarkRedForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedForeground2 = "--colorPaletteDarkRedForeground2";
 
-export declare const colorPaletteForestBackground2: CSSDesignToken<string>;
+export declare const colorPaletteForestBackground2 = "--colorPaletteForestBackground2";
 
-export declare const colorPaletteForestBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteForestBorderActive = "--colorPaletteForestBorderActive";
 
-export declare const colorPaletteForestForeground2: CSSDesignToken<string>;
+export declare const colorPaletteForestForeground2 = "--colorPaletteForestForeground2";
 
-export declare const colorPaletteGoldBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGoldBackground2 = "--colorPaletteGoldBackground2";
 
-export declare const colorPaletteGoldBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGoldBorderActive = "--colorPaletteGoldBorderActive";
 
-export declare const colorPaletteGoldForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGoldForeground2 = "--colorPaletteGoldForeground2";
 
-export declare const colorPaletteGrapeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGrapeBackground2 = "--colorPaletteGrapeBackground2";
 
-export declare const colorPaletteGrapeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGrapeBorderActive = "--colorPaletteGrapeBorderActive";
 
-export declare const colorPaletteGrapeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGrapeForeground2 = "--colorPaletteGrapeForeground2";
 
-export declare const colorPaletteGreenBackground1: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground1 = "--colorPaletteGreenBackground1";
 
-export declare const colorPaletteGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground2 = "--colorPaletteGreenBackground2";
 
-export declare const colorPaletteGreenBackground3: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground3 = "--colorPaletteGreenBackground3";
 
-export declare const colorPaletteGreenBorder1: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorder1 = "--colorPaletteGreenBorder1";
 
-export declare const colorPaletteGreenBorder2: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorder2 = "--colorPaletteGreenBorder2";
 
-export declare const colorPaletteGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorderActive = "--colorPaletteGreenBorderActive";
 
-export declare const colorPaletteGreenForeground1: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground1 = "--colorPaletteGreenForeground1";
 
-export declare const colorPaletteGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground2 = "--colorPaletteGreenForeground2";
 
-export declare const colorPaletteGreenForeground3: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground3 = "--colorPaletteGreenForeground3";
 
-export declare const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteGreenForegroundInverted = "--colorPaletteGreenForegroundInverted";
 
-export declare const colorPaletteLavenderBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLavenderBackground2 = "--colorPaletteLavenderBackground2";
 
-export declare const colorPaletteLavenderBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLavenderBorderActive = "--colorPaletteLavenderBorderActive";
 
-export declare const colorPaletteLavenderForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLavenderForeground2 = "--colorPaletteLavenderForeground2";
 
-export declare const colorPaletteLightGreenBackground1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground1 = "--colorPaletteLightGreenBackground1";
 
-export declare const colorPaletteLightGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground2 = "--colorPaletteLightGreenBackground2";
 
-export declare const colorPaletteLightGreenBackground3: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground3 = "--colorPaletteLightGreenBackground3";
 
-export declare const colorPaletteLightGreenBorder1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorder1 = "--colorPaletteLightGreenBorder1";
 
-export declare const colorPaletteLightGreenBorder2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorder2 = "--colorPaletteLightGreenBorder2";
 
-export declare const colorPaletteLightGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorderActive = "--colorPaletteLightGreenBorderActive";
 
-export declare const colorPaletteLightGreenForeground1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground1 = "--colorPaletteLightGreenForeground1";
 
-export declare const colorPaletteLightGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground2 = "--colorPaletteLightGreenForeground2";
 
-export declare const colorPaletteLightGreenForeground3: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground3 = "--colorPaletteLightGreenForeground3";
 
-export declare const colorPaletteLightTealBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLightTealBackground2 = "--colorPaletteLightTealBackground2";
 
-export declare const colorPaletteLightTealBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLightTealBorderActive = "--colorPaletteLightTealBorderActive";
 
-export declare const colorPaletteLightTealForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLightTealForeground2 = "--colorPaletteLightTealForeground2";
 
-export declare const colorPaletteLilacBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLilacBackground2 = "--colorPaletteLilacBackground2";
 
-export declare const colorPaletteLilacBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLilacBorderActive = "--colorPaletteLilacBorderActive";
 
-export declare const colorPaletteLilacForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLilacForeground2 = "--colorPaletteLilacForeground2";
 
-export declare const colorPaletteMagentaBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMagentaBackground2 = "--colorPaletteMagentaBackground2";
 
-export declare const colorPaletteMagentaBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMagentaBorderActive = "--colorPaletteMagentaBorderActive";
 
-export declare const colorPaletteMagentaForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMagentaForeground2 = "--colorPaletteMagentaForeground2";
 
-export declare const colorPaletteMarigoldBackground1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground1 = "--colorPaletteMarigoldBackground1";
 
-export declare const colorPaletteMarigoldBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground2 = "--colorPaletteMarigoldBackground2";
 
-export declare const colorPaletteMarigoldBackground3: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground3 = "--colorPaletteMarigoldBackground3";
 
-export declare const colorPaletteMarigoldBorder1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorder1 = "--colorPaletteMarigoldBorder1";
 
-export declare const colorPaletteMarigoldBorder2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorder2 = "--colorPaletteMarigoldBorder2";
 
-export declare const colorPaletteMarigoldBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorderActive = "--colorPaletteMarigoldBorderActive";
 
-export declare const colorPaletteMarigoldForeground1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground1 = "--colorPaletteMarigoldForeground1";
 
-export declare const colorPaletteMarigoldForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground2 = "--colorPaletteMarigoldForeground2";
 
-export declare const colorPaletteMarigoldForeground3: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground3 = "--colorPaletteMarigoldForeground3";
 
-export declare const colorPaletteMinkBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMinkBackground2 = "--colorPaletteMinkBackground2";
 
-export declare const colorPaletteMinkBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMinkBorderActive = "--colorPaletteMinkBorderActive";
 
-export declare const colorPaletteMinkForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMinkForeground2 = "--colorPaletteMinkForeground2";
 
-export declare const colorPaletteNavyBackground2: CSSDesignToken<string>;
+export declare const colorPaletteNavyBackground2 = "--colorPaletteNavyBackground2";
 
-export declare const colorPaletteNavyBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteNavyBorderActive = "--colorPaletteNavyBorderActive";
 
-export declare const colorPaletteNavyForeground2: CSSDesignToken<string>;
+export declare const colorPaletteNavyForeground2 = "--colorPaletteNavyForeground2";
 
-export declare const colorPalettePeachBackground2: CSSDesignToken<string>;
+export declare const colorPalettePeachBackground2 = "--colorPalettePeachBackground2";
 
-export declare const colorPalettePeachBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePeachBorderActive = "--colorPalettePeachBorderActive";
 
-export declare const colorPalettePeachForeground2: CSSDesignToken<string>;
+export declare const colorPalettePeachForeground2 = "--colorPalettePeachForeground2";
 
-export declare const colorPalettePinkBackground2: CSSDesignToken<string>;
+export declare const colorPalettePinkBackground2 = "--colorPalettePinkBackground2";
 
-export declare const colorPalettePinkBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePinkBorderActive = "--colorPalettePinkBorderActive";
 
-export declare const colorPalettePinkForeground2: CSSDesignToken<string>;
+export declare const colorPalettePinkForeground2 = "--colorPalettePinkForeground2";
 
-export declare const colorPalettePlatinumBackground2: CSSDesignToken<string>;
+export declare const colorPalettePlatinumBackground2 = "--colorPalettePlatinumBackground2";
 
-export declare const colorPalettePlatinumBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePlatinumBorderActive = "--colorPalettePlatinumBorderActive";
 
-export declare const colorPalettePlatinumForeground2: CSSDesignToken<string>;
+export declare const colorPalettePlatinumForeground2 = "--colorPalettePlatinumForeground2";
 
-export declare const colorPalettePlumBackground2: CSSDesignToken<string>;
+export declare const colorPalettePlumBackground2 = "--colorPalettePlumBackground2";
 
-export declare const colorPalettePlumBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePlumBorderActive = "--colorPalettePlumBorderActive";
 
-export declare const colorPalettePlumForeground2: CSSDesignToken<string>;
+export declare const colorPalettePlumForeground2 = "--colorPalettePlumForeground2";
 
-export declare const colorPalettePumpkinBackground2: CSSDesignToken<string>;
+export declare const colorPalettePumpkinBackground2 = "--colorPalettePumpkinBackground2";
 
-export declare const colorPalettePumpkinBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePumpkinBorderActive = "--colorPalettePumpkinBorderActive";
 
-export declare const colorPalettePumpkinForeground2: CSSDesignToken<string>;
+export declare const colorPalettePumpkinForeground2 = "--colorPalettePumpkinForeground2";
 
-export declare const colorPalettePurpleBackground2: CSSDesignToken<string>;
+export declare const colorPalettePurpleBackground2 = "--colorPalettePurpleBackground2";
 
-export declare const colorPalettePurpleBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePurpleBorderActive = "--colorPalettePurpleBorderActive";
 
-export declare const colorPalettePurpleForeground2: CSSDesignToken<string>;
+export declare const colorPalettePurpleForeground2 = "--colorPalettePurpleForeground2";
 
-export declare const colorPaletteRedBackground1: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground1 = "--colorPaletteRedBackground1";
 
-export declare const colorPaletteRedBackground2: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground2 = "--colorPaletteRedBackground2";
 
-export declare const colorPaletteRedBackground3: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground3 = "--colorPaletteRedBackground3";
 
-export declare const colorPaletteRedBorder1: CSSDesignToken<string>;
+export declare const colorPaletteRedBorder1 = "--colorPaletteRedBorder1";
 
-export declare const colorPaletteRedBorder2: CSSDesignToken<string>;
+export declare const colorPaletteRedBorder2 = "--colorPaletteRedBorder2";
 
-export declare const colorPaletteRedBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteRedBorderActive = "--colorPaletteRedBorderActive";
 
-export declare const colorPaletteRedForeground1: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground1 = "--colorPaletteRedForeground1";
 
-export declare const colorPaletteRedForeground2: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground2 = "--colorPaletteRedForeground2";
 
-export declare const colorPaletteRedForeground3: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground3 = "--colorPaletteRedForeground3";
 
-export declare const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteRedForegroundInverted = "--colorPaletteRedForegroundInverted";
 
-export declare const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueBackground2 = "--colorPaletteRoyalBlueBackground2";
 
-export declare const colorPaletteRoyalBlueBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueBorderActive = "--colorPaletteRoyalBlueBorderActive";
 
-export declare const colorPaletteRoyalBlueForeground2: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueForeground2 = "--colorPaletteRoyalBlueForeground2";
 
-export declare const colorPaletteSeafoamBackground2: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamBackground2 = "--colorPaletteSeafoamBackground2";
 
-export declare const colorPaletteSeafoamBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamBorderActive = "--colorPaletteSeafoamBorderActive";
 
-export declare const colorPaletteSeafoamForeground2: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamForeground2 = "--colorPaletteSeafoamForeground2";
 
-export declare const colorPaletteSteelBackground2: CSSDesignToken<string>;
+export declare const colorPaletteSteelBackground2 = "--colorPaletteSteelBackground2";
 
-export declare const colorPaletteSteelBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteSteelBorderActive = "--colorPaletteSteelBorderActive";
 
-export declare const colorPaletteSteelForeground2: CSSDesignToken<string>;
+export declare const colorPaletteSteelForeground2 = "--colorPaletteSteelForeground2";
 
-export declare const colorPaletteTealBackground2: CSSDesignToken<string>;
+export declare const colorPaletteTealBackground2 = "--colorPaletteTealBackground2";
 
-export declare const colorPaletteTealBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteTealBorderActive = "--colorPaletteTealBorderActive";
 
-export declare const colorPaletteTealForeground2: CSSDesignToken<string>;
+export declare const colorPaletteTealForeground2 = "--colorPaletteTealForeground2";
 
-export declare const colorPaletteYellowBackground1: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground1 = "--colorPaletteYellowBackground1";
 
-export declare const colorPaletteYellowBackground2: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground2 = "--colorPaletteYellowBackground2";
 
-export declare const colorPaletteYellowBackground3: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground3 = "--colorPaletteYellowBackground3";
 
-export declare const colorPaletteYellowBorder1: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorder1 = "--colorPaletteYellowBorder1";
 
-export declare const colorPaletteYellowBorder2: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorder2 = "--colorPaletteYellowBorder2";
 
-export declare const colorPaletteYellowBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorderActive = "--colorPaletteYellowBorderActive";
 
-export declare const colorPaletteYellowForeground1: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground1 = "--colorPaletteYellowForeground1";
 
-export declare const colorPaletteYellowForeground2: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground2 = "--colorPaletteYellowForeground2";
 
-export declare const colorPaletteYellowForeground3: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground3 = "--colorPaletteYellowForeground3";
 
-export declare const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteYellowForegroundInverted = "--colorPaletteYellowForegroundInverted";
 
-export declare const colorScrollbarOverlay: CSSDesignToken<string>;
+export declare const colorScrollbarOverlay = "--colorScrollbarOverlay";
 
-export declare const colorStrokeFocus1: CSSDesignToken<string>;
+export declare const colorStrokeFocus1 = "--colorStrokeFocus1";
 
-export declare const colorStrokeFocus2: CSSDesignToken<string>;
+export declare const colorStrokeFocus2 = "--colorStrokeFocus2";
 
-export declare const colorSubtleBackground: CSSDesignToken<string>;
+export declare const colorSubtleBackground = "--colorSubtleBackground";
 
-export declare const colorSubtleBackgroundHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundHover = "--colorSubtleBackgroundHover";
 
-export declare const colorSubtleBackgroundInverted: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInverted = "--colorSubtleBackgroundInverted";
 
-export declare const colorSubtleBackgroundInvertedHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedHover = "--colorSubtleBackgroundInvertedHover";
 
-export declare const colorSubtleBackgroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedPressed = "--colorSubtleBackgroundInvertedPressed";
 
-export declare const colorSubtleBackgroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedSelected = "--colorSubtleBackgroundInvertedSelected";
 
-export declare const colorSubtleBackgroundLightAlphaHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaHover = "--colorSubtleBackgroundLightAlphaHover";
 
-export declare const colorSubtleBackgroundLightAlphaPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaPressed = "--colorSubtleBackgroundLightAlphaPressed";
 
-export declare const colorSubtleBackgroundLightAlphaSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaSelected = "--colorSubtleBackgroundLightAlphaSelected";
 
-export declare const colorSubtleBackgroundPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundPressed = "--colorSubtleBackgroundPressed";
 
-export declare const colorSubtleBackgroundSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundSelected = "--colorSubtleBackgroundSelected";
 
-export declare const colorTransparentBackground: CSSDesignToken<string>;
+export declare const colorTransparentBackground = "--colorTransparentBackground";
 
-export declare const colorTransparentBackgroundHover: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundHover = "--colorTransparentBackgroundHover";
 
-export declare const colorTransparentBackgroundPressed: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundPressed = "--colorTransparentBackgroundPressed";
 
-export declare const colorTransparentBackgroundSelected: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundSelected = "--colorTransparentBackgroundSelected";
 
-export declare const colorTransparentStroke: CSSDesignToken<string>;
+export declare const colorTransparentStroke = "--colorTransparentStroke";
 
-export declare const colorTransparentStrokeDisabled: CSSDesignToken<string>;
+export declare const colorTransparentStrokeDisabled = "--colorTransparentStrokeDisabled";
 
-export declare const colorTransparentStrokeInteractive: CSSDesignToken<string>;
+export declare const colorTransparentStrokeInteractive = "--colorTransparentStrokeInteractive";
 
 /**
  * The base class used for constructing a fluent-compound-button custom element
@@ -1516,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";
 };
 
@@ -1526,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\>
@@ -1557,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";
 };
@@ -1579,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
@@ -1705,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\>
@@ -1766,52 +2488,118 @@ export declare const CounterBadgeStyles: ElementStyles;
  */
 export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
-export declare const curveAccelerateMax: CSSDesignToken<string>;
+export declare const curveAccelerateMax = "--curveAccelerateMax";
 
-export declare const curveAccelerateMid: CSSDesignToken<string>;
+export declare const curveAccelerateMid = "--curveAccelerateMid";
 
-export declare const curveAccelerateMin: CSSDesignToken<string>;
+export declare const curveAccelerateMin = "--curveAccelerateMin";
 
-export declare const curveDecelerateMax: CSSDesignToken<string>;
+export declare const curveDecelerateMax = "--curveDecelerateMax";
 
-export declare const curveDecelerateMid: CSSDesignToken<string>;
+export declare const curveDecelerateMid = "--curveDecelerateMid";
 
-export declare const curveDecelerateMin: CSSDesignToken<string>;
+export declare const curveDecelerateMin = "--curveDecelerateMin";
 
-export declare const curveEasyEase: CSSDesignToken<string>;
+export declare const curveEasyEase = "--curveEasyEase";
 
-export declare const curveEasyEaseMax: CSSDesignToken<string>;
+export declare const curveEasyEaseMax = "--curveEasyEaseMax";
 
-export declare const curveLinear: CSSDesignToken<string>;
+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
      */
@@ -2010,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
@@ -2078,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
@@ -2093,19 +2932,84 @@ export declare const DividerStyles: ElementStyles;
  */
 export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
-export declare const durationFast: CSSDesignToken<string>;
+export declare const durationFast = "--durationFast";
+
+export declare const durationFaster = "--durationFaster";
+
+export declare const durationNormal = "--durationNormal";
 
-export declare const durationFaster: CSSDesignToken<string>;
+export declare const durationSlow = "--durationSlow";
 
-export declare const durationNormal: CSSDesignToken<string>;
+export declare const durationSlower = "--durationSlower";
 
-export declare const durationSlow: CSSDesignToken<string>;
+export declare const durationUltraFast = "--durationUltraFast";
 
-export declare const durationSlower: CSSDesignToken<string>;
+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;
+}
 
-export declare const durationUltraFast: CSSDesignToken<string>;
+declare let ElementInternals_2: {
+    prototype: ElementInternals_2;
+    new (): ElementInternals_2;
+};
 
-export declare const durationUltraSlow: CSSDesignToken<string>;
+/**
+ * End configuration options
+ * @public
+ */
+declare type EndOptions<TSource = any, TParent = any> = {
+    end?: StaticallyComposableHTML<TSource, TParent>;
+};
 
 export declare const FluentDesignSystem: Readonly<{
     prefix: "fluent";
@@ -2113,39 +3017,135 @@ export declare const FluentDesignSystem: Readonly<{
     registry: CustomElementRegistry;
 }>;
 
-export declare const fontFamilyBase: CSSDesignToken<string>;
+export declare const fontFamilyBase = "--fontFamilyBase";
+
+export declare const fontFamilyMonospace = "--fontFamilyMonospace";
+
+export declare const fontFamilyNumeric = "--fontFamilyNumeric";
+
+export declare const fontSizeBase100 = "--fontSizeBase100";
+
+export declare const fontSizeBase200 = "--fontSizeBase200";
+
+export declare const fontSizeBase300 = "--fontSizeBase300";
+
+export declare const fontSizeBase400 = "--fontSizeBase400";
+
+export declare const fontSizeBase500 = "--fontSizeBase500";
+
+export declare const fontSizeBase600 = "--fontSizeBase600";
 
-export declare const fontFamilyMonospace: CSSDesignToken<string>;
+export declare const fontSizeHero1000 = "--fontSizeHero1000";
 
-export declare const fontFamilyNumeric: CSSDesignToken<string>;
+export declare const fontSizeHero700 = "--fontSizeHero700";
 
-export declare const fontSizeBase100: CSSDesignToken<string>;
+export declare const fontSizeHero800 = "--fontSizeHero800";
 
-export declare const fontSizeBase200: CSSDesignToken<string>;
+export declare const fontSizeHero900 = "--fontSizeHero900";
+
+export declare const fontWeightBold = "--fontWeightBold";
+
+export declare const fontWeightMedium = "--fontWeightMedium";
+
+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;
+}
 
-export declare const fontSizeBase300: CSSDesignToken<string>;
+/**
+ * @beta
+ */
+declare class FormAssociatedButton extends FormAssociatedButton_base {
+    proxy: HTMLInputElement;
+}
 
-export declare const fontSizeBase400: CSSDesignToken<string>;
+declare const FormAssociatedButton_base: typeof _Button;
 
-export declare const fontSizeBase500: CSSDesignToken<string>;
+/**
+ * @beta
+ */
+declare class FormAssociatedCheckbox extends FormAssociatedCheckbox_base {
+    proxy: HTMLInputElement;
+}
 
-export declare const fontSizeBase600: CSSDesignToken<string>;
+declare const FormAssociatedCheckbox_base: typeof _Checkbox;
 
-export declare const fontSizeHero1000: CSSDesignToken<string>;
+/**
+ * @beta
+ */
+declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    proxy: HTMLInputElement;
+}
 
-export declare const fontSizeHero700: CSSDesignToken<string>;
+declare const FormAssociatedRadio_base: typeof _Radio;
 
-export declare const fontSizeHero800: CSSDesignToken<string>;
+/**
+ * @beta
+ */
+declare class FormAssociatedSlider extends FormAssociatedSlider_base {
+    proxy: HTMLInputElement;
+}
 
-export declare const fontSizeHero900: CSSDesignToken<string>;
+declare const FormAssociatedSlider_base: typeof _Slider;
 
-export declare const fontWeightBold: CSSDesignToken<string>;
+/**
+ * @beta
+ */
+declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
 
-export declare const fontWeightMedium: CSSDesignToken<string>;
+declare const FormAssociatedSwitch_base: typeof _Switch;
 
-export declare const fontWeightRegular: CSSDesignToken<string>;
+/**
+ * @beta
+ */
+declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
 
-export declare const fontWeightSemibold: CSSDesignToken<string>;
+declare const FormAssociatedTextField_base: typeof _TextField;
 
 /**
  * The base class used for constucting a fluent image custom element
@@ -2333,25 +3333,25 @@ declare const LabelWeight: {
  */
 declare type LabelWeight = ValuesOf<typeof LabelWeight>;
 
-export declare const lineHeightBase100: CSSDesignToken<string>;
+export declare const lineHeightBase100 = "--lineHeightBase100";
 
-export declare const lineHeightBase200: CSSDesignToken<string>;
+export declare const lineHeightBase200 = "--lineHeightBase200";
 
-export declare const lineHeightBase300: CSSDesignToken<string>;
+export declare const lineHeightBase300 = "--lineHeightBase300";
 
-export declare const lineHeightBase400: CSSDesignToken<string>;
+export declare const lineHeightBase400 = "--lineHeightBase400";
 
-export declare const lineHeightBase500: CSSDesignToken<string>;
+export declare const lineHeightBase500 = "--lineHeightBase500";
 
-export declare const lineHeightBase600: CSSDesignToken<string>;
+export declare const lineHeightBase600 = "--lineHeightBase600";
 
-export declare const lineHeightHero1000: CSSDesignToken<string>;
+export declare const lineHeightHero1000 = "--lineHeightHero1000";
 
-export declare const lineHeightHero700: CSSDesignToken<string>;
+export declare const lineHeightHero700 = "--lineHeightHero700";
 
-export declare const lineHeightHero800: CSSDesignToken<string>;
+export declare const lineHeightHero800 = "--lineHeightHero800";
 
-export declare const lineHeightHero900: CSSDesignToken<string>;
+export declare const lineHeightHero900 = "--lineHeightHero900";
 
 /**
  * The Menu class represents a menu component.
@@ -2572,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\>
@@ -2629,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>;
@@ -2692,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
      *
@@ -2785,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 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
  */
-export declare class Radio extends FASTRadio {
+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.
  *
@@ -2802,112 +4117,470 @@ export declare class Radio extends FASTRadio {
 export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
 
 /**
- * The base class used for constructing a fluent-radio-group custom element
+ * The base class used for constructing a fluent-radio-group custom element
+ * @public
+ */
+export declare class RadioGroup extends FASTElement {
+    /**
+     * sets radio layout styles
+     *
+     * @public
+     * @remarks
+     * 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 {
+}
+
+/**
  * @public
  */
-export declare class RadioGroup extends FASTRadioGroup {
-    /**
-     * sets radio layout styles
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: stacked
-     */
-    stacked: boolean;
+export declare interface SliderConfiguration {
+    max: number;
+    min: number;
+    orientation?: SliderOrientation;
+    direction?: Direction;
+    disabled?: boolean;
 }
 
 /**
- * The Fluent RadioGroup Element.
+ * 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: FASTElement, theme: Theme) => void;
-
-export declare const shadow16: CSSDesignToken<string>;
-
-export declare const shadow16Brand: CSSDesignToken<string>;
-
-export declare const shadow2: CSSDesignToken<string>;
-
-export declare const shadow28: CSSDesignToken<string>;
-
-export declare const shadow28Brand: CSSDesignToken<string>;
-
-export declare const shadow2Brand: CSSDesignToken<string>;
-
-export declare const shadow4: CSSDesignToken<string>;
-
-export declare const shadow4Brand: CSSDesignToken<string>;
-
-export declare const shadow64: CSSDesignToken<string>;
-
-export declare const shadow64Brand: CSSDesignToken<string>;
-
-export declare const shadow8: CSSDesignToken<string>;
-
-export declare const shadow8Brand: CSSDesignToken<string>;
+export declare 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
@@ -2929,57 +4602,57 @@ 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: CSSDesignToken<string>;
+export declare const spacingHorizontalL = "--spacingHorizontalL";
 
-export declare const spacingHorizontalM: CSSDesignToken<string>;
+export declare const spacingHorizontalM = "--spacingHorizontalM";
 
-export declare const spacingHorizontalMNudge: CSSDesignToken<string>;
+export declare const spacingHorizontalMNudge = "--spacingHorizontalMNudge";
 
-export declare const spacingHorizontalNone: CSSDesignToken<string>;
+export declare const spacingHorizontalNone = "--spacingHorizontalNone";
 
-export declare const spacingHorizontalS: CSSDesignToken<string>;
+export declare const spacingHorizontalS = "--spacingHorizontalS";
 
-export declare const spacingHorizontalSNudge: CSSDesignToken<string>;
+export declare const spacingHorizontalSNudge = "--spacingHorizontalSNudge";
 
-export declare const spacingHorizontalXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXL = "--spacingHorizontalXL";
 
-export declare const spacingHorizontalXS: CSSDesignToken<string>;
+export declare const spacingHorizontalXS = "--spacingHorizontalXS";
 
-export declare const spacingHorizontalXXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXXL = "--spacingHorizontalXXL";
 
-export declare const spacingHorizontalXXS: CSSDesignToken<string>;
+export declare const spacingHorizontalXXS = "--spacingHorizontalXXS";
 
-export declare const spacingHorizontalXXXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXXXL = "--spacingHorizontalXXXL";
 
-export declare const spacingVerticalL: CSSDesignToken<string>;
+export declare const spacingVerticalL = "--spacingVerticalL";
 
-export declare const spacingVerticalM: CSSDesignToken<string>;
+export declare const spacingVerticalM = "--spacingVerticalM";
 
-export declare const spacingVerticalMNudge: CSSDesignToken<string>;
+export declare const spacingVerticalMNudge = "--spacingVerticalMNudge";
 
-export declare const spacingVerticalNone: CSSDesignToken<string>;
+export declare const spacingVerticalNone = "--spacingVerticalNone";
 
-export declare const spacingVerticalS: CSSDesignToken<string>;
+export declare const spacingVerticalS = "--spacingVerticalS";
 
-export declare const spacingVerticalSNudge: CSSDesignToken<string>;
+export declare const spacingVerticalSNudge = "--spacingVerticalSNudge";
 
-export declare const spacingVerticalXL: CSSDesignToken<string>;
+export declare const spacingVerticalXL = "--spacingVerticalXL";
 
-export declare const spacingVerticalXS: CSSDesignToken<string>;
+export declare const spacingVerticalXS = "--spacingVerticalXS";
 
-export declare const spacingVerticalXXL: CSSDesignToken<string>;
+export declare const spacingVerticalXXL = "--spacingVerticalXXL";
 
-export declare const spacingVerticalXXS: CSSDesignToken<string>;
+export declare const spacingVerticalXXS = "--spacingVerticalXXS";
 
-export declare const spacingVerticalXXXL: CSSDesignToken<string>;
+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
      *
@@ -3015,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\>
@@ -3049,19 +4718,53 @@ export declare const SpinnerStyles: ElementStyles;
 
 export declare const SpinnerTemplate: ElementViewTemplate<Spinner>;
 
-export declare const strokeWidthThick: CSSDesignToken<string>;
+/**
+ * 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: CSSDesignToken<string>;
+export declare const strokeWidthThicker = "--strokeWidthThicker";
 
-export declare const strokeWidthThickest: CSSDesignToken<string>;
+export declare const strokeWidthThickest = "--strokeWidthThickest";
 
-export declare const strokeWidthThin: CSSDesignToken<string>;
+export declare const strokeWidthThin = "--strokeWidthThin";
 
 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
      *
@@ -3071,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 {
 }
 
 /**
@@ -3098,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>;
@@ -3105,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.
@@ -3208,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";
@@ -3217,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";
@@ -3229,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
@@ -3353,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
@@ -3369,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
      *
@@ -3392,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 {
 }
 
 /**
@@ -3447,8 +5377,6 @@ export declare const TextInputStyles: ElementStyles;
  */
 export declare const TextInputTemplate: ElementViewTemplate<TextInput>;
 
-export { TextInputType }
-
 /**
  * TextSize constants
  * @public
@@ -3567,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
@@ -3616,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 { }