@fluentui/web-components 3.0.0-beta.99 → 3.0.0-rc.1

package/dist/web-components.d.ts

@@ -1039,7 +1039,8 @@ export declare class BaseButton extends FASTElement {
      * @remarks
      * HTML Attribute: `disabled`
      */
-    disabled?: boolean;
+    disabled: boolean;
+    protected disabledChanged(): void;
     /**
      * Indicates that the button is focusable while disabled.
      *
@@ -1048,14 +1049,6 @@ export declare class BaseButton extends FASTElement {
      * HTML Attribute: `disabled-focusable`
      */
     disabledFocusable: boolean;
-    /**
-     * Sets that the button tabindex attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `tabindex`
-     */
-    tabIndex: number;
     /**
      * Sets the element's internal disabled state when the element is focusable while disabled.
      *
@@ -1336,6 +1329,14 @@ export declare class BaseCheckbox extends FASTElement {
      * @internal
      */
     protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * Tracks whether the space key was pressed down while the checkbox was focused.
+     * This is used to prevent inadvertently checking a required, unchecked checkbox when the space key is pressed on a
+     * submit button and field validation is triggered.
+     *
+     * @internal
+     */
+    private _keydownPressed;
     /**
      * The name of the element. This element's value will be surfaced during form submission under the provided name.
      *
@@ -1467,7 +1468,8 @@ export declare class BaseCheckbox extends FASTElement {
      */
     inputHandler(e: InputEvent): boolean | void;
     /**
-     * Prevents scrolling when the user presses the space key.
+     * Prevents scrolling when the user presses the space key, and sets a flag to indicate that the space key was pressed
+     * down while the checkbox was focused.
      *
      * @param e - the event object
      * @internal
@@ -1709,12 +1711,6 @@ export declare class BaseDropdown extends FASTElement {
      * The listbox element is assigned to the dropdown via the default slot with manual slot assignment.
      */
     listboxChanged(prev: Listbox | undefined, next: Listbox | undefined): void;
-    /**
-     * Reference to the listbox slot element.
-     *
-     * @internal
-     */
-    listboxSlot: HTMLSlotElement;
     /**
      * Indicates whether the dropdown allows multiple options to be selected.
      *
@@ -1807,6 +1803,20 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     controlSlot: HTMLSlotElement;
+    /**
+     * An abort controller to remove scroll and resize event listeners when the dropdown is closed or disconnected. Used
+     * when the browser does not support CSS anchor positioning.
+     *
+     * @internal
+     */
+    private debounceController?;
+    /**
+     * Repositions the listbox to align with the control element. Used when the browser does not support CSS anchor
+     * positioning.
+     *
+     * @internal
+     */
+    private repositionListbox;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -1826,11 +1836,11 @@ export declare class BaseDropdown extends FASTElement {
      */
     static formAssociated: boolean;
     /**
-     * Resets the form value to its initial value when the form is reset.
+     * The ID of the frame used for repositioning the listbox when the browser does not support CSS anchor positioning.
      *
      * @internal
      */
-    formResetCallback(): void;
+    private frameId?;
     /**
      * A reference to the first freeform option, if present.
      *
@@ -1966,6 +1976,12 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
     /**
      * Ensures the active index is within bounds of the enabled options. Out-of-bounds indices are wrapped to the opposite
      * end of the range.
@@ -2033,21 +2049,21 @@ export declare class BaseDropdown extends FASTElement {
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     /**
-     * Updates the freeform option with the provided value.
+     * Handles the `slotchange` event for the dropdown.
+     * Sets the `listbox` property when a valid listbox is assigned to the default slot.
      *
-     * @param value - the value to update the freeform option with
+     * @param e - the slot change event
      * @internal
      */
-    protected updateFreeformOption(value?: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    slotchangeHandler(e: Event): boolean | void;
     /**
-     * Handles the connected event for the listbox.
+     * Updates the freeform option with the provided value.
      *
-     * @param e - the event object
+     * @param value - the value to update the freeform option with
      * @internal
      */
-    private listboxConnectedHandler;
+    protected updateFreeformOption(value?: string): void;
+    disconnectedCallback(): void;
     /**
      * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
      * viewport bounds. One static observer is used for all dropdowns.
@@ -2063,6 +2079,7 @@ export declare class BaseDropdown extends FASTElement {
  * @public
  */
 export declare class BaseField extends FASTElement {
+    private slottedInputObserver;
     /**
      * The slotted label elements.
      *
@@ -2140,6 +2157,8 @@ export declare class BaseField extends FASTElement {
      */
     clickHandler(e: MouseEvent): boolean | void;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
      *
@@ -2183,6 +2202,8 @@ export declare class BaseField extends FASTElement {
  * @public
  */
 export declare class BaseProgressBar extends FASTElement {
+    /** @internal */
+    indicator: HTMLElement;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -2240,12 +2261,9 @@ export declare class BaseProgressBar extends FASTElement {
      * @internal
      */
     protected maxChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * Indicates progress in %
-     * @internal
-     */
-    get percentComplete(): number;
     constructor();
+    connectedCallback(): void;
+    private setIndicatorWidth;
 }
 
 /**
@@ -2256,12 +2274,21 @@ export declare class BaseProgressBar extends FASTElement {
  * @public
  */
 export declare class BaseRatingDisplay extends FASTElement {
+    private numberFormatter;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
     elementInternals: ElementInternals;
+    /** @internal */
+    iconSlot: HTMLSlotElement;
+    protected defaultCustomIconViewBox: string;
+    /**
+     * The element that displays the rating icons.
+     * @internal
+     */
+    display: HTMLElement;
     /**
      * The number of ratings.
      *
@@ -2274,9 +2301,9 @@ export declare class BaseRatingDisplay extends FASTElement {
      * The `viewBox` attribute of the icon <svg> element.
      *
      * @public
-     * @default `0 0 20 20`
      * @remarks
      * HTML Attribute: `icon-view-box`
+     * @deprecated Add `viewBox` attribute on the custom SVG directly.
      */
     iconViewBox?: string;
     /**
@@ -2289,6 +2316,7 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `max`
      */
     max?: number;
+    protected maxChanged(): void;
     /**
      * The value of the rating.
      *
@@ -2297,44 +2325,19 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `value`
      */
     value?: number;
-    /**
-     * @internal
-     */
-    slottedIcon: HTMLElement[];
-    /**
-     * @internal
-     */
-    slottedIconChanged(): void;
-    /**
-     * @internal
-     */
-    private customIcon?;
-    private intlNumberFormatter;
+    protected valueChanged(): void;
     constructor();
+    connectedCallback(): void;
     /**
      * Returns "count" as string, formatted according to the locale.
      *
      * @internal
      */
     get formattedCount(): string;
-    /**
-     * Gets the selected value
-     *
-     * @protected
-     */
-    protected getSelectedValue(): number;
-    /**
-     * Gets the maximum icons to render
-     *
-     * @protected
-     */
-    protected getMaxIcons(): number;
-    /**
-     * Generates the icon SVG elements based on the "max" attribute.
-     *
-     * @internal
-     */
-    generateIcons(): string;
+    /** @internal */
+    handleSlotChange(): void;
+    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
+    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
 }
 
 /**
@@ -2401,9 +2404,19 @@ export declare class BaseTablist extends FASTElement {
      */
     protected activeidChanged(oldValue: string, newValue: string): void;
     /**
+     * Content slotted in the tab slot.
      * @internal
      */
-    tabs: HTMLElement[];
+    slottedTabs: Node[];
+    /**
+     * Updates the tabs property when content in the tabs slot changes.
+     * @internal
+     */
+    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * @internal
+     */
+    tabs: Tab[];
     /**
      * @internal
      */
@@ -2412,7 +2425,7 @@ export declare class BaseTablist extends FASTElement {
      * A reference to the active tab
      * @public
      */
-    activetab: HTMLElement;
+    activetab: Tab;
     private prevActiveTabIndex;
     private activeTabIndex;
     private tabIds;
@@ -2582,6 +2595,7 @@ export declare class BaseTextArea extends FASTElement {
      */
     defaultSlottedNodes: Node[];
     protected defaultSlottedNodesChanged(): void;
+    private filteredLabelSlottedNodes;
     /**
      * The list of nodes that are assigned to the `label` slot.
      * @internal
@@ -3298,8 +3312,12 @@ export declare class BaseTree extends FASTElement {
      * @internal
      */
     elementInternals: ElementInternals;
+    /** @internal */
+    defaultSlot: HTMLSlotElement;
     constructor();
+    /** @internal */
     childTreeItems: BaseTreeItem[];
+    /** @internal */
     childTreeItemsChanged(): void;
     /**
      * Updates current selected when slottedTreeItems changes
@@ -3345,6 +3363,8 @@ export declare class BaseTree extends FASTElement {
      * Move focus to a tree item based on its offset from the provided item
      */
     private focusNextNode;
+    /** @internal */
+    handleDefaultSlotChange(): void;
 }
 
 declare class BaseTreeItem extends FASTElement {
@@ -3354,6 +3374,8 @@ declare class BaseTreeItem extends FASTElement {
      * @internal
      */
     elementInternals: ElementInternals;
+    /** @internal */
+    itemSlot: HTMLSlotElement;
     constructor();
     /**
      * When true, the control will be appear expanded by user interaction.
@@ -3397,7 +3419,8 @@ declare class BaseTreeItem extends FASTElement {
      * @public
      */
     dataIndent: number | undefined;
-    private dataIndentChanged;
+    protected dataIndentChanged(prev: number, next: number): void;
+    /** @internal */
     childTreeItems: BaseTreeItem[] | undefined;
     /**
      * Handles changes to the child tree items
@@ -3405,6 +3428,7 @@ declare class BaseTreeItem extends FASTElement {
      * @public
      */
     childTreeItemsChanged(): void;
+    connectedCallback(): void;
     /**
      * Updates the childrens indent
      *
@@ -3426,6 +3450,9 @@ declare class BaseTreeItem extends FASTElement {
      * @internal
      */
     get isNestedItem(): boolean;
+    protected updateTabindexBySelected(): void;
+    /** @internal */
+    handleItemSlotChange(): void;
 }
 
 /**
@@ -6182,6 +6209,9 @@ export declare class Dialog extends FASTElement {
      * The type of the dialog modal
      */
     type: DialogType;
+    protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
+    /** @internal */
+    connectedCallback(): void;
     /**
      * @public
      * Method to emit an event before the dialog's open state changes
@@ -6223,10 +6253,12 @@ export declare class Dialog extends FASTElement {
  */
 export declare class DialogBody extends FASTElement {
     /**
-     * @public
-     * Indicates whether the dialog has a title action
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
      */
-    noTitleAction: boolean;
+    clickHandler(event: PointerEvent): boolean | void;
 }
 
 /**
@@ -6364,10 +6396,7 @@ export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
  * @public
  */
 export declare const DividerOrientation: {
-    readonly horizontal: "horizontal"; /**
-    * Divider roles
-    * @public
-    */
+    readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
 
@@ -6432,6 +6461,7 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
  * @method clickHandler - Handles click events on the drawer.
+ * @method cancelHandler - Handles cancel events on the drawer.
  * @method emitToggle - Emits an event after the dialog's open state changes.
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
@@ -6440,12 +6470,14 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @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.
      */
     type: DrawerType;
+    protected typeChanged(): void;
     /**
      * @public
      * The ID of the element that labels the drawer.
@@ -6473,6 +6505,10 @@ export declare class Drawer extends FASTElement {
      * The dialog element.
      */
     dialog: HTMLDialogElement;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
     /**
      * @public
      * Method to emit an event after the dialog's open state changes
@@ -6502,6 +6538,13 @@ export declare class Drawer extends FASTElement {
      * Handles click events on the drawer.
      */
     clickHandler(event: Event): boolean;
+    /**
+     * @public
+     * Handles cancel events on the drawer.
+     */
+    cancelHandler(): void;
+    protected observeRoleAttr(): void;
+    protected updateDialogRole(): void;
 }
 
 /**
@@ -6525,6 +6568,13 @@ export declare class Drawer extends FASTElement {
  * @tag fluent-drawer-body
  */
 export declare class DrawerBody extends FASTElement {
+    /**
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(event: PointerEvent): boolean | void;
 }
 
 /**
@@ -7367,6 +7417,16 @@ export declare const ImageStyles: ElementStyles;
  */
 export declare const ImageTemplate: ElementViewTemplate<Image_2>;
 
+/**
+ * Predicate function that determines if the element should be considered a dialog.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a dialog.
+ * @public
+ */
+export declare function isDialog(element?: Node | null, tagName?: string): element is Dialog;
+
 /**
  * Predicate function that determines if the element should be considered a dropdown.
  *
@@ -7397,6 +7457,16 @@ export declare function isDropdownOption(value: Node | null, tagName?: string):
  */
 export declare function isListbox(element?: Node | null, tagName?: string): element is Listbox;
 
+/**
+ * Predicate function that determines if the element should be considered a tab.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a tab.
+ * @public
+ */
+export declare function isTab(element?: Node | null, tagName?: string): element is Tab;
+
 /**
  * Predicate function that determines if the element should be considered an tree-item.
  *
@@ -7650,7 +7720,6 @@ export declare const LinkTemplate: ElementViewTemplate<Link>;
  * @tag fluent-listbox
  *
  * @slot - The default slot for the options.
- * @emits connected - Dispatched when the element is connected to the DOM.
  *
  * @remarks
  * The listbox component represents a list of options that can be selected.
@@ -7740,7 +7809,6 @@ export declare class Listbox extends FASTElement {
      */
     clickHandler(e: PointerEvent): boolean | void;
     constructor();
-    connectedCallback(): void;
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -7757,6 +7825,14 @@ export declare class Listbox extends FASTElement {
      * @public
      */
     selectOption(index?: number): void;
+    /**
+     * Handles the `slotchange` event for the default slot.
+     * Sets the `options` property to the list of slotted options.
+     *
+     * @param e - The slotchange event
+     * @public
+     */
+    slotchangeHandler(e: Event): void;
 }
 
 /**
@@ -7785,7 +7861,6 @@ export declare const ListboxTemplate: ElementViewTemplate<Listbox>;
 /**
  * Generates a template for the {@link (Dropdown:class)} component.
  *
- * @param options - The {@link (DropdownOptions:interface)} to use for generating the template.
  * @returns The template object.
  *
  * @public
@@ -8606,7 +8681,7 @@ export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
  *
  * @public
  */
-declare class ProgressBar_2 extends BaseProgressBar {
+export declare class ProgressBar extends BaseProgressBar {
     /**
      * The thickness of the progress bar
      *
@@ -8621,7 +8696,6 @@ declare class ProgressBar_2 extends BaseProgressBar {
      */
     shape?: ProgressBarShape;
 }
-export { ProgressBar_2 as ProgressBar }
 
 /**
  * The Fluent ProgressBar Element.
@@ -8631,7 +8705,7 @@ export { ProgressBar_2 as ProgressBar }
  * @remarks
  * HTML Element: \<fluent-progress-bar\>
  */
-export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
+export declare const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
 
 /**
  * ProgressBarShape Constants
@@ -8653,7 +8727,7 @@ export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
  */
 export declare const ProgressBarStyles: ElementStyles;
 
-export declare const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
+export declare const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
 
 /**
  * ProgressBarThickness Constants
@@ -8686,6 +8760,8 @@ export declare const ProgressBarValidationState: {
  */
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
+declare type PropertyNameForCalculation = 'max' | 'value';
+
 /**
  * A Radio Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
@@ -8699,7 +8775,6 @@ export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarVali
  * @public
  */
 export declare class Radio extends BaseCheckbox {
-    connectedCallback(): void;
     constructor();
     /**
      * Toggles the disabled state when the user changes the `disabled` property.
@@ -9019,6 +9094,21 @@ export declare class RadioGroup extends FASTElement {
      * @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
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     /**
@@ -9045,10 +9135,7 @@ export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGro
  * @public
  */
 export declare const RadioGroupOrientation: {
-    readonly horizontal: "horizontal"; /**
-    * Radio Group orientation
-    * @public
-    */
+    readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
 
@@ -9122,18 +9209,6 @@ export declare class RatingDisplay extends BaseRatingDisplay {
      * HTML Attribute: `compact`
      */
     compact: boolean;
-    /**
-     * Overrides the selected value and returns 1 if compact is true.
-     *
-     * @override
-     */
-    protected getSelectedValue(): number;
-    /**
-     * Overrides the maximum icons and returns a max of 1 if compact is true.
-     *
-     * @override
-     */
-    protected getMaxIcons(): number;
 }
 
 /**
@@ -10215,10 +10290,7 @@ export declare const TablistDefinition: FASTElementDefinition<typeof Tablist>;
  * @public
  */
 export declare const TablistOrientation: {
-    readonly horizontal: "horizontal"; /**
-    * The appearance of the component
-    * @public
-    */
+    readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
 
@@ -11129,14 +11201,14 @@ export declare class Tree extends BaseTree {
      * HTML Attribute: size
      */
     size: TreeItemSize;
-    private sizeChanged;
+    protected sizeChanged(): void;
     /**
      * The appearance variants of the tree item element
      * @public
      * HTML Attribute: appearance
      */
     appearance: TreeItemAppearance;
-    private appearanceChanged;
+    protected appearanceChanged(): void;
     /**
      * child tree items supered change event
      * @internal
@@ -11174,7 +11246,7 @@ export declare class TreeItem extends BaseTreeItem {
      * we update the child tree items' size based on the size
      *  @internal
      */
-    private sizeChanged;
+    protected sizeChanged(): void;
     /**
      * The size of the tree item element
      * @public
@@ -11185,7 +11257,7 @@ export declare class TreeItem extends BaseTreeItem {
      *
      * @internal
      */
-    private appearanceChanged;
+    protected appearanceChanged(): void;
     /**
      * child tree items supered change event
      * @internal