@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/web-components.d.ts

@@ -1,53 +1,67 @@
-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 type { HostBehavior } from '@microsoft/fast-element';
+import type { HostController } from '@microsoft/fast-element';
+import { HTMLDirective } from '@microsoft/fast-element';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import type { SyntheticViewTemplate } from '@microsoft/fast-element';
 import type { Theme } from '@fluentui/tokens';
-import 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 +69,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 +161,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 +202,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 +240,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 +377,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 +405,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 +449,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 +1018,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 +1074,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 = "var(--borderRadiusCircular)";
+
+export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
+
+export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
+
+export declare const borderRadiusNone = "var(--borderRadiusNone)";
+
+export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
+
+export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
+
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart 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 +1344,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 +1404,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 +1452,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 +1534,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 +1587,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 +1630,599 @@ export declare const CheckboxStyles: ElementStyles;
  */
 export declare const CheckboxTemplate: ElementViewTemplate<Checkbox>;
 
-export declare const colorBackgroundOverlay: CSSDesignToken<string>;
+export declare const colorBackgroundOverlay = "var(--colorBackgroundOverlay)";
 
-export declare const colorBrandBackground: CSSDesignToken<string>;
+export declare const colorBrandBackground = "var(--colorBrandBackground)";
 
-export declare const colorBrandBackground2: CSSDesignToken<string>;
+export declare const colorBrandBackground2 = "var(--colorBrandBackground2)";
 
-export declare const colorBrandBackgroundHover: CSSDesignToken<string>;
+export declare const colorBrandBackgroundHover = "var(--colorBrandBackgroundHover)";
 
-export declare const colorBrandBackgroundInverted: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInverted = "var(--colorBrandBackgroundInverted)";
 
-export declare const colorBrandBackgroundInvertedHover: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedHover = "var(--colorBrandBackgroundInvertedHover)";
 
-export declare const colorBrandBackgroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedPressed = "var(--colorBrandBackgroundInvertedPressed)";
 
-export declare const colorBrandBackgroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedSelected = "var(--colorBrandBackgroundInvertedSelected)";
 
-export declare const colorBrandBackgroundPressed: CSSDesignToken<string>;
+export declare const colorBrandBackgroundPressed = "var(--colorBrandBackgroundPressed)";
 
-export declare const colorBrandBackgroundSelected: CSSDesignToken<string>;
+export declare const colorBrandBackgroundSelected = "var(--colorBrandBackgroundSelected)";
 
-export declare const colorBrandBackgroundStatic: CSSDesignToken<string>;
+export declare const colorBrandBackgroundStatic = "var(--colorBrandBackgroundStatic)";
 
-export declare const colorBrandForeground1: CSSDesignToken<string>;
+export declare const colorBrandForeground1 = "var(--colorBrandForeground1)";
 
-export declare const colorBrandForeground2: CSSDesignToken<string>;
+export declare const colorBrandForeground2 = "var(--colorBrandForeground2)";
 
-export declare const colorBrandForegroundInverted: CSSDesignToken<string>;
+export declare const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
 
-export declare const colorBrandForegroundInvertedHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundInvertedHover = "var(--colorBrandForegroundInvertedHover)";
 
-export declare const colorBrandForegroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundInvertedPressed = "var(--colorBrandForegroundInvertedPressed)";
 
-export declare const colorBrandForegroundLink: CSSDesignToken<string>;
+export declare const colorBrandForegroundLink = "var(--colorBrandForegroundLink)";
 
-export declare const colorBrandForegroundLinkHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkHover = "var(--colorBrandForegroundLinkHover)";
 
-export declare const colorBrandForegroundLinkPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkPressed = "var(--colorBrandForegroundLinkPressed)";
 
-export declare const colorBrandForegroundLinkSelected: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkSelected = "var(--colorBrandForegroundLinkSelected)";
 
-export declare const colorBrandForegroundOnLight: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLight = "var(--colorBrandForegroundOnLight)";
 
-export declare const colorBrandForegroundOnLightHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightHover = "var(--colorBrandForegroundOnLightHover)";
 
-export declare const colorBrandForegroundOnLightPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightPressed = "var(--colorBrandForegroundOnLightPressed)";
 
-export declare const colorBrandForegroundOnLightSelected: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightSelected = "var(--colorBrandForegroundOnLightSelected)";
 
-export declare const colorBrandShadowAmbient: CSSDesignToken<string>;
+export declare const colorBrandShadowAmbient = "var(--colorBrandShadowAmbient)";
 
-export declare const colorBrandShadowKey: CSSDesignToken<string>;
+export declare const colorBrandShadowKey = "var(--colorBrandShadowKey)";
 
-export declare const colorBrandStroke1: CSSDesignToken<string>;
+export declare const colorBrandStroke1 = "var(--colorBrandStroke1)";
 
-export declare const colorBrandStroke2: CSSDesignToken<string>;
+export declare const colorBrandStroke2 = "var(--colorBrandStroke2)";
 
-export declare const colorCompoundBrandBackground: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackground = "var(--colorCompoundBrandBackground)";
 
-export declare const colorCompoundBrandBackgroundHover: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackgroundHover = "var(--colorCompoundBrandBackgroundHover)";
 
-export declare const colorCompoundBrandBackgroundPressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackgroundPressed = "var(--colorCompoundBrandBackgroundPressed)";
 
-export declare const colorCompoundBrandForeground1: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1 = "var(--colorCompoundBrandForeground1)";
 
-export declare const colorCompoundBrandForeground1Hover: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1Hover = "var(--colorCompoundBrandForeground1Hover)";
 
-export declare const colorCompoundBrandForeground1Pressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1Pressed = "var(--colorCompoundBrandForeground1Pressed)";
 
-export declare const colorCompoundBrandStroke: CSSDesignToken<string>;
+export declare const colorCompoundBrandStroke = "var(--colorCompoundBrandStroke)";
 
-export declare const colorCompoundBrandStrokeHover: CSSDesignToken<string>;
+export declare const colorCompoundBrandStrokeHover = "var(--colorCompoundBrandStrokeHover)";
 
-export declare const colorCompoundBrandStrokePressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandStrokePressed = "var(--colorCompoundBrandStrokePressed)";
 
-export declare const colorNeutralBackground1: CSSDesignToken<string>;
+export declare const colorNeutralBackground1 = "var(--colorNeutralBackground1)";
 
-export declare const colorNeutralBackground1Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Hover = "var(--colorNeutralBackground1Hover)";
 
-export declare const colorNeutralBackground1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Pressed = "var(--colorNeutralBackground1Pressed)";
 
-export declare const colorNeutralBackground1Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Selected = "var(--colorNeutralBackground1Selected)";
 
-export declare const colorNeutralBackground2: CSSDesignToken<string>;
+export declare const colorNeutralBackground2 = "var(--colorNeutralBackground2)";
 
-export declare const colorNeutralBackground2Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Hover = "var(--colorNeutralBackground2Hover)";
 
-export declare const colorNeutralBackground2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Pressed = "var(--colorNeutralBackground2Pressed)";
 
-export declare const colorNeutralBackground2Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Selected = "var(--colorNeutralBackground2Selected)";
 
-export declare const colorNeutralBackground3: CSSDesignToken<string>;
+export declare const colorNeutralBackground3 = "var(--colorNeutralBackground3)";
 
-export declare const colorNeutralBackground3Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Hover = "var(--colorNeutralBackground3Hover)";
 
-export declare const colorNeutralBackground3Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Pressed = "var(--colorNeutralBackground3Pressed)";
 
-export declare const colorNeutralBackground3Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Selected = "var(--colorNeutralBackground3Selected)";
 
-export declare const colorNeutralBackground4: CSSDesignToken<string>;
+export declare const colorNeutralBackground4 = "var(--colorNeutralBackground4)";
 
-export declare const colorNeutralBackground4Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Hover = "var(--colorNeutralBackground4Hover)";
 
-export declare const colorNeutralBackground4Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Pressed = "var(--colorNeutralBackground4Pressed)";
 
-export declare const colorNeutralBackground4Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Selected = "var(--colorNeutralBackground4Selected)";
 
-export declare const colorNeutralBackground5: CSSDesignToken<string>;
+export declare const colorNeutralBackground5 = "var(--colorNeutralBackground5)";
 
-export declare const colorNeutralBackground5Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Hover = "var(--colorNeutralBackground5Hover)";
 
-export declare const colorNeutralBackground5Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Pressed = "var(--colorNeutralBackground5Pressed)";
 
-export declare const colorNeutralBackground5Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Selected = "var(--colorNeutralBackground5Selected)";
 
-export declare const colorNeutralBackground6: CSSDesignToken<string>;
+export declare const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
 
-export declare const colorNeutralBackgroundDisabled: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
 
-export declare const colorNeutralBackgroundInverted: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundInverted = "var(--colorNeutralBackgroundInverted)";
 
-export declare const colorNeutralBackgroundInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgroundInvertedDisabled)";
 
-export declare const colorNeutralBackgroundStatic: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
 
-export declare const colorNeutralForeground1: CSSDesignToken<string>;
+export declare const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 
-export declare const colorNeutralForeground1Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
 
-export declare const colorNeutralForeground1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Pressed = "var(--colorNeutralForeground1Pressed)";
 
-export declare const colorNeutralForeground1Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Selected = "var(--colorNeutralForeground1Selected)";
 
-export declare const colorNeutralForeground1Static: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Static = "var(--colorNeutralForeground1Static)";
 
-export declare const colorNeutralForeground2: CSSDesignToken<string>;
+export declare const colorNeutralForeground2 = "var(--colorNeutralForeground2)";
 
-export declare const colorNeutralForeground2BrandHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandHover = "var(--colorNeutralForeground2BrandHover)";
 
-export declare const colorNeutralForeground2BrandPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandPressed = "var(--colorNeutralForeground2BrandPressed)";
 
-export declare const colorNeutralForeground2BrandSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandSelected = "var(--colorNeutralForeground2BrandSelected)";
 
-export declare const colorNeutralForeground2Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Hover = "var(--colorNeutralForeground2Hover)";
 
-export declare const colorNeutralForeground2Link: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Link = "var(--colorNeutralForeground2Link)";
 
-export declare const colorNeutralForeground2LinkHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkHover = "var(--colorNeutralForeground2LinkHover)";
 
-export declare const colorNeutralForeground2LinkPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkPressed = "var(--colorNeutralForeground2LinkPressed)";
 
-export declare const colorNeutralForeground2LinkSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkSelected = "var(--colorNeutralForeground2LinkSelected)";
 
-export declare const colorNeutralForeground2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Pressed = "var(--colorNeutralForeground2Pressed)";
 
-export declare const colorNeutralForeground2Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Selected = "var(--colorNeutralForeground2Selected)";
 
-export declare const colorNeutralForeground3: CSSDesignToken<string>;
+export declare const colorNeutralForeground3 = "var(--colorNeutralForeground3)";
 
-export declare const colorNeutralForeground3BrandHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandHover = "var(--colorNeutralForeground3BrandHover)";
 
-export declare const colorNeutralForeground3BrandPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandPressed = "var(--colorNeutralForeground3BrandPressed)";
 
-export declare const colorNeutralForeground3BrandSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandSelected = "var(--colorNeutralForeground3BrandSelected)";
 
-export declare const colorNeutralForeground3Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Hover = "var(--colorNeutralForeground3Hover)";
 
-export declare const colorNeutralForeground3Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Pressed = "var(--colorNeutralForeground3Pressed)";
 
-export declare const colorNeutralForeground3Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Selected = "var(--colorNeutralForeground3Selected)";
 
-export declare const colorNeutralForeground4: CSSDesignToken<string>;
+export declare const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
 
-export declare const colorNeutralForegroundDisabled: CSSDesignToken<string>;
+export declare const colorNeutralForegroundDisabled = "var(--colorNeutralForegroundDisabled)";
 
-export declare const colorNeutralForegroundInverted: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInverted = "var(--colorNeutralForegroundInverted)";
 
-export declare const colorNeutralForegroundInverted2: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInverted2 = "var(--colorNeutralForegroundInverted2)";
 
-export declare const colorNeutralForegroundInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedDisabled = "var(--colorNeutralForegroundInvertedDisabled)";
 
-export declare const colorNeutralForegroundInvertedHover: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedHover = "var(--colorNeutralForegroundInvertedHover)";
 
-export declare const colorNeutralForegroundInvertedLink: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLink = "var(--colorNeutralForegroundInvertedLink)";
 
-export declare const colorNeutralForegroundInvertedLinkHover: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkHover = "var(--colorNeutralForegroundInvertedLinkHover)";
 
-export declare const colorNeutralForegroundInvertedLinkPressed: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkPressed = "var(--colorNeutralForegroundInvertedLinkPressed)";
 
-export declare const colorNeutralForegroundInvertedLinkSelected: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkSelected = "var(--colorNeutralForegroundInvertedLinkSelected)";
 
-export declare const colorNeutralForegroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedPressed = "var(--colorNeutralForegroundInvertedPressed)";
 
-export declare const colorNeutralForegroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedSelected = "var(--colorNeutralForegroundInvertedSelected)";
 
-export declare const colorNeutralForegroundOnBrand: CSSDesignToken<string>;
+export declare const colorNeutralForegroundOnBrand = "var(--colorNeutralForegroundOnBrand)";
 
-export declare const colorNeutralForegroundStaticInverted: CSSDesignToken<string>;
+export declare const colorNeutralForegroundStaticInverted = "var(--colorNeutralForegroundStaticInverted)";
 
-export declare const colorNeutralShadowAmbient: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbient = "var(--colorNeutralShadowAmbient)";
 
-export declare const colorNeutralShadowAmbientDarker: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbientDarker = "var(--colorNeutralShadowAmbientDarker)";
 
-export declare const colorNeutralShadowAmbientLighter: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbientLighter = "var(--colorNeutralShadowAmbientLighter)";
 
-export declare const colorNeutralShadowKey: CSSDesignToken<string>;
+export declare const colorNeutralShadowKey = "var(--colorNeutralShadowKey)";
 
-export declare const colorNeutralShadowKeyDarker: CSSDesignToken<string>;
+export declare const colorNeutralShadowKeyDarker = "var(--colorNeutralShadowKeyDarker)";
 
-export declare const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
+export declare const colorNeutralShadowKeyLighter = "var(--colorNeutralShadowKeyLighter)";
 
-export declare const colorNeutralStencil1: CSSDesignToken<string>;
+export declare const colorNeutralStencil1 = "var(--colorNeutralStencil1)";
 
-export declare const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+export declare const colorNeutralStencil1Alpha = "var(--colorNeutralStencil1Alpha)";
 
-export declare const colorNeutralStencil2: CSSDesignToken<string>;
+export declare const colorNeutralStencil2 = "var(--colorNeutralStencil2)";
 
-export declare const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+export declare const colorNeutralStencil2Alpha = "var(--colorNeutralStencil2Alpha)";
 
-export declare const colorNeutralStroke1: CSSDesignToken<string>;
+export declare const colorNeutralStroke1 = "var(--colorNeutralStroke1)";
 
-export declare const colorNeutralStroke1Hover: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Hover = "var(--colorNeutralStroke1Hover)";
 
-export declare const colorNeutralStroke1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Pressed = "var(--colorNeutralStroke1Pressed)";
 
-export declare const colorNeutralStroke1Selected: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Selected = "var(--colorNeutralStroke1Selected)";
 
-export declare const colorNeutralStroke2: CSSDesignToken<string>;
+export declare const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
 
-export declare const colorNeutralStroke3: CSSDesignToken<string>;
+export declare const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
 
-export declare const colorNeutralStrokeAccessible: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessible = "var(--colorNeutralStrokeAccessible)";
 
-export declare const colorNeutralStrokeAccessibleHover: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessibleHover = "var(--colorNeutralStrokeAccessibleHover)";
 
-export declare const colorNeutralStrokeAccessiblePressed: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralStrokeAccessiblePressed)";
 
-export declare const colorNeutralStrokeAccessibleSelected: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessibleSelected = "var(--colorNeutralStrokeAccessibleSelected)";
 
-export declare const colorNeutralStrokeDisabled: CSSDesignToken<string>;
+export declare const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
 
-export declare const colorNeutralStrokeInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralStrokeInvertedDisabled = "var(--colorNeutralStrokeInvertedDisabled)";
 
-export declare const colorNeutralStrokeOnBrand: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand = "var(--colorNeutralStrokeOnBrand)";
 
-export declare const colorNeutralStrokeOnBrand2: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2 = "var(--colorNeutralStrokeOnBrand2)";
 
-export declare const colorNeutralStrokeOnBrand2Hover: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Hover = "var(--colorNeutralStrokeOnBrand2Hover)";
 
-export declare const colorNeutralStrokeOnBrand2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStrokeOnBrand2Pressed)";
 
-export declare const colorNeutralStrokeOnBrand2Selected: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
 
-export declare const colorPaletteAnchorBackground2: CSSDesignToken<string>;
+export declare const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
 
-export declare const colorPaletteAnchorBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteAnchorBorderActive = "var(--colorPaletteAnchorBorderActive)";
 
-export declare const colorPaletteAnchorForeground2: CSSDesignToken<string>;
+export declare const colorPaletteAnchorForeground2 = "var(--colorPaletteAnchorForeground2)";
 
-export declare const colorPaletteBeigeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBeigeBackground2 = "var(--colorPaletteBeigeBackground2)";
 
-export declare const colorPaletteBeigeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBeigeBorderActive = "var(--colorPaletteBeigeBorderActive)";
 
-export declare const colorPaletteBeigeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBeigeForeground2 = "var(--colorPaletteBeigeForeground2)";
 
-export declare const colorPaletteBerryBackground1: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground1 = "var(--colorPaletteBerryBackground1)";
 
-export declare const colorPaletteBerryBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground2 = "var(--colorPaletteBerryBackground2)";
 
-export declare const colorPaletteBerryBackground3: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground3 = "var(--colorPaletteBerryBackground3)";
 
-export declare const colorPaletteBerryBorder1: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorder1 = "var(--colorPaletteBerryBorder1)";
 
-export declare const colorPaletteBerryBorder2: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorder2 = "var(--colorPaletteBerryBorder2)";
 
-export declare const colorPaletteBerryBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorderActive = "var(--colorPaletteBerryBorderActive)";
 
-export declare const colorPaletteBerryForeground1: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground1 = "var(--colorPaletteBerryForeground1)";
 
-export declare const colorPaletteBerryForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground2 = "var(--colorPaletteBerryForeground2)";
 
-export declare const colorPaletteBerryForeground3: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground3 = "var(--colorPaletteBerryForeground3)";
 
-export declare const colorPaletteBlueBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBlueBackground2 = "var(--colorPaletteBlueBackground2)";
 
-export declare const colorPaletteBlueBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBlueBorderActive = "var(--colorPaletteBlueBorderActive)";
 
-export declare const colorPaletteBlueForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBlueForeground2 = "var(--colorPaletteBlueForeground2)";
 
-export declare const colorPaletteBrassBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBrassBackground2 = "var(--colorPaletteBrassBackground2)";
 
-export declare const colorPaletteBrassBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBrassBorderActive = "var(--colorPaletteBrassBorderActive)";
 
-export declare const colorPaletteBrassForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBrassForeground2 = "var(--colorPaletteBrassForeground2)";
 
-export declare const colorPaletteBrownBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBrownBackground2 = "var(--colorPaletteBrownBackground2)";
 
-export declare const colorPaletteBrownBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBrownBorderActive = "var(--colorPaletteBrownBorderActive)";
 
-export declare const colorPaletteBrownForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBrownForeground2 = "var(--colorPaletteBrownForeground2)";
 
-export declare const colorPaletteCornflowerBackground2: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerBackground2 = "var(--colorPaletteCornflowerBackground2)";
 
-export declare const colorPaletteCornflowerBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerBorderActive = "var(--colorPaletteCornflowerBorderActive)";
 
-export declare const colorPaletteCornflowerForeground2: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerForeground2 = "var(--colorPaletteCornflowerForeground2)";
 
-export declare const colorPaletteCranberryBackground2: CSSDesignToken<string>;
+export declare const colorPaletteCranberryBackground2 = "var(--colorPaletteCranberryBackground2)";
 
-export declare const colorPaletteCranberryBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteCranberryBorderActive = "var(--colorPaletteCranberryBorderActive)";
 
-export declare const colorPaletteCranberryForeground2: CSSDesignToken<string>;
+export declare const colorPaletteCranberryForeground2 = "var(--colorPaletteCranberryForeground2)";
 
-export declare const colorPaletteDarkGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenBackground2 = "var(--colorPaletteDarkGreenBackground2)";
 
-export declare const colorPaletteDarkGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenBorderActive = "var(--colorPaletteDarkGreenBorderActive)";
 
-export declare const colorPaletteDarkGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenForeground2 = "var(--colorPaletteDarkGreenForeground2)";
 
-export declare const colorPaletteDarkOrangeBackground1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground1 = "var(--colorPaletteDarkOrangeBackground1)";
 
-export declare const colorPaletteDarkOrangeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground2 = "var(--colorPaletteDarkOrangeBackground2)";
 
-export declare const colorPaletteDarkOrangeBackground3: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground3 = "var(--colorPaletteDarkOrangeBackground3)";
 
-export declare const colorPaletteDarkOrangeBorder1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorder1 = "var(--colorPaletteDarkOrangeBorder1)";
 
-export declare const colorPaletteDarkOrangeBorder2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorder2 = "var(--colorPaletteDarkOrangeBorder2)";
 
-export declare const colorPaletteDarkOrangeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorderActive = "var(--colorPaletteDarkOrangeBorderActive)";
 
-export declare const colorPaletteDarkOrangeForeground1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground1 = "var(--colorPaletteDarkOrangeForeground1)";
 
-export declare const colorPaletteDarkOrangeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground2 = "var(--colorPaletteDarkOrangeForeground2)";
 
-export declare const colorPaletteDarkOrangeForeground3: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground3 = "var(--colorPaletteDarkOrangeForeground3)";
 
-export declare const colorPaletteDarkRedBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedBackground2 = "var(--colorPaletteDarkRedBackground2)";
 
-export declare const colorPaletteDarkRedBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedBorderActive = "var(--colorPaletteDarkRedBorderActive)";
 
-export declare const colorPaletteDarkRedForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedForeground2 = "var(--colorPaletteDarkRedForeground2)";
 
-export declare const colorPaletteForestBackground2: CSSDesignToken<string>;
+export declare const colorPaletteForestBackground2 = "var(--colorPaletteForestBackground2)";
 
-export declare const colorPaletteForestBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteForestBorderActive = "var(--colorPaletteForestBorderActive)";
 
-export declare const colorPaletteForestForeground2: CSSDesignToken<string>;
+export declare const colorPaletteForestForeground2 = "var(--colorPaletteForestForeground2)";
 
-export declare const colorPaletteGoldBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGoldBackground2 = "var(--colorPaletteGoldBackground2)";
 
-export declare const colorPaletteGoldBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGoldBorderActive = "var(--colorPaletteGoldBorderActive)";
 
-export declare const colorPaletteGoldForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGoldForeground2 = "var(--colorPaletteGoldForeground2)";
 
-export declare const colorPaletteGrapeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGrapeBackground2 = "var(--colorPaletteGrapeBackground2)";
 
-export declare const colorPaletteGrapeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGrapeBorderActive = "var(--colorPaletteGrapeBorderActive)";
 
-export declare const colorPaletteGrapeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGrapeForeground2 = "var(--colorPaletteGrapeForeground2)";
 
-export declare const colorPaletteGreenBackground1: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground1 = "var(--colorPaletteGreenBackground1)";
 
-export declare const colorPaletteGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground2 = "var(--colorPaletteGreenBackground2)";
 
-export declare const colorPaletteGreenBackground3: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground3 = "var(--colorPaletteGreenBackground3)";
 
-export declare const colorPaletteGreenBorder1: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorder1 = "var(--colorPaletteGreenBorder1)";
 
-export declare const colorPaletteGreenBorder2: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorder2 = "var(--colorPaletteGreenBorder2)";
 
-export declare const colorPaletteGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorderActive = "var(--colorPaletteGreenBorderActive)";
 
-export declare const colorPaletteGreenForeground1: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground1 = "var(--colorPaletteGreenForeground1)";
 
-export declare const colorPaletteGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground2 = "var(--colorPaletteGreenForeground2)";
 
-export declare const colorPaletteGreenForeground3: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground3 = "var(--colorPaletteGreenForeground3)";
 
-export declare const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteGreenForegroundInverted = "var(--colorPaletteGreenForegroundInverted)";
 
-export declare const colorPaletteLavenderBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLavenderBackground2 = "var(--colorPaletteLavenderBackground2)";
 
-export declare const colorPaletteLavenderBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLavenderBorderActive = "var(--colorPaletteLavenderBorderActive)";
 
-export declare const colorPaletteLavenderForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLavenderForeground2 = "var(--colorPaletteLavenderForeground2)";
 
-export declare const colorPaletteLightGreenBackground1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground1 = "var(--colorPaletteLightGreenBackground1)";
 
-export declare const colorPaletteLightGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground2 = "var(--colorPaletteLightGreenBackground2)";
 
-export declare const colorPaletteLightGreenBackground3: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground3 = "var(--colorPaletteLightGreenBackground3)";
 
-export declare const colorPaletteLightGreenBorder1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorder1 = "var(--colorPaletteLightGreenBorder1)";
 
-export declare const colorPaletteLightGreenBorder2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorder2 = "var(--colorPaletteLightGreenBorder2)";
 
-export declare const colorPaletteLightGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorderActive = "var(--colorPaletteLightGreenBorderActive)";
 
-export declare const colorPaletteLightGreenForeground1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground1 = "var(--colorPaletteLightGreenForeground1)";
 
-export declare const colorPaletteLightGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground2 = "var(--colorPaletteLightGreenForeground2)";
 
-export declare const colorPaletteLightGreenForeground3: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground3 = "var(--colorPaletteLightGreenForeground3)";
 
-export declare const colorPaletteLightTealBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLightTealBackground2 = "var(--colorPaletteLightTealBackground2)";
 
-export declare const colorPaletteLightTealBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLightTealBorderActive = "var(--colorPaletteLightTealBorderActive)";
 
-export declare const colorPaletteLightTealForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLightTealForeground2 = "var(--colorPaletteLightTealForeground2)";
 
-export declare const colorPaletteLilacBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLilacBackground2 = "var(--colorPaletteLilacBackground2)";
 
-export declare const colorPaletteLilacBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLilacBorderActive = "var(--colorPaletteLilacBorderActive)";
 
-export declare const colorPaletteLilacForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLilacForeground2 = "var(--colorPaletteLilacForeground2)";
 
-export declare const colorPaletteMagentaBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMagentaBackground2 = "var(--colorPaletteMagentaBackground2)";
 
-export declare const colorPaletteMagentaBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMagentaBorderActive = "var(--colorPaletteMagentaBorderActive)";
 
-export declare const colorPaletteMagentaForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMagentaForeground2 = "var(--colorPaletteMagentaForeground2)";
 
-export declare const colorPaletteMarigoldBackground1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground1 = "var(--colorPaletteMarigoldBackground1)";
 
-export declare const colorPaletteMarigoldBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground2 = "var(--colorPaletteMarigoldBackground2)";
 
-export declare const colorPaletteMarigoldBackground3: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground3 = "var(--colorPaletteMarigoldBackground3)";
 
-export declare const colorPaletteMarigoldBorder1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorder1 = "var(--colorPaletteMarigoldBorder1)";
 
-export declare const colorPaletteMarigoldBorder2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorder2 = "var(--colorPaletteMarigoldBorder2)";
 
-export declare const colorPaletteMarigoldBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorderActive = "var(--colorPaletteMarigoldBorderActive)";
 
-export declare const colorPaletteMarigoldForeground1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground1 = "var(--colorPaletteMarigoldForeground1)";
 
-export declare const colorPaletteMarigoldForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground2 = "var(--colorPaletteMarigoldForeground2)";
 
-export declare const colorPaletteMarigoldForeground3: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground3 = "var(--colorPaletteMarigoldForeground3)";
 
-export declare const colorPaletteMinkBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMinkBackground2 = "var(--colorPaletteMinkBackground2)";
 
-export declare const colorPaletteMinkBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMinkBorderActive = "var(--colorPaletteMinkBorderActive)";
 
-export declare const colorPaletteMinkForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMinkForeground2 = "var(--colorPaletteMinkForeground2)";
 
-export declare const colorPaletteNavyBackground2: CSSDesignToken<string>;
+export declare const colorPaletteNavyBackground2 = "var(--colorPaletteNavyBackground2)";
 
-export declare const colorPaletteNavyBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteNavyBorderActive = "var(--colorPaletteNavyBorderActive)";
 
-export declare const colorPaletteNavyForeground2: CSSDesignToken<string>;
+export declare const colorPaletteNavyForeground2 = "var(--colorPaletteNavyForeground2)";
 
-export declare const colorPalettePeachBackground2: CSSDesignToken<string>;
+export declare const colorPalettePeachBackground2 = "var(--colorPalettePeachBackground2)";
 
-export declare const colorPalettePeachBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePeachBorderActive = "var(--colorPalettePeachBorderActive)";
 
-export declare const colorPalettePeachForeground2: CSSDesignToken<string>;
+export declare const colorPalettePeachForeground2 = "var(--colorPalettePeachForeground2)";
 
-export declare const colorPalettePinkBackground2: CSSDesignToken<string>;
+export declare const colorPalettePinkBackground2 = "var(--colorPalettePinkBackground2)";
 
-export declare const colorPalettePinkBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePinkBorderActive = "var(--colorPalettePinkBorderActive)";
 
-export declare const colorPalettePinkForeground2: CSSDesignToken<string>;
+export declare const colorPalettePinkForeground2 = "var(--colorPalettePinkForeground2)";
 
-export declare const colorPalettePlatinumBackground2: CSSDesignToken<string>;
+export declare const colorPalettePlatinumBackground2 = "var(--colorPalettePlatinumBackground2)";
 
-export declare const colorPalettePlatinumBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePlatinumBorderActive = "var(--colorPalettePlatinumBorderActive)";
 
-export declare const colorPalettePlatinumForeground2: CSSDesignToken<string>;
+export declare const colorPalettePlatinumForeground2 = "var(--colorPalettePlatinumForeground2)";
 
-export declare const colorPalettePlumBackground2: CSSDesignToken<string>;
+export declare const colorPalettePlumBackground2 = "var(--colorPalettePlumBackground2)";
 
-export declare const colorPalettePlumBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePlumBorderActive = "var(--colorPalettePlumBorderActive)";
 
-export declare const colorPalettePlumForeground2: CSSDesignToken<string>;
+export declare const colorPalettePlumForeground2 = "var(--colorPalettePlumForeground2)";
 
-export declare const colorPalettePumpkinBackground2: CSSDesignToken<string>;
+export declare const colorPalettePumpkinBackground2 = "var(--colorPalettePumpkinBackground2)";
 
-export declare const colorPalettePumpkinBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePumpkinBorderActive = "var(--colorPalettePumpkinBorderActive)";
 
-export declare const colorPalettePumpkinForeground2: CSSDesignToken<string>;
+export declare const colorPalettePumpkinForeground2 = "var(--colorPalettePumpkinForeground2)";
 
-export declare const colorPalettePurpleBackground2: CSSDesignToken<string>;
+export declare const colorPalettePurpleBackground2 = "var(--colorPalettePurpleBackground2)";
 
-export declare const colorPalettePurpleBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePurpleBorderActive = "var(--colorPalettePurpleBorderActive)";
 
-export declare const colorPalettePurpleForeground2: CSSDesignToken<string>;
+export declare const colorPalettePurpleForeground2 = "var(--colorPalettePurpleForeground2)";
 
-export declare const colorPaletteRedBackground1: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground1 = "var(--colorPaletteRedBackground1)";
 
-export declare const colorPaletteRedBackground2: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground2 = "var(--colorPaletteRedBackground2)";
 
-export declare const colorPaletteRedBackground3: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground3 = "var(--colorPaletteRedBackground3)";
 
-export declare const colorPaletteRedBorder1: CSSDesignToken<string>;
+export declare const colorPaletteRedBorder1 = "var(--colorPaletteRedBorder1)";
 
-export declare const colorPaletteRedBorder2: CSSDesignToken<string>;
+export declare const colorPaletteRedBorder2 = "var(--colorPaletteRedBorder2)";
 
-export declare const colorPaletteRedBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteRedBorderActive = "var(--colorPaletteRedBorderActive)";
 
-export declare const colorPaletteRedForeground1: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground1 = "var(--colorPaletteRedForeground1)";
 
-export declare const colorPaletteRedForeground2: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground2 = "var(--colorPaletteRedForeground2)";
 
-export declare const colorPaletteRedForeground3: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground3 = "var(--colorPaletteRedForeground3)";
 
-export declare const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteRedForegroundInverted = "var(--colorPaletteRedForegroundInverted)";
 
-export declare const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueBackground2 = "var(--colorPaletteRoyalBlueBackground2)";
 
-export declare const colorPaletteRoyalBlueBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueBorderActive = "var(--colorPaletteRoyalBlueBorderActive)";
 
-export declare const colorPaletteRoyalBlueForeground2: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueForeground2 = "var(--colorPaletteRoyalBlueForeground2)";
 
-export declare const colorPaletteSeafoamBackground2: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamBackground2 = "var(--colorPaletteSeafoamBackground2)";
 
-export declare const colorPaletteSeafoamBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamBorderActive = "var(--colorPaletteSeafoamBorderActive)";
 
-export declare const colorPaletteSeafoamForeground2: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamForeground2 = "var(--colorPaletteSeafoamForeground2)";
 
-export declare const colorPaletteSteelBackground2: CSSDesignToken<string>;
+export declare const colorPaletteSteelBackground2 = "var(--colorPaletteSteelBackground2)";
 
-export declare const colorPaletteSteelBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteSteelBorderActive = "var(--colorPaletteSteelBorderActive)";
 
-export declare const colorPaletteSteelForeground2: CSSDesignToken<string>;
+export declare const colorPaletteSteelForeground2 = "var(--colorPaletteSteelForeground2)";
 
-export declare const colorPaletteTealBackground2: CSSDesignToken<string>;
+export declare const colorPaletteTealBackground2 = "var(--colorPaletteTealBackground2)";
 
-export declare const colorPaletteTealBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteTealBorderActive = "var(--colorPaletteTealBorderActive)";
 
-export declare const colorPaletteTealForeground2: CSSDesignToken<string>;
+export declare const colorPaletteTealForeground2 = "var(--colorPaletteTealForeground2)";
 
-export declare const colorPaletteYellowBackground1: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground1 = "var(--colorPaletteYellowBackground1)";
 
-export declare const colorPaletteYellowBackground2: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground2 = "var(--colorPaletteYellowBackground2)";
 
-export declare const colorPaletteYellowBackground3: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground3 = "var(--colorPaletteYellowBackground3)";
 
-export declare const colorPaletteYellowBorder1: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorder1 = "var(--colorPaletteYellowBorder1)";
 
-export declare const colorPaletteYellowBorder2: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorder2 = "var(--colorPaletteYellowBorder2)";
 
-export declare const colorPaletteYellowBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorderActive = "var(--colorPaletteYellowBorderActive)";
 
-export declare const colorPaletteYellowForeground1: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground1 = "var(--colorPaletteYellowForeground1)";
 
-export declare const colorPaletteYellowForeground2: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground2 = "var(--colorPaletteYellowForeground2)";
 
-export declare const colorPaletteYellowForeground3: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground3 = "var(--colorPaletteYellowForeground3)";
 
-export declare const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteYellowForegroundInverted = "var(--colorPaletteYellowForegroundInverted)";
 
-export declare const colorScrollbarOverlay: CSSDesignToken<string>;
+export declare const colorScrollbarOverlay = "var(--colorScrollbarOverlay)";
 
-export declare const colorStrokeFocus1: CSSDesignToken<string>;
+export declare const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 
-export declare const colorStrokeFocus2: CSSDesignToken<string>;
+export declare const colorStrokeFocus2 = "var(--colorStrokeFocus2)";
 
-export declare const colorSubtleBackground: CSSDesignToken<string>;
+export declare const colorSubtleBackground = "var(--colorSubtleBackground)";
 
-export declare const colorSubtleBackgroundHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundHover = "var(--colorSubtleBackgroundHover)";
 
-export declare const colorSubtleBackgroundInverted: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInverted = "var(--colorSubtleBackgroundInverted)";
 
-export declare const colorSubtleBackgroundInvertedHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedHover = "var(--colorSubtleBackgroundInvertedHover)";
 
-export declare const colorSubtleBackgroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedPressed = "var(--colorSubtleBackgroundInvertedPressed)";
 
-export declare const colorSubtleBackgroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedSelected = "var(--colorSubtleBackgroundInvertedSelected)";
 
-export declare const colorSubtleBackgroundLightAlphaHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaHover = "var(--colorSubtleBackgroundLightAlphaHover)";
 
-export declare const colorSubtleBackgroundLightAlphaPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaPressed = "var(--colorSubtleBackgroundLightAlphaPressed)";
 
-export declare const colorSubtleBackgroundLightAlphaSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaSelected = "var(--colorSubtleBackgroundLightAlphaSelected)";
 
-export declare const colorSubtleBackgroundPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundPressed = "var(--colorSubtleBackgroundPressed)";
 
-export declare const colorSubtleBackgroundSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundSelected = "var(--colorSubtleBackgroundSelected)";
 
-export declare const colorTransparentBackground: CSSDesignToken<string>;
+export declare const colorTransparentBackground = "var(--colorTransparentBackground)";
 
-export declare const colorTransparentBackgroundHover: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundHover = "var(--colorTransparentBackgroundHover)";
 
-export declare const colorTransparentBackgroundPressed: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundPressed = "var(--colorTransparentBackgroundPressed)";
 
-export declare const colorTransparentBackgroundSelected: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundSelected = "var(--colorTransparentBackgroundSelected)";
 
-export declare const colorTransparentStroke: CSSDesignToken<string>;
+export declare const colorTransparentStroke = "var(--colorTransparentStroke)";
 
-export declare const colorTransparentStrokeDisabled: CSSDesignToken<string>;
+export declare const colorTransparentStrokeDisabled = "var(--colorTransparentStrokeDisabled)";
 
-export declare const colorTransparentStrokeInteractive: CSSDesignToken<string>;
+export declare const colorTransparentStrokeInteractive = "var(--colorTransparentStrokeInteractive)";
 
 /**
  * The base class used for constructing a fluent-compound-button custom element
@@ -1516,6 +2240,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 +2254,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 +2282,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 +2300,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 +2433,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,57 +2490,381 @@ export declare const CounterBadgeStyles: ElementStyles;
  */
 export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
-export declare const curveAccelerateMax: CSSDesignToken<string>;
+/**
+ * Define all possible CSS display values.
+ * @public
+ */
+export declare type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
+
+export declare const curveAccelerateMax = "var(--curveAccelerateMax)";
 
-export declare const curveAccelerateMid: CSSDesignToken<string>;
+export declare const curveAccelerateMid = "var(--curveAccelerateMid)";
 
-export declare const curveAccelerateMin: CSSDesignToken<string>;
+export declare const curveAccelerateMin = "var(--curveAccelerateMin)";
 
-export declare const curveDecelerateMax: CSSDesignToken<string>;
+export declare const curveDecelerateMax = "var(--curveDecelerateMax)";
 
-export declare const curveDecelerateMid: CSSDesignToken<string>;
+export declare const curveDecelerateMid = "var(--curveDecelerateMid)";
 
-export declare const curveDecelerateMin: CSSDesignToken<string>;
+export declare const curveDecelerateMin = "var(--curveDecelerateMin)";
 
-export declare const curveEasyEase: CSSDesignToken<string>;
+export declare const curveEasyEase = "var(--curveEasyEase)";
 
-export declare const curveEasyEaseMax: CSSDesignToken<string>;
+export declare const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 
-export declare const curveLinear: CSSDesignToken<string>;
+export declare const curveLinear = "var(--curveLinear)";
 
 /**
- * @class Divider component
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
  *
- * @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.
+ * @public
  */
-export declare class Divider extends FASTDivider {
-    /**
-     * @property alignContent
-     * @default center
-     * @remarks
-     * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
-     */
-    alignContent?: DividerAlignContent;
+export declare class DelegatesARIAButton {
     /**
-     * @property appearance
-     * @default default
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
      * @remarks
-     * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
+     * HTML Attribute: aria-expanded
      */
-    appearance?: DividerAppearance;
+    ariaExpanded: 'true' | 'false' | string | null;
     /**
-     * @property inset
-     * @default false
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
      * @remarks
-     * Adds padding to the beginning and end of the divider.
+     * HTML Attribute: aria-pressed
      */
-    inset?: boolean;
+    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
 }
 
 /**
- * Align content within divider
- * @public
+ * 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
+     * @remarks
+     * HTML Attribute: aria-expanded
+     */
+    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
+     */
+    titleAction: HTMLElement[];
+    /**
+     * @public
+     * The default title action button
+     */
+    defaultTitleAction?: Button;
+    /**
+     * @public
+     * The ID of the element that describes the dialog
+     */
+    ariaDescribedby?: string;
+    /**
+     * @public
+     * The ID of the element that labels the dialog
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The type of the dialog modal
+     */
+    modalType: DialogModalType;
+    /**
+     * @public
+     * Indicates whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * @public
+     * Indicates whether the dialog has a title action
+     */
+    noTitleAction: boolean;
+    /**
+     * @private
+     * Indicates whether focus should be trapped within the dialog
+     */
+    private trapFocus;
+    /**
+     * @public
+     * Method called when the 'open' attribute changes
+     */
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * @public
+     * Method called when the 'modalType' attribute changes
+     */
+    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    /**
+     * @public
+     * Method to set the component's state based on its attributes
+     */
+    setComponent(): void;
+    /**
+     * @public
+     * Method to emit an event when the dialog's open state changes
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
+    onOpenChangeEvent: (dismissed?: boolean) => void;
+    /**
+     * @public
+     * Method to show the dialog
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the dialog
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
+    hide(dismissed?: boolean): void;
+    /**
+     * @public
+     * Method to dismiss the dialog
+     */
+    dismiss(): void;
+    /**
+     * @public
+     * Handles click events on the dialog
+     * @param event - The click event
+     * @returns boolean
+     */
+    handleClick(event: Event): boolean;
+    /**
+     * @public
+     * Handles keydown events on the dialog
+     * @param e - The keydown event
+     * @returns boolean | void
+     */
+    handleKeydown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * @private
+     * Handles keydown events on the document
+     * @param e - The keydown event
+     */
+    private handleDocumentKeydown;
+    /**
+     * @private
+     * Handles tab keydown events
+     * @param e - The keydown event
+     */
+    private handleTabKeyDown;
+    /**
+     * @private
+     * Gets the bounds of the tab queue
+     * @returns (HTMLElement | SVGElement)[]
+     */
+    private getTabQueueBounds;
+    /**
+     * @private
+     * Focuses the first element in the tab queue
+     */
+    private focusFirstElement;
+    /**
+     * @private
+     * Determines if focus should be forced
+     * @param currentFocusElement - The currently focused element
+     * @returns boolean
+     */
+    private shouldForceFocus;
+    /**
+     * @private
+     * Determines if focus should be trapped
+     * @returns boolean
+     */
+    private shouldTrapFocus;
+    /**
+     * @private
+     * Handles focus events on the document
+     * @param e - The focus event
+     */
+    private handleDocumentFocus;
+    /**
+     * @private
+     * Updates the state of focus trapping
+     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
+     */
+    private updateTrapFocus;
+    /**
+     * @private
+     * Reduces the list of tabbable items
+     * @param elements - The current list of elements
+     * @param element - The element to consider adding to the list
+     * @returns HTMLElement[]
+     */
+    private static reduceTabbableItems;
+    /**
+     * @private
+     * Determines if an element is a focusable FASTElement
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static isFocusableFastElement;
+    /**
+     * @private
+     * Determines if an element has a tabbable shadow
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static hasTabbableShadow;
+}
+
+/**
+ * The Fluent Dialog Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-dialog\>
+ */
+export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
+
+/**
+ * Dialog modal type
+ * @public
+ */
+declare const DialogModalType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+
+declare type DialogModalType = ValuesOf<typeof DialogModalType>;
+
+/** Dialog styles
+ * @public
+ */
+export declare const DialogStyles: ElementStyles;
+
+/**
+ * Template for the Dialog component
+ * @public
+ */
+export declare const DialogTemplate: ElementViewTemplate<Dialog>;
+
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export declare function display(displayValue: CSSDisplayPropertyValue): string;
+
+/**
+ * @class Divider component
+ *
+ * @remarks
+ * 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 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
+     * @remarks
+     * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
+     */
+    alignContent?: DividerAlignContent;
+    /**
+     * @property appearance
+     * @default default
+     * @remarks
+     * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
+     */
+    appearance?: DividerAppearance;
+    /**
+     * @property inset
+     * @default false
+     * @remarks
+     * Adds padding to the beginning and end of the divider.
+     */
+    inset?: boolean;
+}
+
+/**
+ * Align content within divider
+ * @public
  */
 export declare const DividerAlignContent: {
     readonly center: "center";
@@ -1856,9 +2904,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
@@ -1871,19 +2954,84 @@ export declare const DividerStyles: ElementStyles;
  */
 export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
-export declare const durationFast: CSSDesignToken<string>;
+export declare const durationFast = "var(--durationFast)";
 
-export declare const durationFaster: CSSDesignToken<string>;
+export declare const durationFaster = "var(--durationFaster)";
 
-export declare const durationNormal: CSSDesignToken<string>;
+export declare const durationNormal = "var(--durationNormal)";
 
-export declare const durationSlow: CSSDesignToken<string>;
+export declare const durationSlow = "var(--durationSlow)";
 
-export declare const durationSlower: CSSDesignToken<string>;
+export declare const durationSlower = "var(--durationSlower)";
+
+export declare const durationUltraFast = "var(--durationUltraFast)";
+
+export declare const durationUltraSlow = "var(--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";
@@ -1891,58 +3039,176 @@ export declare const FluentDesignSystem: Readonly<{
     registry: CustomElementRegistry;
 }>;
 
-export declare const fontFamilyBase: CSSDesignToken<string>;
+export declare const fontFamilyBase = "var(--fontFamilyBase)";
 
-export declare const fontFamilyMonospace: CSSDesignToken<string>;
+export declare const fontFamilyMonospace = "var(--fontFamilyMonospace)";
 
-export declare const fontFamilyNumeric: CSSDesignToken<string>;
+export declare const fontFamilyNumeric = "var(--fontFamilyNumeric)";
 
-export declare const fontSizeBase100: CSSDesignToken<string>;
+export declare const fontSizeBase100 = "var(--fontSizeBase100)";
 
-export declare const fontSizeBase200: CSSDesignToken<string>;
+export declare const fontSizeBase200 = "var(--fontSizeBase200)";
 
-export declare const fontSizeBase300: CSSDesignToken<string>;
+export declare const fontSizeBase300 = "var(--fontSizeBase300)";
 
-export declare const fontSizeBase400: CSSDesignToken<string>;
+export declare const fontSizeBase400 = "var(--fontSizeBase400)";
 
-export declare const fontSizeBase500: CSSDesignToken<string>;
+export declare const fontSizeBase500 = "var(--fontSizeBase500)";
 
-export declare const fontSizeBase600: CSSDesignToken<string>;
+export declare const fontSizeBase600 = "var(--fontSizeBase600)";
 
-export declare const fontSizeHero1000: CSSDesignToken<string>;
+export declare const fontSizeHero1000 = "var(--fontSizeHero1000)";
 
-export declare const fontSizeHero700: CSSDesignToken<string>;
+export declare const fontSizeHero700 = "var(--fontSizeHero700)";
 
-export declare const fontSizeHero800: CSSDesignToken<string>;
+export declare const fontSizeHero800 = "var(--fontSizeHero800)";
 
-export declare const fontSizeHero900: CSSDesignToken<string>;
+export declare const fontSizeHero900 = "var(--fontSizeHero900)";
 
-export declare const fontWeightBold: CSSDesignToken<string>;
+export declare const fontWeightBold = "var(--fontWeightBold)";
 
-export declare const fontWeightMedium: CSSDesignToken<string>;
+export declare const fontWeightMedium = "var(--fontWeightMedium)";
 
-export declare const fontWeightRegular: CSSDesignToken<string>;
+export declare const fontWeightRegular = "var(--fontWeightRegular)";
 
-export declare const fontWeightSemibold: CSSDesignToken<string>;
+export declare const fontWeightSemibold = "var(--fontWeightSemibold)";
 
 /**
- * The base class used for constucting a fluent image custom element
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
  * @public
  */
-declare class Image_2 extends FASTElement {
+export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
+/**
+ * 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;
     /**
-     * Image layout
+     * 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.
      *
-     * @public
-     * @remarks
-     * HTML attribute: block.
+     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
      */
-    block?: boolean;
-    /**
-     * Image border
-     *
-     * @public
-     * @remarks
+    validate(anchor?: HTMLElement): void;
+    valueChanged(previous: string, next: string): void;
+}
+
+/**
+ * @beta
+ */
+declare class FormAssociatedButton extends FormAssociatedButton_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedButton_base: typeof _Button;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedCheckbox extends FormAssociatedCheckbox_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedCheckbox_base: typeof _Checkbox;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedRadio_base: typeof _Radio;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedSlider extends FormAssociatedSlider_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedSlider_base: typeof _Slider;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedSwitch_base: typeof _Switch;
+
+/**
+ * @beta
+ */
+declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
+
+declare const FormAssociatedTextField_base: typeof _TextField;
+
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
+ * @public
+ */
+export declare const getDirection: (rootNode: HTMLElement) => Direction;
+
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export declare const hidden = ":host([hidden]){display:none}";
+
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+declare class Image_2 extends FASTElement {
+    /**
+     * Image layout
+     *
+     * @public
+     * @remarks
+     * HTML attribute: block.
+     */
+    block?: boolean;
+    /**
+     * Image border
+     *
+     * @public
+     * @remarks
      * HTML attribute: border.
      */
     bordered?: boolean;
@@ -2111,25 +3377,335 @@ declare const LabelWeight: {
  */
 declare type LabelWeight = ValuesOf<typeof LabelWeight>;
 
-export declare const lineHeightBase100: CSSDesignToken<string>;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
+export declare const lineHeightBase100 = "var(--lineHeightBase100)";
 
-export declare const lineHeightBase200: CSSDesignToken<string>;
+export declare const lineHeightBase200 = "var(--lineHeightBase200)";
 
-export declare const lineHeightBase300: CSSDesignToken<string>;
+export declare const lineHeightBase300 = "var(--lineHeightBase300)";
 
-export declare const lineHeightBase400: CSSDesignToken<string>;
+export declare const lineHeightBase400 = "var(--lineHeightBase400)";
 
-export declare const lineHeightBase500: CSSDesignToken<string>;
+export declare const lineHeightBase500 = "var(--lineHeightBase500)";
 
-export declare const lineHeightBase600: CSSDesignToken<string>;
+export declare const lineHeightBase600 = "var(--lineHeightBase600)";
 
-export declare const lineHeightHero1000: CSSDesignToken<string>;
+export declare const lineHeightHero1000 = "var(--lineHeightHero1000)";
 
-export declare const lineHeightHero700: CSSDesignToken<string>;
+export declare const lineHeightHero700 = "var(--lineHeightHero700)";
 
-export declare const lineHeightHero800: CSSDesignToken<string>;
+export declare const lineHeightHero800 = "var(--lineHeightHero800)";
 
-export declare const lineHeightHero900: CSSDesignToken<string>;
+export declare const lineHeightHero900 = "var(--lineHeightHero900)";
+
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export declare abstract class MatchMediaBehavior implements HostBehavior {
+    /**
+     * The behavior needs to operate on element instances but elements might share a behavior instance.
+     * To ensure proper attachment / detachment per instance, we construct a listener for
+     * each bind invocation and cache the listeners by element reference.
+     */
+    private listenerCache;
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query: MediaQueryList);
+    /**
+     * Constructs a function that will be invoked with the MediaQueryList context
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Binds the behavior to the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    connectedCallback(controller: HostController): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    disconnectedCallback(controller: HostController): void;
+}
+
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     * The styles object to be managed by the behavior.
+     */
+    readonly styles: ElementStyles;
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@microsoft/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     *
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     */
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     * @internal
+     */
+    removedCallback(controller: HostController<any>): void;
+}
+
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+
+/**
+ * The Menu class represents a menu component.
+ * @public
+ */
+export declare class Menu extends FASTElement {
+    /**
+     * Determines if the menu should open on hover.
+     * @public
+     */
+    openOnHover?: boolean;
+    /**
+     * Determines if the menu should open on right click.
+     * @public
+     */
+    openOnContext?: boolean;
+    /**
+     * Determines if the menu should close on scroll.
+     * @public
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Determines if the menu open state should persis on click of menu item
+     * @public
+     */
+    persistOnItemClick?: boolean;
+    /**
+     * Defines whether the menu is open or not.
+     * @public
+     */
+    open: boolean;
+    /**
+     * Holds the slotted menu list.
+     * @public
+     */
+    slottedMenuList: MenuList[];
+    /**
+     * Holds the slotted triggers.
+     * @public
+     */
+    slottedTriggers: HTMLElement[];
+    /**
+     * The positioning container of the menu.
+     * @internal
+     */
+    positioningContainer?: HTMLElement;
+    /**
+     * The trigger element of the menu.
+     * @private
+     */
+    private _trigger?;
+    /**
+     * The menu list element of the menu.
+     * @private
+     */
+    private _menuList?;
+    /**
+     * Holds a reference to a function that is used to cleanup resources.
+     * @public
+     */
+    cleanup?: () => void;
+    /**
+     * Called when the element is connected to the DOM.
+     * Sets up the component.
+     * @public
+     */
+    connectedCallback(): void;
+    /**
+     * Called when the element is disconnected from the DOM.
+     * Removes event listeners.
+     * @public
+     */
+    disconnectedCallback(): void;
+    /**
+     * Sets the component.
+     * Sets the trigger and menu list elements and adds event listeners.
+     * @public
+     */
+    setComponent(): void;
+    /**
+     * Toggles the open state of the menu.
+     * @public
+     */
+    toggleMenu: () => void;
+    /**
+     * Closes the menu.
+     * @public
+     */
+    closeMenu: () => void;
+    /**
+     * Opens the menu.
+     * @public
+     */
+    openMenu: (e?: Event) => void;
+    /**
+     * Focuses on the menu list.
+     * @public
+     */
+    focusMenuList(): void;
+    /**
+     * Focuses on the menu trigger.
+     * @public
+     */
+    focusTrigger(): void;
+    /**
+     * Called whenever the open state changes.
+     * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
+     * Sets menu list position
+     * emits openChanged event
+     * @public
+     * @param {boolean} oldValue - The previous value of 'open'.
+     * @param {boolean} newValue - The new value of 'open'.
+     */
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'openOnHover' property changes.
+     * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'openOnHover'.
+     * @param {boolean} newValue - The new value of 'openOnHover'.
+     */
+    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'persistOnItemClick' property changes.
+     * Adds or removes a 'click' event listener to the menu list based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
+     * @param {boolean} newValue - The new value of 'persistOnItemClick'.
+     */
+    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'openOnContext' property changes.
+     * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'openOnContext'.
+     * @param {boolean} newValue - The new value of 'openOnContext'.
+     */
+    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'closeOnScroll' property changes.
+     * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
+     * @param {boolean} newValue - The new value of 'closeOnScroll'.
+     */
+    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * The task to set the positioning of the menu.
+     * @protected
+     */
+    protected setPositioningTask: () => void;
+    /**
+     * Sets the positioning of the menu.
+     * @protected
+     */
+    protected setPositioning(): void;
+    /**
+     * Adds event listeners.
+     * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
+     * @public
+     */
+    private addListeners;
+    /**
+     * Removes event listeners.
+     * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+     * Also removes 'mouseover' event listeners from the trigger.
+     * @private
+     */
+    private removeListeners;
+    /**
+     * Handles keyboard interaction for the menu.
+     * Closes the menu and focuses on the trigger when the Escape key is pressed.
+     * Closes the menu when the Tab key is pressed.
+     * @public
+     * @param {KeyboardEvent} e - the keyboard event
+     */
+    handleMenuKeydown(e: KeyboardEvent): boolean | void;
+    /**
+     * Handles keyboard interaction for the trigger.
+     * Toggles the menu when the Space or Enter key is pressed.
+     * If the menu is open, focuses on the menu list.
+     * @public
+     * @param {KeyboardEvent} e - the keyboard event
+     */
+    handleTriggerKeydown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+     * @private
+     * @param {Event} e - The event triggered on document click.
+     */
+    private handleDocumentClick;
+}
 
 /**
  * The base class used for constructing a fluent-menu-button custom element
@@ -2157,9 +3733,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\>
@@ -2205,83 +3778,343 @@ export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
 export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
 
 /**
- * The base class used for constructing a fluent-menu-item custom element
- * @public
- */
-export declare class MenuItem extends FASTMenuItem {
-}
-
-export declare type MenuItemColumnCount = 0 | 1 | 2;
-
-/**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
+ * The Fluent Menu Element.
  *
  * @public
  * @remarks
- * HTML Element: <fluent-menu-item>
- */
-export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
-
-export { MenuItemRole }
-
-/** MenuItem styles
- * @public
- */
-export declare const MenuItemStyles: ElementStyles;
-
-export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
-
-/**
- * The base class used for constructing a fluent-menu-list custom element
- * @public
+ * HTML Element: <fluent-menu>
  */
-export declare class MenuList extends FASTMenu {
-    protected setItems(): void;
-    private static elementIndent;
-}
+export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
 
 /**
- * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
- * {@link @microsoft/fast-foundation#menuTemplate}
+ * 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
- * @remarks
- * HTML Element: <fluent-menu-list>
- */
-export declare const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
-
-/** MenuList styles
- * @public
- */
-export declare const MenuListStyles: ElementStyles;
-
-export declare const MenuListTemplate: ElementViewTemplate<MenuList>;
-
-/**
- * The base class used for constructing a fluent-progress-bar custom element
- * @public
  */
-declare class ProgressBar_2 extends FASTProgress {
+export declare class MenuItem extends FASTElement {
     /**
-     * The thickness of the progress bar
+     * The disabled state of the element.
      *
      * @public
      * @remarks
-     * HTML Attribute: thickness
+     * HTML Attribute: disabled
      */
-    thickness?: ProgressBarThickness;
+    disabled: boolean;
     /**
-     * The shape of the progress bar
+     * The expanded state of the element.
+     *
      * @public
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: expanded
      */
-    shape?: ProgressBarShape;
+    expanded: boolean;
+    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
     /**
-     * The validation state of the progress bar
+     * 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;
+
+/**
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu-item>
+ */
+export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
+
+/**
+ * Menu Item configuration options
+ * @public
+ */
+export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
+    checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
+    expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
+    radioIndicator?: StaticallyComposableHTML<MenuItem>;
+};
+
+/**
+ * Menu items roles.
+ * @public
+ */
+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>;
+
+/** MenuList styles
+ * @public
+ */
+export declare const MenuListStyles: ElementStyles;
+
+export declare const MenuListTemplate: ElementViewTemplate<MenuList>;
+
+/** Menu styles
+ * @public
+ */
+export declare const MenuStyles: ElementStyles;
+
+export declare const MenuTemplate: ElementViewTemplate<Menu>;
+
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @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 BaseProgress {
+    /**
+     * The thickness of the progress bar
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: thickness
+     */
+    thickness?: ProgressBarThickness;
+    /**
+     * The shape of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ProgressBarShape;
+    /**
+     * The validation state of the progress bar
      * @public
      * @remarks
      * HTML Attribute: validation-state
@@ -2354,12 +4187,86 @@ export declare const ProgressBarValidationState: {
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
 /**
- * The base class used for constructing a fluent-radio custom element
+ * Progress configuration options
  * @public
  */
-export declare class Radio extends FASTRadio {
+export declare type ProgressOptions = {
+    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar_2>;
+    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar_2>;
+};
+
+/**
+ * An circular Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @slot determinate - The slot for a custom determinate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart background - The background
+ *
+ * @public
+ */
+declare class ProgressRing extends BaseProgress {
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Radio extends FormAssociatedRadio implements RadioControl {
+    /**
+     * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
+     */
+    name: string;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    private get radioGroup();
+    /**
+     * @internal
+     */
+    defaultCheckedChanged(): void;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private isInsideRadioGroup;
+    /**
+     * Handles key presses on the radio.
+     * @beta
+     */
+    keypressHandler(e: KeyboardEvent): boolean | void;
 }
 
+declare class _Radio extends FASTElement {
+}
+
+declare interface _Radio extends CheckableFormAssociated {
+}
+
+/**
+ * @public
+ */
+export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+
 /**
  * The Fluent Radio Element.
  *
@@ -2371,112 +4278,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 = "var(--shadow16)";
+
+export declare const shadow16Brand = "var(--shadow16Brand)";
+
+export declare const shadow2 = "var(--shadow2)";
+
+export declare const shadow28 = "var(--shadow28)";
+
+export declare const shadow28Brand = "var(--shadow28Brand)";
+
+export declare const shadow2Brand = "var(--shadow2Brand)";
+
+export declare const shadow4 = "var(--shadow4)";
+
+export declare const shadow4Brand = "var(--shadow4Brand)";
+
+export declare const shadow64 = "var(--shadow64)";
+
+export declare const shadow64Brand = "var(--shadow64Brand)";
+
+export declare const shadow8 = "var(--shadow8)";
+
+export declare const shadow8Brand = "var(--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
@@ -2498,57 +4763,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 = "var(--spacingHorizontalL)";
 
-export declare const spacingHorizontalM: CSSDesignToken<string>;
+export declare const spacingHorizontalM = "var(--spacingHorizontalM)";
 
-export declare const spacingHorizontalMNudge: CSSDesignToken<string>;
+export declare const spacingHorizontalMNudge = "var(--spacingHorizontalMNudge)";
 
-export declare const spacingHorizontalNone: CSSDesignToken<string>;
+export declare const spacingHorizontalNone = "var(--spacingHorizontalNone)";
 
-export declare const spacingHorizontalS: CSSDesignToken<string>;
+export declare const spacingHorizontalS = "var(--spacingHorizontalS)";
 
-export declare const spacingHorizontalSNudge: CSSDesignToken<string>;
+export declare const spacingHorizontalSNudge = "var(--spacingHorizontalSNudge)";
 
-export declare const spacingHorizontalXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXL = "var(--spacingHorizontalXL)";
 
-export declare const spacingHorizontalXS: CSSDesignToken<string>;
+export declare const spacingHorizontalXS = "var(--spacingHorizontalXS)";
 
-export declare const spacingHorizontalXXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXXL = "var(--spacingHorizontalXXL)";
 
-export declare const spacingHorizontalXXS: CSSDesignToken<string>;
+export declare const spacingHorizontalXXS = "var(--spacingHorizontalXXS)";
 
-export declare const spacingHorizontalXXXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXXXL = "var(--spacingHorizontalXXXL)";
 
-export declare const spacingVerticalL: CSSDesignToken<string>;
+export declare const spacingVerticalL = "var(--spacingVerticalL)";
 
-export declare const spacingVerticalM: CSSDesignToken<string>;
+export declare const spacingVerticalM = "var(--spacingVerticalM)";
 
-export declare const spacingVerticalMNudge: CSSDesignToken<string>;
+export declare const spacingVerticalMNudge = "var(--spacingVerticalMNudge)";
 
-export declare const spacingVerticalNone: CSSDesignToken<string>;
+export declare const spacingVerticalNone = "var(--spacingVerticalNone)";
 
-export declare const spacingVerticalS: CSSDesignToken<string>;
+export declare const spacingVerticalS = "var(--spacingVerticalS)";
 
-export declare const spacingVerticalSNudge: CSSDesignToken<string>;
+export declare const spacingVerticalSNudge = "var(--spacingVerticalSNudge)";
 
-export declare const spacingVerticalXL: CSSDesignToken<string>;
+export declare const spacingVerticalXL = "var(--spacingVerticalXL)";
 
-export declare const spacingVerticalXS: CSSDesignToken<string>;
+export declare const spacingVerticalXS = "var(--spacingVerticalXS)";
 
-export declare const spacingVerticalXXL: CSSDesignToken<string>;
+export declare const spacingVerticalXXL = "var(--spacingVerticalXXL)";
 
-export declare const spacingVerticalXXS: CSSDesignToken<string>;
+export declare const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 
-export declare const spacingVerticalXXXL: CSSDesignToken<string>;
+export declare const spacingVerticalXXXL = "var(--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
      *
@@ -2584,10 +4849,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\>
@@ -2618,19 +4879,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 = "var(--strokeWidthThick)";
 
-export declare const strokeWidthThicker: CSSDesignToken<string>;
+export declare const strokeWidthThicker = "var(--strokeWidthThicker)";
 
-export declare const strokeWidthThickest: CSSDesignToken<string>;
+export declare const strokeWidthThickest = "var(--strokeWidthThickest)";
 
-export declare const strokeWidthThin: CSSDesignToken<string>;
+export declare const strokeWidthThin = "var(--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
      *
@@ -2640,6 +4935,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 {
 }
 
 /**
@@ -2667,6 +4996,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>;
@@ -2674,29 +5007,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.
@@ -2777,6 +5120,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";
@@ -2786,7 +5132,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";
@@ -2798,11 +5163,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
@@ -2922,6 +5287,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
@@ -2938,11 +5344,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
      *
@@ -2961,6 +5363,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 {
 }
 
 /**
@@ -3016,8 +5538,6 @@ export declare const TextInputStyles: ElementStyles;
  */
 export declare const TextInputTemplate: ElementViewTemplate<TextInput>;
 
-export { TextInputType }
-
 /**
  * TextSize constants
  * @public
@@ -3136,8 +5656,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
@@ -3185,4 +5703,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 { }