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

package/dist/web-components.d.ts

@@ -33,7 +33,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
      */
@@ -85,6 +85,7 @@ export declare class Accordion extends FASTElement {
      * @returns
      */
     private expandedChangedHandler;
+    connectedCallback(): void;
 }
 
 /**
@@ -980,16 +981,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 +1039,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.
      *
-     * @param e - The event object
      * @internal
      */
-    slotchangeHandler(): void;
+    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;
 }
 
 /**
@@ -1060,7 +1115,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 +1313,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.
      *
@@ -2083,6 +2152,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
@@ -2222,8 +2292,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.
      *
@@ -2294,8 +2373,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;
 }
 
 /**
@@ -2313,8 +2398,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.
@@ -2452,7 +2547,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
@@ -2484,6 +2579,7 @@ export declare class BaseTablist extends FASTElement {
     adjust(adjustment: number): void;
     private activateTabByIndex;
     private focusTab;
+    constructor();
     /**
      * @internal
      */
@@ -2533,6 +2629,13 @@ export declare class BaseTextArea extends FASTElement {
      * @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
      */
@@ -2817,13 +2920,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;
@@ -3262,7 +3362,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 */
@@ -3324,6 +3432,13 @@ 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.
@@ -3616,7 +3731,7 @@ export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
  *
  * @public
  */
-export declare const ButtonTemplate: ElementViewTemplate<Button>;
+export declare const ButtonTemplate: ElementViewTemplate<BaseButton>;
 
 /**
  * Button type values.
@@ -6288,6 +6403,7 @@ export declare class Dialog extends FASTElement {
      * @public
      */
     dialog: HTMLDialogElement;
+    protected dialogChanged(): void;
     /**
      * The ID of the element that describes the dialog
      *
@@ -6312,9 +6428,7 @@ export declare class Dialog extends FASTElement {
      * @public
      */
     type: DialogType;
-    protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
-    /** @internal */
-    connectedCallback(): void;
+    protected typeChanged(prev: DialogType | undefined, next: DialogType): void;
     /**
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
@@ -6349,6 +6463,12 @@ export declare class Dialog extends FASTElement {
      * @returns boolean
      */
     clickHandler(event: Event): boolean;
+    /**
+     * Updates the internal dialog element's attributes based on its type.
+     *
+     * @internal
+     */
+    protected updateDialogAttributes(): void;
 }
 
 /**
@@ -7846,14 +7966,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.
      *
@@ -7926,6 +8050,7 @@ export declare class Listbox extends FASTElement {
      */
     clickHandler(e: PointerEvent): boolean | void;
     constructor();
+    connectedCallback(): void;
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -7949,7 +8074,7 @@ export declare class Listbox extends FASTElement {
      * @param e - The slotchange event
      * @public
      */
-    slotchangeHandler(e: Event): void;
+    slotchangeHandler(e?: Event): void;
 }
 
 /**
@@ -8170,6 +8295,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
@@ -9083,6 +9215,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.
      *
@@ -9238,13 +9383,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;
 }
 
 /**
@@ -9715,6 +9853,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.
      *
@@ -9785,9 +9930,6 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      */
     mode: SliderMode;
     constructor();
-    /**
-     * @internal
-     */
     connectedCallback(): void;
     /**
      * @internal
@@ -10288,7 +10430,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;
 }
 
@@ -10387,7 +10541,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;
 }
 
 /**