@fluentui/web-components 3.0.0-beta.76 → 3.0.0-beta.78

package/dist/web-components.d.ts

@@ -1633,1192 +1633,1186 @@ export declare class BaseDivider extends FASTElement {
 }
 
 /**
- * A Field Custom HTML Element.
+ * A Dropdown Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#combobox | ARIA combobox } role.
+ *
+ * @remarks
+ * The Dropdown element does not provide a form association value. Instead, the slotted Option elements handle form
+ * association the same way as {@link (Checkbox:class)} elements. See the {@link (DropdownOption:class)} element for
+ * more details.
+ *
+ * @slot - The default slot. Accepts a {@link (Listbox:class)} element.
+ * @slot indicator - The indicator slot.
+ * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
  *
  * @public
  */
-export declare class BaseField extends FASTElement {
-    /**
-     * The slotted label elements.
-     *
-     * @internal
-     */
-    labelSlot: Node[];
+export declare class BaseDropdown extends FASTElement {
     /**
-     * Updates attributes on the slotted label elements.
+     * The ID of the current active descendant.
      *
-     * @param prev - the previous list of slotted label elements
-     * @param next - the current list of slotted label elements
+     * @public
      */
-    protected labelSlotChanged(prev: Node[], next: Node[]): void;
+    get activeDescendant(): string | undefined;
     /**
-     * The slotted message elements. Filtered to only include elements with a `flag` attribute.
+     * The index of the currently active option.
      *
      * @internal
      */
-    messageSlot: Element[];
+    activeIndex: number;
     /**
-     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     * Sets the active index when the active index property changes.
      *
-     * @param prev - the previous list of slotted message elements
-     * @param next - the current list of slotted message elements
+     * @param prev - the previous active index
+     * @param next - the current active index
      * @internal
      */
-    messageSlotChanged(prev: Element[], next: Element[]): void;
+    activeIndexChanged(prev: number | undefined, next: number | undefined): void;
     /**
-     * The slotted inputs.
+     * The `aria-labelledby` attribute value of the dropdown.
      *
-     * @internal
-     * @privateRemarks
-     * This field is populated with the `children` directive in the template rather than `slotted`.
+     * @public
      */
-    slottedInputs: SlottableInput[];
+    ariaLabelledBy: string;
     /**
-     * Sets the `input` property to the first slotted input.
-     *
-     * @param prev - The previous collection of inputs.
-     * @param next - The current collection of inputs.
+     * Reference to the control element.
      * @internal
      */
-    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
+    control: HTMLInputElement;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * Updates properties on the control element when the control slot changes.
      *
+     * @param prev - the previous control element
+     * @param next - the current control element
      * @internal
+     * @remarks
+     * The control element is assigned to the dropdown via the control slot with manual slot assignment.
      */
-    elementInternals: ElementInternals;
+    controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void;
     /**
-     * Reference to the first slotted input.
-     *
+     * The disabled state of the dropdown.
      * @public
      */
-    input: SlottableInput;
+    disabled?: boolean;
     /**
-     * Updates the field's states and label properties when the assigned input changes.
+     * Updates the disabled state of the options when the disabled property changes.
      *
-     * @param prev - the previous input
-     * @param next - the current input
+     * @param prev - the previous disabled state
+     * @param next - the current disabled state
      */
-    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
+    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+     * The display value for the control.
      *
-     * @param e - the event object
-     * @internal
+     * @public
      */
-    changeHandler(e: Event): boolean | void;
+    get displayValue(): string;
     /**
-     * Redirects `click` events to the slotted input.
+     * Sets the listbox ID to a unique value if one is not provided.
      *
-     * @param e - the event object
-     * @internal
+     * @override
+     * @public
+     * @remarks
+     * HTML Attribute: `id`
      */
-    clickHandler(e: MouseEvent): boolean | void;
-    constructor();
+    id: string;
     /**
-     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+     * Reference to the indicator button element.
      *
-     * @param e - the focus event
      * @internal
      */
-    focusinHandler(e: FocusEvent): boolean | void;
+    indicator: HTMLDivElement;
     /**
-     * Removes the `focus-visible` state from the field when a slotted input loses focus.
+     * Reference to the indicator slot element.
      *
-     * @param e - the focus event
      * @internal
      */
-    focusoutHandler(e: FocusEvent): boolean | void;
+    indicatorSlot?: HTMLSlotElement;
     /**
-     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+     * The value of the selected option.
      *
-     * @param e - the event object
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
      */
-    invalidHandler(e: Event): boolean | void;
+    initialValue?: string;
     /**
-     * Sets ARIA and form-related attributes on slotted label elements.
+     * Reference to the slotted listbox element.
      *
      * @internal
      */
-    private setLabelProperties;
+    listbox: Listbox;
     /**
-     * Toggles the field's states based on the slotted input.
+     * Updates properties on the listbox element when the listbox reference changes.
      *
+     * @param prev - the previous listbox element
+     * @param next - the current listbox element
      * @internal
+     *
+     * @remarks
+     * The listbox element is assigned to the dropdown via the default slot with manual slot assignment.
      */
-    setStates(): void;
-    setValidationStates(): void;
-}
-
-/**
- * A Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @public
- */
-export declare class BaseProgressBar extends FASTElement {
+    listboxChanged(prev: Listbox | undefined, next: Listbox | undefined): void;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * Reference to the listbox slot element.
      *
      * @internal
      */
-    elementInternals: ElementInternals;
+    listboxSlot: HTMLSlotElement;
     /**
-     * The validation state of the progress bar
+     * Indicates whether the dropdown allows multiple options to be selected.
+     *
      * @public
-     * HTML Attribute: `validation-state`
-     */
-    validationState: ProgressBarValidationState | null;
-    /**
-     * Handles changes to validation-state attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
-    /**
-     * The value of the progress
-     * @internal
-     * HTML Attribute: `value`
+     * @remarks
+     * HTML Attribute: `multiple`
      */
-    value?: number;
+    multiple?: boolean;
     /**
-     * Updates the percent complete when the `value` property changes.
+     * Toggles between single and multiple selection modes when the `multiple` property changes.
      *
+     * @param prev - the previous multiple state
+     * @param next - the next multiple state
      * @internal
      */
-    protected valueChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * The minimum value
-     * @internal
-     * HTML Attribute: `min`
-     */
-    min?: number;
+    protected multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Updates the percent complete when the `min` property changes.
+     * The name of the dropdown.
      *
-     * @param prev - The previous min value
-     * @param next - The current min value
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
      */
-    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    name: string;
     /**
-     * The maximum value
-     * @internal
-     * HTML Attribute: `max`
+     * Updates the name of the options when the name property changes.
+     *
+     * @param prev - the previous name
+     * @param next - the current name
      */
-    max?: number;
+    nameChanged(prev: string, next: string): void;
     /**
-     * Updates the percent complete when the `max` property changes.
+     * Indicates whether the dropdown is open.
      *
-     * @param prev - The previous max value
-     * @param next - The current max value
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `open`
      */
-    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    open: boolean;
     /**
-     * Indicates progress in %
+     * Handles the open state of the dropdown.
+     *
+     * @param prev - the previous open state
+     * @param next - the current open state
+     *
      * @internal
      */
-    get percentComplete(): number;
-    constructor();
-}
-
-/**
- * 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 {
+    openChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The placeholder text of the dropdown.
      *
-     * @internal
+     * @public
      */
-    elementInternals: ElementInternals;
+    placeholder: string;
     /**
-     * The number of ratings.
+     * The required state of the dropdown.
      *
      * @public
      * @remarks
-     * HTML Attribute: `count`
+     * HTML Attribute: `required`
      */
-    count?: number;
+    required: boolean;
     /**
-     * The `viewBox` attribute of the icon <svg> element.
+     * The dropdown type.
      *
      * @public
-     * @default `0 0 20 20`
      * @remarks
-     * HTML Attribute: `icon-view-box`
+     * HTML Attribute: `type`
      */
-    iconViewBox?: string;
+    type: DropdownType;
     /**
-     * The maximum possible value of the rating.
-     * This attribute determines the number of icons displayed.
-     * Must be a whole number greater than 1.
+     * Changes the slotted control element based on the dropdown type.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `max`
+     * @param prev - the previous dropdown type
+     * @param next - the current dropdown type
+     * @internal
      */
-    max?: number;
+    typeChanged(prev: DropdownType | undefined, next: DropdownType | undefined): void;
     /**
-     * The value of the rating.
+     * The initial value of the control. When the control is a combobox, this value is used to set the value of the
+     * control when the dropdown is initialized.
      *
      * @public
      * @remarks
      * HTML Attribute: `value`
      */
-    value?: number;
+    valueAttribute: string;
     /**
+     * The slot element for the control.
      * @internal
      */
-    slottedIcon: HTMLElement[];
+    controlSlot: HTMLSlotElement;
     /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
      * @internal
      */
-    slottedIconChanged(): void;
+    elementInternals: ElementInternals;
     /**
-     * @internal
+     * The collection of enabled options.
+     * @public
      */
-    private customIcon?;
-    private intlNumberFormatter;
-    constructor();
+    get enabledOptions(): DropdownOption[];
     /**
-     * Returns "count" as string, formatted according to the locale.
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
      *
-     * @internal
+     * @public
      */
-    get formattedCount(): string;
+    static formAssociated: boolean;
     /**
-     * Gets the selected value
+     * Resets the form value to its initial value when the form is reset.
      *
-     * @protected
+     * @internal
      */
-    protected getSelectedValue(): number;
+    formResetCallback(): void;
     /**
-     * Gets the maximum icons to render
+     * A reference to the first freeform option, if present.
      *
-     * @protected
+     * @internal
      */
-    protected getMaxIcons(): number;
+    private get freeformOption();
     /**
-     * Generates the icon SVG elements based on the "max" attribute.
+     * Indicates whether the dropdown is a combobox.
      *
      * @internal
      */
-    generateIcons(): string;
-}
-
-/**
- * The base class used for constructing a fluent-spinner custom element
- * @public
- */
-export declare class BaseSpinner extends FASTElement {
+    private get isCombobox();
     /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The list formatter for the dropdown. Used to format the display value when the dropdown is in multiple selection mode.
      *
      * @internal
      */
-    elementInternals: ElementInternals;
-    constructor();
-}
-
-/**
- * A Tablist element that wraps a collection of tab elements
- * @public
- */
-export declare class BaseTablist extends FASTElement {
+    private listFormatter?;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The list collator for the dropdown. Used to filter options based on the input value.
      *
      * @internal
      */
-    elementInternals: ElementInternals;
+    private listCollator?;
     /**
-     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * The collection of all child options.
+     *
      * @public
-     * @remarks
-     * HTML Attribute: disabled.
      */
-    disabled: boolean;
+    get options(): DropdownOption[];
     /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
+     * The index of the first selected option, scoped to the enabled options.
      *
      * @internal
-     */
-    protected disabledChanged(prev: boolean, next: boolean): void;
-    /**
-     * The orientation
-     * @public
      * @remarks
-     * HTML Attribute: orientation
+     * This property is a reflection of {@link Listbox.selectedIndex}.
      */
-    orientation: TablistOrientation;
-    /**
-     * @internal
-     */
-    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    get selectedIndex(): number;
     /**
-     * The id of the active tab
+     * The collection of selected options.
      *
      * @public
      * @remarks
-     * HTML Attribute: activeid
+     * This property is a reflection of {@link Listbox.selectedOptions}.
      */
-    activeid: string;
+    get selectedOptions(): DropdownOption[];
     /**
+     * The fallback validation message, taken from a native `<input>` element.
+     *
      * @internal
      */
-    protected activeidChanged(oldValue: string, newValue: string): void;
+    private validationFallbackMessage;
     /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
      * @internal
      */
-    tabs: HTMLElement[];
+    get validationMessage(): string;
     /**
-     * @internal
-     */
-    protected tabsChanged(): void;
-    /**
-     * A reference to the active tab
+     * The current value of the selected option.
+     *
      * @public
      */
-    activetab: HTMLElement;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private change;
-    private getActiveIndex;
+    get value(): string | null;
+    set value(next: string | null);
     /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
+     * Handles the change events for the dropdown.
+     *
+     * @param e - the event object
      *
      * @public
      */
-    protected setTabs(): void;
-    private getTabIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
+    changeHandler(e: Event): boolean | void;
     /**
-     * The adjust method for FASTTabs
+     * Handles the click events for the dropdown.
+     *
+     * @param e - the event object
+     *
      * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
      */
-    adjust(adjustment: number): void;
-    private activateTabByIndex;
-    private focusTab;
+    clickHandler(e: PointerEvent): boolean | void;
+    constructor();
     /**
+     * Filters the options based on the input value.
+     *
+     * @param value - the input value to filter the options by
+     * @param collection - the collection of options to filter
+     * @returns the filtered options
      * @internal
      */
-    connectedCallback(): void;
-}
-
-/**
- * A Tabs component that wraps a collection of tab and tab panel elements.
- *
- * @public
- */
-declare class BaseTabs extends FASTElement {
-    /**
-     * The orientation
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
-     */
-    orientation: TabsOrientation;
+    filterOptions(value: string, collection?: DropdownOption[]): DropdownOption[];
     /**
+     * Focuses the control when the dropdown receives focus.
+     *
      * @internal
      */
-    orientationChanged(): void;
+    focus(options?: FocusOptions): void;
     /**
-     * The id of the active tab
+     * Toggles the listbox when the control element loses focus.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: activeid
-     */
-    activeid: string;
-    /**
+     * @param e - the focus event
      * @internal
      */
-    activeidChanged(oldValue: string, newValue: string): void;
+    focusoutHandler(e: FocusEvent): boolean | void;
     /**
+     * Ensures the active index is within bounds of the enabled options. Out-of-bounds indices are wrapped to the opposite
+     * end of the range.
+     *
+     * @param index - the desired index
+     * @param upperBound - the upper bound of the range
+     * @returns the index in bounds
      * @internal
      */
-    tabs: HTMLElement[];
+    private getEnabledIndexInBounds;
     /**
-     * @internal
+     * Handles the input events for the dropdown from the control element.
+     *
+     * @param e - the input event
+     * @public
      */
-    tabsChanged(): void;
+    inputHandler(e: InputEvent): boolean | void;
     /**
-     * @internal
+     * Inserts the control element based on the dropdown type.
+     *
+     * @public
+     * @remarks
+     * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
      */
-    tabpanels: HTMLElement[];
+    protected insertControl(): void;
     /**
-     * @internal
+     * Handles the keydown events for the dropdown.
+     *
+     * @param e - the keyboard event
+     * @public
      */
-    tabpanelsChanged(): void;
+    keydownHandler(e: KeyboardEvent): boolean | void;
     /**
-     * A reference to the active tab
-     * @public
+     * Prevents the default behavior of the mousedown event. This is necessary to prevent the input from losing focus
+     * when the dropdown is open.
+     *
+     * @param e - the mouse event
+     *
+     * @internal
      */
-    activetab: HTMLElement;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private tabpanelIds;
-    private change;
-    private isDisabledElement;
-    private isHiddenElement;
-    private isFocusableElement;
-    private getActiveIndex;
+    mousedownHandler(e: MouseEvent): boolean | void;
     /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
+     * Selects an option by index.
      *
+     * @param index - The index of the option to select.
      * @public
      */
-    protected setTabs(): void;
-    private setTabPanels;
-    private getTabIds;
-    private getTabPanelIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
+    selectOption(index?: number): void;
     /**
-     * The adjust method for FASTTabs
-     * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
+     * 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.
+     *
+     * @internal
      */
-    adjust(adjustment: number): void;
-    private adjustForward;
-    private adjustBackward;
-    private moveToTabByIndex;
-    private focusTab;
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     /**
+     * Updates the freeform option with the provided value.
+     *
+     * @param value - the value to update the freeform option with
      * @internal
      */
-    connectedCallback(): void;
+    protected updateFreeformOption(value?: string): 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.
+ * A Field Custom HTML Element.
  *
  * @public
  */
-export declare class BaseTextArea extends FASTElement {
+export declare class BaseField 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}
+     * The slotted label elements.
      *
-     * @public
+     * @internal
      */
-    static readonly formAssociated = true;
+    labelSlot: Node[];
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * Updates attributes on the slotted label elements.
      *
-     * @internal
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
      */
-    elementInternals: ElementInternals;
+    protected labelSlotChanged(prev: Node[], next: Node[]): void;
     /**
-     * The `<label>` element.
+     * The slotted message elements. Filtered to only include elements with a `flag` attribute.
+     *
      * @internal
      */
-    labelEl: HTMLLabelElement;
+    messageSlot: Element[];
     /**
-     * The `<textarea>` element.
+     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     *
+     * @param prev - the previous list of slotted message elements
+     * @param next - the current list of slotted message elements
      * @internal
      */
-    controlEl: HTMLTextAreaElement;
+    messageSlotChanged(prev: Element[], next: Element[]): void;
     /**
+     * The slotted inputs.
+     *
      * @internal
+     * @privateRemarks
+     * This field is populated with the `children` directive in the template rather than `slotted`.
      */
-    autoSizerEl?: HTMLDivElement;
+    slottedInputs: SlottableInput[];
     /**
-     * The list of nodes that are assigned to the default slot.
+     * Sets the `input` property to the first slotted input.
+     *
+     * @param prev - The previous collection of inputs.
+     * @param next - The current collection of inputs.
      * @internal
      */
-    defaultSlottedNodes: Node[];
-    protected defaultSlottedNodesChanged(): void;
+    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
     /**
-     * The list of nodes that are assigned to the `label` slot.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
      * @internal
      */
-    labelSlottedNodes: Label[];
-    protected labelSlottedNodesChanged(): void;
-    private userInteracted;
-    private autoSizerObserver?;
-    private controlElAttrObserver;
-    private preConnectControlEl;
+    elementInternals: ElementInternals;
     /**
-     * Indicates the element's autocomplete state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
+     * Reference to the first slotted input.
      *
      * @public
-     * @remarks
-     * HTML Attribute: `autocomplete`
      */
-    autocomplete?: TextAreaAutocomplete;
+    input: SlottableInput;
     /**
-     * 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`.
+     * Updates the field's states and label properties when the assigned input changes.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `auto-resize`
+     * @param prev - the previous input
+     * @param next - the current input
      */
-    autoResize: boolean;
-    protected autoResizeChanged(): void;
+    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
     /**
-     * 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
+     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `dirname`
+     * @param e - the event object
+     * @internal
      */
-    dirName?: string;
+    changeHandler(e: Event): boolean | void;
     /**
-     * Sets the element's disabled state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+     * Redirects `click` events to the slotted input.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled`
+     * @param e - the event object
+     * @internal
      */
-    disabled: boolean;
-    protected disabledChanged(): void;
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
     /**
-     * Indicates whether the element displays a box shadow. This only has effect when `appearance` is set to be `filled-darker` or `filled-lighter`.
+     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `display-shadow`
+     * @param e - the focus event
+     * @internal
      */
-    displayShadow: boolean;
+    focusinHandler(e: FocusEvent): boolean | void;
     /**
-     * The id of a form to associate the element to.
+     * Removes the `focus-visible` state from the field when a slotted input loses focus.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `form`
+     * @param e - the focus event
+     * @internal
      */
-    initialForm?: string;
+    focusoutHandler(e: FocusEvent): boolean | void;
     /**
-     * The form element that’s associated to the element, or `null` if no form is associated.
+     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
      *
-     * @public
+     * @param e - the event object
+     * @internal
      */
-    get form(): HTMLFormElement | null;
+    invalidHandler(e: Event): boolean | void;
     /**
-     * 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
+     * Sets ARIA and form-related attributes on slotted label elements.
      *
-     * @public
+     * @internal
      */
-    get labels(): NodeList;
+    private setLabelProperties;
     /**
-     * The maximum number of characters a user can enter.
+     * Toggles the field's states based on the slotted input.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `maxlength`
+     * @internal
      */
-    maxLength?: number;
+    setStates(): void;
+    setValidationStates(): void;
+}
+
+/**
+ * A Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @public
+ */
+export declare class BaseProgressBar extends FASTElement {
     /**
-     * The minimum number of characters a user can enter.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `minlength`
+     * @internal
      */
-    minLength?: number;
+    elementInternals: ElementInternals;
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     *
+     * The validation state of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: `name`
+     * HTML Attribute: `validation-state`
      */
-    name: string;
+    validationState: ProgressBarValidationState | null;
     /**
-     * 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.
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    placeholder?: string;
+    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): 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
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `readonly`
+     * The value of the progress
+     * @internal
+     * HTML Attribute: `value`
      */
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
+    value?: number;
     /**
-     * The element's required attribute.
+     * Updates the percent complete when the `value` property changes.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `required`
+     * @internal
      */
-    required: boolean;
-    protected requiredChanged(): void;
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
     /**
-     * Indicates whether the element can be resized by end users.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `resize`
+     * The minimum value
+     * @internal
+     * HTML Attribute: `min`
      */
-    resize: TextAreaResize;
-    protected resizeChanged(prev: TextAreaResize | undefined, next: TextAreaResize | undefined): void;
+    min?: number;
     /**
-     * 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
+     * Updates the percent complete when the `min` property changes.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `spellcheck`
+     * @param prev - The previous min value
+     * @param next - The current min value
      */
-    spellcheck: boolean;
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
     /**
-     * The length of the current value.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#textLength | 'textLength'} property
-     *
-     * @public
+     * The maximum value
+     * @internal
+     * HTML Attribute: `max`
      */
-    get textLength(): number;
+    max?: number;
     /**
-     * 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
+     * Updates the percent complete when the `max` property changes.
      *
-     * @public
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
      */
-    get type(): 'textarea';
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
     /**
-     * The element's validity state.
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete(): number;
+    constructor();
+}
+
+/**
+ * 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 {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     * @internal
      */
-    get validity(): ValidityState;
+    elementInternals: ElementInternals;
     /**
-     * The validation message.
+     * The number of ratings.
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     * HTML Attribute: `count`
      */
-    get validationMessage(): string;
+    count?: number;
     /**
-     * Determines if the control can be submitted for constraint validation.
+     * The `viewBox` attribute of the icon <svg> element.
      *
      * @public
+     * @default `0 0 20 20`
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     * HTML Attribute: `icon-view-box`
      */
-    get willValidate(): boolean;
+    iconViewBox?: string;
     /**
-     * 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
+     * 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
-     * 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.
+     * HTML Attribute: `max`
      */
-    get defaultValue(): string;
-    set defaultValue(next: string);
+    max?: number;
     /**
-     * The value of the element.
+     * The value of the rating.
      *
      * @public
      * @remarks
-     * Reflects the `value` property.
-     */
-    get value(): string;
-    set value(next: string);
-    constructor();
-    /**
-     * @internal
+     * HTML Attribute: `value`
      */
-    connectedCallback(): void;
+    value?: number;
     /**
      * @internal
      */
-    disconnectedCallback(): void;
+    slottedIcon: HTMLElement[];
     /**
-     * Resets the value to its initial value when the form is reset.
-     *
      * @internal
      */
-    formResetCallback(): void;
+    slottedIconChanged(): void;
     /**
      * @internal
      */
-    formDisabledCallback(disabled: boolean): void;
+    private customIcon?;
+    private intlNumberFormatter;
+    constructor();
     /**
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     * Returns "count" as string, formatted according to the locale.
      *
      * @internal
      */
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    get formattedCount(): string;
     /**
-     * Checks the validity of the element and returns the result.
+     * Gets the selected value
      *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     * @protected
      */
-    checkValidity(): boolean;
+    protected getSelectedValue(): number;
     /**
-     * Reports the validity of the element.
+     * Gets the maximum icons to render
      *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     * @protected
      */
-    reportValidity(): boolean;
+    protected getMaxIcons(): number;
     /**
-     * Sets the custom validity message.
-     * @param message - The message to set
+     * Generates the icon SVG elements based on the "max" attribute.
      *
-     * @public
+     * @internal
      */
-    setCustomValidity(message: string | null): void;
+    generateIcons(): string;
+}
+
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class BaseSpinner extends FASTElement {
     /**
-     * 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/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    elementInternals: ElementInternals;
+    constructor();
+}
+
+/**
+ * A Tablist element that wraps a collection of tab elements
+ * @public
+ */
+export declare class BaseTablist extends FASTElement {
     /**
-     * Selects the content in the element.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @public
+     * @internal
      */
-    select(): void;
-    private setDefaultValue;
-    private bindEvents;
+    elementInternals: ElementInternals;
     /**
-     * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
+     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled.
      */
-    private getContent;
-    private observeControlElAttrs;
-    private setDisabledSideEffect;
-    private toggleUserValidityState;
-    private maybeCreateAutoSizerEl;
+    disabled: boolean;
     /**
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
+     *
      * @internal
      */
-    handleControlInput(): void;
-    /**
-     * @internal
-     */
-    handleControlChange(): 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 {
+    protected disabledChanged(prev: boolean, next: boolean): void;
     /**
-     * Indicates the element's autocomplete state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
-     *
+     * The orientation
      * @public
      * @remarks
-     * HTML Attribute: `autocomplete`
+     * HTML Attribute: orientation
      */
-    autocomplete?: string;
+    orientation: TablistOrientation;
     /**
-     * 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`
+     * @internal
      */
-    autofocus: boolean;
+    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
     /**
-     * The current value of the input.
+     * The id of the active tab
+     *
      * @public
      * @remarks
-     * HTML Attribute: `current-value`
+     * HTML Attribute: activeid
      */
-    currentValue: string;
+    activeid: 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;
+    protected activeidChanged(oldValue: string, newValue: string): void;
     /**
-     * The default slotted content. This is the content that appears in the text field label.
-     *
      * @internal
      */
-    defaultSlottedNodes: Node[];
+    tabs: HTMLElement[];
     /**
-     * Updates the control label visibility based on the presence of default slotted content.
-     *
      * @internal
      */
-    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    protected tabsChanged(): 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
-     *
+     * A reference to the active tab
      * @public
-     * @remarks
-     * HTML Attribute: `dirname`
      */
-    dirname?: string;
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private change;
+    private getActiveIndex;
     /**
-     * Sets the element's disabled state.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
+     * Function that is invoked whenever the selected tab or the tab collection changes.
      *
      * @public
-     * @remarks
-     * HTML Attribute: `disabled`
      */
-    disabled?: boolean;
+    protected setTabs(): void;
+    private getTabIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
     /**
-     * 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
-     *
+     * The adjust method for FASTTabs
      * @public
      * @remarks
-     * HTML Attribute: `form`
+     * This method allows the active index to be adjusted by numerical increments
      */
-    formAttribute?: string;
+    adjust(adjustment: number): void;
+    private activateTabByIndex;
+    private focusTab;
     /**
-     * The initial value of the input.
-     *
+     * @internal
+     */
+    connectedCallback(): void;
+}
+
+/**
+ * A Tabs component that wraps a collection of tab and tab panel elements.
+ *
+ * @public
+ */
+declare class BaseTabs extends FASTElement {
+    /**
+     * The orientation
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: orientation
      */
-    initialValue: string;
+    orientation: TabsOrientation;
     /**
-     * Sets the value of the element to the initial value.
-     *
      * @internal
      */
-    initialValueChanged(): void;
+    orientationChanged(): void;
     /**
-     * Allows associating a `<datalist>` to the element by ID.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
+     * The id of the active tab
      *
      * @public
      * @remarks
-     * HTML Attribute: `list`
+     * HTML Attribute: activeid
      */
-    list: string;
+    activeid: string;
     /**
-     * The maximum number of characters a user can enter.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `maxlength`
+     * @internal
      */
-    maxlength: number;
+    activeidChanged(oldValue: string, newValue: string): void;
     /**
-     * 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`
+     * @internal
      */
-    minlength: number;
+    tabs: HTMLElement[];
     /**
-     * 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`
+     * @internal
      */
-    multiple: boolean;
+    tabsChanged(): void;
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `name`
+     * @internal
      */
-    name: string;
+    tabpanels: HTMLElement[];
     /**
-     * A regular expression that the value must match to pass validation.
-     *
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * A reference to the active tab
      * @public
-     * @remarks
-     * HTML Attribute: `pattern`
      */
-    pattern: string;
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
     /**
-     * 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
+     * Function that is invoked whenever the selected tab or the tab collection changes.
      *
      * @public
-     * @remarks
-     * HTML Attribute: `placeholder`
-     * This attribute is not a valid substitute for a label.
      */
-    placeholder: string;
+    protected setTabs(): void;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
     /**
-     * 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 adjust method for FASTTabs
      * @public
      * @remarks
-     * HTML Attribute: `readonly`
+     * This method allows the active index to be adjusted by numerical increments
      */
-    readOnly?: boolean;
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
     /**
-     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
-     *
      * @internal
      */
-    readOnlyChanged(): void;
+    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 element's required attribute.
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
      *
      * @public
-     * @remarks
-     * HTML Attribute: `required`
      */
-    required: boolean;
+    static readonly formAssociated = true;
     /**
-     * Syncs the element's internal `aria-required` state with the `required` attribute.
-     *
-     * @param previous - the previous required state
-     * @param next - the current required state
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
-    requiredChanged(previous: boolean, next: boolean): void;
+    elementInternals: ElementInternals;
     /**
-     * Sets the width of the element to a specified number of characters.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `size`
+     * The `<label>` element.
+     * @internal
      */
-    size: number;
+    labelEl: HTMLLabelElement;
     /**
-     * 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
-     *
+     * The `<textarea>` element.
+     * @internal
+     */
+    controlEl: HTMLTextAreaElement;
+    /**
+     * @internal
+     */
+    autoSizerEl?: HTMLDivElement;
+    /**
+     * The list of nodes that are assigned to the default slot.
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    protected defaultSlottedNodesChanged(): void;
+    /**
+     * 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
+     *
      * @public
      * @remarks
-     * HTML Attribute: `spellcheck`
+     * HTML Attribute: `autocomplete`
      */
-    spellcheck: boolean;
+    autocomplete?: TextAreaAutocomplete;
     /**
-     * Allows setting a type or mode of text.
+     * 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: `type`
+     * HTML Attribute: `auto-resize`
      */
-    type: TextInputType;
+    autoResize: boolean;
+    protected autoResizeChanged(): void;
     /**
-     * A reference to the internal input element.
+     * 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
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `dirname`
      */
-    control: HTMLInputElement;
+    dirName?: string;
     /**
-     * A reference to the internal label element.
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    controlLabel: HTMLLabelElement;
+    disabled: boolean;
+    protected disabledChanged(): void;
     /**
-     * Indicates that the value has been changed by the user.
+     * Indicates whether the element displays a box shadow. This only has effect when `appearance` is set to be `filled-darker` or `filled-lighter`.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `display-shadow`
      */
-    private dirtyValue;
+    displayShadow: boolean;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The id of a form to associate the element to.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
      */
-    elementInternals: ElementInternals;
+    initialForm?: string;
     /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     * The form element that’s associated to the element, or `null` if no form is associated.
      *
      * @public
      */
-    static readonly formAssociated = true;
+    get form(): HTMLFormElement | null;
     /**
-     * The element's validity state.
+     * 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
+     */
+    get labels(): NodeList;
+    /**
+     * The maximum number of characters a user can enter.
      *
      * @public
      * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     * HTML Attribute: `maxlength`
      */
-    get validity(): ValidityState;
+    maxLength?: number;
     /**
-     * The validation message.
+     * 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
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     * HTML Attribute: `minlength`
      */
-    get validationMessage(): string;
+    minLength?: number;
     /**
-     * The current value of the input.
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
      * @public
+     * @remarks
+     * HTML Attribute: `name`
      */
-    get value(): string;
-    set value(value: string);
+    name: string;
     /**
-     * Determines if the control can be submitted for constraint validation.
+     * 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
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     * HTML Attribute: `placeholder`
+     * This attribute is not a valid substitute for a label.
      */
-    get willValidate(): boolean;
+    placeholder?: string;
     /**
-     * The associated form element.
+     * 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
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     * HTML Attribute: `readonly`
      */
-    get form(): HTMLFormElement | null;
+    readOnly: boolean;
+    protected readOnlyChanged(): void;
     /**
-     * Handles the internal control's `keypress` event.
+     * The element's required attribute.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
      */
-    beforeinputHandler(e: InputEvent): boolean | void;
+    required: boolean;
+    protected requiredChanged(): void;
     /**
-     * Change event handler for inner control.
+     * Indicates whether the element can be resized by end users.
      *
-     * @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.
+     * @public
+     * @remarks
+     * HTML Attribute: `resize`
      */
-    changeHandler(e: InputEvent): boolean | void;
+    resize: TextAreaResize;
+    protected resizeChanged(prev: TextAreaResize | undefined, next: TextAreaResize | undefined): void;
     /**
-     * Checks the validity of the element and returns the result.
+     * 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
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     * HTML Attribute: `spellcheck`
      */
-    checkValidity(): boolean;
+    spellcheck: boolean;
     /**
-     * Clicks the inner control when the component is clicked.
+     * The length of the current value.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#textLength | 'textLength'} property
      *
-     * @param e - the event object
+     * @public
      */
-    clickHandler(e: MouseEvent): boolean | void;
-    connectedCallback(): void;
+    get textLength(): number;
     /**
-     * Focuses the inner control when the component is focused.
+     * 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
      *
-     * @param e - the event object
      * @public
      */
-    focusinHandler(e: FocusEvent): boolean | void;
+    get type(): 'textarea';
     /**
-     * Resets the value to its initial value when the form is reset.
+     * The element's validity state.
      *
-     * @internal
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
      */
-    formResetCallback(): void;
+    get validity(): ValidityState;
     /**
-     * Handles implicit form submission when the user presses the "Enter" key.
+     * The validation message.
      *
-     * @internal
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
      */
-    private implicitSubmit;
+    get validationMessage(): string;
     /**
-     * Handles the internal control's `input` event.
+     * Determines if the control can be submitted for constraint validation.
      *
-     * @internal
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
      */
-    inputHandler(e: InputEvent): boolean | void;
+    get willValidate(): boolean;
     /**
-     * Handles the internal control's `keydown` event.
+     * 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
      *
-     * @param e - the event object
-     * @internal
+     * @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.
      */
-    keydownHandler(e: KeyboardEvent): boolean | void;
+    get defaultValue(): string;
+    set defaultValue(next: string);
     /**
-     * Selects all the text in the text field.
+     * The value of the element.
      *
      * @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
+     * @remarks
+     * Reflects the `value` property.
+     */
+    get value(): string;
+    set value(next: string);
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Resets the value to its initial value when the form is reset.
      *
+     * @internal
      */
-    select(): void;
+    formResetCallback(): void;
     /**
-     * Sets the custom validity message.
-     * @param message - The message to set
+     * @internal
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * 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;
+    /**
+     * 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.
      *
@@ -2828,11 +2822,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.
      *
@@ -2843,10 +2838,430 @@ export declare class BaseTextInput extends FASTElement {
      * @internal
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
-}
-
-/**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
+    /**
+     * Selects the content in the element.
+     *
+     * @public
+     */
+    select(): void;
+    private setDefaultValue;
+    private bindEvents;
+    /**
+     * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
+     */
+    private getContent;
+    private observeControlElAttrs;
+    private setDisabledSideEffect;
+    private toggleUserValidityState;
+    private maybeCreateAutoSizerEl;
+    /**
+     * @internal
+     */
+    handleControlInput(): void;
+    /**
+     * @internal
+     */
+    handleControlChange(): 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 {
+    /**
+     * 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`
+     */
+    autocomplete?: string;
+    /**
+     * 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
+     */
+    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;
+    /**
+     * 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`
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * The initial value of the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the element to the initial value.
+     *
+     * @internal
+     */
+    initialValueChanged(): void;
+    /**
+     * Allows associating a `<datalist>` to the element by ID.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `list`
+     */
+    list: string;
+    /**
+     * The maximum number of characters a user can enter.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `maxlength`
+     */
+    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
+     *
+     * @public
+     * @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;
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * 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
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `placeholder`
+     * This attribute is not a valid substitute for a label.
+     */
+    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
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `readonly`
+     */
+    readOnly?: boolean;
+    /**
+     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
+     *
+     * @internal
+     */
+    readOnlyChanged(): void;
+    /**
+     * The element's required attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
+     */
+    required: boolean;
+    /**
+     * 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`
+     */
+    size: number;
+    /**
+     * 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;
+    /**
+     * Allows setting a type or mode of text.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
+     */
+    type: TextInputType;
+    /**
+     * A reference to the internal input element.
+     *
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * 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;
+}
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public
  */
 export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
@@ -5811,279 +6226,737 @@ export declare class Divider extends BaseDivider {
  * Align content within divider
  * @public
  */
-export declare const DividerAlignContent: {
-    readonly center: "center";
+export declare const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
+
+/**
+ * The types for DividerAlignContent
+ * @public
+ */
+export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+
+/**
+ * DividerAppearance - divider color defined by a design token alias.
+ * @public
+ */
+export declare const DividerAppearance: {
+    readonly strong: "strong";
+    readonly brand: "brand";
+    readonly subtle: "subtle";
+};
+
+/**
+ * The types for Appearance
+ * @public
+ */
+export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+
+/**
+ * The Fluent Divider Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-divider\>
+ */
+export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
+
+/**
+ * Divider orientation
+ * @public
+ */
+export declare const DividerOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * Divider roles
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+/**
+ * The types for Divider orientation
+ * @public
+ */
+export declare type DividerOrientation = ValuesOf<typeof DividerOrientation>;
+
+/**
+ * Divider roles
+ * @public
+ */
+export declare const DividerRole: {
+    /**
+     * The divider semantically separates content
+     */
+    readonly separator: "separator";
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    readonly presentation: "presentation";
+};
+
+/**
+ * The types for Divider roles
+ * @public
+ */
+export declare type DividerRole = ValuesOf<typeof DividerRole>;
+
+/** Divider styles
+ * @public
+ */
+export declare const DividerStyles: ElementStyles;
+
+/**
+ * Template for the Divider component
+ * @public
+ */
+export declare const DividerTemplate: ElementViewTemplate<Divider>;
+
+/**
+ * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
+ * @extends FASTElement
+ *
+ * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
+ * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
+ * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
+ * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
+ * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
+ *
+ * @csspart dialog - The dialog element of the drawer.
+ *
+ * @slot - Default slot for the content of the drawer.
+ *
+ * @fires toggle - Event emitted after the dialog's open state changes.
+ * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ *
+ * @method show - Method to show the drawer.
+ * @method hide - Method to hide the drawer.
+ * @method clickHandler - Handles click events on the drawer.
+ * @method emitToggle - Emits an event after the dialog's open state changes.
+ * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
+ *
+ * @summary A component that provides a drawer for displaying content in a side panel.
+ *
+ * @tag fluent-drawer
+ */
+export declare class Drawer extends FASTElement {
+    /**
+     * @public
+     * Determines whether the drawer should be displayed as modal or non-modal
+     * When rendered as a modal, an overlay is applied over the rest of the view.
+     */
+    type: DrawerType;
+    /**
+     * @public
+     * The ID of the element that labels the drawer.
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The ID of the element that describes the drawer.
+     */
+    ariaDescribedby?: string;
+    /**""
+     * @public
+     * @defaultValue start
+     * Sets the position of the drawer (start/end).
+     */
+    position: DrawerPosition;
+    /**
+     * @public
+     * @defaultValue medium
+     * Sets the size of the drawer (small/medium/large).
+     */
+    size: DrawerSize;
+    /**
+     * @public
+     * The dialog element.
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitToggle: () => void;
+    /**
+     * @public
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitBeforeToggle: () => void;
+    /**
+     * @public
+     * Method to show the drawer
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the drawer
+     */
+    hide(): void;
+    /**
+     * @public
+     * @param event - The click event
+     * @returns boolean - Always returns true
+     * Handles click events on the drawer.
+     */
+    clickHandler(event: Event): boolean;
+}
+
+/**
+ * A DrawerBody component to layout drawer content
+ * @extends FASTElement
+ *
+ * @slot title - The title slot
+ * @slot close - The close button slot
+ * @slot - The default content slot
+ * @slot footer - The footer slot
+ *
+ * @csspart header - The header part of the drawer
+ * @csspart content - The content part of the drawer
+ * @csspart footer - The footer part of the drawer
+ *
+ * @summary A component that provides a drawer body for displaying content in a side panel.
+ *
+ * @tag fluent-drawer-body
+ */
+export declare class DrawerBody extends FASTElement {
+}
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-drawer>
+ */
+export declare const DrawerBodyDefinition: FASTElementDefinition<typeof DrawerBody>;
+
+/** Drawer styles
+ * @public
+ */
+export declare const DrawerBodyStyles: ElementStyles;
+
+export declare const DrawerBodyTemplate: ElementViewTemplate<DrawerBody>;
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-drawer>
+ */
+export declare const DrawerDefinition: FASTElementDefinition<typeof Drawer>;
+
+/**
+ * A drawer can be positioned on the left or right side of the viewport.
+ */
+export declare const DrawerPosition: {
     readonly start: "start";
     readonly end: "end";
 };
 
 /**
- * The types for DividerAlignContent
+ * The position of the drawer.
  * @public
  */
-export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+export declare type DrawerPosition = ValuesOf<typeof DrawerPosition>;
 
 /**
- * DividerAppearance - divider color defined by a design token alias.
- * @public
+ * A drawer can be different sizes
  */
-export declare const DividerAppearance: {
-    readonly strong: "strong";
-    readonly brand: "brand";
-    readonly subtle: "subtle";
+export declare const DrawerSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly full: "full";
 };
 
 /**
- * The types for Appearance
+ * The size of the drawer.
  * @public
  */
-export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+export declare type DrawerSize = ValuesOf<typeof DrawerSize>;
 
-/**
- * The Fluent Divider Element
- *
+/** Drawer styles
  * @public
- * @remarks
- * HTML Element: \<fluent-divider\>
  */
-export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
+export declare const DrawerStyles: ElementStyles;
+
+export declare const DrawerTemplate: ElementViewTemplate<Drawer>;
 
 /**
- * Divider orientation
- * @public
+ * A drawer can be different sizes
  */
-export declare const DividerOrientation: {
-    readonly horizontal: "horizontal"; /**
-    * Divider roles
-    * @public
-    */
-    readonly vertical: "vertical";
+export declare const DrawerType: {
+    readonly nonModal: "non-modal";
+    readonly modal: "modal";
+    readonly inline: "inline";
 };
 
 /**
- * The types for Divider orientation
+ * The size of the drawer.
  * @public
  */
-export declare type DividerOrientation = ValuesOf<typeof DividerOrientation>;
+export declare type DrawerType = ValuesOf<typeof DrawerType>;
 
 /**
- * Divider roles
+ * The Fluent Dropdown Element. Implements {@link @microsoft/fast-foundation#BaseDropdown}.
+ *
+ * @slot - The default slot. Accepts a {@link (Listbox:class)} element.
+ * @slot indicator - The indicator slot.
+ * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
+ *
  * @public
  */
-export declare const DividerRole: {
+export declare class Dropdown extends BaseDropdown {
     /**
-     * The divider semantically separates content
+     * Static property for the anchor positioning fallback observer. The observer is used to flip the listbox when it is
+     * out of view.
+     * @remarks This is only used when the browser does not support CSS anchor positioning.
+     * @internal
      */
-    readonly separator: "separator";
+    private static AnchorPositionFallbackObserver;
     /**
-     * The divider has no semantic value and is for visual presentation only.
+     * The appearance of the dropdown.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
      */
-    readonly presentation: "presentation";
-};
+    appearance: DropdownAppearance;
+    /**
+     * Swaps appearance states when the appearance property changes.
+     *
+     * @param prev - the previous appearance state
+     * @param next - the current appearance state
+     * @internal
+     */
+    appearanceChanged(prev: DropdownAppearance | undefined, next: DropdownAppearance | undefined): void;
+    /**
+     * The size of the dropdown.
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: DropdownSize;
+    /**
+     * Swaps size states when the size property changes.
+     *
+     * @param prev - the previous size state
+     * @param next - the current size state
+     * @internal
+     */
+    sizeChanged(prev: DropdownSize | undefined, next: DropdownSize | undefined): void;
+    connectedCallback(): void;
+    constructor();
+    disconnectedCallback(): void;
+    /**
+     * Handles the connected event for the listbox.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    private listboxConnectedHandler;
+    /**
+     * Adds or removes the window event listener based on the open state.
+     *
+     * @param prev - the previous open state
+     * @param next - the current open state
+     * @internal
+     */
+    openChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
+     * viewport bounds. One static observer is used for all dropdowns.
+     *
+     * @internal
+     */
+    private anchorPositionFallback;
+}
 
 /**
- * The types for Divider roles
+ * Values for the `appearance` attribute of the {@link (Dropdown:class)} component.
  * @public
  */
-export declare type DividerRole = ValuesOf<typeof DividerRole>;
+export declare const DropdownAppearance: {
+    filledDarker: string;
+    filledLighter: string;
+    outline: string;
+    transparent: string;
+};
 
-/** Divider styles
+/** @public */
+export declare type DropdownAppearance = ValuesOf<typeof DropdownAppearance>;
+
+/**
+ * The template partial for the dropdown button element. This template is used when the `type` property is set to "dropdown".
+ *
  * @public
+ * @remarks
+ * Since the button element must be present in the light DOM for ARIA to function correctly, this template should not be
+ * overridden.
+ * @see {@link BaseDropdown.insertControl}
  */
-export declare const DividerStyles: ElementStyles;
+export declare const dropdownButtonTemplate: ViewTemplate<BaseDropdown, any>;
 
 /**
- * Template for the Divider component
+ * The Fluent Dropdown Element.
+ *
  * @public
+ * @remarks
+ * HTML Element: `<fluent-dropdown>`
  */
-export declare const DividerTemplate: ElementViewTemplate<Divider>;
+export declare const DropdownDefinition: FASTElementDefinition<typeof Dropdown>;
 
 /**
- * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
- * @extends FASTElement
- *
- * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
- * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
- * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
- * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
- * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
- *
- * @csspart dialog - The dialog element of the drawer.
+ * The template partial for the dropdown input element. This template is used when the `type` property is set to "combobox".
  *
- * @slot - Default slot for the content of the drawer.
+ * @public
+ * @remarks
+ * Since the input element must be present in the light DOM for ARIA to function correctly, this template should not be
+ * overridden.
+ * @see {@link BaseDropdown.insertControl}
+ */
+export declare const dropdownInputTemplate: ViewTemplate<BaseDropdown, any>;
+
+/**
+ * A DropdownOption Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#option | ARIA option } role.
  *
- * @fires toggle - Event emitted after the dialog's open state changes.
- * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot for the option's content.
+ * @slot checked-indicator - The checked indicator.
+ * @slot description - Optional description content.
  *
- * @method show - Method to show the drawer.
- * @method hide - Method to hide the drawer.
- * @method clickHandler - Handles click events on the drawer.
- * @method emitToggle - Emits an event after the dialog's open state changes.
- * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
+ * @remarks
+ * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
+ * itself handles form association and value submission, rather than its parent Dropdown element. In this way, the
+ * Option element is a variation of the Checkbox element that is specifically designed for use in the Dropdown element.
  *
- * @summary A component that provides a drawer for displaying content in a side panel.
+ * This class is named `DropdownOption` to avoid conflicts with the native `Option` global. Related constructs are also
+ * titled with `DropdownOption` to maintain consistency.
  *
- * @tag fluent-drawer
+ * @public
  */
-export declare class Drawer extends FASTElement {
+export declare class DropdownOption extends FASTElement implements Start {
     /**
+     * Indicates that the option is active.
+     *
      * @public
-     * Determines whether the drawer should be displayed as modal or non-modal
-     * When rendered as a modal, an overlay is applied over the rest of the view.
      */
-    type: DrawerType;
+    active: boolean;
+    /**
+     * Changes the active state of the option when the active property changes.
+     *
+     * @param prev - the previous active state
+     * @param next - the current active state
+     * @internal
+     */
+    protected activeChanged(prev: boolean, next: boolean): void;
+    /**
+     * The current selected state of the option.
+     *
+     * @internal
+     */
+    currentSelected?: boolean;
+    /**
+     * Sets the selected property to match the currentSelected state.
+     *
+     * @param prev - the previous selected state
+     * @param next - the current selected state
+     * @internal
+     */
+    currentSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial selected state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    defaultSelected?: boolean;
+    /**
+     * Updates the selected state when the `selected` attribute is changed, unless the selected state has been changed by the user.
+     *
+     * @param prev - The previous initial selected state
+     * @param next - The current initial selected state
+     * @internal
+     */
+    protected defaultSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The collection of slotted description elements.
+     *
+     * @internal
+     */
+    descriptionSlot: Node[];
+    /**
+     * Changes the description state of the option when the description slot changes.
+     *
+     * @param prev - the previous collection of description elements
+     * @param next - the current collection of description elements
+     * @internal
+     */
+    descriptionSlotChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * The current disabled state of the option.
+     *
+     * @public
+     */
+    disabled?: boolean;
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial disabled state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabledAttribute?: boolean;
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): 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
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * Indicates that the option value should sync with the value of the dropdown's control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `freeform`
+     */
+    freeform?: boolean;
+    /**
+     * The id of the option. If not provided, a unique id will be assigned.
+     *
+     * @override
+     * @public
+     * @remarks
+     * HTML Attribute: `id`
+     */
+    id: string;
+    /**
+     * The initial value of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the option when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * Indicates that the option is in a multiple selection mode context.
+     * @public
+     */
+    multiple: boolean;
+    /**
+     * Updates the multiple state of the option when the multiple property changes.
+     *
+     * @param prev - the previous multiple state
+     * @param next - the current multiple state
+     */
+    multipleChanged(prev: boolean, next: boolean): void;
+    /**
+     * The name of the option. This option's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * Reference to the start slot element.
+     *
+     * @internal
+     */
+    start: HTMLSlotElement;
+    /**
+     * The text to display in the dropdown control when the option is selected.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `text`
+     */
+    textAttribute?: string;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
+     * The associated `<form>` element.
+     *
      * @public
-     * The ID of the element that labels the drawer.
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
      */
-    ariaLabelledby?: string;
+    get form(): HTMLFormElement | null;
     /**
-     * @public
-     * The ID of the element that describes the drawer.
+     * The collection of slotted `output` elements, used to display the value when the option is freeform.
+     *
+     * @internal
      */
-    ariaDescribedby?: string;
-    /**""
+    freeformOutputs?: HTMLOutputElement[];
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
      * @public
-     * @defaultValue start
-     * Sets the position of the drawer (start/end).
      */
-    position: DrawerPosition;
+    static formAssociated: boolean;
     /**
+     * A reference to all associated `<label>` elements.
+     *
      * @public
-     * @defaultValue medium
-     * Sets the size of the drawer (small/medium/large).
      */
-    size: DrawerSize;
+    get labels(): ReadonlyArray<HTMLLabelElement>;
     /**
+     * The option's current selected state.
+     *
      * @public
-     * The dialog element.
      */
-    dialog: HTMLDialogElement;
+    get selected(): boolean;
+    set selected(next: boolean);
     /**
+     * The display text of the option.
+     *
      * @public
-     * Method to emit an event after the dialog's open state changes
-     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     * @remarks
+     * When the option is freeform, the text is the value of the option.
      */
-    emitToggle: () => void;
+    get text(): string;
     /**
-     * @public
-     * Method to emit an event before the dialog's open state changes
-     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     * The internal value of the option.
+     *
+     * @internal
      */
-    emitBeforeToggle: () => void;
+    private _value;
     /**
+     * The current value of the option.
+     *
      * @public
-     * Method to show the drawer
      */
-    show(): void;
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    constructor();
     /**
-     * @public
-     * Method to hide the drawer
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
      */
-    hide(): void;
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
     /**
+     * Toggles the selected state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
      * @public
-     * @param event - The click event
-     * @returns boolean - Always returns true
-     * Handles click events on the drawer.
      */
-    clickHandler(event: Event): boolean;
+    toggleSelected(force?: boolean): void;
 }
 
 /**
- * A DrawerBody component to layout drawer content
- * @extends FASTElement
- *
- * @slot title - The title slot
- * @slot close - The close button slot
- * @slot - The default content slot
- * @slot footer - The footer slot
- *
- * @csspart header - The header part of the drawer
- * @csspart content - The content part of the drawer
- * @csspart footer - The footer part of the drawer
- *
- * @summary A component that provides a drawer body for displaying content in a side panel.
+ * The Fluent Option Element.
  *
- * @tag fluent-drawer-body
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-option>`
  */
-export declare class DrawerBody extends FASTElement {
-}
+export declare const DropdownOptionDefinition: FASTElementDefinition<typeof DropdownOption>;
 
 /**
+ * The options for the {@link DropdownOption} component.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-drawer>
  */
-export declare const DrawerBodyDefinition: FASTElementDefinition<typeof DrawerBody>;
+export declare type DropdownOptionOptions = StartOptions<DropdownOption> & {
+    checkedIndicator?: StaticallyComposableHTML<DropdownOption>;
+};
 
-/** Drawer styles
+/**
+ * Template options for the {@link (Dropdown:class)} component.
  * @public
  */
-export declare const DrawerBodyStyles: ElementStyles;
-
-export declare const DrawerBodyTemplate: ElementViewTemplate<DrawerBody>;
+export declare type DropdownOptions = {
+    indicator?: StaticallyComposableHTML<BaseDropdown>;
+};
 
 /**
+ * Styles for the {@link (DropdownOption:class)} component.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-drawer>
- */
-export declare const DrawerDefinition: FASTElementDefinition<typeof Drawer>;
-
-/**
- * A drawer can be positioned on the left or right side of the viewport.
  */
-export declare const DrawerPosition: {
-    readonly start: "start";
-    readonly end: "end";
-};
+export declare const DropdownOptionStyles: ElementStyles;
 
 /**
- * The position of the drawer.
+ * Template for the Option component.
  * @public
  */
-export declare type DrawerPosition = ValuesOf<typeof DrawerPosition>;
+export declare const DropdownOptionTemplate: ElementViewTemplate<DropdownOption>;
 
 /**
- * A drawer can be different sizes
+ * Values for the `size` attribute of the {@link (Dropdown:class)} component.
+ * @public
  */
-export declare const DrawerSize: {
+export declare const DropdownSize: {
     readonly small: "small";
     readonly medium: "medium";
     readonly large: "large";
-    readonly full: "full";
 };
 
+/** @public */
+export declare type DropdownSize = ValuesOf<typeof DropdownSize>;
+
 /**
- * The size of the drawer.
+ * Styles for the {@link (Dropdown:class)} component.
+ *
  * @public
  */
-export declare type DrawerSize = ValuesOf<typeof DrawerSize>;
+export declare const DropdownStyles: ElementStyles;
 
-/** Drawer styles
+/**
+ * Template for the Dropdown component.
+ *
  * @public
  */
-export declare const DrawerStyles: ElementStyles;
-
-export declare const DrawerTemplate: ElementViewTemplate<Drawer>;
+export declare const DropdownTemplate: ElementViewTemplate<BaseDropdown>;
 
 /**
- * A drawer can be different sizes
+ * Values  for the `type` attribute of the {@link (Dropdown:class)} component.
+ * @public
  */
-export declare const DrawerType: {
-    readonly nonModal: "non-modal";
-    readonly modal: "modal";
-    readonly inline: "inline";
+export declare const DropdownType: {
+    readonly combobox: "combobox";
+    readonly dropdown: "dropdown";
+    readonly select: "select";
 };
 
-/**
- * The size of the drawer.
- * @public
- */
-export declare type DrawerType = ValuesOf<typeof DrawerType>;
+/** @public */
+export declare type DropdownType = ValuesOf<typeof DropdownType>;
 
 /**
  * CSS custom property value for the {@link @fluentui/tokens#durationFast | `durationFast`} design token.
@@ -6133,6 +7006,14 @@ export declare const durationUltraFast = "var(--durationUltraFast)";
  */
 export declare const durationUltraSlow = "var(--durationUltraSlow)";
 
+/**
+ * A mixin class implementing end slots.
+ * @public
+ */
+declare class End {
+    end: HTMLSlotElement;
+}
+
 /**
  * End configuration options
  * @public
@@ -6459,6 +7340,36 @@ export declare const ImageStyles: ElementStyles;
  */
 export declare const ImageTemplate: ElementViewTemplate<Image_2>;
 
+/**
+ * Predicate function that determines if the element should be considered a dropdown.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a dropdown.
+ * @public
+ */
+export declare function isDropdown(element?: Node | null, tagName?: string): element is BaseDropdown;
+
+/**
+ * Predicate function that determines if the element should be considered an option.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is an option.
+ * @public
+ */
+export declare function isDropdownOption(value: Node | null, tagName?: string): value is DropdownOption;
+
+/**
+ * Predicate function that determines if the element should be considered a listbox.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a listbox.
+ * @public
+ */
+export declare function isListbox(element?: Node | null, tagName?: string): element is Listbox;
+
 /**
  * The base class used for constructing a fluent-label custom element
  * @public
@@ -6726,6 +7637,153 @@ export declare type LinkTarget = ValuesOf<typeof AnchorTarget>;
  */
 export declare const LinkTemplate: ElementViewTemplate<Link>;
 
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
+ *
+ * @slot - The default slot for the options.
+ * @emits connected - Dispatched when the element is connected to the DOM.
+ *
+ * @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 {
+    /**
+     * Sets the listbox ID to a unique value if one is not provided.
+     *
+     * @override
+     * @public
+     * @remarks
+     * HTML Attribute: `id`
+     */
+    id: string;
+    /**
+     * 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;
+}
+
+/**
+ * The Fluent Listbox Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-listbox>`
+ */
+export declare const ListboxDefinition: FASTElementDefinition<typeof Listbox>;
+
+/**
+ * Styles for the {@link (Listbox:class)} component.
+ *
+ * @public
+ */
+export declare const ListboxStyles: ElementStyles;
+
+/**
+ * Template for the Listbox component.
+ *
+ * @public
+ */
+export declare const ListboxTemplate: ElementViewTemplate<Listbox>;
+
+/**
+ * Generates a template for the {@link (Dropdown:class)} component.
+ *
+ * @param options - The {@link (DropdownOptions:interface)} to use for generating the template.
+ * @returns The template object.
+ *
+ * @public
+ */
+export declare function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
+
 /**
  * An abstract behavior to react to media queries. Implementations should implement
  * the `constructListener` method to perform some action based on media query changes.
@@ -8915,12 +9973,20 @@ export declare const SpinnerStyles: ElementStyles;
 
 export declare const SpinnerTemplate: ViewTemplate<Spinner, any>;
 
+/**
+ * A mixin class implementing start slots.
+ * @public
+ */
+declare class Start {
+    start: HTMLSlotElement;
+}
+
 /**
  * A mixin class implementing start and end slots.
  * These are generally used to decorate text elements with icons or other visual indicators.
  * @public
  */
-export declare class StartEnd {
+export declare class StartEnd implements Start, End {
     start: HTMLSlotElement;
     end: HTMLSlotElement;
 }
@@ -8945,7 +10011,7 @@ export declare type StartOptions<TSource = any, TParent = any> = {
  *
  * @public
  */
-export declare function startSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+export declare function startSlotTemplate<TSource extends Pick<StartEnd, 'start'> = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;
 
 /**
  * A value that can be statically composed into a