@fluentui/web-components 3.0.0-rc.15 → 3.0.0-rc.16

package/dist/web-components.d.ts

@@ -5,8 +5,6 @@ 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 { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -59,34 +57,31 @@ 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;
@@ -958,7 +953,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;
@@ -2288,7 +2283,7 @@ export declare class BaseField extends FASTElement {
 }
 
 /**
- * A Base Menu List Custom HTML Element.
+ * A Base MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @public
@@ -2305,12 +2300,8 @@ export declare class BaseMenuList extends FASTElement {
      */
     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;
+    protected menuChildren: HTMLElement[] | undefined;
+    protected menuItems: MenuItem[] | undefined;
     private static focusableElementRoles;
     constructor();
     /**
@@ -2331,17 +2322,6 @@ export declare class BaseMenuList extends FASTElement {
      * @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;
     /**
@@ -2355,12 +2335,7 @@ export declare class BaseMenuList extends FASTElement {
     /**
      * 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;
+    protected isMenuItemElement(el: Element): el is MenuItem;
 }
 
 /**
@@ -2468,6 +2443,7 @@ export declare class BaseProgressBar extends FASTElement {
  * @public
  */
 export declare class BaseRadioGroup extends FASTElement {
+    private isNavigating;
     /**
      * The index of the checked radio, scoped to the enabled radios.
      *
@@ -2669,6 +2645,7 @@ export declare class BaseRadioGroup extends FASTElement {
      * @internal
      */
     focus(): void;
+    formResetCallback(): void;
     /**
      * Enables tabbing through the radio group when the group receives focus.
      *
@@ -2676,15 +2653,6 @@ export declare class BaseRadioGroup extends FASTElement {
      * @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.
      *
@@ -2705,12 +2673,6 @@ export declare class BaseRadioGroup extends FASTElement {
      * 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.
      *
@@ -2860,13 +2822,7 @@ export declare class BaseTablist extends FASTElement {
      * HTML Attribute: disabled.
      */
     disabled: boolean;
-    /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
-     *
-     * @internal
-     */
+    /** @internal */
     protected disabledChanged(prev: boolean, next: boolean): void;
     /**
      * The orientation
@@ -2875,9 +2831,6 @@ export declare class BaseTablist extends FASTElement {
      * HTML Attribute: orientation
      */
     orientation: TablistOrientation;
-    /**
-     * @internal
-     */
     protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
     /**
      * The id of the active tab
@@ -2887,59 +2840,36 @@ export declare class BaseTablist extends FASTElement {
      * HTML Attribute: activeid
      */
     activeid: string;
-    /**
-     * @internal
-     */
+    /** @internal */
     protected activeidChanged(oldValue: string, newValue: string): void;
     /**
      * Content slotted in the tab slot.
      * @internal
      */
     slottedTabs: Node[];
-    /**
-     * Updates the tabs property when content in the tabs slot changes.
-     * @internal
-     */
-    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
-    /**
-     * @internal
-     */
+    /** @internal */
+    protected slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /** @internal */
     tabs: Tab[];
-    /**
-     * @internal
-     */
+    /** @internal */
     protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
     /**
      * A reference to the active tab
      * @public
      */
     activetab: Tab;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
     private tabPanelMap;
     private change;
-    private getActiveIndex;
     /**
      * Function that is invoked whenever the selected tab or the tab collection changes.
-     *
-     * @public
-     */
-    protected setTabs(): void;
-    private getTabIds;
-    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 activateTabByIndex;
-    private focusTab;
+    protected setTabs({ connectToPanel, forceDisabled }?: {
+        connectToPanel?: boolean | undefined;
+        forceDisabled?: boolean | undefined;
+    }): void;
+    /** @internal */
+    handleFocusIn(event: FocusEvent): void;
+    private changeTab;
     constructor();
     /**
      * @internal
@@ -3709,12 +3639,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.
      *
@@ -3731,7 +3655,6 @@ export declare class BaseTree extends FASTElement {
      */
     defaultSlotChanged(): void;
     constructor();
-    connectedCallback(): void;
     /** @internal */
     childTreeItems: BaseTreeItem[];
     /** @internal */
@@ -3746,18 +3669,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
      *
@@ -3771,17 +3682,13 @@ 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[];
 }
 
 declare class BaseTreeItem extends FASTElement {
@@ -3858,7 +3765,6 @@ declare class BaseTreeItem extends FASTElement {
      * @public
      */
     childTreeItemsChanged(): void;
-    connectedCallback(): void;
     /**
      * Updates the childrens indent
      *
@@ -3876,11 +3782,15 @@ 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;
 }
@@ -6744,12 +6654,6 @@ 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.
  *
@@ -7034,11 +6938,11 @@ 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.
  *
@@ -7080,10 +6984,11 @@ export declare class Drawer extends FASTElement {
      * @public
      */
     ariaDescribedby?: string;
-    /**""
+    /**
+     * Sets the position of the drawer (start/end).
+     *
      * @public
      * @defaultValue start
-     * Sets the position of the drawer (start/end).
      */
     position: DrawerPosition;
     /**
@@ -7898,12 +7803,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.
  *
@@ -8163,12 +8062,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
@@ -8470,117 +8363,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.
  *
@@ -9015,7 +8797,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
      */
@@ -9087,7 +8871,7 @@ export declare const MenuItemStyles: ElementStyles;
 export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 /**
- * A Menu List 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
@@ -9097,6 +8881,10 @@ export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
  * @public
  */
 export declare class MenuList extends BaseMenuList {
+    private fg?;
+    private fgItems?;
+    disconnectedCallback(): void;
+    setItems(): void;
 }
 
 /**
@@ -9226,7 +9014,7 @@ export declare const MessageBarStyles: ElementStyles;
 
 /**
  * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * @type ElementViewTemplate
  */
 export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
 
@@ -9354,7 +9142,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;
     /**
@@ -9413,6 +9201,10 @@ export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
  * @public
  */
 export declare class RadioGroup extends BaseRadioGroup {
+    private fg;
+    private fgItems;
+    disconnectedCallback(): void;
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
 }
 
 /**
@@ -10460,6 +10252,7 @@ export declare class Tab extends FASTElement {
      * HTML Attribute: disabled
      */
     disabled: boolean;
+    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.
@@ -10474,6 +10267,7 @@ export declare class Tab extends FASTElement {
     elementInternals: ElementInternals;
     constructor();
     connectedCallback(): void;
+    private setDisabledSideEffect;
 }
 
 export declare interface Tab extends StartEnd {
@@ -10482,33 +10276,13 @@ export declare interface Tab extends StartEnd {
 export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
 
 /**
- * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * A Tablist component.
  *
  * @tag fluent-tablist
  *
  * @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.
@@ -10520,57 +10294,9 @@ 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.
-     */
+    private fg?;
+    private fgItems?;
+    disconnectedCallback(): void;
     tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
 }
 
@@ -11263,13 +10989,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;
@@ -11365,16 +11091,21 @@ export declare class Tree extends BaseTree {
      */
     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;
 }
 
 /**