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

package/dist/web-components.d.ts

@@ -979,6 +979,51 @@ export declare class BaseAnchor extends FASTElement {
  * @public
  */
 export declare class BaseAvatar extends FASTElement {
+    /**
+     * Reference to the default slot element.
+     *
+     * @internal
+     */
+    defaultSlot: HTMLSlotElement;
+    /**
+     * 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
+     */
+    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.
      *
@@ -993,15 +1038,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;
+    /**
+     * Handles changes to the initials attribute.
+     * @internal
+     */
+    protected initialsChanged(): void;
     constructor();
+    /**
+     * 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.
+     *
+     * @internal
+     */
+    protected cleanupSlottedContent(): void;
 }
 
 /**
@@ -1040,7 +1114,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.
      *
@@ -1230,6 +1312,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.
      *
@@ -2063,6 +2151,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
@@ -2202,8 +2291,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.
      *
@@ -2212,8 +2310,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;
     /**
@@ -2224,8 +2325,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`
+     *
+     * @internal
      */
     value?: number;
     /**
@@ -2236,8 +2340,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`
+     *
+     * @internal
      */
     min?: number;
     /**
@@ -2249,8 +2356,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`
+     *
+     * @internal
      */
     max?: number;
     /**
@@ -2262,8 +2372,14 @@ 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;
 }
 
 /**
@@ -2281,8 +2397,18 @@ export declare class BaseRatingDisplay extends FASTElement {
      * @internal
      */
     elementInternals: ElementInternals;
-    /** @internal */
+    /**
+     * Reference to the slot element used for the rating icon.
+     *
+     * @internal
+     */
     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.
@@ -2420,7 +2546,7 @@ export declare class BaseTablist extends FASTElement {
     /**
      * @internal
      */
-    protected tabsChanged(): void;
+    protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
     /**
      * A reference to the active tab
      * @public
@@ -2452,95 +2578,7 @@ export declare class BaseTablist extends FASTElement {
     adjust(adjustment: number): void;
     private activateTabByIndex;
     private focusTab;
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-}
-
-/**
- * A Tabs component that wraps a collection of tab and tab panel elements.
- *
- * @deprecated - use tablist instead
- */
-declare class BaseTabs extends FASTElement {
-    /**
-     * The orientation
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
-     */
-    orientation: TabsOrientation;
-    /**
-     * @internal
-     */
-    orientationChanged(): void;
-    /**
-     * The id of the active tab
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: activeid
-     */
-    activeid: string;
-    /**
-     * @internal
-     */
-    activeidChanged(oldValue: string, newValue: string): void;
-    /**
-     * @internal
-     */
-    tabs: HTMLElement[];
-    /**
-     * @internal
-     */
-    tabsChanged(): void;
-    /**
-     * @internal
-     */
-    tabpanels: HTMLElement[];
-    /**
-     * @internal
-     */
-    tabpanelsChanged(): void;
-    /**
-     * A reference to the active tab
-     * @public
-     */
-    activetab: HTMLElement;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
-    private tabpanelIds;
-    private change;
-    private isDisabledElement;
-    private isHiddenElement;
-    private isFocusableElement;
-    private getActiveIndex;
-    /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
-     *
-     * @public
-     */
-    protected setTabs(): void;
-    private setTabPanels;
-    private getTabIds;
-    private getTabPanelIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
-    /**
-     * The adjust method for FASTTabs
-     * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
-     */
-    adjust(adjustment: number): void;
-    private adjustForward;
-    private adjustBackward;
-    private moveToTabByIndex;
-    private focusTab;
+    constructor();
     /**
      * @internal
      */
@@ -2580,11 +2618,23 @@ export declare class BaseTextArea extends FASTElement {
      * @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
      */
@@ -2869,13 +2919,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;
@@ -3314,7 +3361,15 @@ 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();
+    connectedCallback(): void;
     /** @internal */
     childTreeItems: BaseTreeItem[];
     /** @internal */
@@ -3376,11 +3431,21 @@ 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();
     /**
      * 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;
     /**
@@ -3408,8 +3473,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;
@@ -3455,6 +3523,36 @@ declare class BaseTreeItem extends FASTElement {
     handleItemSlotChange(): void;
 }
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius2XLarge | `borderRadius2XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius2XLarge = "var(--borderRadius2XLarge)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius3XLarge | `borderRadius3XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius3XLarge = "var(--borderRadius3XLarge)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius4XLarge | `borderRadius4XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius4XLarge = "var(--borderRadius4XLarge)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius5XLarge | `borderRadius5XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius5XLarge = "var(--borderRadius5XLarge)";
+
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius6XLarge | `borderRadius6XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius6XLarge = "var(--borderRadius6XLarge)";
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public
@@ -3632,7 +3730,7 @@ export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
  *
  * @public
  */
-export declare const ButtonTemplate: ElementViewTemplate<Button>;
+export declare const ButtonTemplate: ElementViewTemplate<BaseButton>;
 
 /**
  * Button type values.
@@ -4169,6 +4267,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
@@ -4187,6 +4315,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
@@ -4199,6 +4333,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
@@ -4379,6 +4531,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
@@ -4553,6 +4729,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
@@ -4595,6 +4795,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
@@ -6010,10 +6216,11 @@ export declare class CounterBadge extends FASTElement {
      */
     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
+     *
+     * @internal
      */
     setCount(): string | void;
 }
@@ -6190,57 +6397,77 @@ export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => Matc
  */
 export declare class Dialog extends FASTElement {
     /**
-     * @public
      * The dialog element
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
+    protected dialogChanged(): void;
     /**
-     * @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 */
-    connectedCallback(): void;
+    protected typeChanged(prev: DialogType | undefined, next: DialogType): 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 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
      */
     clickHandler(event: Event): boolean;
+    /**
+     * Updates the internal dialog element's attributes based on its type.
+     *
+     * @internal
+     */
+    protected updateDialogAttributes(): void;
 }
 
 /**
@@ -6472,20 +6699,23 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
 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;
     /**""
@@ -6501,8 +6731,9 @@ export declare class Drawer extends FASTElement {
      */
     size: DrawerSize;
     /**
-     * @public
      * The dialog element.
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
     /** @internal */
@@ -6510,25 +6741,29 @@ export declare class Drawer extends FASTElement {
     /** @internal */
     disconnectedCallback(): 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 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;
     /**
@@ -6539,8 +6774,9 @@ export declare class Drawer extends FASTElement {
      */
     clickHandler(event: Event): boolean;
     /**
-     * @public
      * Handles cancel events on the drawer.
+     *
+     * @public
      */
     cancelHandler(): void;
     protected observeRoleAttr(): void;
@@ -7729,14 +7965,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.
      *
@@ -7809,6 +8049,7 @@ export declare class Listbox extends FASTElement {
      */
     clickHandler(e: PointerEvent): boolean | void;
     constructor();
+    connectedCallback(): void;
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -7832,7 +8073,7 @@ export declare class Listbox extends FASTElement {
      * @param e - The slotchange event
      * @public
      */
-    slotchangeHandler(e: Event): void;
+    slotchangeHandler(e?: Event): void;
 }
 
 /**
@@ -8053,6 +8294,13 @@ export declare class Menu extends FASTElement {
      * @public
      */
     slottedMenuList: MenuList[];
+    /**
+     * Sets up the component when the slotted menu list changes.
+     * @param prev - The previous items in the slotted menu list.
+     * @param next - The new items in the slotted menu list.
+     * @internal
+     */
+    slottedMenuListChanged(prev: MenuList[] | undefined, next: MenuList[] | undefined): void;
     /**
      * Holds the slotted triggers.
      * @public
@@ -8610,8 +8858,9 @@ export declare class MessageBar extends FASTElement {
      */
     intent?: MessageBarIntent;
     /**
-     * @public
      * Method to emit a `dismiss` event when the message bar is dismissed
+     *
+     * @public
      */
     dismissMessageBar: () => void;
 }
@@ -8626,8 +8875,9 @@ export declare class MessageBar extends FASTElement {
 export declare const MessageBarDefinition: FASTElementDefinition<typeof MessageBar>;
 
 /**
- * @public
  * The `intent` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarIntent: {
     readonly success: "success";
@@ -8639,8 +8889,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";
@@ -8650,8 +8901,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";
@@ -8685,14 +8937,20 @@ 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;
 }
@@ -8956,6 +9214,19 @@ export declare class RadioGroup extends FASTElement {
      * @param next - the current required value
      */
     requiredChanged(prev: boolean, next: boolean): void;
+    /**
+     * The collection of radios that are slotted into the default slot.
+     *
+     * @internal
+     */
+    slottedRadios: Radio[];
+    /**
+     * Updates the radios collection when the slotted radios change.
+     *
+     * @param prev - the previous slotted radios
+     * @param next - the current slotted radios
+     */
+    slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -9111,13 +9382,6 @@ export declare class RadioGroup extends FASTElement {
      * - This allows form submission to proceed
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
-    /**
-     * Updates the collection of child radios when the slot changes.
-     *
-     * @param e - the slot change event
-     * @internal
-     */
-    slotchangeHandler(e: Event): void;
 }
 
 /**
@@ -9288,7 +9552,7 @@ 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;
 
@@ -9588,6 +9852,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.
      *
@@ -9658,9 +9929,6 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      */
     mode: SliderMode;
     constructor();
-    /**
-     * @internal
-     */
     connectedCallback(): void;
     /**
      * @internal
@@ -10161,7 +10429,19 @@ export declare class Tab extends FASTElement {
      * HTML Attribute: disabled
      */
     disabled: boolean;
-    private styles;
+    /**
+     * 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;
 }
 
@@ -10260,7 +10540,7 @@ export declare class Tablist extends BaseTablist {
     /**
      * Initiates the active tab indicator animation loop when tabs change.
      */
-    tabsChanged(): void;
+    tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
 }
 
 /**
@@ -10332,167 +10612,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>;
@@ -10925,7 +11044,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>;
 
@@ -11197,15 +11316,21 @@ 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;