@fluentui/web-components 3.0.0-rc.25 → 3.0.0-rc.27

package/dist/web-components.d.ts

@@ -15,7 +15,7 @@ import { ViewTemplate } from '@microsoft/fast-element';
  * @tag fluent-accordion
  *
  * @slot - The default slot for the accordion items
- * @fires change - Fires a custom 'change' event when the active item changes
+ * @fires { Event } change - Fires a custom 'change' event when the active item changes
  *
  * @public
  */
@@ -112,6 +112,8 @@ export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
  * An Accordion Item Custom HTML Element.
  * Based on BaseAccordionItem and includes style and layout specific attributes
  *
+ * @tag fluent-accordion-item
+ *
  * @public
  */
 export declare class AccordionItem extends BaseAccordionItem {
@@ -175,8 +177,6 @@ export declare type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemM
 /**
  * Accordion Item configuration options
  *
- * @tag fluent-accordion-item
- *
  * @public
  */
 export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
@@ -216,6 +216,8 @@ export declare const accordionTemplate: ElementViewTemplate<Accordion>;
  * An Anchor Custom HTML Element.
  * Based on BaseAnchor and includes style and layout specific attributes
  *
+ * @tag fluent-anchor-button
+ *
  * @public
  */
 export declare class AnchorButton extends BaseAnchor {
@@ -373,6 +375,8 @@ export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
  *
  * @tag fluent-avatar
  *
+ * @slot badge - Optional badge content displayed with the avatar.
+ *
  * @public
  */
 export declare class Avatar extends BaseAvatar {
@@ -635,13 +639,18 @@ export declare const AvatarTemplate: ElementViewTemplate<Avatar>;
 
 /**
  * The base class used for constructing a fluent-badge custom element
+ * @tag fluent-badge
+ *
+ * @slot - Content which can be provided inside the badge.
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export declare class Badge extends FASTElement {
     /**
      * The appearance the badge should have.
      *
-     * @tag fluent-badge
      *
      * @public
      * @remarks
@@ -1081,15 +1090,6 @@ export declare class BaseAvatar extends FASTElement {
  * @public
  */
 export declare class BaseButton extends FASTElement {
-    /**
-     * Indicates the button should be focused when the page is loaded.
-     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
     /**
      * Default slotted content.
      *
@@ -1320,18 +1320,12 @@ export declare class BaseButton extends FASTElement {
 /**
  * The base class for a component with a toggleable checked state.
  *
+ * @fires { Event } change - Fires a custom 'change' event when the checked state changes
+ * @fires { Event } input - Fires a custom 'input' event when the checked state changes
+ *
  * @public
  */
 export declare class BaseCheckbox extends FASTElement {
-    /**
-     * Indicates that the element should get focus after the page finishes loading.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
     /**
      * The element's current checked state.
      *
@@ -1730,6 +1724,8 @@ export declare class BaseDivider extends FASTElement {
  * @slot indicator - The indicator slot.
  * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
  *
+ * @fires { Event } change - Fires a custom 'change' event when the selected option changes
+ *
  * @public
  */
 export declare class BaseDropdown extends FASTElement {
@@ -2163,7 +2159,7 @@ export declare class BaseDropdown extends FASTElement {
      */
     private searchTimeout?;
     /**
-     * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+     * Handles printable character input by moving {@link Dropdown#activeIndex} to the next option whose label matches the
      * accumulated search string. When the string is a single character (or the same character repeated), matching
      * options are cycled through; otherwise the string is treated as a prefix match.
      *
@@ -2461,7 +2457,7 @@ export declare class BaseProgressBar extends FASTElement {
      *
      * HTML Attribute: `value`
      *
-     * @internal
+     * @public
      */
     value?: number;
     /**
@@ -2476,7 +2472,7 @@ export declare class BaseProgressBar extends FASTElement {
      *
      * HTML Attribute: `min`
      *
-     * @internal
+     * @public
      */
     min?: number;
     /**
@@ -2492,7 +2488,7 @@ export declare class BaseProgressBar extends FASTElement {
      *
      * HTML Attribute: `max`
      *
-     * @internal
+     * @public
      */
     max?: number;
     /**
@@ -2518,6 +2514,8 @@ export declare class BaseProgressBar extends FASTElement {
  * A Base Radio Group Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
  *
+ * @fires { Event } change - Fires a custom 'change' event when the checked radio changes
+ *
  * @public
  */
 export declare class BaseRadioGroup extends FASTElement {
@@ -2964,8 +2962,8 @@ export declare class BaseTablist extends FASTElement {
  * @csspart label - The `<label>` element.
  * @csspart root - The container element of the `<textarea>` element.
  * @csspart control - The internal `<textarea>` element.
- * @fires change - Fires after the control loses focus, if the content has changed.
- * @fires select - Fires when the `select()` method is called.
+ * @fires { Event } change - Fires after the control loses focus, if the content has changed.
+ * @fires { Event } select - Fires when the `select()` method is called.
  *
  * @public
  */
@@ -3320,6 +3318,10 @@ export declare class BaseTextArea extends FASTElement {
  * @csspart label - The internal `<label>` element
  * @csspart root - the root container for the internal control
  * @csspart control - The internal `<input>` control
+ *
+ * @fires { Event } change - Fires a custom 'change' event when the value changes and the input loses focus
+ * @fires { Event } select - Fires when the `select()` method is called.
+ *
  * @public
  */
 export declare class BaseTextInput extends FASTElement {
@@ -3332,15 +3334,6 @@ export declare class BaseTextInput extends FASTElement {
      * HTML Attribute: `autocomplete`
      */
     autocomplete?: string;
-    /**
-     * Indicates that the element should get focus after the page finishes loading.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
     /**
      * The current value of the input.
      * @public
@@ -3630,13 +3623,6 @@ export declare class BaseTextInput extends FASTElement {
      */
     clickHandler(e: MouseEvent): boolean | void;
     connectedCallback(): void;
-    /**
-     * Focuses the inner control when the component is focused.
-     *
-     * @param e - the event object
-     * @public
-     */
-    focusinHandler(e: FocusEvent): boolean | void;
     /**
      * Resets the value to its initial value when the form is reset.
      *
@@ -3763,6 +3749,15 @@ export declare class BaseTree extends FASTElement {
     protected get descendantTreeItems(): BaseTreeItem[];
 }
 
+/**
+ * Base class for Tree Item Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li | `<li>`} element.
+ *
+ * @fires { ToggleEvent } toggle - Fires when the expanded state changes
+ * @fires { Event } change - Fires when the selected state changes
+ *
+ * @public
+ */
 declare class BaseTreeItem extends FASTElement {
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
@@ -4103,8 +4098,8 @@ export declare type ButtonType = ValuesOf<typeof ButtonType>;
  *
  * @slot checked-indicator - The checked indicator
  * @slot indeterminate-indicator - The indeterminate indicator
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @fires { Event } change - Emits a custom change event when the checked state changes
+ * @fires { Event } input - Emits a custom input event when the checked state changes
  *
  * @public
  */
@@ -6411,6 +6406,9 @@ export declare const colorTransparentStrokeInteractive = "var(--colorTransparent
  *
  * @tag fluent-compound-button
  *
+ * @slot - The default slot for the main content of the compound button
+ * @slot description - The description of the compound button, shown below the main content
+ *
  * @public
  */
 export declare class CompoundButton extends Button {
@@ -6487,6 +6485,9 @@ export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>
  *
  * @tag fluent-counter-badge
  *
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export declare class CounterBadge extends BaseCounterBadge {
@@ -6694,6 +6695,10 @@ export declare const curveLinear = "var(--curveLinear)";
  *
  * @tag fluent-dialog
  *
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot. {@link (DialogBody:class)} element recommended.
+ *
  * @public
  */
 export declare class Dialog extends FASTElement {
@@ -6804,6 +6809,15 @@ export declare class Dialog extends FASTElement {
  *
  * @tag fluent-dialog-body
  *
+ * @slot title - Content for the dialog title.
+ * @slot title-action - Content for actions shown near the title.
+ * @slot close - Content for the close action.
+ * @slot action - Content for footer actions.
+ * @slot - Default dialog body content.
+ * @csspart title - The title container.
+ * @csspart content - The content container.
+ * @csspart actions - The actions container.
+ *
  * @public
  * @extends FASTElement
  */
@@ -7028,11 +7042,12 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @attr ariaLabelledby - The ID of the element that labels the drawer.
  *
  * @csspart dialog - The dialog element of the drawer.
+ * @cssprop --drawer-width - Sets the width of the drawer to a custom value (e.g., 300px).
  *
  * @slot - Default slot for the content of the drawer.
  *
- * @fires toggle - Event emitted after the dialog's open state changes.
- * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
  *
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
@@ -7042,8 +7057,6 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
  * @summary A component that provides a drawer for displaying content in a side panel.
- *
- * @tag fluent-drawer
  */
 export declare class Drawer extends FASTElement {
     /**
@@ -7348,8 +7361,11 @@ export declare const dropdownInputTemplate: ViewTemplate<BaseDropdown, any>;
  * @tag fluent-dropdown-option
  *
  * @slot - The default slot for the option's content.
+ * @slot start - Optional content shown at the start of the option.
  * @slot checked-indicator - The checked indicator.
  * @slot description - Optional description content.
+ * @csspart content - The wrapper for the option content.
+ * @csspart description - The wrapper for the option description.
  *
  * @remarks
  * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
@@ -7759,6 +7775,13 @@ export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TPa
  *
  * @tag fluent-field
  *
+ * @slot label - Label content associated with the control.
+ * @slot input - Input control content.
+ * @slot message - Validation and helper message content.
+ * @csspart label - The label slot container.
+ * @csspart input - The input slot container.
+ * @csspart message - The message slot container.
+ *
  * @public
  */
 export declare class Field extends BaseField {
@@ -7930,6 +7953,8 @@ export declare const getDirection: (rootNode: HTMLElement) => Direction;
  *
  * @tag fluent-image
  *
+ * @slot - The default slot. Accepts any `<img>`, `<picture>`, `<video>`, or `<canvas>` element.
+ *
  * @public
  */
 declare class Image_2 extends FASTElement {
@@ -8091,6 +8116,9 @@ export declare function isTreeItem(element?: Node | null, tagName?: string): ele
  *
  * @tag fluent-label
  *
+ * @slot - The default slot. Accepts the content of the label.
+ * @csspart asterisk - The required-field asterisk indicator.
+ *
  * @public
  */
 export declare class Label extends FASTElement {
@@ -8811,7 +8839,7 @@ export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
  * @slot submenu-glyph - The submenu expand/collapse indicator
  * @slot submenu - Used to nest menu's within menu items
  * @csspart content - The element wrapping the menu item content
- * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ * @fires { Event } change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
  * @public
  */
@@ -9027,7 +9055,9 @@ export declare const MenuTemplate: ElementViewTemplate<Menu>;
  *
  * @slot actions - Content that can be provided for the actions
  * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot icon - Content that can be provided for the leading icon
  * @slot - The default slot for the content
+ * @fires { CustomEvent } dismiss - Fired when the message bar is dismissed.
  * @public
  */
 export declare class MessageBar extends FASTElement {
@@ -9150,6 +9180,7 @@ export declare type Orientation = (typeof Orientation)[keyof typeof Orientation]
  * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @tag fluent-progress-bar
+ * @csspart indicator - The internal progress indicator element.
  *
  * @public
  */
@@ -9247,8 +9278,9 @@ declare type PropertyNameForCalculation = 'max' | 'value';
  * @tag fluent-radio
  *
  * @slot checked-indicator - The checked indicator slot
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @fires {Event} change - Emits a custom change event when the checked state changes
+ * @fires {Event} input - Emits a custom input event when the checked state changes
+ * @fires {CustomEvent} disabled - Emits a custom disabled event when the disabled state changes
  *
  * @public
  */
@@ -9324,6 +9356,7 @@ export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
  * @tag fluent-radio-group
  *
  * @slot - The default slot for the radio group
+ * @fires { Event } change - Fired when the selected radio changes.
  *
  * @public
  */
@@ -9586,7 +9619,7 @@ export declare const shadow8Brand = "var(--shadow8Brand)";
  * @slot thumb - The slot for a custom thumb element.
  * @csspart thumb-container - The container element of the thumb.
  * @csspart track-container - The container element of the track.
- * @fires change - Fires a custom 'change' event when the value changes.
+ * @fires { Event } change - Fires a custom 'change' event when the value changes.
  *
  * @public
  */
@@ -10321,6 +10354,7 @@ export { styles as MenuButtonStyles }
  * Based on BaseCheckbox and includes style and layout specific attributes
  *
  * @tag fluent-switch
+ * @csspart checked-indicator - The internal switch indicator element.
  *
  */
 export declare class Switch extends BaseCheckbox {
@@ -10400,6 +10434,7 @@ export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
  * A Tablist component.
  *
  * @tag fluent-tablist
+ * @fires { Event } change - Fired when the active tab changes.
  *
  * @public
  */
@@ -10499,6 +10534,8 @@ export declare const TabTemplate: ElementViewTemplate<Tab, any>;
  *
  * @tag fluent-text
  *
+ * @slot - The default slot for the text content of the component. Can be any valid HTML element, but is typically a semantic element such as a heading or paragraph.
+ *
  * @public
  */
 declare class Text_2 extends FASTElement {
@@ -10766,6 +10803,8 @@ export declare type TextFont = ValuesOf<typeof TextFont>;
  * Based on BaseTextInput and includes style and layout specific attributes
  *
  * @tag fluent-text-input
+ * @fires { Event } change - Fired when the input value is committed via a change event.
+ * @fires { Event } select - Fires when the `select()` method is called.
  *
  * @public
  */
@@ -11057,6 +11096,8 @@ export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
  *
  * @tag fluent-tooltip
  *
+ * @slot - The default slot. Accepts the content of the tooltip.
+ *
  * @public
  */
 export declare class Tooltip extends FASTElement {
@@ -11251,6 +11292,21 @@ export declare const TreeDefinition: FASTElementDefinition<typeof Tree>;
  *
  * @tag fluent-tree-item
  *
+ * @slot - The default slot. Accepts the content of the tree item.
+ * @slot start - Content shown before the item label.
+ * @slot end - Content shown after the item label.
+ * @slot aside - Content shown at the far end of the row.
+ * @slot item - Child tree items.
+ *
+ * @csspart positioning-region - The container for item content and aside regions.
+ * @csspart content - The item content region.
+ * @csspart chevron - The expand/collapse indicator region.
+ * @csspart aside - The trailing aside region.
+ * @csspart items - The child items group region.
+ *
+ * @fires { ToggleEvent } toggle - Fired when expanded state toggles.
+ * @fires { Event } change - Fired when selected state changes.
+ *
  */
 export declare class TreeItem extends BaseTreeItem {
     /**