@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/web-components.d.ts

@@ -1,14 +1,10 @@
 import { CaptureType } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
-import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
-import { FASTElementDefinition } from '@microsoft/fast-element';
-import type { HostBehavior } from '@microsoft/fast-element';
-import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
-import { Orientation } from '@microsoft/fast-web-utilities';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 import { SyntheticViewTemplate } from '@microsoft/fast-element';
 import { ViewTemplate } from '@microsoft/fast-element';
 
@@ -19,7 +15,7 @@ import { ViewTemplate } from '@microsoft/fast-element';
  * @tag fluent-accordion
  *
  * @slot - The default slot for the accordion items
- * @fires change - Fires a custom 'change' event when the active item changes
+ * @fires { Event } change - Fires a custom 'change' event when the active item changes
  *
  * @public
  */
@@ -33,7 +29,7 @@ export declare class Accordion extends FASTElement {
      * HTML attribute: expand-mode
      */
     expandmode: AccordionExpandMode;
-    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
+    expandmodeChanged(prev: AccordionExpandMode | undefined, next: AccordionExpandMode): void;
     /**
      * @internal
      */
@@ -46,6 +42,11 @@ export declare class Accordion extends FASTElement {
      * @internal
      */
     slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    /**
+     * Guard flag to prevent re-entrant calls to setSingleExpandMode.
+     * @internal
+     */
+    private _isAdjusting;
     /**
      * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
      * @internal
@@ -54,45 +55,43 @@ export declare class Accordion extends FASTElement {
     private activeItemIndex;
     /**
      * Find the first expanded item in the accordion
-     * @returns {void}
      */
     private findExpandedItem;
     /**
      * Resets event listeners and sets the `accordionItems` property
      * then rebinds event listeners to each non-disabled item
-     * @returns {void}
      */
     private setItems;
     /**
      * Checks if the accordion is in single expand mode
-     * @returns {boolean}
+     * @returns true if the accordion is in single expand mode.
      */
     private isSingleExpandMode;
     /**
      * Controls the behavior of the accordion in single expand mode
-     * @param expandedItem The item to expand in single expand mode
-     * @returns {void}
+     * @param expandedItem - The item to expand in single expand mode
      */
     private setSingleExpandMode;
     /**
      * Removes event listeners from the previous accordion items
-     * @param oldValue An array of the previous accordion items
+     * @param oldValue - An array of the previous accordion items
      */
     private removeItemListeners;
     /**
      * Changes the expanded state of the accordion item
-     * @param evt Click event
+     * @param evt - Click event
      * @returns
      */
     private expandedChangedHandler;
+    connectedCallback(): void;
 }
 
 /**
+ * The definition configuration for the `<fluent-accordion>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-accordion\>
  */
-export declare const accordionDefinition: FASTElementDefinition<typeof Accordion>;
+export declare const accordionDefinition: PartialFASTElementDefinition;
 
 /**
  * Expand mode for {@link Accordion}
@@ -113,6 +112,8 @@ export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
  * An Accordion Item Custom HTML Element.
  * Based on BaseAccordionItem and includes style and layout specific attributes
  *
+ * @tag fluent-accordion-item
+ *
  * @public
  */
 export declare class AccordionItem extends BaseAccordionItem {
@@ -152,12 +153,11 @@ export declare interface AccordionItem extends StartEnd {
 }
 
 /**
+ * The definition configuration for the `<fluent-accordion-item>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-accordion-item\>
  */
-export declare const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
+export declare const accordionItemDefinition: PartialFASTElementDefinition;
 
 /**
  * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
@@ -176,8 +176,6 @@ export declare type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemM
 /**
  * Accordion Item configuration options
  *
- * @tag fluent-accordion-item
- *
  * @public
  */
 export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
@@ -217,6 +215,8 @@ export declare const accordionTemplate: ElementViewTemplate<Accordion>;
  * An Anchor Custom HTML Element.
  * Based on BaseAnchor and includes style and layout specific attributes
  *
+ * @tag fluent-anchor-button
+ *
  * @public
  */
 export declare class AnchorButton extends BaseAnchor {
@@ -305,11 +305,11 @@ export declare const AnchorButtonAppearance: {
 export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
 
 /**
+ * The definition for the `<fluent-anchor-button>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-anchor-button\>
  */
-export declare const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
+export declare const AnchorButtonDefinition: PartialFASTElementDefinition;
 
 /**
  * An Anchor Button can be square, circular or rounded.
@@ -374,6 +374,8 @@ export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
  *
  * @tag fluent-avatar
  *
+ * @slot badge - Optional badge content displayed with the avatar.
+ *
  * @public
  */
 export declare class Avatar extends BaseAvatar {
@@ -537,13 +539,11 @@ export declare const AvatarColor: {
 export declare type AvatarColor = ValuesOf<typeof AvatarColor>;
 
 /**
- * The Fluent Avatar Element.
+ * The definition for the `<fluent-avatar>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
  */
-export declare const AvatarDefinition: FASTElementDefinition<typeof Avatar>;
+export declare const AvatarDefinition: PartialFASTElementDefinition;
 
 /**
  * A specific named color for the Avatar
@@ -636,13 +636,18 @@ export declare const AvatarTemplate: ElementViewTemplate<Avatar>;
 
 /**
  * The base class used for constructing a fluent-badge custom element
+ * @tag fluent-badge
+ *
+ * @slot - Content which can be provided inside the badge.
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export declare class Badge extends FASTElement {
     /**
      * The appearance the badge should have.
      *
-     * @tag fluent-badge
      *
      * @public
      * @remarks
@@ -723,12 +728,11 @@ export declare const BadgeColor: {
 export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
 
 /**
+ * The definition for the `<fluent-badge>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
  */
-export declare const BadgeDefinition: FASTElementDefinition<typeof Badge>;
+export declare const BadgeDefinition: PartialFASTElementDefinition;
 
 /**
  * A Badge can be square, circular or rounded.
@@ -817,14 +821,6 @@ export declare class BaseAccordionItem extends FASTElement {
      * HTML attribute: disabled
      */
     disabled: boolean;
-    /**
-     * The item ID
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: id
-     */
-    id: string;
     /**
      * @internal
      */
@@ -960,7 +956,7 @@ export declare class BaseAnchor extends FASTElement {
     keydownHandler(e: KeyboardEvent): boolean | void;
     /**
      * Handles navigation based on input
-     * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+     * If a modified activation requests a new tab, opens the href in a new window.
      * @internal
      */
     private handleNavigation;
@@ -980,16 +976,50 @@ export declare class BaseAnchor extends FASTElement {
  */
 export declare class BaseAvatar extends FASTElement {
     /**
-     * Signal to remove event listeners when the component is disconnected.
+     * Reference to the default slot element.
      *
      * @internal
      */
-    private abortSignal?;
+    defaultSlot: HTMLSlotElement;
     /**
-     * Reference to the default slot element.
+     * Handles changes to the default slot element reference.
+     *
+     * Toggles the `has-slotted` class on the slot element for browsers that do not
+     * support the `:has-slotted` CSS selector. Defers cleanup using
+     * `Updates.enqueue` to avoid DOM mutations during hydration that could
+     * corrupt binding markers.
+     *
      * @internal
      */
-    defaultSlot: HTMLSlotElement;
+    defaultSlotChanged(): void;
+    /**
+     * Reference to the monogram element that displays generated initials.
+     *
+     * @internal
+     */
+    monogram: HTMLElement;
+    /**
+     * Updates the monogram text content when the ref is captured.
+     *
+     * @internal
+     */
+    protected monogramChanged(): void;
+    /**
+     * The slotted content nodes assigned to the default slot.
+     *
+     * @internal
+     */
+    slottedDefaults: Node[];
+    /**
+     * Handles changes to the slotted default content.
+     *
+     * Normalizes the DOM, toggles the `has-slotted` class on the default slot element
+     * for browsers that do not support the `:has-slotted` CSS selector, and removes
+     * empty text nodes from the default slot to keep the DOM clean.
+     *
+     * @internal
+     */
+    protected slottedDefaultsChanged(): void;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -1004,24 +1034,44 @@ export declare class BaseAvatar extends FASTElement {
      * HTML Attribute: name
      */
     name?: string | undefined;
+    /**
+     * Handles changes to the name attribute.
+     * @internal
+     */
+    protected nameChanged(): void;
     /**
      * Provide custom initials rather than one generated via the name
      *
      * @public
      * @remarks
-     * HTML Attribute: name
+     * HTML Attribute: initials
      */
     initials?: string | undefined;
-    connectedCallback(): void;
+    /**
+     * Handles changes to the initials attribute.
+     * @internal
+     */
+    protected initialsChanged(): void;
     constructor();
-    disconnectedCallback(): void;
     /**
-     * Removes any empty text nodes from the default slot when the slotted content changes.
+     * Generates and sets the initials for the template.
+     * Subclasses should override this to provide custom initials logic.
+     *
+     * @internal
+     */
+    generateInitials(): string | void;
+    /**
+     * Updates the monogram element's text content with the generated initials.
+     *
+     * @internal
+     */
+    protected updateMonogram(): void;
+    /**
+     * Normalizes the DOM and removes empty text nodes from the default slot.
      *
-     * @param e - The event object
      * @internal
      */
-    slotchangeHandler(): void;
+    protected cleanupSlottedContent(): void;
 }
 
 /**
@@ -1036,15 +1086,6 @@ export declare class BaseAvatar extends FASTElement {
  * @public
  */
 export declare class BaseButton extends FASTElement {
-    /**
-     * Indicates the button should be focused when the page is loaded.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
     /**
      * Default slotted content.
      *
@@ -1060,7 +1101,15 @@ export declare class BaseButton extends FASTElement {
      * HTML Attribute: `disabled`
      */
     disabled: boolean;
-    protected disabledChanged(): void;
+    /**
+     * Handles changes to the disabled attribute. If the button is disabled, it
+     * should not be focusable.
+     *
+     * @param previous - the previous disabled value
+     * @param next - the new disabled value
+     * @internal
+     */
+    disabledChanged(): void;
     /**
      * Indicates that the button is focusable while disabled.
      *
@@ -1250,6 +1299,12 @@ export declare class BaseButton extends FASTElement {
      * @public
      */
     resetForm(): void;
+    /**
+     * Sets the `tabindex` attribute based on the disabled state of the button.
+     *
+     * @internal
+     */
+    protected setTabIndex(): void;
     /**
      * Submits the associated form.
      *
@@ -1261,18 +1316,12 @@ export declare class BaseButton extends FASTElement {
 /**
  * The base class for a component with a toggleable checked state.
  *
+ * @fires { Event } change - Fires a custom 'change' event when the checked state changes
+ * @fires { Event } input - Fires a custom 'input' event when the checked state changes
+ *
  * @public
  */
 export declare class BaseCheckbox extends FASTElement {
-    /**
-     * 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 element's current checked state.
      *
@@ -1555,6 +1604,61 @@ export declare class BaseCheckbox extends FASTElement {
     toggleChecked(force?: boolean): void;
 }
 
+/**
+ * The base class used for constructing a fluent-counter-badge custom element.
+ * Contains the count-related state and display logic, without any visual
+ * appearance attributes.
+ *
+ * @public
+ */
+export declare class BaseCounterBadge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The count to be displayed in the badge.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count: number;
+    /**
+     * The maximum count to be displayed before showing the overflow count (e.g. "99+").
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `overflow-count`
+     */
+    overflowCount: number;
+    /**
+     * Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `show-zero`
+     */
+    showZero: boolean;
+    /**
+     * Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be
+     * shown.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `dot`
+     */
+    dot: boolean;
+    /**
+     * The value to be displayed in the badge, which is determined by the `count`, `overflow-count`, and `show-zero` attributes.
+     *
+     * @public
+     */
+    get displayValue(): string | undefined;
+}
+
 /**
  * A Divider Custom HTML Element.
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
@@ -1616,6 +1720,8 @@ export declare class BaseDivider extends FASTElement {
  * @slot indicator - The indicator slot.
  * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
  *
+ * @fires { Event } change - Fires a custom 'change' event when the selected option changes
+ *
  * @public
  */
 export declare class BaseDropdown extends FASTElement {
@@ -2019,6 +2125,11 @@ export declare class BaseDropdown extends FASTElement {
      * @public
      */
     inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Guard flag to prevent reentrant calls to `insertControl`.
+     * @internal
+     */
+    private _insertingControl;
     /**
      * Inserts the control element based on the dropdown type.
      *
@@ -2027,6 +2138,31 @@ export declare class BaseDropdown extends FASTElement {
      * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
      */
     protected insertControl(): void;
+    /**
+     * The duration in milliseconds after the last character search keystroke before the search string is cleared.
+     */
+    protected searchTimeoutMs: number;
+    /**
+     * The accumulated search string used to match option labels by prefix when printable characters are typed.
+     *
+     * @internal
+     */
+    private searchString;
+    /**
+     * The timeout id used to reset the search string.
+     *
+     * @internal
+     */
+    private searchTimeout?;
+    /**
+     * Handles printable character input by moving {@link Dropdown#activeIndex} to the next option whose label matches the
+     * accumulated search string. When the string is a single character (or the same character repeated), matching
+     * options are cycled through; otherwise the string is treated as a prefix match.
+     *
+     * @param char - the printable character that was pressed
+     * @internal
+     */
+    private handleSearchCharacter;
     /**
      * Handles the keydown events for the dropdown.
      *
@@ -2083,6 +2219,7 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     protected updateFreeformOption(value?: string): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
@@ -2215,6 +2352,62 @@ export declare class BaseField extends FASTElement {
     setValidationStates(): void;
 }
 
+/**
+ * A Base MenuList Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @public
+ */
+export declare class BaseMenuList extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * @internal
+     */
+    items: HTMLElement[];
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    protected menuChildren: HTMLElement[] | undefined;
+    protected menuItems: MenuItem[] | undefined;
+    private static focusableElementRoles;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    private static elementIndent;
+    protected setItems(): void;
+    /**
+     * Method for Observable changes to the hidden attribute of child elements
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Handle change from child MenuItem element and set radio group behavior
+     */
+    private changedMenuItemHandler;
+    /**
+     * check if the item is a menu item
+     */
+    protected isMenuItemElement(el: Element): el is MenuItem;
+}
+
 /**
  * A Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
@@ -2222,8 +2415,17 @@ export declare class BaseField extends FASTElement {
  * @public
  */
 export declare class BaseProgressBar extends FASTElement {
-    /** @internal */
-    indicator: HTMLElement;
+    /**
+     * Reference to the indicator element which visually represents the progress.
+     *
+     * @internal
+     */
+    indicator?: HTMLElement;
+    /**
+     * Updates the indicator width after the element is connected to the DOM via the template.
+     * @internal
+     */
+    protected indicatorChanged(): void;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -2232,8 +2434,11 @@ export declare class BaseProgressBar extends FASTElement {
     elementInternals: ElementInternals;
     /**
      * The validation state of the progress bar
-     * @public
+     * The validation state of the progress bar
+     *
      * HTML Attribute: `validation-state`
+     *
+     * @public
      */
     validationState: ProgressBarValidationState | null;
     /**
@@ -2244,8 +2449,11 @@ export declare class BaseProgressBar extends FASTElement {
     validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
     /**
      * The value of the progress
-     * @internal
+     * The value of the progress
+     *
      * HTML Attribute: `value`
+     *
+     * @public
      */
     value?: number;
     /**
@@ -2256,8 +2464,11 @@ export declare class BaseProgressBar extends FASTElement {
     protected valueChanged(prev: number | undefined, next: number | undefined): void;
     /**
      * The minimum value
-     * @internal
+     * The minimum value
+     *
      * HTML Attribute: `min`
+     *
+     * @public
      */
     min?: number;
     /**
@@ -2269,8 +2480,11 @@ export declare class BaseProgressBar extends FASTElement {
     protected minChanged(prev: number | undefined, next: number | undefined): void;
     /**
      * The maximum value
-     * @internal
+     * The maximum value
+     *
      * HTML Attribute: `max`
+     *
+     * @public
      */
     max?: number;
     /**
@@ -2282,313 +2496,297 @@ export declare class BaseProgressBar extends FASTElement {
      */
     protected maxChanged(prev: number | undefined, next: number | undefined): void;
     constructor();
-    connectedCallback(): void;
-    private setIndicatorWidth;
+    /**
+     * Sets the width of the indicator element based on the value, min, and max
+     * properties. If the browser supports `width: attr(value)`, this method does
+     * nothing and allows CSS to handle the width.
+     *
+     * @internal
+     */
+    protected setIndicatorWidth(): void;
 }
 
 /**
- * The base class used for constructing a fluent-rating-display custom element
+ * A Base Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
  *
- * @slot icon - SVG element used as the rating icon
+ * @fires { Event } change - Fires a custom 'change' event when the checked radio changes
  *
  * @public
  */
-export declare class BaseRatingDisplay extends FASTElement {
-    private numberFormatter;
+export declare class BaseRadioGroup extends FASTElement {
+    private isNavigating;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The index of the checked radio, scoped to the enabled radios.
      *
      * @internal
      */
-    elementInternals: ElementInternals;
-    /** @internal */
-    iconSlot: HTMLSlotElement;
-    protected defaultCustomIconViewBox: string;
+    protected checkedIndex: number;
     /**
-     * The element that displays the rating icons.
+     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
+     *
+     * @param prev - the previous index
+     * @param next - the current index
      * @internal
      */
-    display: HTMLElement;
+    protected checkedIndexChanged(prev: number | undefined, next: number): void;
     /**
-     * The number of ratings.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `count`
+     * Indicates that the value has been changed by the user.
      */
-    count?: number;
+    private dirtyState;
     /**
-     * The `viewBox` attribute of the icon <svg> element.
+     * Disables the radio group and child radios.
      *
      * @public
      * @remarks
-     * HTML Attribute: `icon-view-box`
-     * @deprecated Add `viewBox` attribute on the custom SVG directly.
+     * HTML Attribute: `disabled`
      */
-    iconViewBox?: string;
+    disabled: boolean;
     /**
-     * The maximum possible value of the rating.
-     * This attribute determines the number of icons displayed.
-     * Must be a whole number greater than 1.
+     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `max`
+     * @param prev - the previous disabled value
+     * @param next - the current disabled value
+     * @internal
      */
-    max?: number;
-    protected maxChanged(): void;
+    protected disabledChanged(prev?: boolean, next?: boolean): void;
     /**
-     * The value of the rating.
+     * The value of the checked radio.
      *
      * @public
      * @remarks
      * HTML Attribute: `value`
      */
-    value?: number;
-    protected valueChanged(): void;
-    constructor();
-    connectedCallback(): void;
+    initialValue?: string;
     /**
-     * Returns "count" as string, formatted according to the locale.
+     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
      *
-     * @internal
+     * @param prev - the previous value
+     * @param next - the current value
      */
-    get formattedCount(): string;
-    /** @internal */
-    handleSlotChange(): void;
-    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
-    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
-}
-
-/**
- * The base class used for constructing a fluent-spinner custom element
- * @public
- */
-export declare class BaseSpinner extends FASTElement {
+    initialValueChanged(prev: string | undefined, next: string | undefined): void;
     /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * The name of the radio group.
      *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
      */
-    elementInternals: ElementInternals;
-    constructor();
-}
-
-/**
- * A Tablist element that wraps a collection of tab elements
- * @public
- */
-export declare class BaseTablist extends FASTElement {
+    name: string;
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     * Sets the `name` attribute on all child radios when the `name` property changes.
      *
      * @internal
      */
-    elementInternals: ElementInternals;
+    protected nameChanged(prev: string | undefined, next: string | undefined): void;
     /**
-     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * The orientation of the group.
+     *
      * @public
      * @remarks
-     * HTML Attribute: disabled.
+     * HTML Attribute: `orientation`
      */
-    disabled: boolean;
+    orientation?: RadioGroupOrientation;
     /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
+     * Sets the ariaOrientation attribute when the orientation changes.
      *
+     * @param prev - the previous orientation
+     * @param next - the current orientation
      * @internal
      */
-    protected disabledChanged(prev: boolean, next: boolean): void;
+    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
     /**
-     * The orientation
+     * The collection of all child radios.
+     *
      * @public
-     * @remarks
-     * HTML Attribute: orientation
      */
-    orientation: TablistOrientation;
+    radios: Radio[];
     /**
-     * @internal
+     * Updates the enabled radios collection when properties on the child radios change.
+     *
+     * @param prev - the previous radios
+     * @param next - the current radios
      */
-    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
     /**
-     * The id of the active tab
+     * Indicates whether the radio group is required.
      *
      * @public
      * @remarks
-     * HTML Attribute: activeid
+     * HTML Attribute: `required`
      */
-    activeid: string;
+    required: boolean;
     /**
-     * @internal
+     *
+     * @param prev - the previous required value
+     * @param next - the current required value
      */
-    protected activeidChanged(oldValue: string, newValue: string): void;
+    requiredChanged(prev: boolean, next: boolean): void;
     /**
-     * Content slotted in the tab slot.
+     * The collection of radios that are slotted into the default slot.
+     *
      * @internal
      */
-    slottedTabs: Node[];
+    slottedRadios: Radio[];
     /**
-     * Updates the tabs property when content in the tabs slot changes.
-     * @internal
+     * Updates the radios collection when the slotted radios change.
+     *
+     * @param prev - the previous slotted radios
+     * @param next - the current slotted radios
      */
-    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
     /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
      * @internal
      */
-    tabs: Tab[];
+    elementInternals: ElementInternals;
     /**
+     * A collection of child radios that are not disabled.
+     *
      * @internal
      */
-    protected tabsChanged(): void;
+    get enabledRadios(): Radio[];
     /**
-     * A reference to the active tab
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
      * @public
      */
-    activetab: Tab;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private tabPanelMap;
-    private change;
-    private getActiveIndex;
+    static formAssociated: boolean;
     /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
+     * The fallback validation message, taken from a native checkbox `<input>` element.
      *
-     * @public
+     * @internal
+     */
+    private _validationFallbackMessage;
+    /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
+     * @internal
      */
-    protected setTabs(): void;
-    private getTabIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
+    get validationMessage(): string;
     /**
-     * The adjust method for FASTTabs
+     * The element's validity state.
+     *
      * @public
      * @remarks
-     * This method allows the active index to be adjusted by numerical increments
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
      */
-    adjust(adjustment: number): void;
-    private activateTabByIndex;
-    private focusTab;
+    get validity(): ValidityState;
     /**
-     * @internal
+     * The current value of the checked radio.
+     *
+     * @public
      */
-    connectedCallback(): void;
-}
-
-/**
- * A Tabs component that wraps a collection of tab and tab panel elements.
- *
- * @deprecated - use tablist instead
- */
-declare class BaseTabs extends FASTElement {
+    get value(): string | null;
+    set value(next: string | null);
     /**
-     * The orientation
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
+     * Sets the checked state of all radios when any radio emits a `change` event.
+     *
+     * @param e - the change event
      */
-    orientation: TabsOrientation;
+    changeHandler(e: Event): boolean | void;
     /**
+     * Checks the radio at the specified index.
+     *
+     * @param index - the index of the radio to check
      * @internal
      */
-    orientationChanged(): void;
+    checkRadio(index?: number, shouldEmit?: boolean): void;
     /**
-     * The id of the active tab
+     * Checks the validity of the element and returns the result.
      *
      * @public
      * @remarks
-     * HTML Attribute: activeid
-     */
-    activeid: string;
-    /**
-     * @internal
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
      */
-    activeidChanged(oldValue: string, newValue: string): void;
+    checkValidity(): boolean;
     /**
+     * Handles click events for the radio group.
+     *
+     * @param e - the click event
      * @internal
      */
-    tabs: HTMLElement[];
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
     /**
+     * Focuses the checked radio or the first enabled radio.
+     *
      * @internal
      */
-    tabsChanged(): void;
+    focus(): void;
+    formResetCallback(): void;
     /**
+     * Enables tabbing through the radio group when the group receives focus.
+     *
+     * @param e - the focus event
      * @internal
      */
-    tabpanels: HTMLElement[];
+    focusinHandler(e: FocusEvent): boolean | void;
     /**
+     * Handles keydown events for the radio group.
+     *
+     * @param e - the keyboard event
      * @internal
      */
-    tabpanelsChanged(): void;
+    keydownHandler(e: KeyboardEvent): boolean | void;
     /**
-     * A reference to the active tab
-     * @public
+     *
+     * @param e - the disabled event
      */
-    activetab: HTMLElement;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private tabpanelIds;
-    private change;
-    private isDisabledElement;
-    private isHiddenElement;
-    private isFocusableElement;
-    private getActiveIndex;
+    disabledRadioHandler(e: CustomEvent): void;
     /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
+     * Reports the validity of the element.
      *
      * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
      */
-    protected setTabs(): void;
-    private setTabPanels;
-    private getTabIds;
-    private getTabPanelIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
+    reportValidity(): boolean;
     /**
-     * The adjust method for FASTTabs
-     * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
      */
-    adjust(adjustment: number): void;
-    private adjustForward;
-    private adjustBackward;
-    private moveToTabByIndex;
-    private focusTab;
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
     /**
+     * Sets the validity of the element.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
      * @internal
+     * @remarks
+     * RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
+     * This is necessary because:
+     * 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
+     * 2. Browser validation UIs and screen readers announce validation against individual form controls
+     * 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
+     * 4. We anchor the error to the first Radio so it receives focus and announcement
+     *
+     * When the group is invalid (required but no selection):
+     * - Only the first Radio gets the invalid state with the validation message
+     * - Other Radios are kept valid since selecting any of them would satisfy the requirement
+     *
+     * When the group becomes valid (user selects any Radio):
+     * - All Radios are cleared back to valid state
+     * - This allows form submission to proceed
      */
-    connectedCallback(): void;
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): 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.
+ * The base class used for constructing a fluent-rating-display custom 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.
+ * @slot icon - SVG element used as the rating icon
  *
  * @public
  */
-export declare class BaseTextArea extends FASTElement {
-    /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
-     *
-     * @public
-     */
-    static readonly formAssociated = true;
+export declare class BaseRatingDisplay extends FASTElement {
+    private numberFormatter;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -2596,15 +2794,211 @@ export declare class BaseTextArea extends FASTElement {
      */
     elementInternals: ElementInternals;
     /**
-     * The `<label>` element.
+     * Reference to the slot element used for the rating icon.
+     *
      * @internal
      */
-    labelEl: HTMLLabelElement;
+    iconSlot: HTMLSlotElement;
+    /**
+     * Updates the icon when the referenced slot is bound in the template.
+     *
+     * @internal
+     */
+    iconSlotChanged(): void;
+    protected defaultCustomIconViewBox: string;
+    /**
+     * The element that displays the rating icons.
+     * @internal
+     */
+    display: HTMLElement;
+    /**
+     * The number of ratings.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count?: number;
+    /**
+     * The `viewBox` attribute of the icon <svg> element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `icon-view-box`
+     * @deprecated Add `viewBox` attribute on the custom SVG directly.
+     */
+    iconViewBox?: string;
+    /**
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    protected maxChanged(): void;
+    /**
+     * The value of the rating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    protected valueChanged(): void;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * Returns "count" as string, formatted according to the locale.
+     *
+     * @internal
+     */
+    get formattedCount(): string;
+    /** @internal */
+    handleSlotChange(): void;
+    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
+    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
+}
+
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class BaseSpinner extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+}
+
+/**
+ * A Tablist element that wraps a collection of tab elements
+ * @public
+ */
+export declare class BaseTablist extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled.
+     */
+    disabled: boolean;
+    /** @internal */
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TablistOrientation;
+    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /** @internal */
+    protected activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * Content slotted in the tab slot.
+     * @internal
+     */
+    slottedTabs: Node[];
+    /** @internal */
+    protected slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /** @internal */
+    tabs: Tab[];
+    /** @internal */
+    protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: Tab;
+    private tabPanelMap;
+    private change;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     */
+    protected setTabs({ connectToPanel, forceDisabled }?: {
+        connectToPanel?: boolean | undefined;
+        forceDisabled?: boolean | undefined;
+    }): void;
+    /** @internal */
+    handleFocusIn(event: FocusEvent): void;
+    private changeTab;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+
+/**
+ * A Text Area Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | `<textarea>`} element.
+ *
+ * @slot - The default content/value of the component.
+ * @slot label - The content for the `<label>`, it should be a `<fluent-label>` element.
+ * @csspart label - The `<label>` element.
+ * @csspart root - The container element of the `<textarea>` element.
+ * @csspart control - The internal `<textarea>` element.
+ * @fires { Event } change - Fires after the control loses focus, if the content has changed.
+ * @fires { Event } select - Fires when the `select()` method is called.
+ *
+ * @public
+ */
+export declare class BaseTextArea extends FASTElement {
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static readonly formAssociated = true;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The `<label>` element.
+     * @internal
+     */
+    labelEl: HTMLLabelElement;
+    /**
+     * The root container element.
+     * @internal
+     */
+    rootEl: HTMLDivElement;
     /**
      * The `<textarea>` element.
      * @internal
      */
     controlEl: HTMLTextAreaElement;
+    /**
+     * Sets up a mutation observer to watch for changes to the control element's
+     * attributes that could affect validity, and binds an input event listener to detect user interaction.
+     *
+     * @internal
+     */
+    protected controlElChanged(): void;
     /**
      * @internal
      */
@@ -2889,13 +3283,10 @@ export declare class BaseTextArea extends FASTElement {
      * @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;
@@ -2923,6 +3314,10 @@ export declare class BaseTextArea extends FASTElement {
  * @csspart label - The internal `<label>` element
  * @csspart root - the root container for the internal control
  * @csspart control - The internal `<input>` control
+ *
+ * @fires { Event } change - Fires a custom 'change' event when the value changes and the input loses focus
+ * @fires { Event } select - Fires when the `select()` method is called.
+ *
  * @public
  */
 export declare class BaseTextInput extends FASTElement {
@@ -2935,15 +3330,6 @@ export declare class BaseTextInput extends FASTElement {
      * 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
@@ -3209,12 +3595,6 @@ export declare class BaseTextInput extends FASTElement {
      * 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.
      *
@@ -3239,13 +3619,6 @@ export declare class BaseTextInput extends FASTElement {
      */
     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.
      *
@@ -3320,12 +3693,6 @@ export declare class BaseTree extends FASTElement {
      * @public
      */
     currentSelected: HTMLElement | null;
-    /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
-     */
-    private currentFocused;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -3334,6 +3701,13 @@ export declare class BaseTree extends FASTElement {
     elementInternals: ElementInternals;
     /** @internal */
     defaultSlot: HTMLSlotElement;
+    /**
+     * Calls the slot change handler when the `defaultSlot` reference is updated
+     * by the template binding.
+     *
+     * @internal
+     */
+    defaultSlotChanged(): void;
     constructor();
     /** @internal */
     childTreeItems: BaseTreeItem[];
@@ -3349,18 +3723,6 @@ export declare class BaseTree extends FASTElement {
      *  @internal
      */
     keydownHandler(e: KeyboardEvent): boolean | void;
-    /**
-     * Handle focus events
-     *
-     * @internal
-     */
-    focusHandler(e: FocusEvent): void;
-    /**
-     * Handle blur events
-     *
-     * @internal
-     */
-    blurHandler(e: FocusEvent): void;
     /**
      * Handles click events bubbling up
      *
@@ -3374,19 +3736,24 @@ export declare class BaseTree extends FASTElement {
      *  @internal
      */
     changeHandler(e: Event): boolean | void;
-    /**
-     * checks if there are any nested tree items
-     */
-    private getValidFocusableItem;
-    private getVisibleNodes;
-    /**
-     * Move focus to a tree item based on its offset from the provided item
-     */
-    private focusNextNode;
     /** @internal */
     handleDefaultSlotChange(): void;
+    /**
+     * All descendant tree items in DOM order, recursively flattened from
+     * `childTreeItems`.
+     */
+    protected get descendantTreeItems(): BaseTreeItem[];
 }
 
+/**
+ * Base class for Tree Item Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li | `<li>`} element.
+ *
+ * @fires { ToggleEvent } toggle - Fires when the expanded state changes
+ * @fires { Event } change - Fires when the selected state changes
+ *
+ * @public
+ */
 declare class BaseTreeItem extends FASTElement {
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
@@ -3396,11 +3763,22 @@ declare class BaseTreeItem extends FASTElement {
     elementInternals: ElementInternals;
     /** @internal */
     itemSlot: HTMLSlotElement;
+    /**
+     * Calls the slot change handler when the `itemSlot` reference is updated
+     * by the template binding.
+     *
+     * @internal
+     */
+    itemSlotChanged(): void;
     constructor();
+    connectedCallback(): void;
     /**
      * When true, the control will be appear expanded by user interaction.
-     * @public
+     * When true, the control will be appear expanded by user interaction.
+     *
      * HTML Attribute: `expanded`
+     *
+     * @public
      */
     expanded: boolean;
     /**
@@ -3428,8 +3806,11 @@ declare class BaseTreeItem extends FASTElement {
     protected selectedChanged(prev: boolean, next: boolean): void;
     /**
      * When true, the control has no child tree items
-     * @public
+     * When true, the control has no child tree items
+     *
      * HTML Attribute: empty
+     *
+     * @public
      */
     empty: boolean;
     private styles;
@@ -3448,7 +3829,6 @@ declare class BaseTreeItem extends FASTElement {
      * @public
      */
     childTreeItemsChanged(): void;
-    connectedCallback(): void;
     /**
      * Updates the childrens indent
      *
@@ -3466,53 +3846,87 @@ declare class BaseTreeItem extends FASTElement {
      */
     toggleExpansion(): void;
     /**
-     * Whether the tree is nested
+     * Whether the tree item is nested
      * @internal
      */
     get isNestedItem(): boolean;
-    protected updateTabindexBySelected(): void;
+    /**
+     * Whether the tree item is nested in a collapsed tree item.
+     * @internal
+     */
+    get isHidden(): boolean;
     /** @internal */
     handleItemSlotChange(): void;
 }
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius2XLarge | `borderRadius2XLarge`} design token.
  * @public
  */
-export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
+export declare const borderRadius2XLarge = "var(--borderRadius2XLarge)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius3XLarge | `borderRadius3XLarge`} design token.
  * @public
  */
-export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
+export declare const borderRadius3XLarge = "var(--borderRadius3XLarge)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius4XLarge | `borderRadius4XLarge`} design token.
  * @public
  */
-export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
+export declare const borderRadius4XLarge = "var(--borderRadius4XLarge)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius5XLarge | `borderRadius5XLarge`} design token.
  * @public
  */
-export declare const borderRadiusNone = "var(--borderRadiusNone)";
+export declare const borderRadius5XLarge = "var(--borderRadius5XLarge)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius6XLarge | `borderRadius6XLarge`} design token.
  * @public
  */
-export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
+export declare const borderRadius6XLarge = "var(--borderRadius6XLarge)";
 
 /**
- * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public
  */
-export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
+export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
 
 /**
- * A Button Custom HTML Element.
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
+ * @public
+ */
+export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
+ * @public
+ */
+export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
+ * @public
+ */
+export declare const borderRadiusNone = "var(--borderRadiusNone)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
+ * @public
+ */
+export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
+ * @public
+ */
+export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
+
+/**
+ * A Button Custom HTML Element.
  * Based on BaseButton and includes style and layout specific attributes
  *
  * @tag fluent-button
@@ -3581,13 +3995,11 @@ export declare const ButtonAppearance: {
 export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 
 /**
- * The definition for the Fluent Button component.
+ * The definition for the `<fluent-button>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-button>`
  */
-export declare const ButtonDefinition: FASTElementDefinition<typeof Button>;
+export declare const ButtonDefinition: PartialFASTElementDefinition;
 
 /**
  * Button `formtarget` attribute values.
@@ -3652,7 +4064,7 @@ export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
  *
  * @public
  */
-export declare const ButtonTemplate: ElementViewTemplate<Button>;
+export declare const ButtonTemplate: ElementViewTemplate<BaseButton>;
 
 /**
  * Button type values.
@@ -3680,8 +4092,8 @@ export declare type ButtonType = ValuesOf<typeof ButtonType>;
  *
  * @slot checked-indicator - The checked indicator
  * @slot indeterminate-indicator - The indeterminate indicator
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @fires { Event } change - Emits a custom change event when the checked state changes
+ * @fires { Event } input - Emits a custom input event when the checked state changes
  *
  * @public
  */
@@ -3734,13 +4146,11 @@ export declare class Checkbox extends BaseCheckbox {
 }
 
 /**
- * The Fluent Checkbox Element
+ * The definition for the `<fluent-checkbox>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-checkbox\>
  */
-export declare const CheckboxDefinition: FASTElementDefinition<typeof Checkbox>;
+export declare const CheckboxDefinition: PartialFASTElementDefinition;
 
 /**
  * Checkbox configuration options
@@ -4189,6 +4599,36 @@ export declare const colorNeutralBackground5Selected = "var(--colorNeutralBackgr
  */
 export declare const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7 | `colorNeutralBackground7`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7 = "var(--colorNeutralBackground7)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Hover | `colorNeutralBackground7Hover`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7Hover = "var(--colorNeutralBackground7Hover)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Pressed | `colorNeutralBackground7Pressed`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7Pressed = "var(--colorNeutralBackground7Pressed)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Selected | `colorNeutralBackground7Selected`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7Selected = "var(--colorNeutralBackground7Selected)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground8 | `colorNeutralBackground8`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground8 = "var(--colorNeutralBackground8)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundAlpha | `colorNeutralBackgroundAlpha`} design token.
  * @public
@@ -4207,6 +4647,12 @@ export declare const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroun
  */
 export declare const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled2 | `colorNeutralBackgroundDisabled2`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundDisabled2 = "var(--colorNeutralBackgroundDisabled2)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token.
  * @public
@@ -4219,6 +4665,24 @@ export declare const colorNeutralBackgroundInverted = "var(--colorNeutralBackgro
  */
 export declare const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgroundInvertedDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedHover | `colorNeutralBackgroundInvertedHover`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundInvertedHover = "var(--colorNeutralBackgroundInvertedHover)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedPressed | `colorNeutralBackgroundInvertedPressed`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundInvertedPressed = "var(--colorNeutralBackgroundInvertedPressed)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedSelected | `colorNeutralBackgroundInvertedSelected`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundInvertedSelected = "var(--colorNeutralBackgroundInvertedSelected)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundStatic | `colorNeutralBackgroundStatic`} design token.
  * @public
@@ -4399,6 +4863,30 @@ export declare const colorNeutralForeground3Selected = "var(--colorNeutralForegr
  */
 export declare const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5 | `colorNeutralForeground5`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5 = "var(--colorNeutralForeground5)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Hover | `colorNeutralForeground5Hover`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5Hover = "var(--colorNeutralForeground5Hover)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Pressed | `colorNeutralForeground5Pressed`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5Pressed = "var(--colorNeutralForeground5Pressed)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Selected | `colorNeutralForeground5Selected`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5Selected = "var(--colorNeutralForeground5Selected)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token.
  * @public
@@ -4573,6 +5061,30 @@ export declare const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
  */
 export declare const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4 | `colorNeutralStroke4`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4 = "var(--colorNeutralStroke4)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Hover | `colorNeutralStroke4Hover`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4Hover = "var(--colorNeutralStroke4Hover)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Pressed | `colorNeutralStroke4Pressed`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4Pressed = "var(--colorNeutralStroke4Pressed)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Selected | `colorNeutralStroke4Selected`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4Selected = "var(--colorNeutralStroke4Selected)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessible | `colorNeutralStrokeAccessible`} design token.
  * @public
@@ -4615,6 +5127,12 @@ export declare const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)
  */
 export declare const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled2 | `colorNeutralStrokeDisabled2`} design token.
+ * @public
+ */
+export declare const colorNeutralStrokeDisabled2 = "var(--colorNeutralStrokeDisabled2)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeInvertedDisabled | `colorNeutralStrokeInvertedDisabled`} design token.
  * @public
@@ -5880,6 +6398,9 @@ export declare const colorTransparentStrokeInteractive = "var(--colorTransparent
  *
  * @tag fluent-compound-button
  *
+ * @slot - The default slot for the main content of the compound button
+ * @slot description - The description of the compound button, shown below the main content
+ *
  * @public
  */
 export declare class CompoundButton extends Button {
@@ -5903,11 +6424,11 @@ export declare const CompoundButtonAppearance: {
 export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
 
 /**
+ * The definition for the `<fluent-compound-button>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-comopund-button\>
  */
-export declare const CompoundButtonDefinition: FASTElementDefinition<typeof CompoundButton>;
+export declare const CompoundButtonDefinition: PartialFASTElementDefinition;
 
 /**
  * A Compound Button can be square, circular or rounded.
@@ -5945,24 +6466,23 @@ export declare const CompoundButtonStyles: ElementStyles;
 
 /**
  * The template for the Button component.
+ *
  * @public
  */
 export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
 
 /**
- * The base class used for constructing a fluent-badge custom element
+ * A CounterBadge Custom HTML Element.
+ * Based on BaseCounterBadge and includes style and layout specific attributes.
  *
  * @tag fluent-counter-badge
  *
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
-export declare class CounterBadge extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
+export declare class CounterBadge extends BaseCounterBadge {
     /**
      * The appearance the badge should have.
      *
@@ -5995,60 +6515,14 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: size
      */
     size?: CounterBadgeSize;
-    /**
-     * The count the badge should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: count
-     */
-    count: number;
-    protected countChanged(): void;
-    /**
-     * Max number to be displayed
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: overflow-count
-     */
-    overflowCount: number;
-    protected overflowCountChanged(): void;
-    /**
-     * If the badge should be shown when count is 0
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: show-zero
-     */
-    showZero: boolean;
-    /**
-     * If a dot should be displayed without the count
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: dot
-     */
-    dot: boolean;
-    /**
-     * @internal
-     * Function to set the count
-     * This is the default slotted content for the counter badge
-     * If children are slotted, that will override the value returned
-     */
-    setCount(): string | void;
 }
 
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API extractor.
- * TODO: Below will be unnecessary when Badge class gets updated
- * @internal
- */
 export declare interface CounterBadge extends StartEnd {
 }
 
 /**
- * CounterBadgeAppearance constants
+ * Values for the `appearance` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeAppearance: {
@@ -6057,13 +6531,14 @@ export declare const CounterBadgeAppearance: {
 };
 
 /**
- * A CounterBadge can have an appearance of filled or ghost
+ * Type for the `appearance` attribute on CounterBadge elements, based on the CounterBadgeAppearance constants.
  * @public
  */
 export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
 
 /**
- * CounterBadgeColor constants
+ * Values for the `color` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeColor: {
@@ -6078,20 +6553,21 @@ export declare const CounterBadgeColor: {
 };
 
 /**
- * A CounterBadge can be one of preset colors
+ * Type for the `color` attribute on CounterBadge elements, based on the CounterBadgeColor constants.
  * @public
  */
 export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 
 /**
+ * The definition for the `<fluent-counter-badge>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-counter-badge\>
  */
-export declare const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
+export declare const CounterBadgeDefinition: PartialFASTElementDefinition;
 
 /**
- * A CounterBadge shape can be circular or rounded.
+ * Values for the `shape` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeShape: {
@@ -6100,13 +6576,15 @@ export declare const CounterBadgeShape: {
 };
 
 /**
- * A CounterBadge can be one of preset colors
+ * Type for the `shape` attribute on CounterBadge elements, based on the CounterBadgeShape constants.
+ *
  * @public
  */
 export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
 
 /**
- * A CounterBadge can be square, circular or rounded.
+ * Values for the `size` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeSize: {
@@ -6119,7 +6597,8 @@ export declare const CounterBadgeSize: {
 };
 
 /**
- * A CounterBadge can be on of several preset sizes.
+ * Type for the `size` attribute on CounterBadge elements, based on the CounterBadgeSize constants.
+ *
  * @public
  */
 export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
@@ -6130,7 +6609,15 @@ export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
 export declare const CounterBadgeStyles: ElementStyles;
 
 /**
- * The template for the Counter Badge component.
+ * The tag name for the counter badge element.
+ *
+ * @public
+ */
+export declare const CounterBadgeTagName: "fluent-counter-badge";
+
+/**
+ * The template for the fluent-counter-badge component.
+ *
  * @public
  */
 export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
@@ -6195,68 +6682,114 @@ export declare const curveEasyEaseMax = "var(--curveEasyEaseMax)";
  */
 export declare const curveLinear = "var(--curveLinear)";
 
-/**
- * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
- * @public
- */
-export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-
 /**
  * A Dialog Custom HTML Element.
  *
  * @tag fluent-dialog
  *
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot. {@link (DialogBody:class)} element recommended.
+ *
  * @public
  */
 export declare class Dialog extends FASTElement {
     /**
-     * @public
      * The dialog element
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
     /**
-     * @public
      * The ID of the element that describes the dialog
+     *
+     * @public
      */
     ariaDescribedby?: string;
     /**
-     * @public
      * The ID of the element that labels the dialog
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
+     * The label of the dialog
+     *
      * @public
+     */
+    ariaLabel: string | null;
+    /**
      * The type of the dialog modal
+     *
+     * @public
      */
     type: DialogType;
-    protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
-    /** @internal */
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby(): string | undefined;
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel(): string | null | undefined;
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby(): string | undefined;
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal(): boolean | undefined;
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole(): string | undefined;
     connectedCallback(): void;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
-    emitBeforeToggle: () => void;
+    emitBeforeToggle(): void;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitToggle: () => void;
     /**
-     * @public
      * Method to show the dialog
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide(): void;
     /**
-     * @public
      * Handles click events on the dialog overlay for light-dismiss
+     *
+     * @public
      * @param event - The click event
      * @returns boolean
      */
@@ -6268,6 +6801,15 @@ export declare class Dialog extends FASTElement {
  *
  * @tag fluent-dialog-body
  *
+ * @slot title - Content for the dialog title.
+ * @slot title-action - Content for actions shown near the title.
+ * @slot close - Content for the close action.
+ * @slot action - Content for footer actions.
+ * @slot - Default dialog body content.
+ * @csspart title - The title container.
+ * @csspart content - The content container.
+ * @csspart actions - The actions container.
+ *
  * @public
  * @extends FASTElement
  */
@@ -6282,13 +6824,11 @@ export declare class DialogBody extends FASTElement {
 }
 
 /**
- * The Fluent Dialog Body Element
+ * The definition for the `<fluent-dialog-body>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-dialog-body\>
  */
-export declare const DialogBodyDefinition: FASTElementDefinition<typeof DialogBody>;
+export declare const DialogBodyDefinition: PartialFASTElementDefinition;
 
 /** Dialog Body styles
  * @public
@@ -6302,13 +6842,11 @@ export declare const DialogBodyStyles: ElementStyles;
 export declare const DialogBodyTemplate: ElementViewTemplate;
 
 /**
- * The Fluent Dialog Element
+ * The definition for the `<fluent-dialog>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-dialog\>
  */
-export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
+export declare const DialogDefinition: PartialFASTElementDefinition;
 
 /** Dialog styles
  * @public
@@ -6317,6 +6855,11 @@ export declare const DialogStyles: ElementStyles;
 
 /**
  * Template for the Dialog component
+ *
+ * Note: The empty `<div tabindex="-1">` element above the `<slot>` element is
+ * for working around a dialog focus issue, learn more at
+ * https://github.com/microsoft/fluentui/pull/36278
+ *
  * @public
  */
 export declare const DialogTemplate: ElementViewTemplate<Dialog>;
@@ -6333,6 +6876,21 @@ export declare const DialogType: {
 
 export declare type DialogType = ValuesOf<typeof DialogType>;
 
+/**
+ * Expose ltr and rtl strings
+ * @public
+ */
+export declare const Direction: {
+    readonly ltr: "ltr";
+    readonly rtl: "rtl";
+};
+
+/**
+ * The direction type
+ * @public
+ */
+export declare type Direction = (typeof Direction)[keyof typeof Direction];
+
 /**
  * Applies a CSS display property.
  * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
@@ -6403,13 +6961,11 @@ export declare const DividerAppearance: {
 export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;
 
 /**
- * The Fluent Divider Element
+ * The definition for the `<fluent-divider>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-divider\>
  */
-export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
+export declare const DividerDefinition: PartialFASTElementDefinition;
 
 /**
  * Divider orientation
@@ -6465,18 +7021,19 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  *
  * @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.
+ * @attr type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
+ * @attr position - Sets the position of the drawer (start/end).
+ * @attr size - Sets the size of the drawer (small/medium/large).
+ * @attr ariaDescribedby - The ID of the element that describes the drawer.
+ * @attr ariaLabelledby - The ID of the element that labels the drawer.
  *
  * @csspart dialog - The dialog element of the drawer.
+ * @cssprop --drawer-width - Sets the width of the drawer to a custom value (e.g., 300px).
  *
  * @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.
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
  *
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
@@ -6486,34 +7043,35 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @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 {
-    protected roleAttrObserver: MutationObserver;
     /**
-     * @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.
+     *
+     * @public
      */
     type: DrawerType;
-    protected typeChanged(): void;
     /**
-     * @public
      * The ID of the element that labels the drawer.
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
-     * @public
      * The ID of the element that describes the drawer.
+     *
+     * @public
      */
     ariaDescribedby?: string;
-    /**""
+    /**
+     * Sets the position of the drawer (start/end).
+     *
      * @public
      * @defaultValue start
-     * Sets the position of the drawer (start/end).
      */
     position: DrawerPosition;
+    role: string | null;
     /**
      * @public
      * @defaultValue medium
@@ -6521,34 +7079,71 @@ export declare class Drawer extends FASTElement {
      */
     size: DrawerSize;
     /**
-     * @public
      * The dialog element.
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
-    /** @internal */
-    connectedCallback(): void;
-    /** @internal */
-    disconnectedCallback(): void;
     /**
-     * @public
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby(): string | undefined;
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel(): string | null | undefined;
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby(): string | undefined;
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal(): boolean | undefined;
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole(): string | null;
+    connectedCallback(): void;
+    /**
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     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
+     *
+     * @public
      */
     emitBeforeToggle: () => void;
     /**
-     * @public
      * Method to show the drawer
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the drawer
+     *
+     * @public
      */
     hide(): void;
     /**
@@ -6559,12 +7154,11 @@ export declare class Drawer extends FASTElement {
      */
     clickHandler(event: Event): boolean;
     /**
-     * @public
      * Handles cancel events on the drawer.
+     *
+     * @public
      */
     cancelHandler(): void;
-    protected observeRoleAttr(): void;
-    protected updateDialogRole(): void;
 }
 
 /**
@@ -6598,12 +7192,11 @@ export declare class DrawerBody extends FASTElement {
 }
 
 /**
+ * The definition for the `<fluent-drawer-body>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-drawer>
  */
-export declare const DrawerBodyDefinition: FASTElementDefinition<typeof DrawerBody>;
+export declare const DrawerBodyDefinition: PartialFASTElementDefinition;
 
 /** Drawer styles
  * @public
@@ -6613,12 +7206,11 @@ export declare const DrawerBodyStyles: ElementStyles;
 export declare const DrawerBodyTemplate: ElementViewTemplate<DrawerBody>;
 
 /**
+ * The definition for the `<fluent-drawer>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-drawer>
  */
-export declare const DrawerDefinition: FASTElementDefinition<typeof Drawer>;
+export declare const DrawerDefinition: PartialFASTElementDefinition;
 
 /**
  * A drawer can be positioned on the left or right side of the viewport.
@@ -6727,13 +7319,11 @@ export declare type DropdownAppearance = ValuesOf<typeof DropdownAppearance>;
 export declare const dropdownButtonTemplate: ViewTemplate<BaseDropdown, any>;
 
 /**
- * The Fluent Dropdown Element.
+ * The definition for the `<fluent-dropdown>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-dropdown>`
  */
-export declare const DropdownDefinition: FASTElementDefinition<typeof Dropdown>;
+export declare const DropdownDefinition: PartialFASTElementDefinition;
 
 /**
  * The template partial for the dropdown input element. This template is used when the `type` property is set to "combobox".
@@ -6753,8 +7343,11 @@ export declare const dropdownInputTemplate: ViewTemplate<BaseDropdown, any>;
  * @tag fluent-dropdown-option
  *
  * @slot - The default slot for the option's content.
+ * @slot start - Optional content shown at the start of the option.
  * @slot checked-indicator - The checked indicator.
  * @slot description - Optional description content.
+ * @csspart content - The wrapper for the option content.
+ * @csspart description - The wrapper for the option description.
  *
  * @remarks
  * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
@@ -7008,13 +7601,11 @@ export declare class DropdownOption extends FASTElement implements Start {
 }
 
 /**
- * The Fluent Option Element.
+ * The definition for the `<fluent-option>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-option>`
  */
-export declare const DropdownOptionDefinition: FASTElementDefinition<typeof DropdownOption>;
+export declare const DropdownOptionDefinition: PartialFASTElementDefinition;
 
 /**
  * The options for the {@link DropdownOption} component.
@@ -7164,6 +7755,13 @@ export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TPa
  *
  * @tag fluent-field
  *
+ * @slot label - Label content associated with the control.
+ * @slot input - Input control content.
+ * @slot message - Validation and helper message content.
+ * @csspart label - The label slot container.
+ * @csspart input - The input slot container.
+ * @csspart message - The message slot container.
+ *
  * @public
  */
 export declare class Field extends BaseField {
@@ -7178,13 +7776,11 @@ export declare class Field extends BaseField {
 }
 
 /**
- * The Fluent Field Element
+ * The definition for the `<fluent-field>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-field>`
  */
-export declare const FieldDefinition: FASTElementDefinition<typeof Field>;
+export declare const FieldDefinition: PartialFASTElementDefinition;
 
 /**
  * Label position values
@@ -7320,12 +7916,6 @@ export declare const fontWeightRegular = "var(--fontWeightRegular)";
  */
 export declare const fontWeightSemibold = "var(--fontWeightSemibold)";
 
-/**
- * This can be used to construct a behavior to apply a forced-colors only stylesheet.
- * @public
- */
-export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-
 /**
  * Determines the current localization direction of an element.
  *
@@ -7341,6 +7931,8 @@ export declare const getDirection: (rootNode: HTMLElement) => Direction;
  *
  * @tag fluent-image
  *
+ * @slot - The default slot. Accepts any `<img>`, `<picture>`, `<video>`, or `<canvas>` element.
+ *
  * @public
  */
 declare class Image_2 extends FASTElement {
@@ -7388,13 +7980,11 @@ declare class Image_2 extends FASTElement {
 export { Image_2 as Image }
 
 /**
- * The Fluent Image Element
+ * The definition for the `<fluent-image>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-image\>
  */
-export declare const ImageDefinition: FASTElementDefinition<typeof Image_2>;
+export declare const ImageDefinition: PartialFASTElementDefinition;
 
 /**
  * Image fit
@@ -7502,6 +8092,9 @@ export declare function isTreeItem(element?: Node | null, tagName?: string): ele
  *
  * @tag fluent-label
  *
+ * @slot - The default slot. Accepts the content of the label.
+ * @csspart asterisk - The required-field asterisk indicator.
+ *
  * @public
  */
 export declare class Label extends FASTElement {
@@ -7540,14 +8133,11 @@ export declare class Label extends FASTElement {
 }
 
 /**
- * The Fluent Label Element.
- *
+ * The definition for the `<fluent-label>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-label\>
  */
-export declare const LabelDefinition: FASTElementDefinition<typeof Label>;
+export declare const LabelDefinition: PartialFASTElementDefinition;
 
 /**
  * A Labels font size can be small, medium, or large
@@ -7585,12 +8175,6 @@ export declare const LabelWeight: {
  */
 export declare type LabelWeight = ValuesOf<typeof LabelWeight>;
 
-/**
- * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
- * @public
- */
-export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-
 /**
  * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase100 | `lineHeightBase100`} design token.
  * @public
@@ -7700,11 +8284,11 @@ export declare const LinkAppearance: {
 export declare type LinkAppearance = ValuesOf<typeof LinkAppearance>;
 
 /**
+ * The definition for the `<fluent-link>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-link\>
  */
-export declare const LinkDefinition: FASTElementDefinition<typeof Link>;
+export declare const LinkDefinition: PartialFASTElementDefinition;
 
 export declare const LinkStyles: ElementStyles;
 
@@ -7749,14 +8333,18 @@ export declare const LinkTemplate: ElementViewTemplate<Link>;
  */
 export declare class Listbox extends FASTElement {
     /**
-     * Sets the listbox ID to a unique value if one is not provided.
+     * A reference to the default slot element.
      *
-     * @override
-     * @public
-     * @remarks
-     * HTML Attribute: `id`
+     * @internal
      */
-    id: string;
+    defaultSlot: HTMLSlotElement;
+    /**
+     * Calls the `slotchangeHandler` when the `defaultSlot` element is assigned
+     * via the `ref` directive in the template.
+     *
+     * @internal
+     */
+    protected defaultSlotChanged(): void;
     /**
      * Indicates whether the listbox allows multiple selection.
      *
@@ -7829,6 +8417,7 @@ export declare class Listbox extends FASTElement {
      */
     clickHandler(e: PointerEvent): boolean | void;
     constructor();
+    connectedCallback(): void;
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -7852,17 +8441,15 @@ export declare class Listbox extends FASTElement {
      * @param e - The slotchange event
      * @public
      */
-    slotchangeHandler(e: Event): void;
+    slotchangeHandler(e?: Event): void;
 }
 
 /**
- * The Fluent Listbox Element
+ * The definition for the `<fluent-listbox>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-listbox>`
  */
-export declare const ListboxDefinition: FASTElementDefinition<typeof Listbox>;
+export declare const ListboxDefinition: PartialFASTElementDefinition;
 
 /**
  * Styles for the {@link (Listbox:class)} component.
@@ -7887,117 +8474,6 @@ export declare const ListboxTemplate: ElementViewTemplate<Listbox>;
  */
 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.
- *
- * @public
- */
-export declare abstract class MatchMediaBehavior implements HostBehavior {
-    /**
-     * The behavior needs to operate on element instances but elements might share a behavior instance.
-     * To ensure proper attachment / detachment per instance, we construct a listener for
-     * each bind invocation and cache the listeners by element reference.
-     */
-    private listenerCache;
-    /**
-     * The media query that the behavior operates on.
-     */
-    readonly query: MediaQueryList;
-    /**
-     *
-     * @param query - The media query to operate from.
-     */
-    constructor(query: MediaQueryList);
-    /**
-     * Constructs a function that will be invoked with the MediaQueryList context
-     * @param controller - The host controller orchestrating this behavior.
-     */
-    protected abstract constructListener(controller: HostController): MediaQueryListListener;
-    /**
-     * Binds the behavior to the element.
-     * @param controller - The host controller orchestrating this behavior.
-     */
-    connectedCallback(controller: HostController): void;
-    /**
-     * Unbinds the behavior from the element.
-     * @param controller - The host controller orchestrating this behavior.
-     */
-    disconnectedCallback(controller: HostController): void;
-}
-
-/**
- * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
- * styles are applied while the a query matches the environment and that styles are not applied if the query does
- * not match the environment.
- *
- * @public
- */
-export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
-    /**
-     * The media query that the behavior operates on.
-     */
-    readonly query: MediaQueryList;
-    /**
-     * The styles object to be managed by the behavior.
-     */
-    readonly styles: ElementStyles;
-    /**
-     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
-     * @param query - The media query to operate from.
-     * @param styles - The styles to coordinate with the query.
-     */
-    constructor(query: MediaQueryList, styles: ElementStyles);
-    /**
-     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
-     * a provided query.
-     * @param query - The media query to operate from.
-     *
-     * @public
-     * @example
-     *
-     * ```ts
-     * import { css } from "@microsoft/fast-element";
-     * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
-     *
-     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
-     *   window.matchMedia("(orientation: landscape)")
-     * );
-     *
-     * const styles = css`
-     *   :host {
-     *     width: 200px;
-     *     height: 400px;
-     *   }
-     * `
-     * .withBehaviors(landscapeBehavior(css`
-     *   :host {
-     *     width: 400px;
-     *     height: 200px;
-     *   }
-     * `))
-     * ```
-     */
-    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-    /**
-     * Constructs a match-media listener for a provided element.
-     * @param source - the element for which to attach or detach styles.
-     */
-    protected constructListener(controller: HostController): MediaQueryListListener;
-    /**
-     * Unbinds the behavior from the element.
-     * @param controller - The host controller orchestrating this behavior.
-     * @internal
-     */
-    removedCallback(controller: HostController<any>): void;
-}
-
-/**
- * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
- * @public
- */
-export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
-
 /**
  * A Menu component that provides a customizable menu element.
  *
@@ -8072,12 +8548,28 @@ export declare class Menu extends FASTElement {
      * Holds the slotted menu list.
      * @public
      */
-    slottedMenuList: MenuList[];
+    slottedMenuList: HTMLElement[];
+    /**
+     * Sets up the component when the slotted menu list changes.
+     * @param prev - The previous items in the slotted menu list.
+     * @param next - The new items in the slotted menu list.
+     * @internal
+     */
+    slottedMenuListChanged(prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * Holds the slotted triggers.
      * @public
      */
     slottedTriggers: HTMLElement[];
+    /**
+     * Ensures the trigger is properly set up when the slotted triggers change.
+     * This includes setting ARIA attributes and adding event listeners based on the current property values.
+     *
+     * @param prev - The previous items in the slotted triggers list.
+     * @param next - The current items in the slotted triggers list.
+     * @internal
+     */
+    slottedTriggersChanged(prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * Holds the primary slot element.
      * @public
@@ -8087,17 +8579,25 @@ export declare class Menu extends FASTElement {
      * Defines whether the menu is open or not.
      * @internal
      */
-    private _open;
+    protected _open: boolean;
     /**
      * The trigger element of the menu.
      * @internal
      */
-    private _trigger?;
+    protected _trigger?: HTMLElement;
     /**
      * The menu list element of the menu which has the popover behavior.
      * @internal
      */
-    private _menuList?;
+    protected _menuList?: HTMLElement;
+    /**
+     * @internal
+     */
+    protected _triggerAbortController?: AbortController;
+    /**
+     * @internal
+     */
+    protected _menuListAbortController?: AbortController;
     /**
      * Called when the element is connected to the DOM.
      * Sets up the component.
@@ -8112,7 +8612,8 @@ export declare class Menu extends FASTElement {
     disconnectedCallback(): void;
     /**
      * Sets the component.
-     * Sets the trigger and menu list elements and adds event listeners.
+     * @deprecated This method is no longer used. Trigger and menu-list listeners are now
+     * managed by their respective slot-changed callbacks.
      * @public
      */
     setComponent(): void;
@@ -8182,23 +8683,15 @@ export declare class Menu extends FASTElement {
      */
     closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
     /**
-     * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger.
-     * Adds a 'toggle' event listener to the menu list.
-     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * Adds trigger-related event listeners.
      * @internal
      */
-    private addListeners;
+    protected addTriggerListeners(): void;
     /**
-     * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger.
-     * Also removes toggle event listener from the menu list.
-     * Also removes 'mouseover' event listeners from the trigger.
-     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * Adds menu-list event listeners.
      * @internal
      */
-    private removeListeners;
+    protected addMenuListListeners(): void;
     /**
      * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
      * pressed. Closes the menu when the Tab key is pressed.
@@ -8220,7 +8713,7 @@ export declare class Menu extends FASTElement {
      * @internal
      * @param e - The event triggered on document click.
      */
-    private documentClickHandler;
+    protected documentClickHandler: (e: any) => void;
 }
 
 /**
@@ -8251,11 +8744,11 @@ export declare const MenuButtonAppearance: {
 export declare type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
 
 /**
+ * The definition for the `<fluent-menu-button>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-button\>
  */
-export declare const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
+export declare const MenuButtonDefinition: PartialFASTElementDefinition;
 
 /**
  * A Menu Button can be square, circular or rounded.
@@ -8296,13 +8789,11 @@ export declare type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
 export declare const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
 
 /**
- * The Fluent Menu Element.
+ * The definition for the `<fluent-menu>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-menu>
  */
-export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
+export declare const MenuDefinition: PartialFASTElementDefinition;
 
 /**
  * A Switch Custom HTML Element.
@@ -8317,7 +8808,7 @@ export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
  * @slot submenu-glyph - The submenu expand/collapse indicator
  * @slot submenu - Used to nest menu's within menu items
  * @csspart content - The element wrapping the menu item content
- * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ * @fires { Event } change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
  * @public
  */
@@ -8415,7 +8906,9 @@ export declare class MenuItem extends FASTElement {
      * Setup required ARIA on open/close
      * @internal
      */
-    toggleHandler: (e: Event) => void;
+    handleToggle: (e: Event) => void;
+    /** @internal */
+    handleSubmenuFocusOut: (e: FocusEvent) => void;
     /**
      * @internal
      */
@@ -8439,11 +8932,11 @@ export declare interface MenuItem extends StartEnd {
 export declare type MenuItemColumnCount = 0 | 1 | 2;
 
 /**
+ * The definition for the `<fluent-menu-item>` element.
+ *
  * @public
- * @remarks
- * HTML Element: <fluent-menu-item>
  */
-export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
+export declare const MenuItemDefinition: PartialFASTElementDefinition;
 
 /**
  * Menu Item configuration options
@@ -8487,7 +8980,7 @@ export declare const MenuItemStyles: ElementStyles;
 export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 /**
- * A Menu Custom HTML Element.
+ * A MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @tag fluent-menu-list
@@ -8496,82 +8989,19 @@ export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
  *
  * @public
  */
-export declare class MenuList extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * @internal
-     */
-    items: HTMLElement[];
-    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
-    protected menuItems: Element[] | undefined;
-    /**
-     * The index of the focusable element in the items array
-     * defaults to -1
-     */
-    private focusIndex;
-    private static focusableElementRoles;
-    constructor();
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-    /**
-     * @internal
-     */
+export declare class MenuList extends BaseMenuList {
+    private fg?;
+    private fgItems?;
     disconnectedCallback(): void;
-    /**
-     * @internal
-     */
-    readonly isNestedMenu: () => boolean;
-    /**
-     * Focuses the first item in the menu.
-     *
-     * @public
-     */
-    focus(): void;
-    /**
-     * @internal
-     */
-    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
-    /**
-     * if focus is moving out of the menu, reset to a stable initial state
-     * @internal
-     */
-    handleFocusOut: (e: FocusEvent) => void;
-    private handleItemFocus;
-    private removeItemListeners;
-    private static elementIndent;
-    protected setItems(): void;
-    /**
-     * Method for Observable changes to the hidden attribute of child elements
-     */
-    handleChange(source: any, propertyName: string): void;
-    /**
-     * Handle change from child MenuItem element and set radio group behavior
-     */
-    private changedMenuItemHandler;
-    /**
-     * check if the item is a menu item
-     */
-    protected isMenuItemElement: (el: Element) => el is HTMLElement;
-    /**
-     * check if the item is focusable
-     */
-    private isFocusableElement;
-    private setFocus;
+    setItems(): void;
 }
 
 /**
+ * The definition for the `<fluent-menu-list>` element.
+ *
  * @public
- * @remarks
- * HTML Element: <fluent-menu-list>
  */
-export declare const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
+export declare const MenuListDefinition: PartialFASTElementDefinition;
 
 /** MenuList styles
  * @public
@@ -8594,7 +9024,9 @@ export declare const MenuTemplate: ElementViewTemplate<Menu>;
  *
  * @slot actions - Content that can be provided for the actions
  * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot icon - Content that can be provided for the leading icon
  * @slot - The default slot for the content
+ * @fires { CustomEvent } dismiss - Fired when the message bar is dismissed.
  * @public
  */
 export declare class MessageBar extends FASTElement {
@@ -8630,24 +9062,24 @@ export declare class MessageBar extends FASTElement {
      */
     intent?: MessageBarIntent;
     /**
-     * @public
      * Method to emit a `dismiss` event when the message bar is dismissed
+     *
+     * @public
      */
     dismissMessageBar: () => void;
 }
 
 /**
- * The Fluent MessageBar Element definition.
+ * The definition for the `<fluent-message-bar>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-message-bar>`
  */
-export declare const MessageBarDefinition: FASTElementDefinition<typeof MessageBar>;
+export declare const MessageBarDefinition: PartialFASTElementDefinition;
 
 /**
- * @public
  * The `intent` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarIntent: {
     readonly success: "success";
@@ -8659,8 +9091,9 @@ export declare const MessageBarIntent: {
 export declare type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
 
 /**
- * @public
  * The `layout` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarLayout: {
     readonly multiline: "multiline";
@@ -8670,8 +9103,9 @@ export declare const MessageBarLayout: {
 export declare type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
 
 /**
- * @public
  * The `shape` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarShape: {
     readonly rounded: "rounded";
@@ -8689,15 +9123,31 @@ export declare const MessageBarStyles: ElementStyles;
 
 /**
  * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * @type ElementViewTemplate
  */
 export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
 
+/**
+ * Standard orientation values
+ * @public
+ */
+export declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+
+/**
+ * The orientation type
+ * @public
+ */
+export declare type Orientation = (typeof Orientation)[keyof typeof Orientation];
+
 /**
  * A Progress HTML Element.
  * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @tag fluent-progress-bar
+ * @csspart indicator - The internal progress indicator element.
  *
  * @public
  */
@@ -8705,27 +9155,30 @@ export declare class ProgressBar extends BaseProgressBar {
     /**
      * The thickness of the progress bar
      *
-     * @public
+     * The thickness of the progress bar
+     *
      * HTML Attribute: `thickness`
+     *
+     * @public
      */
     thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
-     * @public
+     * The shape of the progress bar
+     *
      * HTML Attribute: `shape`
+     *
+     * @public
      */
     shape?: ProgressBarShape;
 }
 
 /**
- * The Fluent ProgressBar Element.
- *
+ * The definition for the `<fluent-progress-bar>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-progress-bar\>
  */
-export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export declare const ProgressBarDefinition: PartialFASTElementDefinition;
 
 /**
  * ProgressBarShape Constants
@@ -8789,8 +9242,9 @@ declare type PropertyNameForCalculation = 'max' | 'value';
  * @tag fluent-radio
  *
  * @slot checked-indicator - The checked indicator slot
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @fires {Event} change - Emits a custom change event when the checked state changes
+ * @fires {Event} input - Emits a custom input event when the checked state changes
+ * @fires {CustomEvent} disabled - Emits a custom disabled event when the disabled state changes
  *
  * @public
  */
@@ -8811,7 +9265,7 @@ export declare class Radio extends BaseCheckbox {
      * @internal
      * @override
      * @remarks
-     * To make a group of radio controls required, see {@link RadioGroup.required}.
+     * To make a group of radio controls required, see `RadioGroup.required`.
      */
     protected requiredChanged(): void;
     /**
@@ -8824,331 +9278,62 @@ export declare class Radio extends BaseCheckbox {
      */
     setFormValue(): void;
     /**
-     * Sets the validity of the control.
-     *
-     * @internal
-     * @override
-     * @remarks
-     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
-     */
-    setValidity(): void;
-    /**
-     * Toggles the checked state of the control.
-     *
-     * @param force - Forces the element to be checked or unchecked
-     * @public
-     * @override
-     * @remarks
-     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
-     */
-    toggleChecked(force?: boolean): void;
-}
-
-/**
- * @public
- */
-export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
-
-/**
- * The Fluent Radio Element.
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-radio\>
- */
-export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
-
-/**
- * A Radio Group Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
- *
- * @tag fluent-radio-group
- *
- * @public
- *
- * @slot - The default slot for the radio group
- */
-export declare class RadioGroup extends FASTElement {
-    /**
-     * The index of the checked radio, scoped to the enabled radios.
-     *
-     * @internal
-     */
-    protected checkedIndex: number;
-    /**
-     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
-     *
-     * @param prev - the previous index
-     * @param next - the current index
-     * @internal
-     */
-    protected checkedIndexChanged(prev: number | undefined, next: number): void;
-    /**
-     * Indicates that the value has been changed by the user.
-     */
-    private dirtyState;
-    /**
-     * Disables the radio group and child radios.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `disabled`
-     */
-    disabled: boolean;
-    /**
-     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
-     *
-     * @param prev - the previous disabled value
-     * @param next - the current disabled value
-     * @internal
-     */
-    protected disabledChanged(prev?: boolean, next?: boolean): void;
-    /**
-     * The value of the checked radio.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `value`
-     */
-    initialValue?: string;
-    /**
-     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
-     *
-     * @param prev - the previous value
-     * @param next - the current value
-     */
-    initialValueChanged(prev: string | undefined, next: string | undefined): void;
-    /**
-     * The name of the radio group.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `name`
-     */
-    name: string;
-    /**
-     * Sets the `name` attribute on all child radios when the `name` property changes.
-     *
-     * @internal
-     */
-    protected nameChanged(prev: string | undefined, next: string | undefined): void;
-    /**
-     * The orientation of the group.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `orientation`
-     */
-    orientation?: RadioGroupOrientation;
-    /**
-     * Sets the ariaOrientation attribute when the orientation changes.
-     *
-     * @param prev - the previous orientation
-     * @param next - the current orientation
-     * @internal
-     */
-    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
-    /**
-     * The collection of all child radios.
-     *
-     * @public
-     */
-    radios: Radio[];
-    /**
-     * Updates the enabled radios collection when properties on the child radios change.
-     *
-     * @param prev - the previous radios
-     * @param next - the current radios
-     */
-    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
-    /**
-     * Indicates whether the radio group is required.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `required`
-     */
-    required: boolean;
-    /**
-     *
-     * @param prev - the previous required value
-     * @param next - the current required value
-     */
-    requiredChanged(prev: boolean, next: boolean): void;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * A collection of child radios that are not disabled.
-     *
-     * @internal
-     */
-    get enabledRadios(): Radio[];
-    /**
-     * The form-associated flag.
-     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
-     *
-     * @public
-     */
-    static formAssociated: boolean;
-    /**
-     * The fallback validation message, taken from a native checkbox `<input>` element.
-     *
-     * @internal
-     */
-    private _validationFallbackMessage;
-    /**
-     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
-     * specified (e.g., via `setCustomValidity`).
-     *
-     * @internal
-     */
-    get validationMessage(): string;
-    /**
-     * 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 current value of the checked radio.
-     *
-     * @public
-     */
-    get value(): string | null;
-    set value(next: string | null);
-    /**
-     * Sets the checked state of all radios when any radio emits a `change` event.
-     *
-     * @param e - the change event
-     */
-    changeHandler(e: Event): boolean | void;
-    /**
-     * Checks the radio at the specified index.
-     *
-     * @param index - the index of the radio to check
-     * @internal
-     */
-    checkRadio(index?: number, shouldEmit?: boolean): void;
-    /**
-     * Checks the validity of the element and returns the result.
-     *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
-     */
-    checkValidity(): boolean;
-    /**
-     * Handles click events for the radio group.
-     *
-     * @param e - the click event
-     * @internal
-     */
-    clickHandler(e: MouseEvent): boolean | void;
-    constructor();
-    /**
-     * Focuses the checked radio or the first enabled radio.
-     *
-     * @internal
-     */
-    focus(): void;
-    /**
-     * Enables tabbing through the radio group when the group receives focus.
-     *
-     * @param e - the focus event
-     * @internal
-     */
-    focusinHandler(e: FocusEvent): boolean | void;
-    /**
-     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
-     *
-     * @param e - the focusout event
-     * @internal
-     */
-    focusoutHandler(e: FocusEvent): boolean | void;
-    formResetCallback(): void;
-    private getEnabledIndexInBounds;
-    /**
-     * Handles keydown events for the radio group.
-     *
-     * @param e - the keyboard event
-     * @internal
-     */
-    keydownHandler(e: KeyboardEvent): boolean | void;
-    /**
-     *
-     * @param e - the disabled event
-     */
-    disabledRadioHandler(e: CustomEvent): void;
-    /**
-     * Reports the validity of the element.
-     *
-     * @public
-     * @remarks
-     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
-     */
-    reportValidity(): boolean;
-    /**
-     * Resets the `tabIndex` for all child radios when the radio group loses focus.
-     *
-     * @internal
-     */
-    private restrictFocus;
-    /**
-     * 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 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.
+     * Sets the validity of the control.
      *
      * @internal
+     * @override
      * @remarks
-     * RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
-     * This is necessary because:
-     * 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
-     * 2. Browser validation UIs and screen readers announce validation against individual form controls
-     * 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
-     * 4. We anchor the error to the first Radio so it receives focus and announcement
-     *
-     * When the group is invalid (required but no selection):
-     * - Only the first Radio gets the invalid state with the validation message
-     * - Other Radios are kept valid since selecting any of them would satisfy the requirement
-     *
-     * When the group becomes valid (user selects any Radio):
-     * - All Radios are cleared back to valid state
-     * - This allows form submission to proceed
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
      */
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    setValidity(): void;
     /**
-     * Updates the collection of child radios when the slot changes.
+     * Toggles the checked state of the control.
      *
-     * @param e - the slot change event
-     * @internal
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
+     * @remarks
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
      */
-    slotchangeHandler(e: Event): void;
+    toggleChecked(force?: boolean): void;
 }
 
 /**
- * The Fluent RadioGroup Element.
+ * @public
+ */
+export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+
+/**
+ * The definition for the `<fluent-radio>` element.
+ *
+ * @public
+ */
+export declare const RadioDefinition: PartialFASTElementDefinition;
+
+/**
+ * A Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
+ *
+ * @tag fluent-radio-group
+ *
+ * @slot - The default slot for the radio group
+ * @fires { Event } change - Fired when the selected radio changes.
  *
+ * @public
+ */
+export declare class RadioGroup extends BaseRadioGroup {
+    private fg;
+    private fgItems;
+    disconnectedCallback(): void;
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
+}
+
+/**
+ * The definition for the `<fluent-radio-group>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-radio-group\>
  */
-export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
+export declare const RadioGroupDefinition: PartialFASTElementDefinition;
 
 /**
  * Radio Group orientation
@@ -9248,13 +9433,11 @@ export declare const RatingDisplayColor: {
 export declare type RatingDisplayColor = ValuesOf<typeof RatingDisplayColor>;
 
 /**
- * The definition for the Fluent Rating Display component.
+ * The definition for the `<fluent-rating-display>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-rating-display>`
  */
-export declare const RatingDisplayDefinition: FASTElementDefinition<typeof RatingDisplay>;
+export declare const RatingDisplayDefinition: PartialFASTElementDefinition;
 
 /**
  * The size of a Rating Display can be `small`, `medium`, or `large`.
@@ -9308,16 +9491,10 @@ export declare const roleForMenuItem: {
  *     as each entry’s value is either a string or a number.
  * @param node - The node to set the theme on, defaults to `document` for
  *     setting global theme.
- * @internal
+ * @public
  */
 export declare function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
 
-/**
- * @internal
- * @deprecated Use `setTheme(theme, element)` instead.
- */
-export declare function setThemeFor(element: HTMLElement, theme: Theme | null): void;
-
 /**
  * CSS custom property value for the {@link @fluentui/tokens#shadow16 | `shadow16`} design token.
  * @public
@@ -9398,7 +9575,7 @@ export declare const shadow8Brand = "var(--shadow8Brand)";
  * @slot thumb - The slot for a custom thumb element.
  * @csspart thumb-container - The container element of the thumb.
  * @csspart track-container - The container element of the track.
- * @fires change - Fires a custom 'change' event when the value changes.
+ * @fires { Event } change - Fires a custom 'change' event when the value changes.
  *
  * @public
  */
@@ -9608,6 +9785,13 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      */
     disabled: boolean;
     protected disabledChanged(): void;
+    /**
+     * Returns true if the component is disabled, taking into account the `disabled`
+     * attribute, `aria-disabled` attribute, and the `:disabled` pseudo-class.
+     *
+     * @internal
+     */
+    protected get isDisabled(): boolean;
     /**
      * The minimum allowed value.
      *
@@ -9678,9 +9862,6 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      */
     mode: SliderMode;
     constructor();
-    /**
-     * @internal
-     */
     connectedCallback(): void;
     /**
      * @internal
@@ -9758,14 +9939,11 @@ export declare interface SliderConfiguration {
 }
 
 /**
- * The Fluent Slider Element.
- *
+ * The definition for the `<fluent-slider>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-slider\>
  */
-export declare const SliderDefinition: FASTElementDefinition<typeof Slider>;
+export declare const SliderDefinition: PartialFASTElementDefinition;
 
 /**
  * @public
@@ -10011,11 +10189,11 @@ export declare const SpinnerAppearance: {
 export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 
 /**
+ * The definition for the `<fluent-spinner>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-spinner\>
  */
-export declare const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
+export declare const SpinnerDefinition: PartialFASTElementDefinition;
 
 /**
  * SpinnerSize constants
@@ -10129,6 +10307,7 @@ export { styles as MenuButtonStyles }
  * Based on BaseCheckbox and includes style and layout specific attributes
  *
  * @tag fluent-switch
+ * @csspart checked-indicator - The internal switch indicator element.
  *
  */
 export declare class Switch extends BaseCheckbox {
@@ -10136,13 +10315,11 @@ export declare class Switch extends BaseCheckbox {
 }
 
 /**
- * The Fluent Switch Element.
+ * The definition for the `<fluent-switch>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-switch\>
  */
-export declare const SwitchDefinition: FASTElementDefinition<typeof Switch>;
+export declare const SwitchDefinition: PartialFASTElementDefinition;
 
 /**
  * SwitchLabelPosition Constants
@@ -10181,43 +10358,43 @@ export declare class Tab extends FASTElement {
      * HTML Attribute: disabled
      */
     disabled: boolean;
-    private styles;
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * Internal text content stylesheet, used to set the content of the `::after`
+     * pseudo element to prevent layout shift when the font weight changes on selection.
+     * @internal
+     */
+    private styles?;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
     connectedCallback(): void;
+    private setDisabledSideEffect;
 }
 
 export declare interface Tab extends StartEnd {
 }
 
-export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
+/**
+ * The definition for the `<fluent-tab>` element.
+ *
+ * @public
+ */
+export declare const TabDefinition: PartialFASTElementDefinition;
 
 /**
- * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * A Tablist component.
  *
  * @tag fluent-tablist
+ * @fires { Event } change - Fired when the active tab changes.
  *
  * @public
  */
 export declare class Tablist extends BaseTablist {
-    /**
-     * activeTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    private activeTabData;
-    /**
-     * previousActiveTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    private previousActiveTabData;
-    /**
-     * activeTabOffset
-     * Used to position the active indicator for animations of the active indicator on active tab changes.
-     */
-    private activeTabOffset;
-    /**
-     * activeTabScale
-     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
-     */
-    private activeTabScale;
     /**
      * appearance
      * There are two modes of appearance: transparent and subtle.
@@ -10229,58 +10406,10 @@ export declare class Tablist extends BaseTablist {
      * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
      */
     size?: TablistSize;
-    /**
-     * calculateAnimationProperties
-     *
-     * Recalculates the active tab offset and scale.
-     * These values will be applied to css variables that control the tab active indicator position animations
-     */
-    private calculateAnimationProperties;
-    /**
-     * getSelectedTabPosition - gets the x or y coordinates of the tab
-     */
-    private getTabPosition;
-    /**
-     * getSelectedTabScale - gets the scale of the tab
-     */
-    private getTabScale;
-    /**
-     * Calculates and applies updated values to CSS variables.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private applyUpdatedCSSValues;
-    /**
-     * Runs through all the operations required for setting the tab active indicator to its starting location, ending
-     * location, and applying the animated css class to the tab.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private animationLoop;
-    /**
-     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-     * tab indicator.
-     *
-     * @internal
-     */
-    private setTabData;
-    /**
-     * Sets the css variables for the active tab indicator.
-     * @internal
-     */
-    private setAnimationVars;
-    /**
-     * Initiates the active tab indicator animation loop when activeid changes.
-     * @param oldValue - the previous tabId
-     * @param newValue - the new tabId
-     */
-    activeidChanged(oldValue: string, newValue: string): void;
-    /**
-     * Initiates the active tab indicator animation loop when tabs change.
-     */
-    tabsChanged(): void;
+    private fg?;
+    private fgItems?;
+    disconnectedCallback(): void;
+    tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
 }
 
 /**
@@ -10299,11 +10428,11 @@ export declare const TablistAppearance: {
 export declare type TablistAppearance = ValuesOf<typeof TablistAppearance>;
 
 /**
+ * The definition for the `<fluent-tablist>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-tablist\>
  */
-export declare const TablistDefinition: FASTElementDefinition<typeof Tablist>;
+export declare const TablistDefinition: PartialFASTElementDefinition;
 
 /**
  * The orientation of the component
@@ -10352,167 +10481,6 @@ export declare const TablistTemplate: ViewTemplate<Tablist, any>;
  */
 export declare type TabOptions = StartEndOptions<Tab>;
 
-/**
- * @deprecated - Use tablist instead
- *
- * @tag fluent-tab-panel
- */
-export declare class TabPanel extends FASTElement {
-}
-
-/**
- * @deprecated - Use tablist instead
- */
-export declare const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
-
-export declare const TabPanelStyles: ElementStyles;
-
-export declare const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
-
-/**
- * @deprecated - Use tablist instead
- *
- * @tag fluent-tabs
- */
-export declare class Tabs extends BaseTabs {
-    /**
-     * activeTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    private activeTabData;
-    /**
-     * previousActiveTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    private previousActiveTabData;
-    /**
-     * activeTabOffset
-     * Used to position the active indicator for animations of the active indicator on active tab changes.
-     */
-    private activeTabOffset;
-    /**
-     * activeTabScale
-     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
-     */
-    private activeTabScale;
-    /**
-     * styles
-     * used in the class for storing the css variables required for animations
-     */
-    private styles;
-    /**
-     * appearance
-     * There are two modes of appearance: transparent and subtle.
-     */
-    appearance?: TabsAppearance;
-    /**
-     * disabled
-     * Used for disabling all click and keyboard events for the tabs, child tab elements and tab panel elements. UI styling of content and tabs will appear as "grayed out."
-     */
-    disabled?: boolean;
-    /**
-     * size
-     * defaults to medium.
-     * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
-     */
-    size?: TabsSize;
-    /**
-     * calculateAnimationProperties
-     *
-     * Recalculates the active tab offset and scale.
-     * These values will be applied to css variables that control the tab active indicator position animations
-     */
-    private calculateAnimationProperties;
-    /**
-     * getSelectedTabPosition - gets the x or y coordinates of the tab
-     */
-    private getTabPosition;
-    /**
-     * getSelectedTabScale - gets the scale of the tab
-     */
-    private getTabScale;
-    /**
-     * Calculates and applies updated values to CSS variables.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private applyUpdatedCSSValues;
-    /**
-     * Runs through all the operations required for setting the tab active indicator to its starting location, ending
-     * location, and applying the animated css class to the tab.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private animationLoop;
-    /**
-     * Gets the position data for a tab element relative to its parent
-     * @param tab - The tab element to get position data for
-     * @returns The position data for the tab
-     */
-    private getTabPositionData;
-    /**
-     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-     * tab indicator.
-     *
-     * @internal
-     */
-    private setTabData;
-    private setTabOffsetCSSVar;
-    private setTabScaleCSSVar;
-    activeidChanged(oldValue: string, newValue: string): void;
-    tabsChanged(): void;
-}
-
-export declare interface Tabs extends StartEnd {
-}
-
-export declare const TabsAppearance: {
-    readonly subtle: "subtle";
-    readonly transparent: "transparent";
-};
-
-export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
-
-/**
- * @deprecated - Use tablist instead
- */
-export declare const TabsDefinition: FASTElementDefinition<typeof Tabs>;
-
-/**
- * Tabs option configuration options
- * @public
- */
-export declare type TabsOptions = StartEndOptions<Tabs>;
-
-/**
- * The orientation of the component
- * @public
- */
-export declare const TabsOrientation: {
-    readonly horizontal: "horizontal";
-    readonly vertical: "vertical";
-};
-
-/**
- * The types for the Tabs component
- * @public
- */
-export declare type TabsOrientation = ValuesOf<typeof TabsOrientation>;
-
-export declare const TabsSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-};
-
-export declare type TabsSize = ValuesOf<typeof TabsSize>;
-
-export declare const TabsStyles: ElementStyles;
-
-export declare const TabsTemplate: ElementViewTemplate<Tabs, any>;
-
 export declare const TabStyles: ElementStyles;
 
 export declare const TabTemplate: ElementViewTemplate<Tab, any>;
@@ -10522,6 +10490,8 @@ export declare const TabTemplate: ElementViewTemplate<Tab, any>;
  *
  * @tag fluent-text
  *
+ * @slot - The default slot for the text content of the component. Can be any valid HTML element, but is typically a semantic element such as a heading or paragraph.
+ *
  * @public
  */
 declare class Text_2 extends FASTElement {
@@ -10713,13 +10683,11 @@ export declare const TextAreaAutocomplete: {
 export declare type TextAreaAutocomplete = ValuesOf<typeof TextAreaAutocomplete>;
 
 /**
- * The Fluent Textarea Element definition.
+ * The definition for the `<fluent-textarea>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-textarea>`
  */
-export declare const TextAreaDefinition: FASTElementDefinition<typeof TextArea>;
+export declare const TextAreaDefinition: PartialFASTElementDefinition;
 
 /**
  * Values for the `resize` attribute on TextArea elements.
@@ -10759,14 +10727,11 @@ export declare const TextAreaStyles: ElementStyles;
 export declare const TextAreaTemplate: ElementViewTemplate<TextArea>;
 
 /**
- * The Fluent Text Element.
- *
+ * The definition for the `<fluent-text>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-text\>
  */
-export declare const TextDefinition: FASTElementDefinition<typeof Text_2>;
+export declare const TextDefinition: PartialFASTElementDefinition;
 
 /**
  * TextFont Constants
@@ -10789,6 +10754,8 @@ export declare type TextFont = ValuesOf<typeof TextFont>;
  * Based on BaseTextInput and includes style and layout specific attributes
  *
  * @tag fluent-text-input
+ * @fires { Event } change - Fired when the input value is committed via a change event.
+ * @fires { Event } select - Fires when the `select()` method is called.
  *
  * @public
  */
@@ -10849,13 +10816,11 @@ export declare const TextInputControlSize: {
 export declare type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
 
 /**
- * The Fluent TextInput Element definition.
+ * The definition for the `<fluent-text-input>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-text-input>`
  */
-export declare const TextInputDefinition: FASTElementDefinition<typeof TextInput>;
+export declare const TextInputDefinition: PartialFASTElementDefinition;
 
 /**
  * TextInput configuration options.
@@ -10945,7 +10910,7 @@ export declare type TextWeight = ValuesOf<typeof TextWeight>;
 /**
  * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
  * tokens to be added.
- * @internal
+ * @public
  */
 export declare type Theme = Record<string, string | number>;
 
@@ -11020,12 +10985,11 @@ export declare const ToggleButtonAppearance: {
 export declare type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
 
 /**
+ * The definition for the `<fluent-toggle-button>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-toggle-button\>
  */
-export declare const ToggleButtonDefinition: FASTElementDefinition<typeof ToggleButton>;
+export declare const ToggleButtonDefinition: PartialFASTElementDefinition;
 
 /**
  * A Toggle Button can be square, circular or rounded.
@@ -11080,6 +11044,8 @@ export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
  *
  * @tag fluent-tooltip
  *
+ * @slot - The default slot. Accepts the content of the tooltip.
+ *
  * @public
  */
 export declare class Tooltip extends FASTElement {
@@ -11133,13 +11099,13 @@ export declare class Tooltip extends FASTElement {
     disconnectedCallback(): void;
     /**
      * Shows the tooltip
-     * @param delay Number of milliseconds to delay showing the tooltip
+     * @param delay - Number of milliseconds to delay showing the tooltip
      * @internal
      */
     showTooltip(delay?: number): void;
     /**
      * Hide the tooltip
-     * @param delay Number of milliseconds to delay hiding the tooltip
+     * @param delay - Number of milliseconds to delay hiding the tooltip
      * @internal
      */
     hideTooltip(delay?: number): void;
@@ -11159,17 +11125,24 @@ export declare class Tooltip extends FASTElement {
      * Hide the tooltip on blur
      */
     blurAnchorHandler: () => void;
+    /**
+     * Indicates whether the tooltip styles have been applied for browsers that do not support anchor positioning.
+     * @internal
+     */
+    private anchorPositioningReady;
+    /**
+     * Sets fallback styles for the tooltip for browsers that do not support CSS anchor positioning.
+     * @internal
+     */
     private setFallbackStyles;
 }
 
 /**
- * The {@link Tooltip } custom element definition.
+ * The definition for the `<fluent-tooltip>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-tooltip>`
  */
-export declare const TooltipDefinition: FASTElementDefinition<typeof Tooltip>;
+export declare const TooltipDefinition: PartialFASTElementDefinition;
 
 /**
  * The TooltipPositioning options and their corresponding CSS values
@@ -11217,43 +11190,68 @@ export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
 export declare class Tree extends BaseTree {
     /**
      * The size of the tree item element
-     * @public
+     * The size of the tree item element
+     *
      * HTML Attribute: size
+     *
+     * @public
      */
     size: TreeItemSize;
     protected sizeChanged(): void;
     /**
      * The appearance variants of the tree item element
-     * @public
+     * The appearance variants of the tree item element
+     *
      * HTML Attribute: appearance
+     *
+     * @public
      */
     appearance: TreeItemAppearance;
     protected appearanceChanged(): void;
+    private fg?;
+    private fgItems?;
     /**
      * child tree items supered change event
      * @internal
      */
     childTreeItemsChanged(): void;
+    disconnectedCallback(): void;
     /**
      * 1. Update the child items' size based on the tree's size
      * 2. Update the child items' appearance based on the tree's appearance
      */
     updateSizeAndAppearance(): void;
+    /** @internal */
+    itemToggleHandler(): void;
 }
 
 /**
+ * The definition for the `<fluent-tree>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-tree\>
  */
-export declare const TreeDefinition: FASTElementDefinition<typeof Tree>;
+export declare const TreeDefinition: PartialFASTElementDefinition;
 
 /**
  * The Fluent Tree Item Element. Implements {@link @microsoft/fast-foundation#BaseTreeItem}.
  *
  * @tag fluent-tree-item
  *
+ * @slot - The default slot. Accepts the content of the tree item.
+ * @slot start - Content shown before the item label.
+ * @slot end - Content shown after the item label.
+ * @slot aside - Content shown at the far end of the row.
+ * @slot item - Child tree items.
+ *
+ * @csspart positioning-region - The container for item content and aside regions.
+ * @csspart content - The item content region.
+ * @csspart chevron - The expand/collapse indicator region.
+ * @csspart aside - The trailing aside region.
+ * @csspart items - The child items group region.
+ *
+ * @fires { ToggleEvent } toggle - Fired when expanded state toggles.
+ * @fires { Event } change - Fired when selected state changes.
+ *
  */
 export declare class TreeItem extends BaseTreeItem {
     /**
@@ -11301,12 +11299,11 @@ export declare const TreeItemAppearance: {
 export declare type TreeItemAppearance = ValuesOf<typeof TreeItemAppearance>;
 
 /**
+ * The definition for the `<fluent-tree-item>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-tree-item\>
  */
-export declare const TreeItemDefinition: FASTElementDefinition<typeof TreeItem>;
+export declare const TreeItemDefinition: PartialFASTElementDefinition;
 
 export declare const TreeItemSize: {
     readonly small: "small";