@fluentui/web-components 3.0.0-rc.12 → 3.0.0-rc.13

package/dist/web-components.d.ts

@@ -2285,6 +2285,82 @@ export declare class BaseField extends FASTElement {
     setValidationStates(): void;
 }
 
+/**
+ * A Base Menu List Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @public
+ */
+export declare class BaseMenuList extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * @internal
+     */
+    items: HTMLElement[];
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    protected menuItems: Element[] | undefined;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    private static focusableElementRoles;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): 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 removeItemListeners;
+    private static elementIndent;
+    protected setItems(): void;
+    /**
+     * Method for Observable changes to the hidden attribute of child elements
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Handle change from child MenuItem element and set radio group behavior
+     */
+    private changedMenuItemHandler;
+    /**
+     * 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;
+}
+
 /**
  * A Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
@@ -2384,576 +2460,562 @@ export declare class BaseProgressBar extends FASTElement {
 }
 
 /**
- * The base class used for constructing a fluent-rating-display custom element
- *
- * @slot icon - SVG element used as the rating icon
+ * A Base Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
  *
  * @public
  */
-export declare class BaseRatingDisplay extends FASTElement {
-    private numberFormatter;
+export declare class BaseRadioGroup extends FASTElement {
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * Reference to the slot element used for the rating icon.
+     * The index of the checked radio, scoped to the enabled radios.
      *
      * @internal
      */
-    iconSlot: HTMLSlotElement;
+    protected checkedIndex: number;
     /**
-     * Updates the icon when the referenced slot is bound in the template.
+     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
      *
+     * @param prev - the previous index
+     * @param next - the current index
      * @internal
      */
-    iconSlotChanged(): void;
-    protected defaultCustomIconViewBox: string;
+    protected checkedIndexChanged(prev: number | undefined, next: number): void;
     /**
-     * The element that displays the rating icons.
-     * @internal
+     * Indicates that the value has been changed by the user.
      */
-    display: HTMLElement;
+    private dirtyState;
     /**
-     * The number of ratings.
+     * Disables the radio group and child radios.
      *
      * @public
      * @remarks
-     * HTML Attribute: `count`
+     * HTML Attribute: `disabled`
      */
-    count?: number;
+    disabled: boolean;
     /**
-     * The `viewBox` attribute of the icon <svg> element.
+     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `icon-view-box`
-     * @deprecated Add `viewBox` attribute on the custom SVG directly.
+     * @param prev - the previous disabled value
+     * @param next - the current disabled value
+     * @internal
      */
-    iconViewBox?: string;
+    protected disabledChanged(prev?: boolean, next?: boolean): void;
     /**
-     * The maximum possible value of the rating.
-     * This attribute determines the number of icons displayed.
-     * Must be a whole number greater than 1.
+     * The value of the checked radio.
      *
      * @public
      * @remarks
-     * HTML Attribute: `max`
+     * HTML Attribute: `value`
      */
-    max?: number;
-    protected maxChanged(): void;
+    initialValue?: string;
     /**
-     * The value of the rating.
+     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     */
+    initialValueChanged(prev: string | undefined, next: string | undefined): void;
+    /**
+     * The name of the radio group.
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: `name`
      */
-    value?: number;
-    protected valueChanged(): void;
-    constructor();
-    connectedCallback(): void;
+    name: string;
     /**
-     * Returns "count" as string, formatted according to the locale.
+     * Sets the `name` attribute on all child radios when the `name` property changes.
      *
      * @internal
      */
-    get formattedCount(): string;
-    /** @internal */
-    handleSlotChange(): void;
-    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
-    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
-}
-
-/**
- * The base class used for constructing a fluent-spinner custom element
- * @public
- */
-export declare class BaseSpinner extends FASTElement {
+    protected nameChanged(prev: string | undefined, next: string | undefined): void;
     /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The orientation of the group.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `orientation`
      */
-    elementInternals: ElementInternals;
-    constructor();
-}
-
-/**
- * A Tablist element that wraps a collection of tab elements
- * @public
- */
-export declare class BaseTablist extends FASTElement {
+    orientation?: RadioGroupOrientation;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * Sets the ariaOrientation attribute when the orientation changes.
      *
+     * @param prev - the previous orientation
+     * @param next - the current orientation
      * @internal
      */
-    elementInternals: ElementInternals;
+    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
     /**
-     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * The collection of all child radios.
+     *
      * @public
-     * @remarks
-     * HTML Attribute: disabled.
      */
-    disabled: boolean;
+    radios: Radio[];
     /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
+     * Updates the enabled radios collection when properties on the child radios change.
      *
-     * @internal
+     * @param prev - the previous radios
+     * @param next - the current radios
      */
-    protected disabledChanged(prev: boolean, next: boolean): void;
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
     /**
-     * The orientation
+     * Indicates whether the radio group is required.
+     *
      * @public
      * @remarks
-     * HTML Attribute: orientation
+     * HTML Attribute: `required`
      */
-    orientation: TablistOrientation;
+    required: boolean;
+    /**
+     *
+     * @param prev - the previous required value
+     * @param next - the current required value
+     */
+    requiredChanged(prev: boolean, next: boolean): void;
     /**
+     * The collection of radios that are slotted into the default slot.
+     *
      * @internal
      */
-    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    slottedRadios: Radio[];
     /**
-     * The id of the active tab
+     * Updates the radios collection when the slotted radios change.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: activeid
+     * @param prev - the previous slotted radios
+     * @param next - the current slotted radios
      */
-    activeid: string;
+    slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
     /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
      * @internal
      */
-    protected activeidChanged(oldValue: string, newValue: string): void;
+    elementInternals: ElementInternals;
     /**
-     * Content slotted in the tab slot.
+     * A collection of child radios that are not disabled.
+     *
      * @internal
      */
-    slottedTabs: Node[];
+    get enabledRadios(): Radio[];
     /**
-     * Updates the tabs property when content in the tabs slot changes.
-     * @internal
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
      */
-    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    static formAssociated: boolean;
     /**
+     * The fallback validation message, taken from a native checkbox `<input>` element.
+     *
      * @internal
      */
-    tabs: Tab[];
+    private _validationFallbackMessage;
     /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
      * @internal
      */
-    protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
+    get validationMessage(): string;
     /**
-     * A reference to the active tab
+     * The element's validity state.
+     *
      * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
      */
-    activetab: Tab;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private tabPanelMap;
-    private change;
-    private getActiveIndex;
+    get validity(): ValidityState;
     /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
+     * The current value of the checked radio.
      *
      * @public
      */
-    protected setTabs(): void;
-    private getTabIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
+    get value(): string | null;
+    set value(next: string | null);
     /**
-     * The adjust method for FASTTabs
-     * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
+     * Sets the checked state of all radios when any radio emits a `change` event.
+     *
+     * @param e - the change event
      */
-    adjust(adjustment: number): void;
-    private activateTabByIndex;
-    private focusTab;
-    constructor();
+    changeHandler(e: Event): boolean | void;
     /**
+     * Checks the radio at the specified index.
+     *
+     * @param index - the index of the radio to check
      * @internal
      */
-    connectedCallback(): void;
-}
-
-/**
- * A Text Area Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | `<textarea>`} element.
- *
- * @slot - The default content/value of the component.
- * @slot label - The content for the `<label>`, it should be a `<fluent-label>` element.
- * @csspart label - The `<label>` element.
- * @csspart root - The container element of the `<textarea>` element.
- * @csspart control - The internal `<textarea>` element.
- * @fires change - Fires after the control loses focus, if the content has changed.
- * @fires select - Fires when the `select()` method is called.
- *
- * @public
- */
-export declare class BaseTextArea extends FASTElement {
+    checkRadio(index?: number, shouldEmit?: boolean): void;
     /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     * Checks the validity of the element and returns the result.
      *
      * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
      */
-    static readonly formAssociated = true;
+    checkValidity(): boolean;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * Handles click events for the radio group.
      *
+     * @param e - the click event
      * @internal
      */
-    elementInternals: ElementInternals;
-    /**
-     * The `<label>` element.
-     * @internal
-     */
-    labelEl: HTMLLabelElement;
-    /**
-     * The root container element.
-     * @internal
-     */
-    rootEl: HTMLDivElement;
-    /**
-     * The `<textarea>` element.
-     * @internal
-     */
-    controlEl: HTMLTextAreaElement;
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
     /**
-     * Sets up a mutation observer to watch for changes to the control element's
-     * attributes that could affect validity, and binds an input event listener to detect user interaction.
+     * Focuses the checked radio or the first enabled radio.
      *
      * @internal
      */
-    protected controlElChanged(): void;
+    focus(): void;
     /**
+     * Enables tabbing through the radio group when the group receives focus.
+     *
+     * @param e - the focus event
      * @internal
      */
-    autoSizerEl?: HTMLDivElement;
+    focusinHandler(e: FocusEvent): boolean | void;
     /**
-     * The list of nodes that are assigned to the default slot.
+     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+     *
+     * @param e - the focusout event
      * @internal
      */
-    defaultSlottedNodes: Node[];
-    protected defaultSlottedNodesChanged(): void;
-    private filteredLabelSlottedNodes;
+    focusoutHandler(e: FocusEvent): boolean | void;
+    formResetCallback(): void;
+    private getEnabledIndexInBounds;
     /**
-     * The list of nodes that are assigned to the `label` slot.
+     * Handles keydown events for the radio group.
+     *
+     * @param e - the keyboard event
      * @internal
      */
-    labelSlottedNodes: Label[];
-    protected labelSlottedNodesChanged(): void;
-    private userInteracted;
-    private autoSizerObserver?;
-    private controlElAttrObserver;
-    private preConnectControlEl;
+    keydownHandler(e: KeyboardEvent): boolean | void;
     /**
-     * Indicates the element's autocomplete state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `autocomplete`
+     * @param e - the disabled event
      */
-    autocomplete?: TextAreaAutocomplete;
+    disabledRadioHandler(e: CustomEvent): void;
     /**
-     * Indicates whether the element’s block size (height) should be automatically changed based on the content.
-     * Note: When this property’s value is set to be `true`, the element should not have a fixed block-size
-     * defined in CSS. Instead, use `min-height` or `min-block-size`.
+     * Reports the validity of the element.
      *
      * @public
      * @remarks
-     * HTML Attribute: `auto-resize`
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
      */
-    autoResize: boolean;
-    protected autoResizeChanged(): void;
+    reportValidity(): boolean;
     /**
-     * Sets the name of the value directionality to be submitted with form data.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
+     * Resets the `tabIndex` for all child radios when the radio group loses focus.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `dirname`
+     * @internal
      */
-    dirName?: string;
+    private restrictFocus;
     /**
-     * Sets the element's disabled state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled`
+     * @internal
      */
-    disabled: boolean;
-    protected disabledChanged(): void;
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
     /**
-     * Indicates whether the element displays a box shadow. This only has effect when `appearance` is set to be `filled-darker` or `filled-lighter`.
+     * Sets the validity of the element.
      *
-     * @public
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
      * @remarks
-     * HTML Attribute: `display-shadow`
+     * RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
+     * This is necessary because:
+     * 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
+     * 2. Browser validation UIs and screen readers announce validation against individual form controls
+     * 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
+     * 4. We anchor the error to the first Radio so it receives focus and announcement
+     *
+     * When the group is invalid (required but no selection):
+     * - Only the first Radio gets the invalid state with the validation message
+     * - Other Radios are kept valid since selecting any of them would satisfy the requirement
+     *
+     * When the group becomes valid (user selects any Radio):
+     * - All Radios are cleared back to valid state
+     * - This allows form submission to proceed
      */
-    displayShadow: boolean;
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+}
+
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ *
+ * @slot icon - SVG element used as the rating icon
+ *
+ * @public
+ */
+export declare class BaseRatingDisplay extends FASTElement {
+    private numberFormatter;
     /**
-     * The id of a form to associate the element to.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `form`
+     * @internal
      */
-    initialForm?: string;
+    elementInternals: ElementInternals;
     /**
-     * The form element that’s associated to the element, or `null` if no form is associated.
+     * Reference to the slot element used for the rating icon.
      *
-     * @public
+     * @internal
      */
-    get form(): HTMLFormElement | null;
+    iconSlot: HTMLSlotElement;
     /**
-     * A `NodeList` of `<label>` element associated with the element.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/labels | `labels`} property
+     * Updates the icon when the referenced slot is bound in the template.
      *
-     * @public
+     * @internal
      */
-    get labels(): NodeList;
+    iconSlotChanged(): void;
+    protected defaultCustomIconViewBox: string;
     /**
-     * The maximum number of characters a user can enter.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `maxlength`
+     * The element that displays the rating icons.
+     * @internal
      */
-    maxLength?: number;
+    display: HTMLElement;
     /**
-     * The minimum number of characters a user can enter.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
+     * The number of ratings.
      *
      * @public
      * @remarks
-     * HTML Attribute: `minlength`
+     * HTML Attribute: `count`
      */
-    minLength?: number;
+    count?: number;
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * The `viewBox` attribute of the icon <svg> element.
      *
      * @public
      * @remarks
-     * HTML Attribute: `name`
+     * HTML Attribute: `icon-view-box`
+     * @deprecated Add `viewBox` attribute on the custom SVG directly.
      */
-    name: string;
+    iconViewBox?: string;
     /**
-     * Sets the placeholder value of the element, generally used to provide a hint to the user.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
      *
      * @public
      * @remarks
-     * HTML Attribute: `placeholder`
-     * This attribute is not a valid substitute for a label.
+     * HTML Attribute: `max`
      */
-    placeholder?: string;
+    max?: number;
+    protected maxChanged(): void;
     /**
-     * When true, the control will be immutable by user interaction.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
+     * The value of the rating.
      *
      * @public
      * @remarks
-     * HTML Attribute: `readonly`
+     * HTML Attribute: `value`
      */
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
+    value?: number;
+    protected valueChanged(): void;
+    constructor();
+    connectedCallback(): void;
     /**
-     * The element's required attribute.
+     * Returns "count" as string, formatted according to the locale.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `required`
+     * @internal
      */
-    required: boolean;
-    protected requiredChanged(): void;
-    /**
-     * Indicates whether the element can be resized by end users.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `resize`
-     */
-    resize: TextAreaResize;
-    protected resizeChanged(prev: TextAreaResize | undefined, next: TextAreaResize | undefined): void;
-    /**
-     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `spellcheck`
-     */
-    spellcheck: boolean;
+    get formattedCount(): string;
+    /** @internal */
+    handleSlotChange(): void;
+    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
+    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
+}
+
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class BaseSpinner extends FASTElement {
     /**
-     * The length of the current value.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#textLength | 'textLength'} property
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @public
+     * @internal
      */
-    get textLength(): number;
+    elementInternals: ElementInternals;
+    constructor();
+}
+
+/**
+ * A Tablist element that wraps a collection of tab elements
+ * @public
+ */
+export declare class BaseTablist extends FASTElement {
     /**
-     * The type of the element, which is always "textarea".
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/type | `type`} property
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @public
+     * @internal
      */
-    get type(): 'textarea';
+    elementInternals: ElementInternals;
     /**
-     * The element's validity state.
-     *
+     * Used for disabling all click and keyboard events for the tabs, child tab elements.
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     * HTML Attribute: disabled.
      */
-    get validity(): ValidityState;
+    disabled: boolean;
     /**
-     * The validation message.
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
      *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     * @internal
      */
-    get validationMessage(): string;
+    protected disabledChanged(prev: boolean, next: boolean): void;
     /**
-     * Determines if the control can be submitted for constraint validation.
-     *
+     * The orientation
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     * HTML Attribute: orientation
      */
-    get willValidate(): boolean;
+    orientation: TablistOrientation;
     /**
-     * The text content of the element before user interaction.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#defaultvalue | `defaultValue`} property
-     *
-     * @public
-     * @remarks
-     * In order to set the initial/default value, an author should either add the default value in the HTML as the children
-     * of the component, or setting this property in JavaScript. Setting `innerHTML`, `innerText`, or `textContent` on this
-     * component will not change the default value or the content displayed inside the component.
+     * @internal
      */
-    get defaultValue(): string;
-    set defaultValue(next: string);
+    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
     /**
-     * The value of the element.
+     * The id of the active tab
      *
      * @public
      * @remarks
-     * Reflects the `value` property.
+     * HTML Attribute: activeid
      */
-    get value(): string;
-    set value(next: string);
-    constructor();
+    activeid: string;
     /**
      * @internal
      */
-    connectedCallback(): void;
+    protected activeidChanged(oldValue: string, newValue: string): void;
     /**
+     * Content slotted in the tab slot.
      * @internal
      */
-    disconnectedCallback(): void;
+    slottedTabs: Node[];
     /**
-     * Resets the value to its initial value when the form is reset.
-     *
+     * Updates the tabs property when content in the tabs slot changes.
      * @internal
      */
-    formResetCallback(): void;
+    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
     /**
      * @internal
      */
-    formDisabledCallback(disabled: boolean): void;
+    tabs: Tab[];
     /**
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
-     *
      * @internal
      */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
     /**
-     * Checks the validity of the element and returns the result.
-     *
+     * A reference to the active tab
      * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
      */
-    checkValidity(): boolean;
+    activetab: Tab;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabPanelMap;
+    private change;
+    private getActiveIndex;
     /**
-     * Reports the validity of the element.
+     * Function that is invoked whenever the selected tab or the tab collection changes.
      *
      * @public
+     */
+    protected setTabs(): void;
+    private getTabIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    /**
+     * The adjust method for FASTTabs
+     * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     * This method allows the active index to be adjusted by numerical increments
      */
-    reportValidity(): boolean;
+    adjust(adjustment: number): void;
+    private activateTabByIndex;
+    private focusTab;
+    constructor();
     /**
-     * Sets the custom validity message.
-     * @param message - The message to set
+     * @internal
+     */
+    connectedCallback(): void;
+}
+
+/**
+ * A Text Area Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | `<textarea>`} element.
+ *
+ * @slot - The default content/value of the component.
+ * @slot label - The content for the `<label>`, it should be a `<fluent-label>` element.
+ * @csspart label - The `<label>` element.
+ * @csspart root - The container element of the `<textarea>` element.
+ * @csspart control - The internal `<textarea>` element.
+ * @fires change - Fires after the control loses focus, if the content has changed.
+ * @fires select - Fires when the `select()` method is called.
+ *
+ * @public
+ */
+export declare class BaseTextArea extends FASTElement {
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
      *
      * @public
      */
-    setCustomValidity(message: string | null): void;
+    static readonly formAssociated = true;
     /**
-     * Sets the validity of the control.
-     *
-     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
-     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
-     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    elementInternals: ElementInternals;
     /**
-     * Selects the content in the element.
-     *
-     * @public
+     * The `<label>` element.
+     * @internal
      */
-    select(): void;
+    labelEl: HTMLLabelElement;
     /**
-     * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
+     * The root container element.
+     * @internal
      */
-    private getContent;
-    private setDisabledSideEffect;
-    private toggleUserValidityState;
-    private maybeCreateAutoSizerEl;
+    rootEl: HTMLDivElement;
     /**
+     * The `<textarea>` element.
      * @internal
      */
-    handleControlInput(): void;
+    controlEl: HTMLTextAreaElement;
     /**
+     * Sets up a mutation observer to watch for changes to the control element's
+     * attributes that could affect validity, and binds an input event listener to detect user interaction.
+     *
      * @internal
      */
-    handleControlChange(): void;
+    protected controlElChanged(): void;
     /**
      * @internal
      */
-    handleControlSelect(): void;
-}
-
-/**
- * A Text Input Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
- *
- * @slot start - Content which can be provided before the input
- * @slot end - Content which can be provided after the input
- * @slot - The default slot for button content
- * @csspart label - The internal `<label>` element
- * @csspart root - the root container for the internal control
- * @csspart control - The internal `<input>` control
- * @public
- */
-export declare class BaseTextInput extends FASTElement {
+    autoSizerEl?: HTMLDivElement;
+    /**
+     * The list of nodes that are assigned to the default slot.
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    protected defaultSlottedNodesChanged(): void;
+    private filteredLabelSlottedNodes;
+    /**
+     * The list of nodes that are assigned to the `label` slot.
+     * @internal
+     */
+    labelSlottedNodes: Label[];
+    protected labelSlottedNodesChanged(): void;
+    private userInteracted;
+    private autoSizerObserver?;
+    private controlElAttrObserver;
+    private preConnectControlEl;
     /**
      * Indicates the element's autocomplete state.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
@@ -2962,53 +3024,27 @@ export declare class BaseTextInput extends FASTElement {
      * @remarks
      * HTML Attribute: `autocomplete`
      */
-    autocomplete?: string;
+    autocomplete?: TextAreaAutocomplete;
     /**
-     * Indicates that the element should get focus after the page finishes loading.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
+     * Indicates whether the element’s block size (height) should be automatically changed based on the content.
+     * Note: When this property’s value is set to be `true`, the element should not have a fixed block-size
+     * defined in CSS. Instead, use `min-height` or `min-block-size`.
      *
      * @public
      * @remarks
-     * HTML Attribute: `autofocus`
+     * HTML Attribute: `auto-resize`
      */
-    autofocus: boolean;
+    autoResize: boolean;
+    protected autoResizeChanged(): void;
     /**
-     * The current value of the input.
+     * Sets the name of the value directionality to be submitted with form data.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: `current-value`
+     * HTML Attribute: `dirname`
      */
-    currentValue: string;
-    /**
-     * Tracks the current value of the input.
-     *
-     * @param prev - the previous value
-     * @param next - the next value
-     *
-     * @internal
-     */
-    currentValueChanged(prev: string, next: string): void;
-    /**
-     * The default slotted content. This is the content that appears in the text field label.
-     *
-     * @internal
-     */
-    defaultSlottedNodes: Node[];
-    /**
-     * Updates the control label visibility based on the presence of default slotted content.
-     *
-     * @internal
-     */
-    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
-    /**
-     * Sets the directionality of the element to be submitted with form data.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `dirname`
-     */
-    dirname?: string;
+    dirName?: string;
     /**
      * Sets the element's disabled state.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
@@ -3017,39 +3053,37 @@ export declare class BaseTextInput extends FASTElement {
      * @remarks
      * HTML Attribute: `disabled`
      */
-    disabled?: boolean;
+    disabled: boolean;
+    protected disabledChanged(): void;
     /**
-     * The id of a form to associate the element to.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     * Indicates whether the element displays a box shadow. This only has effect when `appearance` is set to be `filled-darker` or `filled-lighter`.
      *
      * @public
      * @remarks
-     * HTML Attribute: `form`
+     * HTML Attribute: `display-shadow`
      */
-    formAttribute?: string;
+    displayShadow: boolean;
     /**
-     * The initial value of the input.
+     * The id of a form to associate the element to.
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: `form`
      */
-    initialValue: string;
+    initialForm?: string;
     /**
-     * Sets the value of the element to the initial value.
+     * The form element that’s associated to the element, or `null` if no form is associated.
      *
-     * @internal
+     * @public
      */
-    initialValueChanged(): void;
+    get form(): HTMLFormElement | null;
     /**
-     * Allows associating a `<datalist>` to the element by ID.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
+     * A `NodeList` of `<label>` element associated with the element.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/labels | `labels`} property
      *
      * @public
-     * @remarks
-     * HTML Attribute: `list`
      */
-    list: string;
+    get labels(): NodeList;
     /**
      * The maximum number of characters a user can enter.
      *
@@ -3057,7 +3091,7 @@ export declare class BaseTextInput extends FASTElement {
      * @remarks
      * HTML Attribute: `maxlength`
      */
-    maxlength: number;
+    maxLength?: number;
     /**
      * The minimum number of characters a user can enter.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
@@ -3066,16 +3100,7 @@ export declare class BaseTextInput extends FASTElement {
      * @remarks
      * HTML Attribute: `minlength`
      */
-    minlength: number;
-    /**
-     * Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple | `multiple`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `multiple`
-     */
-    multiple: boolean;
+    minLength?: number;
     /**
      * The name of the element. This element's value will be surfaced during form submission under the provided name.
      *
@@ -3084,14 +3109,6 @@ export declare class BaseTextInput extends FASTElement {
      * HTML Attribute: `name`
      */
     name: string;
-    /**
-     * A regular expression that the value must match to pass validation.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `pattern`
-     */
-    pattern: string;
     /**
      * Sets the placeholder value of the element, generally used to provide a hint to the user.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
@@ -3101,7 +3118,7 @@ export declare class BaseTextInput extends FASTElement {
      * HTML Attribute: `placeholder`
      * This attribute is not a valid substitute for a label.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * When true, the control will be immutable by user interaction.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
@@ -3110,13 +3127,8 @@ export declare class BaseTextInput extends FASTElement {
      * @remarks
      * HTML Attribute: `readonly`
      */
-    readOnly?: boolean;
-    /**
-     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
-     *
-     * @internal
-     */
-    readOnlyChanged(): void;
+    readOnly: boolean;
+    protected readOnlyChanged(): void;
     /**
      * The element's required attribute.
      *
@@ -3125,23 +3137,16 @@ export declare class BaseTextInput extends FASTElement {
      * HTML Attribute: `required`
      */
     required: boolean;
+    protected requiredChanged(): void;
     /**
-     * Syncs the element's internal `aria-required` state with the `required` attribute.
-     *
-     * @param previous - the previous required state
-     * @param next - the current required state
-     *
-     * @internal
-     */
-    requiredChanged(previous: boolean, next: boolean): void;
-    /**
-     * Sets the width of the element to a specified number of characters.
+     * Indicates whether the element can be resized by end users.
      *
      * @public
      * @remarks
-     * HTML Attribute: `size`
+     * HTML Attribute: `resize`
      */
-    size: number;
+    resize: TextAreaResize;
+    protected resizeChanged(prev: TextAreaResize | undefined, next: TextAreaResize | undefined): void;
     /**
      * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
@@ -3152,53 +3157,19 @@ export declare class BaseTextInput extends FASTElement {
      */
     spellcheck: boolean;
     /**
-     * Allows setting a type or mode of text.
+     * The length of the current value.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#textLength | 'textLength'} property
      *
      * @public
-     * @remarks
-     * HTML Attribute: `type`
-     */
-    type: TextInputType;
-    /**
-     * A reference to the internal input element.
-     *
-     * @internal
-     */
-    control: HTMLInputElement;
-    /**
-     * Calls the `setValidity` method when the control reference changes.
-     *
-     * @param prev - the previous control reference
-     * @param next - the current control reference
-     *
-     * @internal
-     */
-    controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void;
-    /**
-     * A reference to the internal label element.
-     *
-     * @internal
-     */
-    controlLabel: HTMLLabelElement;
-    /**
-     * Indicates that the value has been changed by the user.
-     *
-     * @internal
-     */
-    private dirtyValue;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
      */
-    elementInternals: ElementInternals;
+    get textLength(): number;
     /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     * The type of the element, which is always "textarea".
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/type | `type`} property
      *
      * @public
      */
-    static readonly formAssociated = true;
+    get type(): 'textarea';
     /**
      * The element's validity state.
      *
@@ -3215,12 +3186,6 @@ export declare class BaseTextInput extends FASTElement {
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
      */
     get validationMessage(): string;
-    /**
-     * The current value of the input.
-     * @public
-     */
-    get value(): string;
-    set value(value: string);
     /**
      * Determines if the control can be submitted for constraint validation.
      *
@@ -3230,50 +3195,35 @@ export declare class BaseTextInput extends FASTElement {
      */
     get willValidate(): boolean;
     /**
-     * The associated form element.
+     * The text content of the element before user interaction.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#defaultvalue | `defaultValue`} property
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
-     */
-    get form(): HTMLFormElement | null;
-    /**
-     * Handles the internal control's `keypress` event.
-     *
-     * @internal
-     */
-    beforeinputHandler(e: InputEvent): boolean | void;
-    /**
-     * Change event handler for inner control.
-     *
-     * @internal
-     * @privateRemarks
-     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
-     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+     * In order to set the initial/default value, an author should either add the default value in the HTML as the children
+     * of the component, or setting this property in JavaScript. Setting `innerHTML`, `innerText`, or `textContent` on this
+     * component will not change the default value or the content displayed inside the component.
      */
-    changeHandler(e: InputEvent): boolean | void;
+    get defaultValue(): string;
+    set defaultValue(next: string);
     /**
-     * Checks the validity of the element and returns the result.
+     * The value of the element.
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     * Reflects the `value` property.
      */
-    checkValidity(): boolean;
+    get value(): string;
+    set value(next: string);
+    constructor();
     /**
-     * Clicks the inner control when the component is clicked.
-     *
-     * @param e - the event object
+     * @internal
      */
-    clickHandler(e: MouseEvent): boolean | void;
     connectedCallback(): void;
     /**
-     * Focuses the inner control when the component is focused.
-     *
-     * @param e - the event object
-     * @public
+     * @internal
      */
-    focusinHandler(e: FocusEvent): boolean | void;
+    disconnectedCallback(): void;
     /**
      * Resets the value to its initial value when the form is reset.
      *
@@ -3281,41 +3231,23 @@ export declare class BaseTextInput extends FASTElement {
      */
     formResetCallback(): void;
     /**
-     * Handles implicit form submission when the user presses the "Enter" key.
-     *
-     * @internal
-     */
-    private implicitSubmit;
-    /**
-     * Handles the internal control's `input` event.
-     *
      * @internal
      */
-    inputHandler(e: InputEvent): boolean | void;
+    formDisabledCallback(disabled: boolean): void;
     /**
-     * Handles the internal control's `keydown` event.
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
      *
-     * @param e - the event object
      * @internal
      */
-    keydownHandler(e: KeyboardEvent): boolean | void;
-    /**
-     * Selects all the text in the text field.
-     *
-     * @public
-     * @privateRemarks
-     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
-     * emitting a `select` event whenever the internal control emits a `select` event
-     *
-     */
-    select(): void;
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
     /**
-     * Sets the custom validity message.
-     * @param message - The message to set
+     * Checks the validity of the element and returns the result.
      *
      * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
      */
-    setCustomValidity(message: string): void;
+    checkValidity(): boolean;
     /**
      * Reports the validity of the element.
      *
@@ -3325,11 +3257,12 @@ export declare class BaseTextInput extends FASTElement {
      */
     reportValidity(): boolean;
     /**
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     * Sets the custom validity message.
+     * @param message - The message to set
      *
-     * @internal
+     * @public
      */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    setCustomValidity(message: string | null): void;
     /**
      * Sets the validity of the control.
      *
@@ -3340,187 +3273,613 @@ export declare class BaseTextInput extends FASTElement {
      * @internal
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
-}
-
-export declare class BaseTree extends FASTElement {
     /**
-     * The currently selected tree item
+     * Selects the content in the element.
+     *
      * @public
      */
-    currentSelected: HTMLElement | null;
+    select(): void;
     /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
+     * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
      */
-    private currentFocused;
+    private getContent;
+    private setDisabledSideEffect;
+    private toggleUserValidityState;
+    private maybeCreateAutoSizerEl;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
      * @internal
      */
-    elementInternals: ElementInternals;
-    /** @internal */
-    defaultSlot: HTMLSlotElement;
+    handleControlInput(): void;
     /**
-     * Calls the slot change handler when the `defaultSlot` reference is updated
-     * by the template binding.
-     *
      * @internal
      */
-    defaultSlotChanged(): void;
-    constructor();
-    connectedCallback(): void;
-    /** @internal */
-    childTreeItems: BaseTreeItem[];
-    /** @internal */
-    childTreeItemsChanged(): void;
+    handleControlChange(): void;
     /**
-     * Updates current selected when slottedTreeItems changes
+     * @internal
      */
-    private updateCurrentSelected;
+    handleControlSelect(): void;
+}
+
+/**
+ * A Text Input Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
+ *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot - The default slot for button content
+ * @csspart label - The internal `<label>` element
+ * @csspart root - the root container for the internal control
+ * @csspart control - The internal `<input>` control
+ * @public
+ */
+export declare class BaseTextInput extends FASTElement {
     /**
-     * KeyDown handler
+     * Indicates the element's autocomplete state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
      *
-     *  @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `autocomplete`
      */
-    keydownHandler(e: KeyboardEvent): boolean | void;
+    autocomplete?: string;
     /**
-     * Handle focus events
+     * Indicates that the element should get focus after the page finishes loading.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autofocus`
+     */
+    autofocus: boolean;
+    /**
+     * The current value of the input.
+     * @public
+     * @remarks
+     * HTML Attribute: `current-value`
+     */
+    currentValue: string;
+    /**
+     * Tracks the current value of the input.
+     *
+     * @param prev - the previous value
+     * @param next - the next value
      *
      * @internal
      */
-    focusHandler(e: FocusEvent): void;
+    currentValueChanged(prev: string, next: string): void;
     /**
-     * Handle blur events
+     * The default slotted content. This is the content that appears in the text field label.
      *
      * @internal
      */
-    blurHandler(e: FocusEvent): void;
+    defaultSlottedNodes: Node[];
     /**
-     * Handles click events bubbling up
+     * Updates the control label visibility based on the presence of default slotted content.
      *
-     *  @internal
+     * @internal
      */
-    clickHandler(e: Event): boolean | void;
+    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
     /**
-     * Handles the selected-changed events bubbling up
-     * from child tree items
+     * Sets the directionality of the element to be submitted with form data.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
      *
-     *  @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `dirname`
      */
-    changeHandler(e: Event): boolean | void;
+    dirname?: string;
     /**
-     * checks if there are any nested tree items
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    private getValidFocusableItem;
-    private getVisibleNodes;
+    disabled?: boolean;
     /**
-     * Move focus to a tree item based on its offset from the provided item
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
      */
-    private focusNextNode;
-    /** @internal */
-    handleDefaultSlotChange(): void;
-}
-
-declare class BaseTreeItem extends FASTElement {
+    formAttribute?: string;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The initial value of the input.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
      */
-    elementInternals: ElementInternals;
-    /** @internal */
-    itemSlot: HTMLSlotElement;
+    initialValue: string;
     /**
-     * Calls the slot change handler when the `itemSlot` reference is updated
-     * by the template binding.
+     * Sets the value of the element to the initial value.
      *
      * @internal
      */
-    itemSlotChanged(): void;
-    constructor();
+    initialValueChanged(): void;
     /**
-     * When true, the control will be appear expanded by user interaction.
-     * When true, the control will be appear expanded by user interaction.
+     * Allows associating a `<datalist>` to the element by ID.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
      *
-     * HTML Attribute: `expanded`
+     * @public
+     * @remarks
+     * HTML Attribute: `list`
+     */
+    list: string;
+    /**
+     * The maximum number of characters a user can enter.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `maxlength`
      */
-    expanded: boolean;
+    maxlength: number;
     /**
-     * Handles changes to the expanded attribute
-     * @param prev - the previous state
-     * @param next - the next state
+     * The minimum number of characters a user can enter.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
      *
      * @public
+     * @remarks
+     * HTML Attribute: `minlength`
      */
-    expandedChanged(prev: boolean, next: boolean): void;
+    minlength: number;
     /**
-     * When true, the control will appear selected by user interaction.
+     * Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple | `multiple`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: selected
+     * HTML Attribute: `multiple`
      */
-    selected: boolean;
+    multiple: boolean;
     /**
-     * Handles changes to the selected attribute
-     * @param prev - the previous state
-     * @param next - the next state
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
      */
-    protected selectedChanged(prev: boolean, next: boolean): void;
+    name: string;
     /**
-     * When true, the control has no child tree items
-     * When true, the control has no child tree items
+     * A regular expression that the value must match to pass validation.
      *
-     * HTML Attribute: empty
+     * @public
+     * @remarks
+     * HTML Attribute: `pattern`
+     */
+    pattern: string;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
      *
      * @public
+     * @remarks
+     * HTML Attribute: `placeholder`
+     * This attribute is not a valid substitute for a label.
      */
-    empty: boolean;
-    private styles;
+    placeholder: string;
     /**
-     * The indent of the tree item element.
-     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
+     * When true, the control will be immutable by user interaction.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
+     *
      * @public
+     * @remarks
+     * HTML Attribute: `readonly`
      */
-    dataIndent: number | undefined;
-    protected dataIndentChanged(prev: number, next: number): void;
-    /** @internal */
-    childTreeItems: BaseTreeItem[] | undefined;
+    readOnly?: boolean;
     /**
-     * Handles changes to the child tree items
+     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
+     *
+     * @internal
+     */
+    readOnlyChanged(): void;
+    /**
+     * The element's required attribute.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `required`
      */
-    childTreeItemsChanged(): void;
-    connectedCallback(): void;
+    required: boolean;
     /**
-     * Updates the childrens indent
+     * Syncs the element's internal `aria-required` state with the `required` attribute.
+     *
+     * @param previous - the previous required state
+     * @param next - the current required state
+     *
+     * @internal
+     */
+    requiredChanged(previous: boolean, next: boolean): void;
+    /**
+     * Sets the width of the element to a specified number of characters.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `size`
      */
-    updateChildTreeItems(): void;
+    size: number;
     /**
-     * Sets the indent for each item
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `spellcheck`
      */
-    private setIndent;
+    spellcheck: boolean;
     /**
-     * Toggle the expansion state of the tree item
+     * Allows setting a type or mode of text.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `type`
      */
-    toggleExpansion(): void;
+    type: TextInputType;
     /**
-     * Whether the tree is nested
+     * A reference to the internal input element.
+     *
      * @internal
      */
-    get isNestedItem(): boolean;
-    protected updateTabindexBySelected(): void;
-    /** @internal */
+    control: HTMLInputElement;
+    /**
+     * Calls the `setValidity` method when the control reference changes.
+     *
+     * @param prev - the previous control reference
+     * @param next - the current control reference
+     *
+     * @internal
+     */
+    controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void;
+    /**
+     * A reference to the internal label element.
+     *
+     * @internal
+     */
+    controlLabel: HTMLLabelElement;
+    /**
+     * Indicates that the value has been changed by the user.
+     *
+     * @internal
+     */
+    private dirtyValue;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static readonly formAssociated = true;
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * The current value of the input.
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Determines if the control can be submitted for constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * The associated form element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Handles the internal control's `keypress` event.
+     *
+     * @internal
+     */
+    beforeinputHandler(e: InputEvent): boolean | void;
+    /**
+     * Change event handler for inner control.
+     *
+     * @internal
+     * @privateRemarks
+     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
+     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+     */
+    changeHandler(e: InputEvent): boolean | void;
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Clicks the inner control when the component is clicked.
+     *
+     * @param e - the event object
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    connectedCallback(): void;
+    /**
+     * Focuses the inner control when the component is focused.
+     *
+     * @param e - the event object
+     * @public
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Resets the value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Handles implicit form submission when the user presses the "Enter" key.
+     *
+     * @internal
+     */
+    private implicitSubmit;
+    /**
+     * Handles the internal control's `input` event.
+     *
+     * @internal
+     */
+    inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Handles the internal control's `keydown` event.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Selects all the text in the text field.
+     *
+     * @public
+     * @privateRemarks
+     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
+     * emitting a `select` event whenever the internal control emits a `select` event
+     *
+     */
+    select(): void;
+    /**
+     * Sets the custom validity message.
+     * @param message - The message to set
+     *
+     * @public
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
+     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+}
+
+export declare class BaseTree extends FASTElement {
+    /**
+     * The currently selected tree item
+     * @public
+     */
+    currentSelected: HTMLElement | null;
+    /**
+     * The tree item that is designated to be in the tab queue.
+     *
+     * @internal
+     */
+    private currentFocused;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /** @internal */
+    defaultSlot: HTMLSlotElement;
+    /**
+     * Calls the slot change handler when the `defaultSlot` reference is updated
+     * by the template binding.
+     *
+     * @internal
+     */
+    defaultSlotChanged(): void;
+    constructor();
+    connectedCallback(): void;
+    /** @internal */
+    childTreeItems: BaseTreeItem[];
+    /** @internal */
+    childTreeItemsChanged(): void;
+    /**
+     * Updates current selected when slottedTreeItems changes
+     */
+    private updateCurrentSelected;
+    /**
+     * KeyDown handler
+     *
+     *  @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    focusHandler(e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    blurHandler(e: FocusEvent): void;
+    /**
+     * Handles click events bubbling up
+     *
+     *  @internal
+     */
+    clickHandler(e: Event): boolean | void;
+    /**
+     * Handles the selected-changed events bubbling up
+     * from child tree items
+     *
+     *  @internal
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * checks if there are any nested tree items
+     */
+    private getValidFocusableItem;
+    private getVisibleNodes;
+    /**
+     * Move focus to a tree item based on its offset from the provided item
+     */
+    private focusNextNode;
+    /** @internal */
+    handleDefaultSlotChange(): void;
+}
+
+declare class BaseTreeItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /** @internal */
+    itemSlot: HTMLSlotElement;
+    /**
+     * Calls the slot change handler when the `itemSlot` reference is updated
+     * by the template binding.
+     *
+     * @internal
+     */
+    itemSlotChanged(): void;
+    constructor();
+    /**
+     * When true, the control will be appear expanded by user interaction.
+     * When true, the control will be appear expanded by user interaction.
+     *
+     * HTML Attribute: `expanded`
+     *
+     * @public
+     */
+    expanded: boolean;
+    /**
+     * Handles changes to the expanded attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @public
+     */
+    expandedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * Handles changes to the selected attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @internal
+     */
+    protected selectedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control has no child tree items
+     * When true, the control has no child tree items
+     *
+     * HTML Attribute: empty
+     *
+     * @public
+     */
+    empty: boolean;
+    private styles;
+    /**
+     * The indent of the tree item element.
+     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
+     * @public
+     */
+    dataIndent: number | undefined;
+    protected dataIndentChanged(prev: number, next: number): void;
+    /** @internal */
+    childTreeItems: BaseTreeItem[] | undefined;
+    /**
+     * Handles changes to the child tree items
+     *
+     * @public
+     */
+    childTreeItemsChanged(): void;
+    connectedCallback(): void;
+    /**
+     * Updates the childrens indent
+     *
+     * @public
+     */
+    updateChildTreeItems(): void;
+    /**
+     * Sets the indent for each item
+     */
+    private setIndent;
+    /**
+     * Toggle the expansion state of the tree item
+     *
+     * @public
+     */
+    toggleExpansion(): void;
+    /**
+     * Whether the tree is nested
+     * @internal
+     */
+    get isNestedItem(): boolean;
+    protected updateTabindexBySelected(): void;
+    /** @internal */
     handleItemSlotChange(): void;
 }
 
@@ -7845,1544 +8204,1203 @@ export declare const lineHeightBase500 = "var(--lineHeightBase500)";
 export declare const lineHeightBase600 = "var(--lineHeightBase600)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero1000 | `lineHeightHero1000`} design token.
- * @public
- */
-export declare const lineHeightHero1000 = "var(--lineHeightHero1000)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero700 | `lineHeightHero700`} design token.
- * @public
- */
-export declare const lineHeightHero700 = "var(--lineHeightHero700)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero800 | `lineHeightHero800`} design token.
- * @public
- */
-export declare const lineHeightHero800 = "var(--lineHeightHero800)";
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero900 | `lineHeightHero900`} design token.
- * @public
- */
-export declare const lineHeightHero900 = "var(--lineHeightHero900)";
-
-/**
- * An Anchor Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
- *
- * @tag fluent-link
- *
- * @slot start - Content which can be provided before the link content
- * @slot end - Content which can be provided after the link content
- * @slot - The default slot for link content
- *
- * @public
- */
-export declare class Link extends BaseAnchor {
-    /**
-     * The appearance the link should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `appearance`
-     */
-    appearance?: LinkAppearance | undefined;
-    /**
-     * The link is inline with text
-     * In chromium browsers, if the link is contained within a semantic
-     * text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`,
-     * `:host-context()` ensures inline links are styled appropriately.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `inline`
-     */
-    inline: boolean;
-}
-
-/**
- * Link Appearance constants
- * @public
- */
-export declare const LinkAppearance: {
-    readonly subtle: "subtle";
-};
-
-/**
- * An Link can be subtle or the default appearance
- * @public
- */
-export declare type LinkAppearance = ValuesOf<typeof LinkAppearance>;
-
-/**
- * @public
- * @remarks
- * HTML Element: \<fluent-link\>
- */
-export declare const LinkDefinition: FASTElementDefinition<typeof Link>;
-
-export declare const LinkStyles: ElementStyles;
-
-/**
- * Link target values.
- *
- * @public
- */
-export declare const LinkTarget: {
-    readonly _self: "_self";
-    readonly _blank: "_blank";
-    readonly _parent: "_parent";
-    readonly _top: "_top";
-};
-
-/**
- * Type for link target values.
- *
- * @public
- */
-export declare type LinkTarget = ValuesOf<typeof AnchorTarget>;
-
-/**
- * The template for the Link component.
- * @public
- */
-export declare const LinkTemplate: ElementViewTemplate<Link>;
-
-/**
- * A Listbox Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
- *
- * @tag fluent-listbox
- *
- * @slot - The default slot for the options.
- *
- * @remarks
- * The listbox component represents a list of options that can be selected.
- * It is intended to be used in conjunction with the {@link BaseDropdown | Dropdown} component.
- *
- * @public
- */
-export declare class Listbox extends FASTElement {
-    /**
-     * A reference to the default slot element.
-     *
-     * @internal
-     */
-    defaultSlot: HTMLSlotElement;
-    /**
-     * Calls the `slotchangeHandler` when the `defaultSlot` element is assigned
-     * via the `ref` directive in the template.
-     *
-     * @internal
-     */
-    protected defaultSlotChanged(): void;
-    /**
-     * Indicates whether the listbox allows multiple selection.
-     *
-     * @public
-     */
-    multiple?: boolean;
-    /**
-     * Updates the multiple selection state of the listbox and its options.
-     *
-     * @param prev - the previous multiple value
-     * @param next - the current multiple value
-     */
-    multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
-    /**
-     * The collection of all child options.
-     *
-     * @public
-     */
-    options: DropdownOption[];
-    /**
-     * Updates the enabled options collection when properties on the child options change.
-     *
-     * @param prev - the previous options
-     * @param next - the current options
-     *
-     * @internal
-     */
-    optionsChanged(prev: DropdownOption[] | undefined, next: DropdownOption[] | undefined): void;
-    /**
-     * The index of the first selected and enabled option.
-     * @internal
-     */
-    selectedIndex: number;
-    /**
-     * Reference to the parent dropdown element.
-     * @internal
-     */
-    dropdown?: BaseDropdown;
-    /**
-     * Handles the `beforetoggle` event on the listbox.
-     *
-     * @param e - the toggle event
-     * @returns true to allow the default popover behavior, undefined to prevent it
-     * @internal
-     */
-    beforetoggleHandler(e: ToggleEvent): boolean | undefined;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * The collection of child options that are not disabled.
-     *
-     * @internal
-     */
-    get enabledOptions(): DropdownOption[];
-    /**
-     * The collection of child options that are selected.
-     *
-     * @public
-     */
-    get selectedOptions(): DropdownOption[];
-    /**
-     * Sets the `selected` state on a target option when clicked.
-     *
-     * @param e - The pointer event
-     * @public
-     */
-    clickHandler(e: PointerEvent): boolean | void;
-    constructor();
-    connectedCallback(): void;
-    /**
-     * Handles observable subscriptions for the listbox.
-     *
-     * @param source - The source of the observed change
-     * @param propertyName - The name of the property that changed
-     *
-     * @internal
-     */
-    handleChange(source: any, propertyName?: string): void;
-    /**
-     * Selects an option by index.
-     *
-     * @param index - The index of the option to select.
-     * @public
-     */
-    selectOption(index?: number): void;
-    /**
-     * Handles the `slotchange` event for the default slot.
-     * Sets the `options` property to the list of slotted options.
-     *
-     * @param e - The slotchange event
-     * @public
-     */
-    slotchangeHandler(e?: Event): void;
-}
-
-/**
- * The Fluent Listbox Element
- *
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero1000 | `lineHeightHero1000`} design token.
  * @public
- * @remarks
- * HTML Element: `<fluent-listbox>`
  */
-export declare const ListboxDefinition: FASTElementDefinition<typeof Listbox>;
+export declare const lineHeightHero1000 = "var(--lineHeightHero1000)";
 
 /**
- * Styles for the {@link (Listbox:class)} component.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero700 | `lineHeightHero700`} design token.
  * @public
  */
-export declare const ListboxStyles: ElementStyles;
+export declare const lineHeightHero700 = "var(--lineHeightHero700)";
 
 /**
- * Template for the Listbox component.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero800 | `lineHeightHero800`} design token.
  * @public
  */
-export declare const ListboxTemplate: ElementViewTemplate<Listbox>;
+export declare const lineHeightHero800 = "var(--lineHeightHero800)";
 
 /**
- * Generates a template for the {@link (Dropdown:class)} component.
- *
- * @returns The template object.
- *
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero900 | `lineHeightHero900`} design token.
  * @public
  */
-export declare function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
+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.
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @tag fluent-link
+ *
+ * @slot start - Content which can be provided before the link content
+ * @slot end - Content which can be provided after the link content
+ * @slot - The default slot for link content
  *
  * @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;
+export declare class Link extends BaseAnchor {
     /**
+     * The appearance the link should have.
      *
-     * @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.
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
      */
-    connectedCallback(controller: HostController): void;
+    appearance?: LinkAppearance | undefined;
     /**
-     * Unbinds the behavior from the element.
-     * @param controller - The host controller orchestrating this behavior.
+     * The link is inline with text
+     * In chromium browsers, if the link is contained within a semantic
+     * text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`,
+     * `:host-context()` ensures inline links are styled appropriately.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `inline`
      */
-    disconnectedCallback(controller: HostController): void;
+    inline: boolean;
 }
 
 /**
- * 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.
- *
+ * Link Appearance constants
  * @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;
-}
+export declare const LinkAppearance: {
+    readonly subtle: "subtle";
+};
 
 /**
- * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * An Link can be subtle or the default appearance
  * @public
  */
-export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+export declare type LinkAppearance = ValuesOf<typeof LinkAppearance>;
 
 /**
- * A Menu component that provides a customizable menu element.
- *
- * @tag fluent-menu
- *
- * @class Menu
- * @extends FASTElement
- *
- * @attr open-on-hover - Determines if the menu should open on hover.
- * @attr open-on-context - Determines if the menu should open on right click.
- * @attr close-on-scroll - Determines if the menu should close on scroll.
- * @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
- * @attr split - Determines if the menu is in split state.
- *
- * @cssproperty --menu-max-height - The max-height of the menu.
- *
- * @slot primary-action - Slot for the primary action elements. Used when in `split` state.
- * @slot trigger - Slot for the trigger elements.
- * @slot - Default slot for the menu list.
- *
- * @method connectedCallback - Called when the element is connected to the DOM. Sets up the component.
- * @method disconnectedCallback - Called when the element is disconnected from the DOM. Removes event listeners.
- * @method setComponent - Sets the component state.
- * @method toggleMenu - Toggles the open state of the menu.
- * @method closeMenu - Closes the menu.
- * @method openMenu - Opens the menu.
- * @method focusMenuList - Focuses on the menu list.
- * @method focusTrigger - Focuses on the menu trigger.
- * @method openOnHoverChanged - Called whenever the 'openOnHover' property changes.
- * @method persistOnItemClickChanged - Called whenever the 'persistOnItemClick' property changes.
- * @method openOnContextChanged - Called whenever the 'openOnContext' property changes.
- * @method closeOnScrollChanged - Called whenever the 'closeOnScroll' property changes.
- * @method addListeners - Adds event listeners.
- * @method removeListeners - Removes event listeners.
- * @method menuKeydownHandler - Handles keyboard interaction for the menu.
- * @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
- * @method documentClickHandler - Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
- *
- * @summary The Menu component functions as a customizable menu element.
- *
- * @tag fluent-menu
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-link\>
+ */
+export declare const LinkDefinition: FASTElementDefinition<typeof Link>;
+
+export declare const LinkStyles: ElementStyles;
+
+/**
+ * Link target values.
  *
  * @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;
-    /**
-     * Determines if the menu is in split state.
-     * @public
-     */
-    split?: boolean;
-    /**
-     * Holds the slotted menu list.
-     * @public
-     */
-    slottedMenuList: MenuList[];
-    /**
-     * Sets up the component when the slotted menu list changes.
-     * @param prev - The previous items in the slotted menu list.
-     * @param next - The new items in the slotted menu list.
-     * @internal
-     */
-    slottedMenuListChanged(prev: MenuList[] | undefined, next: MenuList[] | undefined): void;
-    /**
-     * Holds the slotted triggers.
-     * @public
-     */
-    slottedTriggers: HTMLElement[];
-    /**
-     * Holds the primary slot element.
-     * @public
-     */
-    primaryAction: HTMLSlotElement;
-    /**
-     * Defines whether the menu is open or not.
-     * @internal
-     */
-    private _open;
+export declare const LinkTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+
+/**
+ * Type for link target values.
+ *
+ * @public
+ */
+export declare type LinkTarget = ValuesOf<typeof AnchorTarget>;
+
+/**
+ * The template for the Link component.
+ * @public
+ */
+export declare const LinkTemplate: ElementViewTemplate<Link>;
+
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
+ *
+ * @tag fluent-listbox
+ *
+ * @slot - The default slot for the options.
+ *
+ * @remarks
+ * The listbox component represents a list of options that can be selected.
+ * It is intended to be used in conjunction with the {@link BaseDropdown | Dropdown} component.
+ *
+ * @public
+ */
+export declare class Listbox extends FASTElement {
     /**
-     * The trigger element of the menu.
+     * A reference to the default slot element.
+     *
      * @internal
      */
-    private _trigger?;
+    defaultSlot: HTMLSlotElement;
     /**
-     * The menu list element of the menu which has the popover behavior.
+     * Calls the `slotchangeHandler` when the `defaultSlot` element is assigned
+     * via the `ref` directive in the template.
+     *
      * @internal
      */
-    private _menuList?;
-    /**
-     * 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;
+    protected defaultSlotChanged(): void;
     /**
-     * Sets the component.
-     * Sets the trigger and menu list elements and adds event listeners.
+     * Indicates whether the listbox allows multiple selection.
+     *
      * @public
      */
-    setComponent(): void;
+    multiple?: boolean;
     /**
-     * Toggles the open state of the menu.
-     * @public
+     * Updates the multiple selection state of the listbox and its options.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
      */
-    toggleMenu: () => void;
+    multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Closes the menu.
+     * The collection of all child options.
+     *
      * @public
      */
-    closeMenu: (event?: Event) => void;
+    options: DropdownOption[];
     /**
-     * Opens the menu.
-     * @public
+     * Updates the enabled options collection when properties on the child options change.
+     *
+     * @param prev - the previous options
+     * @param next - the current options
+     *
+     * @internal
      */
-    openMenu: (e?: Event) => void;
+    optionsChanged(prev: DropdownOption[] | undefined, next: DropdownOption[] | undefined): void;
     /**
-     * Focuses on the menu list.
-     * @public
+     * The index of the first selected and enabled option.
+     * @internal
      */
-    focusMenuList(): void;
+    selectedIndex: number;
     /**
-     * Focuses on the menu trigger.
-     * @public
+     * Reference to the parent dropdown element.
+     * @internal
      */
-    focusTrigger(): void;
+    dropdown?: BaseDropdown;
     /**
-     * Handles the 'toggle' event on the popover.
-     * @public
-     * @param e - the event
-     * @returns void
+     * Handles the `beforetoggle` event on the listbox.
+     *
+     * @param e - the toggle event
+     * @returns true to allow the default popover behavior, undefined to prevent it
+     * @internal
      */
-    toggleHandler: (e: Event) => void;
+    beforetoggleHandler(e: ToggleEvent): boolean | undefined;
     /**
-     * Called whenever the 'openOnHover' property changes.
-     * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @param oldValue - The previous value of 'openOnHover'.
-     * @param newValue - The new value of 'openOnHover'.
-     * @public
+     * @internal
      */
-    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
+    elementInternals: ElementInternals;
     /**
-     * Called whenever the 'persistOnItemClick' property changes.
-     * Adds or removes a 'click' event listener to the menu list based on the new value.
-     * @public
-     * @param oldValue - The previous value of 'persistOnItemClick'.
-     * @param newValue - The new value of 'persistOnItemClick'.
+     * The collection of child options that are not disabled.
+     *
+     * @internal
      */
-    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    get enabledOptions(): DropdownOption[];
     /**
-     * Called whenever the 'openOnContext' property changes.
-     * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
+     * The collection of child options that are selected.
+     *
      * @public
-     * @param oldValue - The previous value of 'openOnContext'.
-     * @param newValue - The new value of 'openOnContext'.
      */
-    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
+    get selectedOptions(): DropdownOption[];
     /**
-     * Called whenever the 'closeOnScroll' property changes.
-     * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
+     * Sets the `selected` state on a target option when clicked.
+     *
+     * @param e - The pointer event
      * @public
-     * @param oldValue - The previous value of 'closeOnScroll'.
-     * @param newValue - The new value of 'closeOnScroll'.
-     */
-    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
-    /**
-     * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger.
-     * Adds a 'toggle' event listener to the menu list.
-     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
-     * @internal
      */
-    private addListeners;
+    clickHandler(e: PointerEvent): boolean | void;
+    constructor();
+    connectedCallback(): void;
     /**
-     * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger.
-     * Also removes toggle event listener from the menu list.
-     * Also removes 'mouseover' event listeners from the trigger.
-     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * Handles observable subscriptions for the listbox.
+     *
+     * @param source - The source of the observed change
+     * @param propertyName - The name of the property that changed
+     *
      * @internal
      */
-    private removeListeners;
+    handleChange(source: any, propertyName?: string): void;
     /**
-     * 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.
+     * Selects an option by index.
      *
-     * @param e - the keyboard event
+     * @param index - The index of the option to select.
      * @public
      */
-    menuKeydownHandler(e: KeyboardEvent): boolean | void;
+    selectOption(index?: number): 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.
+     * Handles the `slotchange` event for the default slot.
+     * Sets the `options` property to the list of slotted options.
      *
-     * @param e - the keyboard event
+     * @param e - The slotchange event
      * @public
      */
-    triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
-    /**
-     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
-     * @internal
-     * @param e - The event triggered on document click.
-     */
-    private documentClickHandler;
+    slotchangeHandler(e?: Event): void;
 }
 
 /**
- * The base class used for constructing a fluent-menu-button custom element
- *
- * @tag fluent-menu-button
+ * The Fluent Listbox Element
  *
- * @public
- */
-export declare class MenuButton extends Button {
-}
-
-/**
- * Menu Button Appearance constants
- * @public
- */
-export declare const MenuButtonAppearance: {
-    readonly primary: "primary";
-    readonly outline: "outline";
-    readonly subtle: "subtle";
-    readonly transparent: "transparent";
-};
-
-/**
- * A Menu Button can be secondary, primary, outline, subtle, transparent
- * @public
- */
-export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
-
-/**
  * @public
  * @remarks
- * HTML Element: \<fluent-button\>
- */
-export declare const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
-
-/**
- * A Menu Button can be square, circular or rounded.
- * @public
- */
-export declare const MenuButtonShape: {
-    readonly circular: "circular";
-    readonly rounded: "rounded";
-    readonly square: "square";
-};
-
-/**
- * A Menu Button can be square, circular or rounded
- * @public
- */
-export declare type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
-
-/**
- * A Menu Button can be a size of small, medium or large.
- * @public
+ * HTML Element: `<fluent-listbox>`
  */
-export declare const MenuButtonSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-};
+export declare const ListboxDefinition: FASTElementDefinition<typeof Listbox>;
 
 /**
- * A Menu Button can be on of several preset sizes.
+ * Styles for the {@link (Listbox:class)} component.
+ *
  * @public
  */
-export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
+export declare const ListboxStyles: ElementStyles;
 
 /**
- * The template for the Button component.
+ * Template for the Listbox component.
+ *
  * @public
  */
-export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
+export declare const ListboxTemplate: ElementViewTemplate<Listbox>;
 
 /**
- * The Fluent Menu Element.
+ * Generates a template for the {@link (Dropdown:class)} component.
+ *
+ * @returns The template object.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-menu>
  */
-export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
+export declare function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
 
 /**
- * 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 }.
- *
- * @tag fluent-menu-item
- *
- * @slot indicator - The checkbox or radio indicator
- * @slot start - Content which can be provided before the menu item content
- * @slot - The default slot for menu item content
- * @slot end - Content which can be provided after the menu item content
- * @slot submenu-glyph - The submenu expand/collapse indicator
- * @slot submenu - Used to nest menu's within menu items
- * @csspart content - The element wrapping the menu item content
- * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ * 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 class MenuItem extends FASTElement {
+export declare abstract class MatchMediaBehavior implements HostBehavior {
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
+     * 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.
      */
-    elementInternals: ElementInternals;
+    private listenerCache;
     /**
-     * The disabled state of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: disabled
+     * The media query that the behavior operates on.
      */
-    disabled: boolean;
+    readonly query: MediaQueryList;
     /**
-     * Handles changes to disabled attribute custom states and element internals
-     * @param prev - the previous state
-     * @param next - the next state
+     *
+     * @param query - The media query to operate from.
      */
-    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    constructor(query: MediaQueryList);
     /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
+     * Constructs a function that will be invoked with the MediaQueryList context
+     * @param controller - The host controller orchestrating this behavior.
      */
-    role: MenuItemRole;
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
     /**
-     * Handles changes to role attribute element internals properties
-     * @param prev - the previous state
-     * @param next - the next state
+     * Binds the behavior to the element.
+     * @param controller - The host controller orchestrating this behavior.
      */
-    roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
+    connectedCallback(controller: HostController): void;
     /**
-     * The checked value of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: checked
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
      */
-    checked: boolean;
+    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 {
     /**
-     * Handles changes to checked attribute custom states and element internals
-     * @param prev - the previous state
-     * @param next - the next state
+     * The media query that the behavior operates on.
      */
-    protected checkedChanged(prev: boolean, next: boolean): void;
+    readonly query: MediaQueryList;
     /**
-     * The hidden attribute.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: hidden
+     * The styles object to be managed by the behavior.
      */
-    hidden: boolean;
+    readonly styles: ElementStyles;
     /**
-     * The submenu slotted content.
-     *
-     * @internal
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
      */
-    slottedSubmenu: HTMLElement[];
+    constructor(query: MediaQueryList, styles: ElementStyles);
     /**
-     * Sets the submenu and updates its position.
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
      *
-     * @internal
+     * @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;
+     *   }
+     * `))
+     * ```
      */
-    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
     /**
-     * @internal
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
      */
-    submenu: HTMLElement | undefined;
-    connectedCallback(): void;
+    protected constructListener(controller: HostController): MediaQueryListListener;
     /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
      * @internal
      */
-    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    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;
+
+/**
+ * A Menu component that provides a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
+ * @class Menu
+ * @extends FASTElement
+ *
+ * @attr open-on-hover - Determines if the menu should open on hover.
+ * @attr open-on-context - Determines if the menu should open on right click.
+ * @attr close-on-scroll - Determines if the menu should close on scroll.
+ * @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
+ * @attr split - Determines if the menu is in split state.
+ *
+ * @cssproperty --menu-max-height - The max-height of the menu.
+ *
+ * @slot primary-action - Slot for the primary action elements. Used when in `split` state.
+ * @slot trigger - Slot for the trigger elements.
+ * @slot - Default slot for the menu list.
+ *
+ * @method connectedCallback - Called when the element is connected to the DOM. Sets up the component.
+ * @method disconnectedCallback - Called when the element is disconnected from the DOM. Removes event listeners.
+ * @method setComponent - Sets the component state.
+ * @method toggleMenu - Toggles the open state of the menu.
+ * @method closeMenu - Closes the menu.
+ * @method openMenu - Opens the menu.
+ * @method focusMenuList - Focuses on the menu list.
+ * @method focusTrigger - Focuses on the menu trigger.
+ * @method openOnHoverChanged - Called whenever the 'openOnHover' property changes.
+ * @method persistOnItemClickChanged - Called whenever the 'persistOnItemClick' property changes.
+ * @method openOnContextChanged - Called whenever the 'openOnContext' property changes.
+ * @method closeOnScrollChanged - Called whenever the 'closeOnScroll' property changes.
+ * @method addListeners - Adds event listeners.
+ * @method removeListeners - Removes event listeners.
+ * @method menuKeydownHandler - Handles keyboard interaction for the menu.
+ * @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
+ * @method documentClickHandler - Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+ *
+ * @summary The Menu component functions as a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
+ * @public
+ */
+export declare class Menu extends FASTElement {
     /**
-     * @internal
+     * Determines if the menu should open on hover.
+     * @public
      */
-    handleMenuItemClick: (e: MouseEvent) => boolean;
+    openOnHover?: boolean;
     /**
-     * @internal
+     * Determines if the menu should open on right click.
+     * @public
      */
-    handleMouseOver: (e: MouseEvent) => boolean;
+    openOnContext?: boolean;
     /**
-     * @internal
+     * Determines if the menu should close on scroll.
+     * @public
      */
-    handleMouseOut: (e: MouseEvent) => boolean;
+    closeOnScroll?: boolean;
     /**
-     * Setup required ARIA on open/close
-     * @internal
+     * Determines if the menu open state should persis on click of menu item
+     * @public
      */
-    toggleHandler: (e: Event) => void;
+    persistOnItemClick?: boolean;
     /**
-     * @internal
+     * Determines if the menu is in split state.
+     * @public
      */
-    private invoke;
+    split?: boolean;
     /**
-     * Set fallback position of menu on open when CSS anchor not supported
-     * @internal
-     */
-    setSubmenuPosition: () => 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> & {
-    indicator?: StaticallyComposableHTML<MenuItem>;
-    submenuGlyph?: StaticallyComposableHTML<MenuItem>;
-};
-
-/**
- * Menu items roles.
- * @public
- */
-export declare const MenuItemRole: {
+     * Holds the slotted menu list.
+     * @public
+     */
+    slottedMenuList: MenuList[];
     /**
-     * The menu item has a "menuitem" role
+     * Sets up the component when the slotted menu list changes.
+     * @param prev - The previous items in the slotted menu list.
+     * @param next - The new items in the slotted menu list.
+     * @internal
      */
-    readonly menuitem: "menuitem";
+    slottedMenuListChanged(prev: MenuList[] | undefined, next: MenuList[] | undefined): void;
     /**
-     * The menu item has a "menuitemcheckbox" role
+     * Holds the slotted triggers.
+     * @public
      */
-    readonly menuitemcheckbox: "menuitemcheckbox";
+    slottedTriggers: HTMLElement[];
     /**
-     * The menu item has a "menuitemradio" role
+     * Holds the primary slot element.
+     * @public
      */
-    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 }.
- *
- * @tag fluent-menu-list
- *
- * @slot - The default slot for the menu items
- *
- * @public
- */
-export declare class MenuList extends FASTElement {
+    primaryAction: HTMLSlotElement;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
+     * Defines whether the menu is open or not.
      * @internal
      */
-    elementInternals: ElementInternals;
+    private _open;
     /**
+     * The trigger element of the menu.
      * @internal
      */
-    items: HTMLElement[];
-    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
-    protected menuItems: Element[] | undefined;
+    private _trigger?;
     /**
-     * The index of the focusable element in the items array
-     * defaults to -1
+     * The menu list element of the menu which has the popover behavior.
+     * @internal
      */
-    private focusIndex;
-    private static focusableElementRoles;
-    constructor();
+    private _menuList?;
     /**
-     * @internal
+     * Called when the element is connected to the DOM.
+     * Sets up the component.
+     * @public
      */
     connectedCallback(): void;
     /**
-     * @internal
+     * Called when the element is disconnected from the DOM.
+     * Removes event listeners.
+     * @public
      */
     disconnectedCallback(): void;
     /**
-     * @internal
+     * Sets the component.
+     * Sets the trigger and menu list elements and adds event listeners.
+     * @public
      */
-    readonly isNestedMenu: () => boolean;
+    setComponent(): void;
     /**
-     * Focuses the first item in the menu.
-     *
+     * Toggles the open state of the menu.
      * @public
      */
-    focus(): void;
+    toggleMenu: () => void;
     /**
-     * @internal
+     * Closes the menu.
+     * @public
      */
-    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    closeMenu: (event?: Event) => void;
     /**
-     * if focus is moving out of the menu, reset to a stable initial state
-     * @internal
+     * Opens the menu.
+     * @public
      */
-    handleFocusOut: (e: FocusEvent) => void;
-    private handleItemFocus;
-    private removeItemListeners;
-    private static elementIndent;
-    protected setItems(): void;
+    openMenu: (e?: Event) => void;
     /**
-     * Method for Observable changes to the hidden attribute of child elements
+     * Focuses on the menu list.
+     * @public
      */
-    handleChange(source: any, propertyName: string): void;
+    focusMenuList(): void;
     /**
-     * Handle change from child MenuItem element and set radio group behavior
+     * Focuses on the menu trigger.
+     * @public
      */
-    private changedMenuItemHandler;
+    focusTrigger(): void;
     /**
-     * check if the item is a menu item
+     * Handles the 'toggle' event on the popover.
+     * @public
+     * @param e - the event
+     * @returns void
      */
-    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    toggleHandler: (e: Event) => void;
     /**
-     * check if the item is focusable
+     * Called whenever the 'openOnHover' property changes.
+     * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     *
+     * @param oldValue - The previous value of 'openOnHover'.
+     * @param newValue - The new value of 'openOnHover'.
+     * @public
      */
-    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>;
-
-/**
- * A Message Bar Custom HTML Element.
- *
- * @tag fluent-message-bar
- *
- * @slot actions - Content that can be provided for the actions
- * @slot dismiss - Content that can be provided for the dismiss button
- * @slot - The default slot for the content
- * @public
- */
-export declare class MessageBar extends FASTElement {
+    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
     /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
+     * Called whenever the 'persistOnItemClick' property changes.
+     * Adds or removes a 'click' event listener to the menu list based on the new value.
+     * @public
+     * @param oldValue - The previous value of 'persistOnItemClick'.
+     * @param newValue - The new value of 'persistOnItemClick'.
      */
-    elementInternals: ElementInternals;
-    constructor();
+    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
     /**
-     * Sets the shape of the Message Bar.
-     *
+     * Called whenever the 'openOnContext' property changes.
+     * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
      * @public
-     * @remarks
-     * HTML Attribute: `shape`
+     * @param oldValue - The previous value of 'openOnContext'.
+     * @param newValue - The new value of 'openOnContext'.
      */
-    shape?: MessageBarShape;
+    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
     /**
-     * Sets the layout of the control.
-     *
+     * Called whenever the 'closeOnScroll' property changes.
+     * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
      * @public
-     * @remarks
-     * HTML Attribute: `layout`
+     * @param oldValue - The previous value of 'closeOnScroll'.
+     * @param newValue - The new value of 'closeOnScroll'.
      */
-    layout?: MessageBarLayout;
+    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
     /**
-     * Sets the intent of the control.
+     * Adds event listeners.
+     * Adds click and keydown event listeners to the trigger.
+     * Adds a 'toggle' event listener to the menu list.
+     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
+     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * @internal
+     */
+    private addListeners;
+    /**
+     * Removes event listeners.
+     * Removes click and keydown event listeners from the trigger.
+     * Also removes toggle event listener from the menu list.
+     * Also removes 'mouseover' event listeners from the trigger.
+     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * @internal
+     */
+    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.
      *
+     * @param e - the keyboard event
      * @public
-     * @remarks
-     * HTML Attribute: `intent`
      */
-    intent?: MessageBarIntent;
+    menuKeydownHandler(e: KeyboardEvent): boolean | void;
     /**
-     * Method to emit a `dismiss` event when the message bar is dismissed
+     * 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.
      *
+     * @param e - the keyboard event
      * @public
      */
-    dismissMessageBar: () => void;
+    triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
+    /**
+     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+     * @internal
+     * @param e - The event triggered on document click.
+     */
+    private documentClickHandler;
 }
 
 /**
- * The Fluent MessageBar Element definition.
+ * The base class used for constructing a fluent-menu-button custom element
+ *
+ * @tag fluent-menu-button
  *
+ * @public
+ */
+export declare class MenuButton extends Button {
+}
+
+/**
+ * Menu Button Appearance constants
+ * @public
+ */
+export declare const MenuButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+/**
+ * A Menu Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
+
+/**
  * @public
  * @remarks
- * HTML Element: `<fluent-message-bar>`
+ * HTML Element: \<fluent-button\>
  */
-export declare const MessageBarDefinition: FASTElementDefinition<typeof MessageBar>;
+export declare const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
 
 /**
- * The `intent` variations for the MessageBar component.
- *
+ * A Menu Button can be square, circular or rounded.
  * @public
  */
-export declare const MessageBarIntent: {
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly error: "error";
-    readonly info: "info";
+export declare const MenuButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
 };
 
-export declare type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
-
 /**
- * The `layout` variations for the MessageBar component.
- *
+ * A Menu Button can be square, circular or rounded
  * @public
  */
-export declare const MessageBarLayout: {
-    readonly multiline: "multiline";
-    readonly singleline: "singleline";
-};
-
-export declare type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
+export declare type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
 
 /**
- * The `shape` variations for the MessageBar component.
- *
+ * A Menu Button can be a size of small, medium or large.
  * @public
  */
-export declare const MessageBarShape: {
-    readonly rounded: "rounded";
-    readonly square: "square";
+export declare const MenuButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
 };
 
-export declare type MessageBarShape = ValuesOf<typeof MessageBarShape>;
+/**
+ * A Menu Button can be on of several preset sizes.
+ * @public
+ */
+export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
 
 /**
- * Styles for the MessageBar component.
- *
+ * The template for the Button component.
  * @public
  */
-export declare const MessageBarStyles: ElementStyles;
+export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
 
 /**
- * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * The Fluent Menu Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu>
  */
-export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
+export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
 
 /**
- * A Progress HTML Element.
- * Based on BaseProgressBar and includes style and layout specific attributes
+ * 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 }.
  *
- * @tag fluent-progress-bar
+ * @tag fluent-menu-item
+ *
+ * @slot indicator - The checkbox or radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot - The default slot for menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot submenu-glyph - The submenu expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart content - The element wrapping the menu item content
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
  * @public
  */
-export declare class ProgressBar extends BaseProgressBar {
+export declare class MenuItem extends FASTElement {
     /**
-     * The thickness of the progress bar
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * The thickness of the progress bar
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The disabled state of the element.
      *
-     * HTML Attribute: `thickness`
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Handles changes to disabled attribute custom states and element internals
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The role of the element.
      *
      * @public
+     * @remarks
+     * HTML Attribute: role
      */
-    thickness?: ProgressBarThickness;
+    role: MenuItemRole;
     /**
-     * The shape of the progress bar
-     * The shape of the progress bar
+     * Handles changes to role attribute element internals properties
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
+    /**
+     * The checked value of the element.
      *
-     * HTML Attribute: `shape`
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checked: boolean;
+    /**
+     * Handles changes to checked attribute custom states and element internals
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    protected checkedChanged(prev: boolean, next: boolean): void;
+    /**
+     * The hidden attribute.
      *
      * @public
+     * @remarks
+     * HTML Attribute: hidden
      */
-    shape?: ProgressBarShape;
+    hidden: boolean;
+    /**
+     * The submenu slotted content.
+     *
+     * @internal
+     */
+    slottedSubmenu: HTMLElement[];
+    /**
+     * Sets the submenu and updates its position.
+     *
+     * @internal
+     */
+    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    /**
+     * @internal
+     */
+    submenu: HTMLElement | undefined;
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOver: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOut: (e: MouseEvent) => boolean;
+    /**
+     * Setup required ARIA on open/close
+     * @internal
+     */
+    toggleHandler: (e: Event) => void;
+    /**
+     * @internal
+     */
+    private invoke;
+    /**
+     * Set fallback position of menu on open when CSS anchor not supported
+     * @internal
+     */
+    setSubmenuPosition: () => void;
 }
 
 /**
- * The Fluent ProgressBar Element.
- *
- *
+ * 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-progress-bar\>
+ * HTML Element: <fluent-menu-item>
  */
-export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
 
 /**
- * ProgressBarShape Constants
+ * Menu Item configuration options
  * @public
  */
-export declare const ProgressBarShape: {
-    readonly rounded: "rounded";
-    readonly square: "square";
+export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
+    indicator?: StaticallyComposableHTML<MenuItem>;
+    submenuGlyph?: StaticallyComposableHTML<MenuItem>;
 };
 
 /**
- * Applies bar shape to the content
+ * Menu items roles.
  * @public
  */
-export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
+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";
+};
 
-/** ProgressBar styles
+/**
+ * The types for menu item roles
  * @public
  */
-export declare const ProgressBarStyles: ElementStyles;
+export declare type MenuItemRole = ValuesOf<typeof MenuItemRole>;
 
-export declare const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+/** MenuItem styles
+ * @public
+ */
+export declare const MenuItemStyles: ElementStyles;
+
+export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 /**
- * ProgressBarThickness Constants
+ * A Menu List Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @tag fluent-menu-list
+ *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
-export declare const ProgressBarThickness: {
-    readonly medium: "medium";
-    readonly large: "large";
-};
+export declare class MenuList extends BaseMenuList {
+}
 
 /**
- * Applies bar thickness to the content
  * @public
+ * @remarks
+ * HTML Element: <fluent-menu-list>
  */
-export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
+export declare const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
 
-/**
- * ProgressBarValidationState Constants
+/** MenuList styles
  * @public
  */
-export declare const ProgressBarValidationState: {
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly error: "error";
-};
+export declare const MenuListStyles: ElementStyles;
+
+export declare const MenuListTemplate: ElementViewTemplate<MenuList>;
 
-/**
- * Applies validation state to the content
+/** Menu styles
  * @public
  */
-export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+export declare const MenuStyles: ElementStyles;
 
-declare type PropertyNameForCalculation = 'max' | 'value';
+export declare const MenuTemplate: ElementViewTemplate<Menu>;
 
 /**
- * A Radio Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
- *
- * @tag fluent-radio
+ * A Message Bar Custom HTML Element.
  *
- * @slot checked-indicator - The checked indicator slot
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @tag fluent-message-bar
  *
+ * @slot actions - Content that can be provided for the actions
+ * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot - The default slot for the content
  * @public
  */
-export declare class Radio extends BaseCheckbox {
-    constructor();
+export declare class MessageBar extends FASTElement {
     /**
-     * Toggles the disabled state when the user changes the `disabled` property.
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @param prev - the previous value of the `disabled` property
-     * @param next - the current value of the `disabled` property
      * @internal
-     * @override
      */
-    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    elementInternals: ElementInternals;
+    constructor();
     /**
-     * This method is a no-op for the radio component.
+     * Sets the shape of the Message Bar.
      *
-     * @internal
-     * @override
+     * @public
      * @remarks
-     * To make a group of radio controls required, see {@link RadioGroup.required}.
+     * HTML Attribute: `shape`
      */
-    protected requiredChanged(): void;
+    shape?: MessageBarShape;
     /**
-     * This method is a no-op for the radio component.
+     * Sets the layout of the control.
      *
-     * @internal
-     * @override
+     * @public
      * @remarks
-     * The radio form value is controlled by the `RadioGroup` component.
+     * HTML Attribute: `layout`
      */
-    setFormValue(): void;
+    layout?: MessageBarLayout;
     /**
-     * Sets the validity of the control.
+     * Sets the intent of the control.
      *
-     * @internal
-     * @override
+     * @public
      * @remarks
-     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+     * HTML Attribute: `intent`
      */
-    setValidity(): void;
+    intent?: MessageBarIntent;
     /**
-     * Toggles the checked state of the control.
+     * Method to emit a `dismiss` event when the message bar is dismissed
      *
-     * @param force - Forces the element to be checked or unchecked
      * @public
-     * @override
-     * @remarks
-     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
      */
-    toggleChecked(force?: boolean): void;
+    dismissMessageBar: () => void;
 }
 
 /**
+ * The Fluent MessageBar Element definition.
+ *
  * @public
+ * @remarks
+ * HTML Element: `<fluent-message-bar>`
  */
-export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+export declare const MessageBarDefinition: FASTElementDefinition<typeof MessageBar>;
 
 /**
- * The Fluent Radio Element.
- *
+ * The `intent` variations for the MessageBar component.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-radio\>
  */
-export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
+export declare const MessageBarIntent: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+    readonly info: "info";
+};
+
+export declare type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
 
 /**
- * A Radio Group Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
- *
- * @tag fluent-radio-group
+ * The `layout` variations for the MessageBar component.
  *
  * @public
+ */
+export declare const MessageBarLayout: {
+    readonly multiline: "multiline";
+    readonly singleline: "singleline";
+};
+
+export declare type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
+
+/**
+ * The `shape` variations for the MessageBar component.
  *
- * @slot - The default slot for the radio group
+ * @public
  */
-export declare class RadioGroup extends FASTElement {
-    /**
-     * The index of the checked radio, scoped to the enabled radios.
-     *
-     * @internal
-     */
-    protected checkedIndex: number;
-    /**
-     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
-     *
-     * @param prev - the previous index
-     * @param next - the current index
-     * @internal
-     */
-    protected checkedIndexChanged(prev: number | undefined, next: number): void;
-    /**
-     * Indicates that the value has been changed by the user.
-     */
-    private dirtyState;
-    /**
-     * Disables the radio group and child radios.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled`
-     */
-    disabled: boolean;
-    /**
-     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
-     *
-     * @param prev - the previous disabled value
-     * @param next - the current disabled value
-     * @internal
-     */
-    protected disabledChanged(prev?: boolean, next?: boolean): void;
-    /**
-     * The value of the checked radio.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `value`
-     */
-    initialValue?: string;
-    /**
-     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
-     *
-     * @param prev - the previous value
-     * @param next - the current value
-     */
-    initialValueChanged(prev: string | undefined, next: string | undefined): void;
-    /**
-     * The name of the radio group.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `name`
-     */
-    name: string;
-    /**
-     * Sets the `name` attribute on all child radios when the `name` property changes.
-     *
-     * @internal
-     */
-    protected nameChanged(prev: string | undefined, next: string | undefined): void;
-    /**
-     * The orientation of the group.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `orientation`
-     */
-    orientation?: RadioGroupOrientation;
-    /**
-     * Sets the ariaOrientation attribute when the orientation changes.
-     *
-     * @param prev - the previous orientation
-     * @param next - the current orientation
-     * @internal
-     */
-    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
-    /**
-     * The collection of all child radios.
-     *
-     * @public
-     */
-    radios: Radio[];
-    /**
-     * Updates the enabled radios collection when properties on the child radios change.
-     *
-     * @param prev - the previous radios
-     * @param next - the current radios
-     */
-    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
-    /**
-     * Indicates whether the radio group is required.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `required`
-     */
-    required: boolean;
-    /**
-     *
-     * @param prev - the previous required value
-     * @param next - the current required value
-     */
-    requiredChanged(prev: boolean, next: boolean): void;
-    /**
-     * The collection of radios that are slotted into the default slot.
-     *
-     * @internal
-     */
-    slottedRadios: Radio[];
-    /**
-     * Updates the radios collection when the slotted radios change.
-     *
-     * @param prev - the previous slotted radios
-     * @param next - the current slotted radios
-     */
-    slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * A collection of child radios that are not disabled.
-     *
-     * @internal
-     */
-    get enabledRadios(): Radio[];
-    /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
-     *
-     * @public
-     */
-    static formAssociated: boolean;
-    /**
-     * The fallback validation message, taken from a native checkbox `<input>` element.
-     *
-     * @internal
-     */
-    private _validationFallbackMessage;
+export declare const MessageBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+export declare type MessageBarShape = ValuesOf<typeof MessageBarShape>;
+
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export declare const MessageBarStyles: ElementStyles;
+
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
+
+/**
+ * A Progress HTML Element.
+ * Based on BaseProgressBar and includes style and layout specific attributes
+ *
+ * @tag fluent-progress-bar
+ *
+ * @public
+ */
+export declare class ProgressBar extends BaseProgressBar {
     /**
-     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
-     * specified (e.g., via `setCustomValidity`).
+     * The thickness of the progress bar
      *
-     * @internal
-     */
-    get validationMessage(): string;
-    /**
-     * The element's validity state.
+     * The thickness of the progress bar
      *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
-     */
-    get validity(): ValidityState;
-    /**
-     * The current value of the checked radio.
+     * HTML Attribute: `thickness`
      *
      * @public
      */
-    get value(): string | null;
-    set value(next: string | null);
-    /**
-     * Sets the checked state of all radios when any radio emits a `change` event.
-     *
-     * @param e - the change event
-     */
-    changeHandler(e: Event): boolean | void;
+    thickness?: ProgressBarThickness;
     /**
-     * Checks the radio at the specified index.
+     * The shape of the progress bar
+     * The shape of the progress bar
      *
-     * @param index - the index of the radio to check
-     * @internal
-     */
-    checkRadio(index?: number, shouldEmit?: boolean): void;
-    /**
-     * Checks the validity of the element and returns the result.
+     * HTML Attribute: `shape`
      *
      * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
-     */
-    checkValidity(): boolean;
-    /**
-     * Handles click events for the radio group.
-     *
-     * @param e - the click event
-     * @internal
      */
-    clickHandler(e: MouseEvent): boolean | void;
+    shape?: ProgressBarShape;
+}
+
+/**
+ * The Fluent ProgressBar Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-progress-bar\>
+ */
+export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+
+/**
+ * ProgressBarShape Constants
+ * @public
+ */
+export declare const ProgressBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+/**
+ * Applies bar shape to the content
+ * @public
+ */
+export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
+
+/** ProgressBar styles
+ * @public
+ */
+export declare const ProgressBarStyles: ElementStyles;
+
+export declare const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+
+/**
+ * ProgressBarThickness Constants
+ * @public
+ */
+export declare const ProgressBarThickness: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * Applies bar thickness to the content
+ * @public
+ */
+export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
+
+/**
+ * ProgressBarValidationState Constants
+ * @public
+ */
+export declare const ProgressBarValidationState: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+
+/**
+ * Applies validation state to the content
+ * @public
+ */
+export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+
+declare type PropertyNameForCalculation = 'max' | 'value';
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
+ *
+ * @tag fluent-radio
+ *
+ * @slot checked-indicator - The checked indicator slot
+ * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
+ *
+ * @public
+ */
+export declare class Radio extends BaseCheckbox {
     constructor();
     /**
-     * Focuses the checked radio or the first enabled radio.
-     *
-     * @internal
-     */
-    focus(): void;
-    /**
-     * Enables tabbing through the radio group when the group receives focus.
-     *
-     * @param e - the focus event
-     * @internal
-     */
-    focusinHandler(e: FocusEvent): boolean | void;
-    /**
-     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+     * Toggles the disabled state when the user changes the `disabled` property.
      *
-     * @param e - the focusout event
+     * @param prev - the previous value of the `disabled` property
+     * @param next - the current value of the `disabled` property
      * @internal
+     * @override
      */
-    focusoutHandler(e: FocusEvent): boolean | void;
-    formResetCallback(): void;
-    private getEnabledIndexInBounds;
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Handles keydown events for the radio group.
+     * This method is a no-op for the radio component.
      *
-     * @param e - the keyboard event
      * @internal
-     */
-    keydownHandler(e: KeyboardEvent): boolean | void;
-    /**
-     *
-     * @param e - the disabled event
-     */
-    disabledRadioHandler(e: CustomEvent): void;
-    /**
-     * Reports the validity of the element.
-     *
-     * @public
+     * @override
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     * To make a group of radio controls required, see {@link RadioGroup.required}.
      */
-    reportValidity(): boolean;
+    protected requiredChanged(): void;
     /**
-     * Resets the `tabIndex` for all child radios when the radio group loses focus.
+     * This method is a no-op for the radio component.
      *
      * @internal
+     * @override
+     * @remarks
+     * The radio form value is controlled by the `RadioGroup` component.
      */
-    private restrictFocus;
+    setFormValue(): void;
     /**
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     * Sets the validity of the control.
      *
      * @internal
+     * @override
+     * @remarks
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
      */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    setValidity(): void;
     /**
-     * Sets the validity of the element.
-     *
-     * @param flags - Validity flags to set.
-     * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
-     * @param anchor - Optional anchor to use for the validation message.
+     * Toggles the checked state of the control.
      *
-     * @internal
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
      * @remarks
-     * RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
-     * This is necessary because:
-     * 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
-     * 2. Browser validation UIs and screen readers announce validation against individual form controls
-     * 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
-     * 4. We anchor the error to the first Radio so it receives focus and announcement
-     *
-     * When the group is invalid (required but no selection):
-     * - Only the first Radio gets the invalid state with the validation message
-     * - Other Radios are kept valid since selecting any of them would satisfy the requirement
-     *
-     * When the group becomes valid (user selects any Radio):
-     * - All Radios are cleared back to valid state
-     * - This allows form submission to proceed
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
      */
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    toggleChecked(force?: boolean): void;
+}
+
+/**
+ * @public
+ */
+export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+
+/**
+ * The Fluent Radio Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio\>
+ */
+export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
+
+/**
+ * A Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
+ *
+ * @tag fluent-radio-group
+ *
+ * @slot - The default slot for the radio group
+ *
+ * @public
+ */
+export declare class RadioGroup extends BaseRadioGroup {
 }
 
 /**