import * as _microsoft_fast_element from '@microsoft/fast-element';
import { FASTElement, ElementViewTemplate, ElementStyles, HTMLDirective, SyntheticViewTemplate, CaptureType, ElementsFilter } from '@microsoft/fast-element';
import * as _fluentui_web_components from '@fluentui/web-components';
import { BaseButton, Button as Button$1, AccordionItem as AccordionItem$1, Accordion as Accordion$1, Link as Link$1, Avatar as Avatar$1, Badge as Badge$1, Checkbox as Checkbox$1, CounterBadge as CounterBadge$1, Dialog as Dialog$1, DialogBody as DialogBody$1, Divider as Divider$1, Drawer as Drawer$1, DrawerBody as DrawerBody$1, Dropdown as Dropdown$1, DropdownOption as DropdownOption$1, Listbox as Listbox$1, Field as Field$1, SlottableInput as SlottableInput$1, Image as Image$1, Label as Label$1, AnchorButton as AnchorButton$1, MessageBar as MessageBar$1, MenuButton as MenuButton$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, RatingDisplay as RatingDisplay$1, StartEndOptions, StartEnd, Slider as Slider$1, Spinner as Spinner$1, Switch as Switch$1, Tab as Tab$1, Tablist as Tablist$1, TextArea as TextArea$1, TextAreaAppearance, Text as Text$1, Tree as Tree$1, TreeItem as TreeItem$1, ToggleButton as ToggleButton$1, Tooltip as Tooltip$1 } from '@fluentui/web-components';
export { AnchorButtonTemplate, AvatarStyles, AvatarTemplate, BadgeStyles, BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseDivider, BaseField, BaseProgressBar, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, CheckboxOptions, CheckboxStyles, CheckboxTemplate, DialogBodyStyles, DialogBodyTemplate, DialogTemplate, ListboxStyles, ListboxTemplate, MenuButtonOptions, MessageBarIntent, MessageBarLayout, MessageBarShape, MessageBarStyles, MessageBarTemplate, SliderConfiguration, SliderOptions, SwitchStyles, SwitchTemplate, TabOptions, TextAreaStyles, TextAreaTemplate, TreeItemStyles, TreeItemTemplate, TreeStyles, TreeTemplate, isDropdownOption, isListbox } from '@fluentui/web-components';
import { ValuesOf as ValuesOf$1 } from '@microsoft/fast-foundation';
export { Theme, fabricDarkTheme, fabricLightTheme, setTheme, sizeHorizontalL, sizeHorizontalM, sizeHorizontalMNudge, sizeHorizontalNone, sizeHorizontalS, sizeHorizontalSNudge, sizeHorizontalXL, sizeHorizontalXS, sizeHorizontalXXL, sizeHorizontalXXS, sizeHorizontalXXXL, sizeVerticalL, sizeVerticalM, sizeVerticalMNudge, sizeVerticalNone, sizeVerticalS, sizeVerticalSNudge, sizeVerticalXL, sizeVerticalXS, sizeVerticalXXL, sizeVerticalXXS, sizeVerticalXXXL, webDarkTheme, webLightTheme } from '@fabric-msft/theme';

/**
 * Helper for enumerating a type from a const object
 * Example: export type Foo = ValuesOf\<typeof Foo\>
 * @public
 */
type ValuesOf<T> = T[keyof T];

/**
 * Expand mode for {@link AccordionMenu}
 * @public
 */
declare const AccordionMenuExpandModes: {
    readonly single: "single";
    readonly multi: "multi";
};
/**
 * Type for the {@link AccordionMenu} Expand Mode
 * @public
 */
type AccordionMenuExpandMode = ValuesOf<typeof AccordionMenuExpandModes>;

/**
 * AccordionMenu
 * @summary An AccordionMenu component that provides an interactive accordion interface, allowing for expandable and collapsible sections. Implements ARIA Accordion.
 *
 * @example
 * ```html
 * <fabric-accordion-menu expand-mode="single">
 *   <fabric-accordion-item>
 *     <fabric-accordion-menu-panel>
 *       <!-- content for first panel -->
 *     </fabric-accordion-menu-panel>
 *   </fabric-accordion-item>
 *   <fabric-accordion-item>
 *     <fabric-accordion-menu-panel>
 *       <!-- content for second panel -->
 *     </fabric-accordion-menu-panel>
 *   </fabric-accordion-item>
 *   <!-- additional accordion items here -->
 * </fabric-accordion-menu>
 * ```
 *
 * @attr {AccordionMenuExpandMode} expand-mode - Controls the expand mode of the Accordion, either allowing single or multiple item expansion.
 *
 * @prop {ElementInternals} elementInternals - Internal element state used to manage the component.
 * @prop {HTMLElement[]} slottedElements - The slotted accordion menu items.
 * @prop {AccordionMenuExpandMode} expandmode - Controls the expand mode of the Accordion, either allowing single or multiple item expansion.
 *
 * @slot - The default slot for the accordion items.
 *
 * @csspart accordion-menu - Represents the accordion menu container.
 *
 * @method expandmodeChanged - Handles changes to the `expandmode` attribute.
 * @method handleChange - Handles changes to observed properties.
 * @method clearSelections - Clears the selections of menu items.
 * @method findExpandedItem - Finds the first expanded item in the accordion.
 * @method setItems - Sets up the accordion items.
 * @method isSingleExpandMode - Checks if the accordion is in single expand mode.
 * @method setSingleExpandMode - Controls the behavior of the accordion in single expand mode.
 *
 * @fires change - Fires a custom 'change' event when the active item changes.
 *
 * @extends FASTElement
 * @tagname fabric-accordion-menu
 * @public
 */
declare class AccordionMenu extends FASTElement {
    /** Internal element state used to manage the component. */
    elementInternals: ElementInternals;
    /** Constructor for the AccordionMenu component. */
    constructor();
    /** Lifecycle method called when the component is connected to the DOM. */
    connectedCallback(): void;
    /** Lifecycle method called when the component is disconnected from the DOM. */
    disconnectedCallback(): void;
    /**
     * Controls the expand mode of the Accordion, either allowing
     * single or multiple item expansion.
     * HTML attribute: expand-mode
     * @public
     */
    expandmode: AccordionMenuExpandMode;
    /**
     * Handles changes to the `expandmode` attribute.
     * @param prev - The previous value.
     * @param next - The next value.
     */
    expandmodeChanged(prev: AccordionMenuExpandMode, next: AccordionMenuExpandMode): void;
    /**
     * The slotted accordion menu items.
     * @public
     */
    slottedElements: HTMLElement[];
    /**
     * Handles changes to observed properties.
     * @param source - The source element.
     * @param propertyName - The name of the property that changed.
     */
    handleChange(source: HTMLElement, propertyName: string): void;
    /**
     * Clears the selections of menu items.
     */
    clearSelections(): void;
    /**
     * Finds the first expanded item in the accordion.
     */
    private findExpandedItem;
    /**
     * Sets up the accordion items.
     */
    private setItems;
    private static elementIndent;
    /**
     * check if the item is a menu item
     */
    protected isMenuItemElement: (el: Element) => el is HTMLElement;
    /**
     * Checks if the accordion is in single expand mode.
     */
    private isSingleExpandMode;
    /**
     * Controls the behavior of the accordion in single expand mode.
     */
    private setSingleExpandMode;
    /**
     * Removes event listeners from items.
     */
    private removeItemListeners;
}

declare const template$c: ElementViewTemplate<AccordionMenu>;

declare const styles$f: _microsoft_fast_element.ElementStyles;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-accordion-menu>
 */
declare const definition$11: _microsoft_fast_element.FASTElementDefinition<typeof AccordionMenu>;

/**
 * An Accordion Menu Panel header font size can be small, medium, large, and extra-large
 * @public
 */
declare const AccordionMenuPanelSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly extraLarge: "extra-large";
};
/**
 * Applies font size to accordion header
 * @public
 */
type AccordionMenuPanelSize = ValuesOf<typeof AccordionMenuPanelSizes>;
/**
 * An Accordion Menu Panel expand/collapse icon can appear at the start or end of the accordion
 * @public
 */
declare const AccordionMenuPanelMarkerPositions: {
    readonly start: "start";
    readonly end: "end";
};
/**
 * Applies expand/collapse icon position
 * @public
 */
type AccordionMenuPanelMarkerPosition = ValuesOf<typeof AccordionMenuPanelMarkerPositions>;

/**
 * MenuList
 * @summary A Menu Custom HTML Element that implements the ARIA menu pattern.
 *
 * @example
 * ```html
 * <fabric-menu-list>
 *   <fabric-menu-item>Item 1</fabric-menu-item>
 *   <fabric-menu-item>Item 2</fabric-menu-item>
 *   <fabric-menu-item>Item 3</fabric-menu-item>
 * </fabric-menu-list>
 * ```
 *
 * @attr {Element[] | undefined} menuItems - The menu items that are part of the menu list.
 * @attr {number} focusIndex - The index of the focusable element in the items array defaults to -1.
 * @attr {MenuItemRole} focusableElementRoles - Static roles that determine if an element is focusable.
 * @attr {string} role - The ARIA role for the menu list, defaults to 'menu'.
 *
 * @prop {Element[] | undefined} items - The menu items that are part of the menu list.
 *
 * @slot - The default slot for the menu items.
 *
 * @method itemsChanged - Reacts to changes in the items property. Parameters: oldValue: HTMLElement[], newValue: HTMLElement[].
 * @method focus - Focuses the first item in the menu.
 * @method handleMenuKeyDown - Handles keydown events for menu navigation.
 * @method handleFocusOut - Handles focus out events to reset menu state.
 * @method handleChange - Observes changes to the hidden attribute of child elements. Parameters: source: any, propertyName: string.
 * @method setFocus - Sets focus on a menu item based on the provided index and adjustment. Parameters: focusIndex: number, adjustment: number.
 *
 * @extends FASTElement
 * @tagname fabric-menu-list
 * @public
 */
declare class MenuList extends FASTElement {
    /**
     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
     *
     * @internal
     */
    elementInternals: ElementInternals;
    /**
     * @internal
     */
    items: HTMLElement[];
    itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
    menuItems: Element[] | undefined;
    /**
     * The index of the focusable element in the items array
     * defaults to -1
     */
    focusIndex: number;
    static readonly focusableElementRoles: {
        readonly menuitem: "menuitem";
        readonly menuitemcheckbox: "menuitemcheckbox";
        readonly menuitemradio: "menuitemradio";
    };
    constructor();
    /**
     * @internal
     */
    connectedCallback(): void;
    /**
     * @internal
     */
    disconnectedCallback(): void;
    /**
     * @internal
     */
    readonly isNestedMenu: () => boolean;
    /**
     * Focuses the first item in the menu.
     *
     * @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;
    /**
     * Method for Observable changes to the hidden attribute of child elements
     */
    handleChange(source: unknown, propertyName: string): void;
    /**
     * Handle change from child MenuItem element and set radio group behavior
     */
    private changedMenuItemHandler;
    /**
     * 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;
}

/**
 * AccordionMenuPanel
 * @summary An AccordionMenuPanel component that provides expandable and collapsible sections within an accordion menu.
 *
 * @example
 * ```html
 * <fabric-accordion-menu>
 *   <fabric-accordion-menu-panel id="examplePanel" expanded>
 *     <div slot="heading">Section 1</div>
 *     <span slot="marker-expanded">-</span>
 *     <span slot="marker-collapsed">+</span>
 *     <fabric-menu-list>
 *       <fabric-menu-item>Content for section 1</fabric-menu-item>
 *       <fabric-menu-item>Content for section 2</fabric-menu-item>
 *     </fabric-menu-list>
 *   </fabric-accordion-menu-panel>
 * </fabric-accordion-menu>
 * ```
 *
 * @attr {boolean} expanded - Expands or collapses the item.
 * @attr {boolean} disabled - Disables the accordion item.
 * @attr {string} id - The item ID.
 * @attr {AccordionMenuPanelSize} size - Defines the accordion header font size.
 * @attr {boolean} block - Sets the width of the focus state.
 * @attr {AccordionMenuPanelMarkerPosition} marker-position - Sets expand and collapsed icon position.
 *
 * @prop {ElementInternals} elementInternals - Internal element state used to manage the component.
 * @prop {MenuList[] | undefined} menuList - The menu list element if present.
 * @prop {HTMLElement | undefined} headingElement - Reference to the heading element.
 * @prop {boolean} expanded - Expands or collapses the item.
 * @prop {boolean} disabled - Disables an accordion item
 * @prop {string} id - The item ID.
 * @prop {AccordionMenuPanelSize | undefined} size - Defines accordion header font size.
 * @prop {boolean} block - Sets the width of the focus state.
 * @prop {AccordionMenuPanelMarkerPosition | undefined} markerPosition - Sets expand and collapsed icon position.
 *
 * @slot heading - Slot for the heading content.
 * @slot marker-expanded - Slot for the expanded icon.
 * @slot marker-collapsed - Slot for the collapsed icon.
 * @slot - Default slot for the accordion item content.
 *
 * @csspart heading - Represents the heading of the accordion item.
 * @csspart heading-content - Represents the content container of the heading.
 * @csspart markers - Represents the container for expand/collapse icons.
 * @csspart content - Represents the content of the accordion item.
 *
 * @method focusFirstMenuItem - Focus the first menu item in the menu list.
 * @method expandedChanged - Handles expanded changes.
 * @method disabledChanged - Handles disabled changes.
 * @method sizeChanged - Handles changes to size attribute.
 * @method blockChanged - Handles changes to block attribute.
 * @method markerPositionChanged - Handles changes to marker-position attribute.
 *
 * @fires expanded-change - Event fired when the expanded state changes.
 *
 * @extends FASTElement
 * @tagname fabric-accordion-menu-panel
 * @public
 */
declare class AccordionMenuPanel extends FASTElement {
    /** Internal element state used to manage the component. */
    elementInternals: ElementInternals;
    /** The menu list element if present */
    menuList: MenuList[] | undefined;
    /** Reference to the heading element */
    headingElement: HTMLElement | undefined;
    /** Constructor for the AccordionMenuPanel component. */
    constructor();
    /** Lifecycle method called when the component is connected to the DOM. */
    connectedCallback(): void;
    /** Lifecycle method called when the component is disconnected from the DOM. */
    disconnectedCallback(): void;
    /**
     * Handles click events.
     * @param e - The click event.
     */
    handleClick: (e: MouseEvent) => void;
    /**
     * Handles keydown events.
     * @param e - The keyboard event.
     */
    handleKeyDown: (e: KeyboardEvent) => void | boolean;
    /**
     * Focus the first menu item in the menu list
     */
    private focusFirstMenuItem;
    /**
     * Handles expanded changes
     * @param prev - previous value
     * @param next - next value
     */
    expandedChanged(prev: boolean, next: boolean): void;
    /**
     * Expands or collapses the item.
     *
     * @public
     * @remarks
     * HTML attribute: expanded
     */
    expanded: boolean;
    /**
     * Disables an accordion item
     *
     * @public
     * @remarks
     * HTML attribute: disabled
     */
    disabled: boolean;
    /**
     * Handles disabled changes
     * @param prev - previous value
     * @param next - next value
     */
    disabledChanged(prev: boolean, next: boolean): void;
    /**
     * The item ID
     *
     * @public
     * @remarks
     * HTML Attribute: id
     */
    id: string;
    /**
     * Defines accordion header font size.
     *
     * @public
     * @remarks
     * HTML Attribute: size
     */
    size?: AccordionMenuPanelSize;
    /**
     * Handles changes to size attribute
     * @param prev - previous value
     * @param next - next value
     */
    sizeChanged(prev: AccordionMenuPanelSize, next: AccordionMenuPanelSize): void;
    /**
     * Sets the width of the focus state.
     *
     * @public
     * @remarks
     * HTML Attribute: block
     */
    block: boolean;
    /**
     * Handles changes to block attribute
     * @param prev - previous value
     * @param next - next value
     */
    blockChanged(prev: boolean, next: boolean): void;
    /**
     * Sets expand and collapsed icon position.
     *
     * @public
     * @remarks
     * HTML Attribute: marker-position
     */
    markerPosition?: AccordionMenuPanelMarkerPosition;
    /**
     * Handles changes to marker-position attribute
     * @param prev - previous value
     * @param next - next value
     */
    markerPositionChanged(prev: AccordionMenuPanelMarkerPosition | undefined, next: AccordionMenuPanelMarkerPosition | undefined): void;
}

/**
 * The template for the accordion menu panel component.
 * @public
 */
declare const template$b: ElementViewTemplate<AccordionMenuPanel>;

declare const styles$e: _microsoft_fast_element.ElementStyles;

declare const definition$10: _microsoft_fast_element.FASTElementDefinition<typeof AccordionMenuPanel>;

/**
 * The appearance variations for the card component
 * @public
 */
declare const CardAppearances: {
    readonly filled: "filled";
    readonly filledAlternative: "filled-alternative";
    readonly outline: "outline";
    readonly subtle: "subtle";
};
/**
 * Back-compat runtime alias for {@link CardAppearances}.
 * @public
 */
declare const CardAppearance: {
    readonly filled: "filled";
    readonly filledAlternative: "filled-alternative";
    readonly outline: "outline";
    readonly subtle: "subtle";
};
/**
 * The types for card appearance
 * @public
 */
type CardAppearance = ValuesOf<typeof CardAppearances>;
/**
 * The orientation variations for the card component
 * @public
 */
declare const CardOrientations: {
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
/**
 * Back-compat runtime alias for {@link CardOrientations}.
 * @public
 */
declare const CardOrientation: {
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
/**
 * The types for card orientations
 * @public
 */
type CardOrientation = ValuesOf<typeof CardOrientations>;
/**
 * The focus mode variations for the card component
 * @public
 */
declare const CardFocusModes: {
    readonly off: "off";
    readonly noTab: "no-tab";
    readonly tabExit: "tab-exit";
    readonly tabOnly: "tab-only";
};
/**
 * Back-compat runtime alias for {@link CardFocusModes}.
 * @public
 */
declare const CardFocusMode: {
    readonly off: "off";
    readonly noTab: "no-tab";
    readonly tabExit: "tab-exit";
    readonly tabOnly: "tab-only";
};
/**
 * The types for card focus modes
 * @public
 */
type CardFocusMode = ValuesOf<typeof CardFocusModes>;
/**
 * Card event names
 * @public
 */
declare const CardEventNames: {
    readonly interactiveChanged: "interactive-changed";
    readonly click: "click";
};

/**
 * Card
 * @summary A versatile surface that can display rich content, optional header/footer regions, and interactive behaviors.
 *
 * @example
 * ```html
 * <fabric-card
 *   focus-mode="off"
 *   appearance="filled"
 *   orientation="horizontal"
 *   interactive
 *   aria-describedby="descId"
 *   aria-labelledby="labelId"
 * >
 *   <div>Card main content</div>
 * </fabric-card>
 * ```
 *
 * @attr {CardFocusMode} focus-mode - Controls keyboard focus behavior inside the card (including focus trapping and Tab/Escape behavior).
 * @attr {CardAppearance | undefined} appearance - Sets the visual style of the card (for example `filled` or `outline`).
 * @attr {CardOrientation | undefined} orientation - Sets the card layout direction (horizontal or vertical).
 * @attr {string} role - Sets the ARIA role; automatically switches to `button` when `interactive` is true.
 * @attr {string | undefined} value - Optional value associated with the card; emitted with click events.
 * @attr {string | undefined} href - Optional link value that is surfaced in the emitted click event.
 * @attr {boolean} disabled - Disables interactive behaviors and keyboard handling when set.
 * @attr {boolean} interactive - Enables interactive behaviors (for example Enter triggers click) and updates the role.
 * @attr {string | undefined} aria-describedby - Sets `aria-describedby` on the internal root for assistive descriptions.
 * @attr {string | undefined} aria-labelledby - Sets `aria-labelledby` on the internal root for assistive labeling.
 *
 * @prop {CardFocusMode} focusMode - Reflects the `focus-mode` attribute and governs keyboard focus handling.
 * @prop {CardAppearance | undefined} appearance - Reflects the chosen visual style of the card.
 * @prop {CardOrientation | undefined} orientation - Reflects whether content is arranged horizontally or vertically.
 * @prop {string} role - Current ARIA role applied to the card surface.
 * @prop {string | undefined} value - Value included in emitted click events for identification.
 * @prop {string | undefined} href - Link value included in emitted click events.
 * @prop {boolean} disabled - Indicates whether the card is inert to pointer and keyboard interaction.
 * @prop {boolean} interactive - Toggles interactive keyboard/mouse behaviors and role switching.
 * @prop {string | undefined} ariaDescribedby - Programmatic backing property for `aria-describedby`.
 * @prop {string | undefined} ariaLabelledby - Programmatic backing property for `aria-labelledby`.
 * @prop {HTMLElement} card - Reference to the primary card element within the template.
 * @prop {HTMLElement} root - Reference to the root container wrapping the card content.
 *
 * @slot default - Default slot for the card's content.
 *
 * @csspart card - Styles the main card surface element.
 * @csspart root - Styles the outermost root container element.
 * @csspart header - Styles the header region of the card.
 * @csspart content - Styles the content container region of the card.
 *
 * @cssprop --card-width - Controls the card width (any valid CSS length).
 * @cssprop --card-height - Controls the card height (defaults to fit-content).
 * @cssprop --card-elevation - Controls the card elevation level for visual stacking.
 * @cssprop --card-padding - Controls the padding applied to the card content.
 *
 * @method focusFirstElement - Moves focus to the first tabbable element (or the card if none exist).
 * @method focusLastElement - Moves focus to the last tabbable element within the card.
 * @method clickHandler - Handles pointer clicks and emits the card click event when eligible.
 * @method keydownHandler - Handles keyboard interaction including Enter activation and focus management.
 *
 * @fires click - Fired when an interactive, enabled card is activated; detail includes `interactive`, `value`, and `href`.
 * @fires interactive-changed - Fired when the `interactive` state changes; detail includes the new value.
 *
 * @extends FASTElement
 * @tagname fabric-card
 * @public
 */
declare class Card extends FASTElement {
    /**
     * Called when the element is added to the document.
     * @public
     */
    connectedCallback(): void;
    /**
     * Called when the element is removed from the document.
     * @public
     */
    disconnectedCallback(): void;
    /**
     * Focus behavior within the card, set via `focus-mode` attribute.
     * @public
     * @attr focus-mode
     */
    focusMode: CardFocusMode;
    /**
     * Visual style of the card.
     * @public
     * @attr
     */
    appearance?: CardAppearance;
    /**
     * The role of the card.
     * @public
     * @attr
     */
    role: string;
    /**
     * The value of the card.
     * @public
     * @attr
     */
    value?: string;
    /**
     * The href of the card.
     * @public
     * @attr
     */
    href?: string;
    /**
     * Layout direction of the card.
     * @public
     * @attr
     */
    orientation?: CardOrientation;
    /**
     * Indicates if the card is disabled.
     * @public
     * @attr disabled
     */
    disabled: boolean;
    /**
     * Determines whether the card is interactive.
     * @public
     * @observable
     * @attr interactive
     */
    interactive: boolean;
    /**
     * Provides descriptive text for assistive technologies via `aria-describedby`.
     * @public
     * @attr aria-describedby
     */
    ariaDescribedby?: string;
    /**
     * Provides a label for assistive technologies via `aria-labelledby`.
     * @public
     * @attr aria-labelledby
     */
    ariaLabelledby?: string;
    /**
     * The main card element.
     * @public
     */
    card: HTMLElement;
    /**
     * The root element of the card.
     * @public
     */
    root: HTMLElement;
    /**
     * Reacts to focus mode changes.
     */
    focusModeChanged(): void;
    /**
     * Reacts to disabled changes.
     */
    disabledChanged(): void;
    /**
     * Focuses the element at the specified index.
     * @private
     * @param index - The index of the element to focus.
     */
    private focusElementAtIndex;
    /**
     * Focuses the first element in the card.
     * @public
     */
    focusFirstElement: () => void;
    /**
     * Focuses the last element in the card.
     * @public
     */
    focusLastElement: () => void;
    /**
     * Handles click events on the card.
     * @public
     * @param e - The mouse event.
     * @returns {boolean | void} Returns true if the event was handled.
     */
    clickHandler(e: MouseEvent): boolean | void;
    /**
     * Handles keydown events on the card.
     * @public
     * @param e - The keyboard event.
     * @returns {boolean | void | null} Returns true if the event was handled.
     */
    keydownHandler(e: KeyboardEvent): boolean | void | null;
    /**
     * Determines if the card is focusable.
     * @public
     * @returns {boolean} True if the card is focusable.
     */
    get isFocusable(): boolean;
    /**
     * Gets the tabbable bounds within the card.
     * @public
     * @returns {(HTMLElement | SVGElement)[]} The tabbable elements.
     */
    get bounds(): (HTMLElement | SVGElement)[];
    /**
     * Checks if the first element in the bounds is focused.
     * @public
     * @returns {boolean | void} True if the first element is focused.
     */
    get isBoundsZeroIndexFocused(): boolean | void;
    /**
     * Checks if the last element in the bounds is focused.
     * @public
     * @returns {boolean | void} True if the last element is focused.
     */
    get isBoundsLastIndexFocused(): boolean | void;
    /**
     * Determines if focus should be trapped within the card.
     * @public
     * @returns {boolean} True if focus should be trapped.
     */
    get shouldTrapFocus(): boolean;
    private emitClickEvent;
    private emitInteractiveChangedEvent;
    /**
     * Emits an event when the interactive state changes.
     * @protected
     */
    protected interactiveChanged: () => void;
    /**
     * Sets the component state based on focus mode and disabled state.
     * @private
     */
    private updateInertState;
    private requestInertUpdate;
    /**
     * Gets the tabbable elements within the given context.
     * @private
     * @param context - The context in which to find tabbable elements.
     * @returns {(HTMLElement | SVGElement)[]} The tabbable elements.
     */
    private getTabQueueBounds;
    /**
     * Reduces elements to only tabbable ones.
     * @private
     * @param elements - The elements to filter.
     * @param element - The element to check.
     * @returns {HTMLElement[]} The tabbable elements.
     */
    private static reduceTabbableItems;
    /**
     * Checks if a FASTElement is focusable.
     * @private
     * @param element - The FASTElement to check.
     * @returns {boolean} True if the element is focusable.
     */
    private static isFocusableFastElement;
    /**
     * Checks if a FASTElement has tabbable shadow elements.
     * @private
     * @param element - The FASTElement to check.
     * @returns {boolean} True if the shadow contains tabbable elements.
     */
    private static hasTabbableShadow;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-card>
 */
declare const definition$$: _microsoft_fast_element.FASTElementDefinition<typeof Card>;

/** Card styles
 * @public
 */
declare const styles$d: _microsoft_fast_element.ElementStyles;

declare const template$a: ElementViewTemplate<Card>;

/**
 * CardFooter
 * @summary A CardFooter component for use within a card, providing slots for content and actions.
 *
 * @example
 * ```html
 * <fabric-card-footer>
 *   <div>Footer Content</div>
 *   <div slot="action">
 *     <fabric-button>Action 1</fabric-button>
 *     <fabric-button>Action 2</fabric-button>
 *   </div>
 * </fabric-card-footer>
 * ```
 *
 * @slot default - Default slot for footer content.
 * @slot action - Slot for footer action elements, such as buttons or links.
 *
 * @csspart content - The content area of the footer.
 * @cssprop --card-size - Controls the card sizing token used by the footer.
 *
 * @extends FASTElement
 * @tagname fabric-card-footer
 * @public
 */
declare class CardFooter extends FASTElement {
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-card-footer>
 */
declare const definition$_: _microsoft_fast_element.FASTElementDefinition<typeof CardFooter>;

/**
 * CardHeader
 * @summary A component for card headers, supporting a flexible slot-based layout for customization.
 *
 * @example
 * ```html
 * <fabric-card-header>
 *   <div slot="start">Logo</div>
 *   <img slot="image" src="path/to/image.jpg" alt="Header Image">
 *   <h1 slot="header">Main Title</h1>
 *   <span slot="subtitle">Subtitle Text</span>
 *   <fabric-button slot="action">Action Button</fabric-button>
 *   <div slot="end">Additional Info</div>
 * </fabric-card-header>
 * ```
 *
 * @slot start - Slot for content positioned at the start of the header.
 * @slot image - Slot for an image within the header.
 * @slot header - Slot for the main header content.
 * @slot subtitle - Slot for the subtitle text.
 * @slot action - Slot for action elements, typically buttons or links.
 * @slot end - Slot for content positioned at the end of the header.
 * @slot default - Default slot for card header content.
 *
 * @csspart image - The image container within the header.
 * @csspart header - The main header container.
 * @csspart row - A row within the header for layout.
 *
 * @extends FASTElement
 * @tagname fabric-card-header
 * @public
 */
declare class CardHeader extends FASTElement {
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-card-header>
 */
declare const definition$Z: _microsoft_fast_element.FASTElementDefinition<typeof CardHeader>;

/**
 * CardPreview
 * @summary A CardPreview custom HTML Element that provides a preview container for card content, with an optional badge slot.
 *
 * @example
 * ```html
 * <fabric-card-preview>
 *   <div>Card content goes here</div>
 *   <span slot="badge">New</span>
 * </fabric-card-preview>
 * ```
 *
 * @slot - The default slot for the card preview content.
 * @slot badge - The slot for the badge content.
 *
 * @extends FASTElement
 * @tagname fabric-card-preview
 * @public
 */
declare class CardPreview extends FASTElement {
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-card-preview>
 */
declare const definition$Y: _microsoft_fast_element.FASTElementDefinition<typeof CardPreview>;

/**
 * @summary A Carousel component for displaying a set of items in a horizontal, scrollable manner.
 *
 * @example
 * ```html
 * <fabric-carousel>
 *   <div slot="header">Carousel Header</div>
 *   <fabric-button slot="prev-button">Prev</fabric-button>
 *   <fabric-button slot="next-button">Next</fabric-button>
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <!-- More carousel items here -->
 * </fabric-carousel>
 * ```
 *
 * @attr disable-animation - Disables animation when set to true.
 *
 * @prop {boolean} disableAnimation - Boolean attribute to disable animation.
 * @prop {HTMLElement[]} slottedCarouselItems - An array of carousel items that are slotted into the carousel.
 * @prop {HTMLElement} header - The header element.
 * @prop {number} currentIndex - The current index of the carousel, indicating which item is currently visible.
 * @prop {HTMLElement[]} nextButton - The next button element.
 * @prop {HTMLElement[]} prevButton - The previous button element.
 * @prop {number} visibleItemsCount - Gets the number of items currently visible in the carousel. (readonly)
 *
 * @slot header - Slot for the carousel header content.
 * @slot prev-button - Slot for the carousel's previous navigation button.
 * @slot next-button - Slot for the carousel's next navigation button.
 * @slot - Default slot for carousel items.
 *
 * @method next - Moves the carousel to the next set of items.
 * @method prev - Moves the carousel to the previous set of items.
 * @method scrollToIndex - Scrolls the carousel to a specific index.
 * @method isAtEnd - Checks if the carousel is at the end of the items.
 * @method getNextVisibleItemsCount - Gets the count of the next set of visible items in the carousel.
 * @method updateVisibleItems - Updates the visible items in the carousel.
 *
 * @extends FASTElement
 * @tagname fabric-carousel
 * @public
 */
declare class Carousel extends FASTElement {
    #private;
    /**
     * Boolean attribute to disable animation.
     *
     * @public
     * @type {boolean}
     * @attr
     */
    disableAnimation?: boolean;
    /**
     * An array of carousel items that are slotted into the carousel.
     *
     * @public
     * @type {HTMLElement[]}
     * @observable
     */
    slottedCarouselItems: HTMLElement[];
    /**
     * Callback when slottedCarouselItems changes to update button states
     * @internal
     */
    private slottedCarouselItemsChanged;
    /**
     * Boolean attribute to check if the carousel items are loaded
     */
    private slottedCarouselItemsLoaded;
    /**
     * The header element
     *
     * @public
     * @type {HTMLElement}
     * @observable
     */
    header?: HTMLElement;
    /**
     * The viewport div element for the carousel slotted elements
     * @public
     * @type {HTMLElement}
     * @observable
     */
    viewportRef?: HTMLElement;
    /**
     * The current index of the carousel, indicating which item is currently visible.
     *
     * @public
     * @type {number}
     * @observable
     */
    currentIndex: number;
    /**
     * Callback when currentIndex changes to update button states
     * @internal
     */
    private currentIndexChanged;
    /**
     * The next button element
     *
     * @public
     * @type {HTMLElement[] | null | undefined}
     * @observable
     */
    nextButton?: HTMLElement[] | null | undefined;
    /**
     * The previous button element
     *
     * @public
     * @type {HTMLElement[] | null | undefined}
     * @observable
     */
    prevButton?: HTMLElement[] | null | undefined;
    /**
     * The width of the gap between carousel items, in pixels.
     *
     * @private
     * @type {number}
     */
    private gapWidth;
    /**
     * Updates the disabled state of navigation buttons based on carousel position
     * @internal
     */
    private updateButtonStates;
    /**
     * Handle the next button click event.
     * @internal
     */
    private handleNext;
    /**
     * Handle the previous button click event.
     * @internal
     */
    private handlePrev;
    /**
     * Sets event listeners for the carousel's navigation buttons.
     * @internal
     */
    private setEventListeners;
    /**
     * Removes event listeners for the carousel's navigation buttons.
     * @internal
     */
    private removeEventListeners;
    /**
     * Invoked when the carousel is added to the document's DOM.
     *
     * @public
     * @returns {void}
     */
    connectedCallback(): void;
    /**
     * Invoked when the carousel is removed from the document's DOM.
     *
     * @public
     * @returns {void}
     */
    disconnectedCallback(): void;
    /**
     * Moves the carousel to the next set of items.
     *
     * @public
     * @returns {void}
     */
    next(): void;
    /**
     * Moves the carousel to the previous set of items.
     *
     * @public
     * @returns {void}
     */
    prev(): void;
    /**
     * Scrolls the carousel to a specific index.
     *
     * @public
     * @param {number} index - The target index to scroll to
     * @returns {void}
     */
    scrollToIndex(index: number, _attempts?: number): void;
    /**
     * Cached container width
     * @private
     * @type {number}
     */
    private cachedContainerWidth;
    /**
     * Whether the layout should be recalculated
     * @private
     * @type {boolean}
     */
    private shouldRecalculateLayout;
    /**
     * Resize observer
     * @private
     * @type {ResizeObserver}
     */
    private resizeObserver?;
    /**
     * Item measurements
     * @private
     * @type {number[]}
     */
    private itemMeasurements;
    /**
     * Sets up a resize observer to watch for changes in the carousel's container width
     */
    private setupResizeObserver;
    /**
     * Measures the width of each item in the carousel.
     * @internal
     */
    measureItems(): void;
    /**
     * The index of the last visible item in the carousel.
     * @private
     * @type {number}
     */
    private lastVisibleItemIndex;
    /**
     * Gets the number of items currently visible in the carousel.
     *
     * @public
     * @returns {number} The count of visible items.
     */
    get visibleItemsCount(): number;
    /**
     * Checks if the carousel is at the end of the items.
     *
     * @public
     * @returns {boolean} True if at the end, false otherwise.
     */
    isAtEnd(): boolean;
    /**
     * Gets the count of the next set of visible items in the carousel.
     *
     * @public
     * @param {string} direction - The direction to check ("next" or "prev")
     * @returns {number} The count of the next visible items.
     */
    getNextVisibleItemsCount(direction: "next" | "prev"): number;
    /**
     * Detects if the component is in RTL mode
     * @private
     * @returns {boolean} True if RTL is active
     */
    private updateDirection;
    /**
     * Gets the appropriate transform direction based on RTL
     * @private
     * @param {number} offset - The offset amount
     * @returns {string} The transform CSS value
     */
    private getTransform;
    /**
     * Updates the visible items in the carousel.
     *
     * @public
     * @returns {void}
     */
    updateVisibleItems(): void;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-carousel>
 */
declare const definition$X: _microsoft_fast_element.FASTElementDefinition<typeof Carousel>;

declare const styles$c: _microsoft_fast_element.ElementStyles;

declare const template$9: ElementViewTemplate<Carousel>;

/** Appearance values for {@link Button}. */
declare const ButtonAppearances: {
    readonly primaryOnBrand: "primary-on-brand";
    readonly primary: "primary";
    readonly outline: "outline";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
/** Type describing appearance options for {@link Button}. */
type ButtonAppearance = ValuesOf<typeof ButtonAppearances>;
/** Shape values for {@link Button}. */
declare const ButtonShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
/** Type describing shape options for {@link Button}. */
type ButtonShape = ValuesOf<typeof ButtonShapes>;
/** Size values for {@link Button}. */
declare const ButtonSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/** Type describing size options for {@link Button}. */
type ButtonSize = ValuesOf<typeof ButtonSizes>;
/** Form target values for {@link Button}. */
declare const ButtonFormTargets: {
    readonly blank: "_blank";
    readonly self: "_self";
    readonly parent: "_parent";
    readonly top: "_top";
};
/** Type describing form target options for {@link Button}. */
type ButtonFormTarget = ValuesOf<typeof ButtonFormTargets>;
/** Button type values for {@link Button}. */
declare const ButtonTypes: {
    readonly submit: "submit";
    readonly reset: "reset";
    readonly button: "button";
};
/** Type describing button type options for {@link Button}. */
type ButtonType = ValuesOf<typeof ButtonTypes>;

/**
 * Button
 * @summary A Button Custom HTML Element. Based on FluentButton and includes style and layout specific attributes.
 *
 * @example
 * ```html
 * <fabric-button appearance="primary" shape="rounded" size="large" type="submit" autofocus>
 *   <span slot="start">🚀</span>
 *   Click me!
 *   <span slot="end">→</span>
 * </fabric-button>
 * ```
 *
 * @attr {ButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
 * @attr {ButtonShape | undefined} shape - The shape of the button.
 * @attr {ButtonSize | undefined} size - The size of the button.
 * @attr {boolean} icon-only - Indicates that the button should only display as an icon with no text content.
 * @attr {boolean} autofocus - Indicates the button should be focused when the page is loaded.
 * @attr {boolean | undefined} disabled - Sets the element's disabled state.
 * @attr {boolean} disabled-focusable - Indicates that the button is focusable while disabled.
 * @attr {number} tabindex - Sets that the button tabindex attribute.
 * @attr {string | undefined} formaction - The URL that processes the form submission.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {string | undefined} formenctype - The encoding type for the form submission.
 * @attr {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
 * @attr {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
 * @attr {ButtonFormTarget | undefined} formtarget - The target frame or window to open the form submission in.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {ButtonType} type - The button type.
 * @attr {string | undefined} value - The value attribute.
 *
 * @prop {ButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
 * @prop {ButtonShape | undefined} shape - The shape of the button.
 * @prop {ButtonSize | undefined} size - The size of the button.
 * @prop {boolean} iconOnly - Indicates that the button should only display as an icon with no text content.
 * @prop {boolean} autofocus - Indicates the button should be focused whein the page is loaded.
 * @prop {boolean | undefined} disabled - Sets the element's disabled state.
 * @prop {boolean} disabledFocusable - Indicates that the button is focusable while disabled.
 * @prop {number} tabindex - Sets that the button tabindex attribute.
 * @prop {string | undefined} formaction - The URL that processes the form submission.
 * @prop {string | undefined} form - The id of a form to associate the element to.
 * @prop {string | undefined} formenctype - The encoding type for the form submission.
 * @prop {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
 * @prop {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
 * @prop {ButtonFormTarget | undefined} formtarget - The target frame or window to open the form submission in.
 * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {ButtonType} type - The button type.
 * @prop {string | undefined} value - The value attribute.
 * @prop {string} role - Accessible role applied to the element (defaults to 'button').
 *
 * @slot start - Content which can be provided before the button content.
 * @slot end - Content which can be provided after the button content.
 * @slot - The default slot for button content.
 *
 * @csspart content - The button content container.
 *
 * @cssprop --icon-spacing - Custom property defined in component styles
 *
 * @method keypressHandler - Handles keypress events for the button.
 * @method press - Presses the button.
 * @method resetForm - Resets the associated form.
 *
 * @extends FluentButton
 * @tagname fabric-button
 * @public
 */
declare class Button extends BaseButton {
    /**
     * Indicates the styled appearance of the button.
     *
     * @public
     * @remarks
     * HTML Attribute: `appearance`
     */
    appearance?: ButtonAppearance;
    /**
     * The shape of the button.
     *
     * @public
     * @remarks
     * HTML Attribute: `shape`
     */
    shape?: ButtonShape;
    /**
     * The size of the button.
     *
     * @public
     * @remarks
     * HTML Attribute: `size`
     */
    size?: ButtonSize;
    /**
     * Indicates that the button should only display as an icon with no text content.
     *
     * @public
     * @remarks
     * HTML Attribute: `icon-only`
     */
    iconOnly: boolean;
}

declare const FilterPillTypes: {
    readonly submit: "submit";
    readonly reset: "reset";
    readonly button: "button";
};
type FilterPillType = ValuesOf<typeof FilterPillTypes>;
declare const FilterPillFormTargets: {
    readonly blank: "_blank";
    readonly self: "_self";
    readonly parent: "_parent";
    readonly top: "_top";
};
type FilterPillFormTarget = ValuesOf<typeof FilterPillFormTargets>;
/** Appearance values for {@link FilterPill}. */
declare const FilterPillAppearances: {
    readonly primary: "primary";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
    readonly outline: "outline";
    readonly primaryOnBrand: "primary-on-brand";
};
type FilterPillAppearance = ValuesOf<typeof FilterPillAppearances>;
/** Shape values for {@link FilterPill}. */
declare const FilterPillShapes: {
    readonly circular: "circular";
    readonly square: "square";
};
type FilterPillShape = ValuesOf<typeof FilterPillShapes>;
/** Size values for {@link FilterPill}. */
declare const FilterPillSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
type FilterPillSize = ValuesOf<typeof FilterPillSizes>;
/**
 * FilterPill event names
 * @public
 */
declare const FilterPillEventNames: {
    readonly pressedChange: "pressed-change";
};

/**
 * FilterPill
 * @summary A FilterPill component that represents a button-like pill with various customizable appearances, shapes, and sizes. Based largely on the `<button>` element.
 *
 * @example
 * ```html
 * <fabric-filter-pill appearance="primary" shape="circular" size="medium" icon-only="false" pressed="false" mixed="false">
 *   <span slot="start">Start Content</span>
 *   Filter Pill Content
 *   <span slot="end">End Content</span>
 * </fabric-filter-pill>
 * ```
 *
 * @attr {FilterPillAppearance} appearance - The appearance of the filter pill.
 * @attr {FilterPillShape} shape - The shape of the filter pill.
 * @attr {FilterPillSize} size - The size of the filter pill.
 * @attr {boolean} icon-only - Whether the filter pill is icon-only.
 * @attr {boolean} pressed - Whether the filter pill is pressed.
 * @attr {boolean} mixed - Whether the filter pill is in a mixed state.
 * @attr {string} aria-pressed - The aria-pressed attribute value.
 * @attr {string} aria-label - The aria-label attribute value.
 *
 * @prop {boolean} iconOnly - Whether the filter pill is icon-only.
 * @prop {boolean} pressed - Whether the filter pill is pressed.
 * @prop {boolean} mixed - Whether the filter pill is in a mixed state.
 *
 * @slot - Default slot for the filter pill content.
 * @slot start - Content which can be provided before the button content.
 * @slot end - Content which can be provided after the button content.
 *
 * @csspart content - The content of the filter pill.
 *
 * @cssprop --icon-spacing - Custom property defined in component styles
 *
 * @method iconOnlyChanged - Handles changes to the iconOnly attribute.
 * @method appearanceChanged - Handles changes to the appearance attribute.
 * @method shapeChanged - Handles changes to the shape attribute.
 * @method sizeChanged - Handles changes to the size attribute.
 * @method pressedChanged - Handles changes to the pressed attribute.
 * @method mixedChanged - Handles changes to the mixed attribute.
 * @method press - Toggles the pressed state of the filter pill.
 *
 * @fires pressed-change - Dispatched when the pressed state changes.
 *
 * @extends Button
 * @tagname fabric-filter-pill
 * @public
 */
declare class FilterPill extends Button {
    /**
     * Creates an instance of FilterPill.
     */
    constructor();
    /**
     * AbortController used to manage host-level event listeners.
     */
    private events?;
    /**
     * Wires click and keypress handlers using a shared AbortSignal.
     */
    private attachEventListeners;
    /**
     * The appearance of the filter pill.
     * @attr
     * @type {FilterPillAppearance}
     * @public
     */
    appearance: FilterPillAppearance;
    /**
     * The shape of the filter pill.
     * @attr
     * @type {FilterPillShape}
     * @public
     */
    shape: FilterPillShape;
    /**
     * The size of the filter pill.
     * @attr
     * @type {FilterPillSize}
     * @public
     */
    size: FilterPillSize;
    /**
     * Whether the filter pill is icon-only.
     * @attr {boolean} icon-only
     * @type {boolean}
     * @public
     */
    iconOnly: boolean;
    /**
     * Handles changes to the iconOnly attribute.
     * @param {boolean} prev - The previous value of the iconOnly attribute.
     * @param {boolean} next - The new value of the iconOnly attribute.
     */
    iconOnlyChanged(prev: boolean, next: boolean): void;
    /**
     * Handles changes to the appearance attribute.
     * @param {FilterPillAppearance | undefined} prev - The previous value of the appearance attribute.
     * @param {FilterPillAppearance | undefined} next - The new value of the appearance attribute.
     */
    appearanceChanged(prev: FilterPillAppearance | undefined, next: FilterPillAppearance | undefined): void;
    /**
     * Handles changes to the shape attribute.
     * @param {FilterPillShape | undefined} prev - The previous value of the shape attribute.
     * @param {FilterPillShape | undefined} next - The new value of the shape attribute.
     */
    shapeChanged(prev: FilterPillShape | undefined, next: FilterPillShape | undefined): void;
    /**
     * Handles changes to the size attribute.
     * @param {FilterPillSize | undefined} prev - The previous value of the size attribute.
     * @param {FilterPillSize | undefined} next - The new value of the size attribute.
     */
    sizeChanged(prev: FilterPillSize | undefined, next: FilterPillSize | undefined): void;
    /**
     * Whether the filter pill is pressed.
     * @attr {boolean}
     * @type {boolean}
     * @public
     */
    pressed: boolean;
    /**
     * Handles changes to the pressed attribute.
     */
    protected pressedChanged(): void;
    /**
     * Whether the filter pill is in a mixed state.
     * @attr {boolean}
     * @type {boolean}
     * @public
     */
    mixed: boolean;
    /**
     * Handles changes to the mixed attribute.
     */
    protected mixedChanged(): void;
    /**
     * Toggles the pressed state of the filter pill.
     */
    protected press(): void;
    /**
     * Sets the pressed state of the filter pill.
     * @private
     */
    private setPressedState;
    /**
     * Lifecycle hook to attach event listeners once connected.
     */
    connectedCallback(): void;
    /**
     * Lifecycle hook to clean up event listeners when disconnected.
     */
    disconnectedCallback(): void;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-filter-pill>
 */
declare const definition$W: _microsoft_fast_element.FASTElementDefinition<typeof FilterPill>;

/**
 * Appearances for {@link CompoundButton}
 * Local plural const composed from ButtonAppearances allowing future extensions.
 * @public
 */
declare const CompoundButtonAppearances: {
    readonly primaryOnBrand: "primary-on-brand";
    readonly primary: "primary";
    readonly outline: "outline";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
/**
 * Type describing appearance options for {@link CompoundButton}.
 * This is the union of the values defined in `CompoundButtonAppearances`.
 */
type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearances>;
/**
 * Shapes for {@link CompoundButton}
 * @public
 */
declare const CompoundButtonShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
/**
 * Type describing shape options for {@link CompoundButton}.
 * This is the union of the values defined in `CompoundButtonShapes`.
 */
type CompoundButtonShape = ValuesOf<typeof CompoundButtonShapes>;
/**
 * Sizes for {@link CompoundButton}
 * @public
 */
declare const CompoundButtonSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/**
 * Type describing size options for {@link CompoundButton}.
 * This is the union of the values defined in `CompoundButtonSizes`.
 */
type CompoundButtonSize = ValuesOf<typeof CompoundButtonSizes>;
/**
 * Form targets for {@link CompoundButton}
 * @public
 */
declare const CompoundButtonFormTargets: {
    readonly blank: "_blank";
    readonly self: "_self";
    readonly parent: "_parent";
    readonly top: "_top";
};
/**
 * Type describing form target options for {@link CompoundButton}.
 * This is the union of the values defined in `CompoundButtonFormTargets`.
 */
type CompoundButtonFormTarget = ValuesOf<typeof CompoundButtonFormTargets>;
/**
 * Types for {@link CompoundButton}
 * @public
 */
declare const CompoundButtonTypes: {
    readonly submit: "submit";
    readonly reset: "reset";
    readonly button: "button";
};
/**
 * Type describing button type options for {@link CompoundButton}.

 * This is the union of the values defined in `CompoundButtonTypes`.
*/
type CompoundButtonType = ValuesOf<typeof CompoundButtonTypes>;

/**
 * CompoundButton
 * @summary The base class used for constructing a fabric-compound-button custom element, which extends the Fluent UI CompoundButton with Fabric-specific functionality.
 *
 * @example
 * ```html
 * <fabric-compound-button appearance="primary" shape="rounded" size="large" type="submit" autofocus>
 *   <span slot="start">🚀</span>
 *   Your Text Here
 *   <span slot="end">→</span>
 *   <span slot="description">Detailed description here</span>
 * </fabric-compound-button>
 * ```
 *
 * @attr {CompoundButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
 * @attr {CompoundButtonShape | undefined} shape - The shape of the button.
 * @attr {CompoundButtonSize | undefined} size - The size of the button.
 * @attr {boolean | undefined} icon-only - Indicates that the button should only display as an icon with no text content.
 * @attr {boolean | undefined} autofocus - Indicates the button should be focused when the page is loaded.
 * @attr {boolean | undefined} disabled-focusable - Indicates that the button is focusable while disabled.
 * @attr {number | undefined} tabindex - Sets that the button tabindex attribute.
 * @attr {string | undefined} formaction - The URL that processes the form submission.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {string | undefined} formenctype - The encoding type for the form submission.
 * @attr {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
 * @attr {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
 * @attr {CompoundButtonFormTarget | undefined} formtarget - The target frame or window to open the form submission in.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {string | undefined} type - The button type.
 * @attr {string | undefined} value - The value attribute.
 *
 * @prop {CompoundButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
 * @prop {CompoundButtonShape | undefined} shape - The shape of the button.
 * @prop {CompoundButtonSize | undefined} size - The size of the button.
 * @prop {boolean | undefined} iconOnly - Indicates that the button should only display as an icon with no text content.
 * @prop {boolean | undefined} autofocus - Indicates the button should be focused when the page is loaded.
 * @prop {boolean | undefined} disabledFocusable - Indicates that the button is focusable while disabled.
 * @prop {number | undefined} tabIndex - Sets that the button tabindex attribute.
 * @prop {string | undefined} formAction - The URL that processes the form submission.
 * @prop {string | undefined} form - The id of a form to associate the element to.
 * @prop {string | undefined} formEnctype - The encoding type for the form submission.
 * @prop {string | undefined} formMethod - The HTTP method that the browser uses to submit the form.
 * @prop {boolean | undefined} formNoValidate - Indicates that the form will not be validated when submitted.
 * @prop {CompoundButtonFormTarget | undefined} formTarget - The target frame or window to open the form submission in.
 * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {string | undefined} type - The button type.
 * @prop {string | undefined} value - The value attribute.
 *
 * @slot start - Content which can be provided before the button content.
 * @slot end - Content which can be provided after the button content.
 * @slot - The default slot for button content.
 * @slot description - A slot for providing additional description.
 *
 * @csspart content - The button content container.
 *
 * @method press - Presses the button.
 * @method resetForm - Resets the associated form.
 *
 * @extends FluentCompoundButton
 * @tagname fabric-compound-button
 * @public
 */
declare class CompoundButton extends BaseButton {
    /**
     * The appearance of the compound button.
     *
     * @public
     * @remarks
     * HTML Attribute: `appearance`
     */
    appearance: CompoundButtonAppearance;
    /**
     * The shape of the compound button.
     *
     * @public
     * @remarks
     * HTML Attribute: `shape`
     */
    shape?: CompoundButtonShape;
    /**
     * The size of the compound button.
     *
     * @public
     * @remarks
     * HTML Attribute: `size`
     */
    size?: CompoundButtonSize;
    /**
     * Indicates that the compound button should only display as an icon with no text content.
     *
     * @public
     * @remarks
     * HTML Attribute: `icon-only`
     */
    iconOnly: boolean;
}

/**
 * The Fabric Compound Button component.
 *
 * @public
 */
declare const definition$V: _microsoft_fast_element.FASTElementDefinition<typeof CompoundButton>;

/**
 * LoadingButton
 * @summary A custom button component with a loading state that extends Fluent UI's Button class. It provides visual feedback with a spinner when the button is in a loading state and disables interaction.
 *
 * @example
 * ```html
 * <fabric-loading-button
 *   appearance='primary'
 *   size='large'
 *   shape='rounded'
 *   loading
 *   disabled
 *   aria-busy='true'>
 *   Submit
 * </fabric-loading-button>
 * ```
 *
 * @attr {boolean} loading - Indicates whether the button is in a loading state.
 * @attr {ButtonAppearance} appearance - The appearance of the button.
 * @attr {ButtonShape} shape - The shape of the button.
 * @attr {ButtonSize} size - The size of the button.
 * @attr {string} aria-busy - Indicates whether the button is busy.
 *
 * @prop {boolean} loading - Indicates whether the button is in a loading state. Default: false.
 * @prop {boolean} disabled - Indicates whether the button is disabled. Default: false.
 *
 * @slot - The default slot for the button content.
 * @slot start - Slot for the spinner when the button is loading.
 *
 * @csspart control - The control part of the button, styled differently when loading and disabled.
 *
 * @extends FluentButton
 * @tagname fabric-loading-button
 * @public
 */
declare class LoadingButton extends Button$1 {
    /**
     * Indicates whether the button is in a loading state.
     * @public
     * @type {boolean}
     * @default false
     */
    loading: boolean;
}

/**
 * Compose the LoadingButton component definition.
 *
 * @public
 * @remarks
 * HTML Element: <fabric-loading-button>
 */
declare const definition$U: _microsoft_fast_element.FASTElementDefinition<typeof LoadingButton>;

/**
 * MultiView
 * @summary A customizable step component for a wizard-style interface.
 *
 * @example
 * ```html
 * <fabric-multi-view>
 *   <div slot="start">Start Content</div>
 *   <div>Default Content</div>
 *   <div slot="end">End Content</div>
 * </fabric-multi-view>
 * ```
 *
 * @attr {boolean} hidden - Controls the visibility of the component. True if the component is hidden.
 *
 * @prop {boolean} hidden - Determines the hidden state of the multi-view.
 *
 * @slot - Default slot for adding content that can be shown or hidden.
 *
 * @csspart multi-view - Style part for the main container of the multi-view.
 *
 * @method hiddenChanged(oldValue: string, newValue: string) - Called when the `hidden` attribute changes. It emits the `hidden-change` event.
 *
 * @fires hidden-change - Fires when the hidden state of the component changes.
 *
 * @extends FASTElement
 * @tagname fabric-multi-view
 * @public
 */
declare class MultiView extends FASTElement {
    /**
     * Determines the hidden state of the multi-view
     * @public
     * @type {boolean}
     * @attr
     */
    hidden: boolean;
    hiddenChanged(oldValue: string, newValue: string): void;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-multi-view>
 */
declare const definition$T: _microsoft_fast_element.FASTElementDefinition<typeof MultiView>;

/**
 * MultiView event names
 * @public
 */
declare const MultiViewEventNames: {
    readonly hiddenChange: "hidden-change";
};

/**
 * MultiViewController
 * @summary A customizable controller component for a multi-view interface.
 *
 * @example
 * ```html
 * <fabric-multi-view-controller hidden>
 *   <fabric-multi-view-group>
 *     <fabric-multi-view>
 *       <!-- Content for the first view -->
 *     </fabric-multi-view>
 *     <fabric-multi-view>
 *       <!-- Content for the second view -->
 *     </fabric-multi-view>
 *   </fabric-multi-view-group>
 * </fabric-multi-view-controller>
 * ```
 *
 * @attr {boolean} hidden - Controls the visibility of the component. True if the component is hidden.
 *
 * @prop {boolean} hidden - Controls the visibility of the component. True if the component is hidden.
 *
 * @slot - Default slot for adding a controller.
 *
 * @csspart multi-view - Style part for the main container of the multi-view.
 *
 * @extends FASTElement
 * @tagname fabric-multi-view-controller
 * @public
 */
declare class MultiViewController extends FASTElement {
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fluent-multi-view-controller>
 */
declare const definition$S: _microsoft_fast_element.FASTElementDefinition<typeof MultiViewController>;

/**
 * MultiViewGroup
 * @summary The MultiViewGroup component is designed to manage multiple views or panels, controlling their visibility and interaction state.
 *
 * @example
 * ```html
 * <fabric-multi-view-group>
 *   <div slot="controller">Controller 1</div>
 *   <fabric-multi-view slot="multi-view">View 1</fabric-multi-view>
 *   <div slot="controller">Controller 2</div>
 *   <fabric-multi-view slot="multi-view">View 2</fabric-multi-view>
 * </fabric-multi-view-group>
 * ```
 *
 * @attr {HTMLElement[]} multiViews - An observable array of HTML elements that represent multiViews.
 * @attr {HTMLElement[]} controllers - An observable array of HTML elements that represent controllers.
 * @attr {HTMLElement[]} openedMultiViews - An observable array of HTML elements that represent opened multiViews.
 * @attr {string} activeid - A string representing the active ID.
 *
 * @prop {HTMLElement | undefined} activeController - A HTML element representing the active controller.
 * @prop {number} prevActiveControllerIndex - A number representing the index of the previously active controller.
 * @prop {number} activeControllerIndex - A number representing the index of the active controller.
 * @prop {string[]} controllerIds - An array of strings that represent the IDs of the controllers.
 * @prop {string[]} multiViewsIds - An array of strings that represent the IDs of the multiViews.
 *
 * @slot multi-view - Slot for the individual view panels managed by this component.
 * @slot controller - Slot for the control elements that toggle the visibility of the view panels.
 *
 * @csspart views - The container for view panels.
 * @csspart controllers - The container for the control elements.
 *
 * @method initialize - Initializes the component by setting up controllers and multiViews.
 * @method openMultiView - Opens the specified multiView.
 * @method manageOpenedMultiViews - Manages opened MultiViews by limiting the number of opened views and setting focus on the newly opened MultiView.
 * @method limitNumberOfOpenMultiViews - Limits the number of opened MultiViews.
 * @method manageOpeningSecondMultiView - Manages the opening of a second MultiView.
 * @method openSecondMultiView - Opens the second multiView.
 * @method closeMultiView - Closes the specified multiView.
 * @method manageClosedMultiViews - Manages the state of closed MultiViews.
 * @method closeAllMultiViews - Closes all opened multiViews.
 * @method toggleMultiView - Toggles the specified multiView.
 * @method activeidChanged - Called when the active ID changes.
 * @method controllersChanged - Called when controllers changes.
 * @method multiViewsChanged - Called when multiViews changes.
 * @method openedMultiViewsChanged - Called when openedMultiViews changes.
 *
 * @fires change - Fires when the state of the opened views changes.
 *
 * @extends FASTElement
 * @tagname fabric-multi-view-group
 * @public
 */
declare class MultiViewGroup extends FASTElement {
    /**
     * Method to be called when the component is inserted into the document.
     */
    connectedCallback(): void;
    /**
     * Method to be called when the component is removed from the document.
     */
    disconnectedCallback(): void;
    initialize(): void;
    /**
     * An observable array of HTML elements that represent multiViews.
     */
    multiViews: HTMLElement[];
    /**
     * An observable array of HTML elements that represent controllers.
     */
    controllers: HTMLElement[];
    /**
     * A reference to the controllers container
     */
    controllersContainer: HTMLElement;
    /**
     * An observable array of HTML elements that represent opened multiViews.
     */
    openedMultiViews: HTMLElement[];
    /**
     * The previously opened MultiView
     */
    previouslyOpenedMultiView: MultiView | null;
    /**
     * A string representing the active ID.
     */
    private activeid;
    /**
     * A HTML element representing the active controller.
     */
    private activeController?;
    /**
     * A number representing the index of the previously active controller.
     */
    private prevActiveControllerIndex;
    /**
     * A number representing the index of the active controller.
     */
    private activeControllerIndex;
    /**
     * An array of strings that represent the IDs of the controllers.
     */
    private controllerIds;
    /**
     * An array of strings that represent the IDs of the multiViews.
     */
    private multiViewsIds;
    /**
     * Method to open a multiView.
     * @param {MultiView} multiView - The multiView to open.
     */
    openMultiView: (multiView: MultiView) => void;
    /**
     * Manages opened MultiViews by limiting the number of opened views
     * and setting focus on the newly opened MultiView.
     *
     * @param {MultiView} multiView - The MultiView to manage.
     * @param {CustomEvent} [event] - The event that triggered the managing of the MultiView.
     * @public
     */
    manageOpenedMultiViews: (multiView: MultiView) => void;
    /**
     * Limits the number of opened MultiViews. If there are more than one MultiViews opened,
     * it will remove the attribute "data-flexposition" from the first opened MultiView and hide it.
     * @public
     */
    limitNumberOfOpenMultiViews(): void;
    /**
     * Manages the opening of a second MultiView. It will set the "data-flexposition" attribute of the second MultiView,
     * limit the number of opened MultiViews if necessary, and add the second MultiView to the list of opened MultiViews.
     *
     * @param {MultiView} multiView - The MultiView to open.
     * @public
     */
    manageOpeningSecondMultiView: (multiView: MultiView) => void;
    /**
     * Method to open the second multiView.
     */
    openSecondMultiView: (multiView: MultiView) => void;
    /**
     * Method to close a multiView.
     * @param {MultiView} multiView - The multiView to close.
     */
    closeMultiView: (multiView: MultiView) => void;
    manageClosedMultiViews: (multiView: MultiView) => void;
    /**
     * Method to close all opened multiViews.
     */
    closeAllMultiViews: () => void;
    /**
     * Method to toggle a multiView.
     * @param {MultiView} multiView - The multiView to toggle.
     */
    toggleMultiView: (multiView: MultiView) => void;
    /**
     * Method to be called when the active ID changes.
     * @param {string} oldValue - The previous value of the active ID.
     * @param {string} newValue - The new value of the active ID.
     */
    activeidChanged(oldValue: string, newValue: string): void;
    /**
     * Method to be called when controllers changes.
     */
    controllersChanged(): void;
    /**
     * Method to be called when multiViews changes.
     */
    multiViewsChanged(): void;
    /**
     * Method to be called when opendedMultiViews changes.
     */
    openedMultiViewsChanged(): void;
    /**
     * Removes a given multiView from the collection of opened multiViews.
     * @private
     * @param {MultiView} multiViewToRemove - The multiView to remove.
     */
    private removeMultiViewFromOpenedMultiViews;
    /**
     * Adds a given multiView to the collection of opened multiViews, unless it's already present.
     * @private
     * @param {MultiView} multiViewToAdd - The multiView to add.
     */
    private addMultiViewToOpenedMultiViews;
    /**
     * Triggers a change event with the currently opened multiViews.
     * @private
     */
    private change;
    private isDisabledElement;
    private isHiddenElement;
    private isFocusableElement;
    private isValidMultiViewState;
    /**
     * Returns the active index based on the activeid property, falls back to 0 if all elements are hidden.
     * @private
     * @returns {number} - The active index.
     */
    private getActiveIndex;
    /**
     * Sets attributes for controllers and determines the active controller.
     * @private
     */
    private setControllers;
    /**
     * Sets attributes for multiViews and determines which multiViews are hidden.
     * @private
     */
    private setMultiViews;
    /**
     * Sets focus on the first controller in the multi-view group.
     */
    private focusFirstController;
    /**
     * remove focusability from all controllers
     */
    private makeControllerUnfocusable;
    /**
     * Returns an array of IDs for the controllers.
     * @private
     * @returns {Array<string>} - The IDs of the controllers.
     */
    private getControllerIds;
    /**
     * Returns an array of IDs for the multiViews.
     * @private
     * @returns {Array<string>} - The IDs of the multiViews.
     */
    private getMultiViewIds;
    /**
     * Triggers a change if the active controller index has changed.
     * @private
     */
    private setComponent;
    /**
     * Handles click events on the controllers.
     * @private
     * @param {MouseEvent} event - The click event.
     */
    private handleControllerClick;
    /**
     * Handles keydown events on the controller.
     * @param {KeyboardEvent} event The event object.
     * @private
     */
    private handleControllerKeyDown;
    /**
     * Handles keydown events on the controller.
     * @param {KeyboardEvent} event The event object.
     * @private
     */
    private handleMultiViewKeyDown;
    /**
     * Handles keydown events on the controller.
     * @param {KeyboardEvent} event The event object.
     * @private
     */
    handleToggleButtonContainerKeyDown: (event: KeyboardEvent) => void;
    /**
     * Handles blur events on the controller.
     * @param {FocusEvent} event The event object.
     * @public
     */
    handleControllerBlur(event: FocusEvent): void;
    /**
     * The adjust method for FASTTabs
     * @private
     * @remarks
     * This method allows the active index to be adjusted by numerical increments
     */
    private adjust;
    /**
     * Adjusts the active controller forward.
     * @private
     */
    private adjustForward;
    /**
     * Adjusts the active controller backward.
     * @private
     */
    private adjustBackward;
    /**
     * Moves the focus to the controller at the specified index.
     * @param {HTMLElement[]} group The array of controllers.
     * @param {number} index The index of the controller to focus.
     * @private
     */
    private moveToToggleButtonByIndex;
    /**
     * Sets the specified attributes on the given HTML element.
     * @param {HTMLElement} element The HTML element on which to set attributes.
     * @param {{[key: string]: string}} attributes An object mapping attribute names to values.
     * @private
     */
    private setAttributes;
    /**
     * Adds event listeners to the controllers and multiViews.
     *
     * @returns {void}
     */
    private addEventListeners;
    /**
     * Removes event listeners from the controllers.
     *
     * @returns {void}
     */
    private removeEventListeners;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fluent-multi-view-group>
 */
declare const definition$R: _microsoft_fast_element.FASTElementDefinition<typeof MultiViewGroup>;

/**
 * MultiViewGroupPosition constants
 * @public
 */
declare const MultiViewGroupPositions: {
    readonly right: "right";
    readonly left: "left";
};
/**
 * A multiViewGroup can appear on the left or right side of the viewport
 * @public
 */
type MultiViewGroupPosition = ValuesOf<typeof MultiViewGroupPositions>;

/**
 * Collision edge values for positioning calculations
 * @public
 */
declare const CollisionEdges: {
    readonly top: "top";
    readonly right: "right";
    readonly bottom: "bottom";
    readonly left: "left";
};
/**
 * Collision edge type
 * @public
 */
type CollisionEdge = ValuesOf<typeof CollisionEdges>;

declare const PositioningShorthands: {
    readonly aboveEnd: "above-end";
    readonly aboveCenter: "above-center";
    readonly aboveStart: "above-start";
    readonly endBottom: "end-bottom";
    readonly endMiddle: "end-middle";
    readonly endTop: "end-top";
    readonly belowEnd: "below-end";
    readonly belowCenter: "below-center";
    readonly belowStart: "below-start";
    readonly startBottom: "start-bottom";
    readonly startTop: "start-top";
    readonly startMiddle: "start-middle";
};
declare const PositioningShorthand: {
    readonly aboveEnd: "above-end";
    readonly aboveCenter: "above-center";
    readonly aboveStart: "above-start";
    readonly endBottom: "end-bottom";
    readonly endMiddle: "end-middle";
    readonly endTop: "end-top";
    readonly belowEnd: "below-end";
    readonly belowCenter: "below-center";
    readonly belowStart: "below-start";
    readonly startBottom: "start-bottom";
    readonly startTop: "start-top";
    readonly startMiddle: "start-middle";
};
type PositioningShorthand = ValuesOf<typeof PositioningShorthands>;
declare const PopoverPositions: ("above-end" | "above-center" | "above-start" | "end-bottom" | "end-middle" | "end-top" | "below-end" | "below-center" | "below-start" | "start-bottom" | "start-top" | "start-middle")[];
type PopoverSize = "small" | "medium" | "large";
type PopoverMode = "manual" | "auto";
type PopoverRepositionMode = ValuesOf<typeof PopoverRepositionModes>;
declare const PopoverRepositionModes: {
    readonly auto: "auto";
    readonly flip: "flip";
    readonly none: "none";
};
type PositioningShorthandKeys = keyof typeof PositioningShorthands;
type PositioningShorthandValues = (typeof PositioningShorthands)[keyof typeof PositioningShorthands];
interface HTMLPopoverElement extends HTMLElement {
    showPopover: () => void;
    hidePopover: () => void;
    togglePopover(...args: unknown[]): boolean;
}
interface PopoverEventData {
    open: boolean;
    newState: "open" | "closed";
    target: HTMLElement;
}
declare const PopoverEventNames: {
    readonly hide: "hide-popover";
    readonly show: "show-popover";
    readonly toggle: "toggle-popover";
    readonly mouseEnter: "mouse-enter-popover";
    readonly mouseLeave: "mouse-leave-popover";
};

/**
 * Popover
 * @summary A Popover component that displays content in a floating container, with configurable size, position, and behavior.
 *
 * @example
 * ```html
 * <fabric-popover beak size="large" mode="auto" position="above-center" target-id="exampleTarget" open>
 *   <div slot="popover-trigger">Click me</div>
 *   <div slot="popover-content">Popover content</div>
 * </fabric-popover>
 * ```
 *
 * @attr {boolean} beak - Whether the popover has a beak.
 * @attr {boolean} non-clickable - Indicates if the popover anchor is not clickable.
 * @attr {PopoverSize} size - The size of the popover.
 * @attr {PopoverMode} mode - The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open.
 * @attr {PositioningShorthandValues} position - The position of the popover.
 * @attr {string} target-id - The ID of the target element.
 * @attr {PopoverRepositionMode} reposition-mode - The mode for repositioning the popover.
 * @attr {boolean} open - Whether the popover is open.
 * @attr {number} transition-duration - The duration of the transition of the popover. The default value is 100.
 * @attr {number} transition-delay - The delay of the transition of the popover. The default value is 0.
 *
 * @prop {HTMLElement[] | undefined} anchorReferences - The references to the anchoring / triggering element.
 * @prop {boolean} refsLoaded - Indicates if all references are loaded.
 * @prop {ElementStyles | undefined} styles - Stores the CSS variables required for animations.
 * @prop {boolean} transitionComplete - Indicates if the transition is complete.
 * @prop {PopoverRepositionMode} repositionMode - The mode for repositioning the popover.
 * @prop {Array<PositioningShorthandValues>} openPositions - The array of open positions based on the collision edge.
 * @prop {HTMLPopoverElement | undefined} popoverReference - The reference to the popover element.
 * @prop {string | undefined} popoverRole - An optional user-defined role for the popover floating content element.
 * @prop {HTMLElement | undefined} overflowBoundary - The boundary container element of the popover for repositioning.
 *
 * @slot popover-trigger - Slot for the popover trigger element.
 * @slot popover-content - Slot for the popover content.
 *
 * @csspart popover - The popover container.
 * @csspart beak - The beak element of the popover.
 * @csspart beak-shadow - The shadow element of the beak.
 *
 * @method hidePopover - Hides the popover.
 * @method showPopover - Shows the popover.
 * @method togglePopover - Toggles the popover open state.
 * @method emitHideEvent - Emits the hide event for the popover.
 * @method emitShowEvent - Emits the show event for the popover.
 * @method emitToggleEvent - Emits the toggle event for the popover.
 * @method emitMouseEnterEvent - Emits the mouse enter event for the popover.
 * @method emitMouseLeaveEvent - Emits the mouse leave event for the popover.
 * @method addActiveHandlers - Adds the event listeners for the popover when it is open.
 * @method createPositioningManager - Creates the positioning manager for the popover.
 * @method removeEventListeners - Removes event listeners from the popover.
 *
 * @fires hide-popover - Emits when the popover is hidden.
 * @fires show-popover - Emits when the popover is shown.
 * @fires toggle-popover - Emits when the popover is toggled.
 * @fires mouse-enter-popover - Emits when the mouse enters the popover.
 * @fires mouse-leave-popover - Emits when the mouse leaves the popover.
 *
 * @extends FASTElement
 * @tagname fabric-popover
 * @public
 */
declare class Popover extends FASTElement {
    /**
     * The positioning instance for the popover.
     * @private
     */
    private positioning;
    /**
     * Whether the popover has a beak.
     * @public
     * @type {boolean}
     * @attr
     */
    beak: boolean;
    /**
     * ## nonClickable
     *
     * controls whether the popover anchor is not clickable. When set to true, the popover will not close when the user clicks the trigger element.
     *
     * @public
     * @type {boolean}
     * @attr non-clickable
     * @default true
     */
    nonClickable: boolean;
    nonClickableChanged(): void;
    /**
     * The size of the popover.
     * @public
     * @type {PopoverSize}
     * @attr
     */
    size: PopoverSize;
    /**
     * The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open.
     * @public
     * @type {PopoverMode}
     * @attr
     */
    mode: PopoverMode;
    /**
     * The position of the popover.
     * @public
     * @type {PositioningShorthandValues}
     * @attr
     */
    position: PositioningShorthandValues;
    /**
     * ## targetId
     *
     * @summary the id of the wrapped target element. this is the element that will trigger the popover. The ID of the target element.
     * @public
     * @type {string | undefined}
     * @attr target-id
     */
    targetId?: string;
    /**
     * anchorReferences
     *
     * @summary the references to the anchoring / triggering element. This is the element that will trigger the popover. And is identified by its being passed through. The list of anchor references.
     * @public
     * @type {HTMLElement[] | undefined}
     * @observable
     */
    anchorReferences?: HTMLElement[];
    /**
     * Handles changes to the anchor references.
     * Adds anchor attributes and event listeners when the anchor is added to the DOM.
     * @public
     */
    anchorReferencesChanged(): void;
    /**
     * ## styles
     * @summary used in the class for storing the css variables required for animations
     */
    private styles;
    refsLoaded: boolean;
    refsLoadedChanged: () => void;
    /**
     * ## checkAllLoaded
     *
     * @summary checks if all the refs are loaded. If they are, it sets the refsLoaded property to true.
     */
    checkAllLoaded(): void;
    /**
     * transitionDuration
     *
     * @summary - set the duration (in milliseconds) of popover transition for opening and close
     */
    transitionDuration: number;
    transitionDurationChanged(): void;
    /**
     * transitionDelay
     *
     * @summary - set the delay (in milliseconds) of popover transition for opening and close
     */
    transitionDelay: number;
    /**
     * ## transitionComplete
     *
     * @summary - a boolean that is set to true when the transition is complete
     */
    transitionComplete: boolean;
    /**
     * ## transitionDelayChanged
     */
    transitionDelayChanged(): void;
    /**
     * ## onTransitionEnd
     */
    onTransitionEnd: () => void;
    /**
     * ## onTransitionStart
     */
    onTransitionStart: () => void;
    /**
     * ## addTransitionStyles
     *
     * @summary - adds the transition styles to the popover element
     */
    addTransitionStyles(): void;
    /**
     * ## removeTransitionStyles
     *
     * @summary - removes the transition styles from the popover element
     */
    removeTransitionStyles(): void;
    /**
     * The mode for repositioning the popover.
     * @public
     * @type {PopoverRepositionMode}
     * @attr reposition-mode
     * @default flip
     */
    repositionMode: PopoverRepositionMode;
    /**
     * ## openPositions
     *
     * @summary An array of open positions based on the collisionEdge Handles changes to the reposition mode.
     * @public
     */
    repositionModeChanged(): void;
    /**
     * ## openPositions
     *
     * @summary The array of open positions based on the collision edge.
     *
     * @public
     * @type {Array<PositioningShorthandValues>}
     * @observable
     */
    openPositions: Array<PositioningShorthandValues>;
    /**
     * The original position of the popover before repositioning.
     * @private
     * @type {PositioningShorthandValues | undefined}
     */
    private originalPopoverPosition;
    /**
     * ## open
     *
     * @summary Opens and closes the popover. It's used to control the popover from the outside. However, it's not recommended to use this property to control the popover before load. To control the popover correctly, wait until the window has fully loaded before opening the popover. Whether the popover is open.
     * @public
     * @type {boolean}
     * @attr
     * @default false
     */
    open: boolean;
    /**
     * ## openChanged
     *
     * @summary Adds and removes many of the event listeners for the popover. Handles changes to the open state of the popover. Opens and closes the popover, controlling it from the outside. It's recommended to wait until the window has fully loaded before opening the popover. Adds and removes many of the event listeners.
     * @public
     */
    openChanged(): void;
    /**
     * ## addActiveHandlers
     *
     * @summary Adds the event listeners for the popover when it is open. Adds active handlers for the popover.
     * @private
     */
    addActiveHandlers(): void;
    /**
     * The reference to the popover element.
     * @public
     * @type {HTMLPopoverElement | undefined}
     * @observable
     */
    popoverReference: HTMLPopoverElement | undefined;
    popoverReferenceChanged(): void;
    /**
     * ## popoverRole
     *
     * @summary an optional user defined role for the popover floating content element
     */
    popoverRole: string | undefined;
    /**
     * ## initializeTargetId
     *
     * @summary initializes the targetId with a random id if it's not set by the user. The usefulness of this may not be apparent by the code. When the aria-describedby attribute of the trigger is set to the id of the target (popover), the aria-describedby content will reflect the content of the popover.
     * Initializes the target ID with a random ID if it's not set by the user.
     * @private
     */
    private initializeTargetId;
    /**
     * The boundary container element of the popover for repositioning.
     * @public
     * @type {HTMLElement | undefined}
     * @observable
     */
    overflowBoundary?: HTMLElement;
    /**
     * Handles changes to the overflow boundary.
     * @public
     */
    overflowBoundaryChanged(): void;
    /**
     * Hides the popover.
     * @public
     */
    hidePopover: () => void;
    /**
     * Shows the popover.
     * @public
     */
    showPopover: () => void;
    /**
     * Toggles the popover open state.
     * @public
     */
    togglePopover: () => boolean;
    /**
     * Emits the hide event for the popover.
     * @public
     */
    emitHideEvent: () => void;
    /**
     * Emits the show event for the popover.
     * @public
     */
    emitShowEvent: () => void;
    /**
     * Emits the toggle event for the popover.
     * @public
     */
    emitToggleEvent(): void;
    /**
     * Emits the mouse enter event for the popover.
     * @public
     */
    emitMouseEnterEvent: () => void;
    /**
     * Emits the mouse leave event for the popover.
     * @public
     */
    emitMouseLeaveEvent: () => void;
    /**
     * ## addMouseOverEventListeners
     *
     * @summary Adds event listeners to the popoverReference to emit mouseEnter and mouseLeave events. Adds mouse over event listeners to the popover.
     * @private
     */
    private addMouseOverEventListeners;
    /**
     * Removes mouse over event listeners from the popover.
     * @private
     */
    private removeMouseOverEventListeners;
    /**
     * Updates the popover position.
     * @private
     */
    private updatePopoverPosition;
    /**
     * ## handleWindowChanges
     *
     * @summary debounced method to handle window changes. It observes the popover for overflow and repositions the popover when the window is resized or the overflowBoundary is scrolled. Handles window changes with a debounce.
     * @private
     */
    private handleWindowChanges;
    /**
     * addAnchorEventListeners
     *
     * @summary the popover defaults to adding a click event listener on any clickable anchor reference
     * Adds event listeners to the anchor.
     * @private
     */
    private processAnchorEventListeners;
    /**
     * Adds overflow boundary event listeners if the overflow boundary exists.
     * @private
     */
    private addOverflowBoundaryEventListeners;
    /**
     * Adds window event listeners.
     * @private
     */
    private addWindowEventListeners;
    /**
     * Removes window event listeners.
     * @private
     */
    private removeWindowEventListeners;
    /**
     * Handles window click events.
     * Uses composedPath() to properly detect clicks inside shadow DOM triggers.
     * @private
     */
    private handleWindowClick;
    /**
     * ## addOverlayEventListeners
     *
     * @summary Adds event listeners to the window or overflowBoundary to close the popover when the user clicks outside of the popover. Adds overlay event listeners.
     * @private
     */
    private addOverlayEventListeners;
    /**
     * Removes overlay event listeners.
     * @private
     */
    private removeOverlayEventListeners;
    /**
     * ## intersectionObserver
     *
     * @summary used for tracking the overflow / collision of the popover to adjacent edges on ui changes. The intersection observer for tracking overflow.
     * @private
     * @type {IntersectionObserver | undefined}
     */
    private intersectionObserver;
    /**
     * ## createOverflowHandler
     *
     * @summary handles the overflow of the popover based on the overflowBoundary. Calls handleOverflow when the popover collides with its container or user defined overflowed boundary. Creates the overflow handler based on the overflow boundary.
     * @private
     */
    private createOverflowHandler;
    /**
     * ## handleOverflow
     *
     * @summary Repositions the popover when it collides with its container or user defined overflowed boundary. Handles overflow collisions with the popover. Repositions the popover when it collides with its container or defined boundary. Called by the intersectionObserver in createOverflowHandler.
     * @private
     * @param {Array<IntersectionObserverEntry>} entries - The entries to observe.
     */
    private handleOverflow;
    /**
     * ## addRepositioningHandlers
     *
     * @summary Adds event listeners to the window and overflowBoundary to reposition the popover when the window is resized or the overflowBoundary is scrolled. Adds repositioning handlers to the popover.
     * @public
     */
    addRepositioningHandlers(): void;
    /**
     * ## addPositioningManager
     *
     * @summary Creates a new positioning manager for the popover. The positioning manager is used to calculate the position of the popover based on the anchor and the popover's collision with the window or overflowBoundary. Creates the positioning manager for the popover.
     * @public
     */
    createPositioningManager(): void;
    /**
     * Removes event listeners from the popover.
     * @public
     */
    removeEventListeners(): void;
    /**
     * ## releasePositions
     *
     * @summary cleans the positions that are not allowed. Releases the open positions for the popover. Cleans the positions that are not allowed.
     * @private
     */
    private releasePositions;
    /**
     * ## repositionPopover
     *
     * @summary Updates the position of the popover based on popover collisions. Repositions the popover based on collisions.
     * @private
     * @param {Array<PositioningShorthandValues>} openPositions - The array of open positions.
     */
    private repositionPopover;
    /**
     * ## observePopoverOverflow
     *
     * @summary Disconnects and re-observes the popoverReference for overflow. This is used to reposition the popover in the event that it collides with its container or user defined overflowed boundary. Disconnecting is required to reset the baseline for the intersection observer. This method will be called repeatedly on ui changes like resizing the window or scrolling the overflowBoundary. Observes the popover for overflow.  Disconnects and re-observes the popoverReference for overflow.
     * @private
     */
    private observePopoverOverflow;
    connectedCallback(): void;
}

declare const definition$Q: _microsoft_fast_element.FASTElementDefinition<typeof Popover>;

declare const template$8: ElementViewTemplate<Popover>;

declare const styles$b: _microsoft_fast_element.ElementStyles;

/**
 * SvgIcon
 * @summary This component is used to dynamically load and display SVG icons.
 *
 * @example
 * ```html
 * <fabric-svg-icon
 *   name="example-icon"
 *   size="24"
 *   path="/icons/example-icon.svg"
 *   aria-hidden="true"
 *   focusable="false"
 *   role="img"
 * ></fabric-svg-icon>
 * ```
 *
 * @attr {string} name - The name of the SVG icon.
 * @attr {string} size - The size of the SVG icon.
 * @attr {string} path - The path to the SVG icon file.
 * @attr {string} aria-hidden - The aria-hidden attribute for accessibility.
 * @attr {string} focusable - Indicates whether the SVG icon is focusable.
 *
 * @prop {ElementStyles | undefined} computedStylesheet - The computed stylesheet for the SVG icon.
 * @prop {boolean} isLoading - Indicates whether the icon is currently loading.
 * @prop {boolean} isError - Indicates whether there was an error loading the icon.
 * @prop {string} name - The name of the SVG icon.
 * @prop {string} size - The size of the SVG icon.
 * @prop {string} path - The path to the SVG icon file.
 * @prop {string} ariaHidden - The aria-hidden attribute for accessibility.
 * @prop {string} focusable - Indicates whether the SVG icon is focusable.
 * @prop {string | null} role - The role attribute for accessibility (native property, reflects to/from the role attribute).
 *
 * @csspart svg - The SVG element representing the icon.
 * @cssprop --icon-height - Controls the default height of the SVG icon.
 * @cssprop --icon-width - Controls the default width of the SVG icon.
 *
 * @method nameChanged - Handles changes to the name attribute.
 * @method sizeChanged - Handles changes to the size attribute.
 * @method pathChanged - Handles changes to the path attribute.
 * @method checkAndResolveRenderPromise - Checks and resolves the render promise if conditions are met.
 * @method renderIcon - Renders the SVG icon.
 * @method renderErrorIcon - Renders an error icon when the SVG fails to load.
 * @method updateComputedStylesheet - Updates the computed stylesheet with the provided width and height.
 * @method updateSvgAttributes - Updates the attributes of the SVG element.
 *
 * @fires {CustomEvent} error - Dispatched when the icon fails to load.
 *
 * @extends FASTElement
 * @tagname fabric-svg-icon
 * @public
 */
declare class SvgIcon extends FASTElement {
    /**
     * The computed stylesheet for the SVG icon.
     * @private
     * @type {ElementStyles | undefined}
     */
    private computedStylesheet?;
    /**
     * Indicates whether the icon is currently loading.
     * @private
     * @type {boolean}
     * @default true
     */
    private isLoading;
    /**
     * Indicates whether there was an error loading the icon.
     * @private
     * @type {boolean}
     * @default false
     */
    private isError;
    /**
     * The name of the SVG icon.
     * @public
     * @attr
     * @type {string}
     */
    name?: string;
    /**
     * Handles changes to the name attribute.
     * @public
     */
    nameChanged(): void;
    /**
     * The size of the SVG icon.
     * @public
     * @attr
     * @type {string}
     */
    size?: string;
    /**
     * Handles changes to the size attribute.
     * @public
     */
    sizeChanged(): void;
    /**
     * The path to the SVG icon file.
     * @public
     * @observable
     * @attr
     * @type {string}
     */
    path?: string;
    /**
     * Handles changes to the path attribute.
     * @public
     */
    pathChanged(): void;
    /**
     * The aria-hidden attribute for accessibility.
     * @public
     * @attr
     * @type {string}
     * @default true
     */
    ariaHidden: string;
    /**
     * Indicates whether the SVG icon is focusable.
     * @public
     * @attr
     * @type {string}
     * @default false
     */
    focusable: string;
    /**
     * The role attribute for accessibility.
     * @public
     * @type {string | null}
     * @default null
     */
    get role(): string | null;
    set role(value: string | null);
    /**
     * Resolver function for the render promise.
     * @private
     * @type {() => undefined | null}
     */
    private renderResolver;
    /**
     * Promise that resolves when the icon is rendered.
     * @private
     * @type {Promise<void>}
     */
    private renderPromise;
    /**
     * Called when the element is connected to the DOM.
     * @public
     */
    connectedCallback(): void;
    /**
     * Checks and resolves the render promise if conditions are met.
     * @private
     */
    private checkAndResolveRenderPromise;
    /**
     * Renders the SVG icon.
     * @private
     */
    private renderIcon;
    /**
     * Renders an error icon when the SVG fails to load.
     * @private
     */
    private renderErrorIcon;
    /**
     * Updates the computed stylesheet with the provided width and height.
     * @private
     * @param {string | undefined} width - The width of the SVG icon.
     * @param {string | undefined} height - The height of the SVG icon.
     */
    private updateComputedStylesheet;
    /**
     * Updates the attributes of the SVG element.
     * @private
     * @param {SVGSVGElement} svgElement - The SVG element to update.
     */
    private updateSvgAttributes;
}

/**
 * Compose the SvgIcon component definition.
 *
 * @public
 * @remarks
 * HTML Element: <fabric-svg-icon>
 */
declare const definition$P: _microsoft_fast_element.FASTElementDefinition<typeof SvgIcon>;

type TableCellRenderFunction = (data: unknown) => string | HTMLElement | Promise<string | HTMLElement>;
type TableColumnData = {
    columnKey: string;
    label: string;
    render?: TableCellRenderFunction[];
};
type TableRowData = {
    [key: string]: {
        label?: string;
        renderData?: unknown[];
        [key: string]: unknown;
    };
};
/**


/**
 * Expand mode for {@link AccordionMenu}
 * @public
 */
declare const SortDirections: {
    readonly ascending: "ascending";
    readonly descending: "descending";
};
/**
 * Type for the {@link Table} Sort Direction
 * @public
 */
type SortDirection = ValuesOf<typeof SortDirections>;

/**
 * Table
 * @summary A highly accessible, customizable table component supporting sorting, custom cell rendering, and live region announcements for screen readers.
 *
 * @example
 * ```html
 * <fabric-table sortable="true">
 *   <thead part="head">
 *     <tr>
 *       <th part="cell">Column 1</th>
 *       <th part="cell">Column 2</th>
 *     </tr>
 *   </thead>
 *   <tbody part="body">
 *     <tr part="row">
 *       <td part="cell">Row 1, Cell 1</td>
 *       <td part="cell">Row 1, Cell 2</td>
 *     </tr>
 *     <tr part="row">
 *       <td part="cell">Row 2, Cell 1</td>
 *       <td part="cell">Row 2, Cell 2</td>
 *     </tr>
 *   </tbody>
 * </fabric-table>
 * ```
 *
 * @attr {boolean} sortable - Whether the table columns are sortable
 * @attr {SortDirection} sort-direction - The current sort direction ("ascending" | "descending")
 *
 * @prop {HTMLTableSectionElement | null} tableHeadRef - Reference to the table head element.
 * @prop {HTMLTableSectionElement | null} tableBodyRef - Reference to the table body element.
 * @prop {TableRowData[]} rows - The data for the rows of the table.
 * @prop {TableColumnData[]} columns - The data for the columns of the table.
 * @prop {boolean} tableRendered - Flag indicating if the table has been rendered.
 * @prop {SortDirection} sortDirection - The current sort direction of the table.
 * @prop {string} activeColumnKey - The key of the currently active (sorted) column.
 *
 * @slot - Default slot for table content (not directly used, but for consistency)
 *
 * @csspart head - The table head section
 * @csspart body - The table body section
 * @csspart cell - The table cell
 * @csspart row - The table row
 *
 * @method renderTable - Renders the complete table by rendering both head and rows.
 * @method sortByColumn - Handles column sorting when a column header is clicked.
 * @method toggleSortDirection - Toggles the sort direction between ascending and descending.
 * @method sortRows - Sorts the table rows based on the active column and sort direction.
 *
 * @fires {CustomEvent<{direction: SortDirection, columnKey: string}>} sortChanged - Fired when the sort direction or column changes
 * @fires {CustomEvent<Table>} tableRendered - Fired when the table rendering is complete
 *
 * @extends FASTElement
 * @tagname fabric-table
 * @public
 */
declare class Table extends FASTElement {
    /**
     * Reference to the table head element.
     * @type {HTMLTableSectionElement | null}
     * @observable
     */
    tableHeadRef: HTMLTableSectionElement | null;
    /**
     * Reference to the table body element.
     * @type {HTMLTableSectionElement | null}
     * @observable
     */
    tableBodyRef: HTMLTableSectionElement | null;
    /**
     * The data for the rows of the table.
     * @type {TableRowData[]}
     * @observable
     */
    rows: TableRowData[];
    /**
     * The data for the columns of the table.
     * @type {TableColumnData[]}
     * @observable
     */
    columns: TableColumnData[];
    /**
     * Determines if the table is sortable.
     * @type {boolean}
     * @attr {boolean}
     */
    sortable?: boolean;
    /**
     * Handler for changes to the sortable attribute.
     * @private
     */
    sortableChanged(): void;
    /**
     * Handler for changes to the rows property.
     * @private
     */
    rowsChanged(): void;
    /**
     * Handler for changes to the columns property.
     * @private
     */
    columnsChanged(): void;
    /**
     * Renders the complete table by rendering both head and rows.
     * @public
     */
    renderTable(): void;
    /**
     * Flag indicating if the table has been rendered.
     * @type {boolean}
     * @observable
     */
    tableRendered: boolean;
    /**
     * Handler for changes to the tableRendered property.
     * Emits a tableRendered event when rendering is complete.
     * @private
     */
    tableRenderedChanged(): void;
    /**
     * The current sort direction of the table.
     * @type {SortDirection}
     * @observable
     */
    sortDirection: SortDirection;
    /**
     * Toggles the sort direction between ascending and descending.
     * @public
     */
    toggleSortDirection(): void;
    /**
     * The key of the currently active (sorted) column.
     * @type {string}
     */
    activeColumnKey: string;
    /**
     * Sorts the table rows based on the active column and sort direction.
     * @param {SortDirection} [direction] - The direction to sort ("ascending" | "descending" | undefined). If undefined, uses the current sortDirection.
     * @public
     */
    sortRows(direction?: SortDirection): void;
    private sortAnnouncer;
    /**
     * Creates and initializes the live region for sort announcements.
     * @private
     */
    private initializeSortAnnouncer;
    /**
     * Announces the current sort state to screen readers.
     * @param {string} columnLabel - The label of the sorted column.
     * @param {SortDirection} direction - The sort direction.
     * @private
     */
    private announceSortChange;
    /**
     * Handles column sorting when a column header is clicked.
     * @param {Event} event - The click event.
     * @param {string} columnKey - The key of the column to sort by.
     * @public
     */
    sortByColumn(event: Event, columnKey: string): void;
    /**
     * Creates an SVG icon element from an SVG string.
     * @param {typeof UP_ARROW | typeof DOWN_ARROW} icon - The SVG string to convert.
     * @returns {HTMLElement} The created SVG element.
     * @private
     */
    private createSVGIcon;
    /**
     * Renders a sortable column header with appropriate attributes and event handlers.
     * @param {TableColumnData} column - The column data.
     * @param {HTMLDivElement} div - The div element within the header cell.
     * @param {HTMLTableCellElement} th - The table header cell element.
     * @private
     */
    private renderSortableColumn;
    /**
     * Adds focus, blur, click and keyboard event handlers to a header cell.
     * @param {HTMLTableCellElement} th - The table header cell element.
     * @param {TableColumnData} column - The column data.
     * @private
     */
    private addHeaderCellEventHandlers;
    /**
     * Renders the table header section with column headers.
     * @private
     */
    private renderTableHead;
    /**
     * Appends content to a destination element.
     * @param {object} args - The arguments for appending content.
     * @param {HTMLElement} args.dest - The destination element.
     * @param {HTMLElement | string | SVGElement} args.content - The content to append.
     * @returns {Promise<void>}
     * @private
     */
    private appendContent;
    /**
     * Renders custom content for a table cell using render functions.
     * @param {object} args - The arguments for rendering custom content.
     * @param {TableColumnData} args.column - The column data.
     * @param {HTMLElement} args.cell - The table cell element.
     * @param {any} args.row - The row data.
     * @returns {Promise<void>}
     * @private
     */
    private renderCustomContent;
    /**
     * Renders the default text content for a table cell.
     * @param {object} args - The arguments for rendering text content.
     * @param {TableColumnData} args.column - The column data.
     * @param {HTMLElement} args.cell - The table cell element.
     * @param {any} args.row - The row data.
     * @returns {Promise<void>}
     * @private
     */
    private renderTextContent;
    /**
     * Renders a single table row cell.
     * @param {object} args - The arguments for rendering a row.
     * @param {TableColumnData} args.column - The column data.
     * @param {any} args.row - The row data.
     * @param {HTMLElement} args.dest - The destination element (table row).
     * @returns {Promise<void>}
     * @private
     */
    private renderRow;
    /**
     * Renders all rows in the table body.
     * @returns {Promise<void>}
     * @private
     */
    renderTableRows(): Promise<void>;
    /**
     * Lifecycle method called when the element is connected to the DOM.
     * Defines the TableCell custom element and initializes the sort announcer.
     * @public
     */
    connectedCallback(): void;
    /**
     * Lifecycle method called when the element is disconnected from the DOM.
     * Cleans up the sort announcer.
     * @public
     */
    disconnectedCallback(): void;
}

declare const definition$O: _microsoft_fast_element.FASTElementDefinition<typeof Table>;

declare const template$7: ElementViewTemplate<Table>;

declare const styles$a: _microsoft_fast_element.ElementStyles;

/**
 * Simple Table
 * @summary A thin shell around native `<table>` that standardizes Fluent styling, RTL/high-contrast, and accessibility—without taking control of data, templates, or rendering.
 *
 * @example
 * ```html
 * <fabric-simple-table>
 *   <table>
 *     <caption>Account Overview</caption>
 *     <thead>
 *       <tr>
 *         <th scope="col">Account</th>
 *         <th scope="col">Owner</th>
 *         <th scope="col">Status</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>Contoso</td>
 *         <td>A. Lee</td>
 *         <td><span class="badge badge--warning">Pending</span></td>
 *       </tr>
 *     </tbody>
 *   </table>
 * </fabric-simple-table>
 * ```
 *
 * @extends FASTElement
 * @tagname fabric-simple-table
 * @public
 */
declare class SimpleTable extends FASTElement {
    /**
     * Lifecycle method called when the element is connected to the DOM.
     * Applies the microsoft-fabric-ux-fabric-simple-table class to child table elements.
     * @public
     */
    connectedCallback(): void;
    /**
     * Applies the styling class to child table elements.
     * @public
     */
    applyTableClass(): void;
}

/**
 * The Fabric Simple Table component definition.
 *
 * @public
 * @remarks
 * HTML Element: <fabric-simple-table>
 */
declare const definition$N: _microsoft_fast_element.FASTElementDefinition<typeof SimpleTable>;

/**
 * TableCell
 * @summary TableCell defines a customizable table cell element within a table structure.
 *
 * @example
 * ```html
 * <fabric-table-cell size="medium">
 *   <div slot="before">Before content</div>
 *   Main content
 *   <div slot="after">After content</div>
 * </fabric-table-cell>
 * ```
 *
 * @attr {TableCellSize} size - The size of the table cell. Possible values are 'small', 'medium', 'large'.
 *
 * @prop {TableCellSize} size - The size of the table cell. Possible values are 'small', 'medium', 'large'.
 *
 * @slot before - Slot for content to be inserted before the main content.
 * @slot default - The default slot for the main content of the table cell.
 * @slot after - Slot for content to be inserted after the main content.
 *
 * @csspart table-cell - The main wrapper part of the table cell.
 * @csspart cell-content - The content part of the table cell, acting as a container for slotted elements.
 *
 * @method connectedCallback - Called when the element is connected to the DOM.
 * @method disconnectedCallback - Called when the element is disconnected from the DOM.
 *
 * @extends FASTElement
 * @tagname fabric-table-cell
 * @public
 */
declare class TableCell extends FASTElement {
    /**
     * Called when the element is connected to the DOM.
     * @public
     */
    connectedCallback(): void;
    /**
     * Called when the element is disconnected to the DOM.
     * @public
     */
    disconnectedCallback(): void;
}

/**
 * @public
 * The size variations for the TableCell component.
 */
declare const TableCellSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/**
 * @public
 * The size types for the TableCell component.
 */
type TableCellSize = ValuesOf<typeof TableCellSizes>;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-table-cell>
 */
declare const definition$M: _microsoft_fast_element.FASTElementDefinition<typeof TableCell>;

declare const styles$9: _microsoft_fast_element.ElementStyles;

declare const template$6: ElementViewTemplate<TableCell>;

/** Size values for {@link Tag}. */
declare const TagSizes: {
    readonly extraSmall: "extraSmall";
    readonly small: "small";
    readonly medium: "medium";
};
/** Type describing size options for {@link Tag}. */
type TagSize = ValuesOf<typeof TagSizes>;
/** Primary text size values for {@link Tag}. */
declare const TagTextSizes: {
    readonly caption1: "caption1";
    readonly body1: "body1";
};
/** Type describing primary text size options for {@link Tag}. */
type TagTextSize = ValuesOf<typeof TagTextSizes>;
/** Shape values for {@link Tag}. */
declare const TagShapes: {
    readonly rounded: "rounded";
    readonly circular: "circular";
};
/** Type describing shape options for {@link Tag}. */
type TagShape = ValuesOf<typeof TagShapes>;
/** Appearance values for {@link Tag}. */
declare const TagAppearances: {
    readonly filled: "filled";
    readonly outline: "outline";
    readonly brand: "brand";
};
/** Type describing appearance options for {@link Tag}. */
type TagAppearance = ValuesOf<typeof TagAppearances>;
/** Event names for Tag. */
declare const TagEventNames: {
    readonly dismiss: "dismiss";
};

/**
 * Tag
 * @summary A Tag component that displays one or two lines of text, is dismissable via a dismiss button, and can contain a preceding picture or icon before the text.
 *
 * @example
 * ```html
 * <fabric-tag
 *   dismiss-button="true"
 *   size="medium"
 *   shape="rounded"
 *   appearance="filled"
 * >
 *   <img slot="image" src="path-to-image.png" alt="Tag image" />
 *   <span slot="leadingIcon">Icon</span>
 *   <span slot="text">Primary Text</span>
 *   <span slot="textSecondary">Secondary Text</span>
 *   <span slot="dismissIcon">Dismiss</span>
 * </fabric-tag>
 * ```
 *
 * @attr {boolean} dismiss-button - Whether the tag has a dismiss button.
 * @attr {TagSize} size - The size of the tag.
 * @attr {TagShape} shape - The shape of the tag.
 * @attr {TagAppearance} appearance - The appearance of the tag.
 * @attr {boolean} disabled - Controls whether the tag is disabled.
 *
 * @prop {string} textPrimaryContent - The content of the text primary slot.
 * @prop {HTMLElement[]} textPrimarySlotted - The primary text of the tag that has been slotted.
 * @prop {HTMLElement[]} textSecondarySlotted - The secondary text of the tag.
 * @prop {TagTextSize} textSizePrimary - The text size of the tag.
 * @prop {HTMLElement[]} leadingIconSlotted - The leading icon of the tag.
 *
 * @slot image - The image of the tag.
 * @slot leadingIcon - The leading icon of the tag.
 * @slot text - The text of the tag.
 * @slot textSecondary - The secondary text of the tag.
 * @slot dismissIcon - The dismiss icon of the tag.
 * @slot - The default slot for additional tag content.
 *
 * @csspart container - The container of the tag.
 * @csspart content - The content of the tag.
 * @csspart dismissButton - The dismiss button of the tag.
 * @csspart image - Part wrapping the image slot for sizing and layout.
 * @csspart textContent - Part wrapping the text slots for layout and truncation.
 *
 * @method sizeChanged - Called when the size property changes.
 * @method textPrimarySlottedChanged - Called when the textPrimarySlotted property changes.
 * @method textSecondarySlottedChanged - Called when the textSecondarySlotted property changes.
 * @method handleTextSize - Handles the text size of the tag, which changes depending on the size of the tag.
 * @method compensateSVGSize - Sets the size of the SVG icon to match the size of the tag.
 * @method leadingIconSlottedChanged - Called when the leadingIconSlotted property changes.
 * @method emitDismissEvent - Emits the dismiss event for the tag.
 *
 * @fires dismiss - Emits when the tag is dismissed.
 *
 * @extends FASTElement
 * @tagname fabric-tag
 * @public
 */
declare class Tag extends FASTElement {
    /** AbortController used to manage dismiss button event listeners. */
    private events?;
    /** Reference to the dismiss button element. */
    dismissButtonRef?: HTMLElement;
    /**
     * attachEventListeners
     *
     * Reattaches dismiss button listeners when the reference changes.
     * @public
     */
    dismissButtonRefChanged(): void;
    /**
     * dismissButton
     *
     * Controls whether the dismiss button is shown
     * @public
     * @type {boolean}
     * @defaultValue false
     * @attr dismiss-button
     */
    dismissButton: boolean;
    /**
     * disabled
     *
     * Controls whether the tag is disabled
     * @public
     * @type {boolean}
     */
    disabled: boolean;
    /**
     * size
     *
     * The size of the tag
     * @public
     * @type {TagSize}
     * @defaultValue "medium"
     */
    size: TagSize;
    sizeChanged(): void;
    /**
     * shape
     *
     * The shape of the tag container
     * @public
     * @type {TagShape}
     * @defaultValue "rounded"
     */
    shape: TagShape;
    /**
     * appearance
     *
     * The appearance style of the tag
     * @public
     * @type {TagAppearance}
     * @defaultValue "filled"
     */
    appearance: TagAppearance;
    /**
     * textPrimaryContent
     *
     * The content of the text primary slot
     * @public
     * @type {string}
     * @defaultValue undefined
     */
    textPrimaryContent?: string;
    /**
     * textPrimarySlotted
     *
     * The primary text of the tag that has been slotted
     * @public
     * @type {HTMLElement[]}
     * @defaultValue []
     */
    textPrimarySlotted: HTMLElement[];
    /**
     * @summary This method is called when the textPrimarySlotted property changes.
     * @public
     */
    textPrimarySlottedChanged(): void;
    /**
     * The secondary text of the tag
     * @type {HTMLElement[]}
     * @defaultValue []
     * @public
     */
    textSecondarySlotted: HTMLElement[];
    /**
     * textSecondarySlottedChanged
     *
     * Updates derived text size when secondary text slot content changes.
     * @public
     */
    textSecondarySlottedChanged(): void;
    /**
     * textSizePrimary
     *
     * The text size of the tag
     * @type {TagTextSize}
     * @defaultValue "body1"
     * @public
     */
    textSizePrimary: TagTextSize;
    /**
     * handleTextSize
     * handles the text size of the tag, which changes depending on the size of the tag
     * @public
     */
    handleTextSize(): void;
    /**
     * Sets the size of the SVG icon to match the size of the tag. This is necessary because otherwise the developer has to set the size of the SVG icon manually.
     * @public
     */
    compensateSVGSize(): void;
    /**
     * The leading icon of the tag
     * @type {HTMLElement[]}
     * @defaultValue []
     * @public
     */
    leadingIconSlotted: HTMLElement[];
    /**
     * leadingIconSlottedChanged
     *
     * Applies state for leading icon presence and updates icon sizing.
     * @public
     */
    leadingIconSlottedChanged(): void;
    /**
     * emitDismissEvent
     *
     * @public
     *
     * emits the dismiss event for the tag
     */
    emitDismissEvent(): void;
    /**
     * attachEventListeners
     *
     * Ensures the dismiss button listener is attached and kept in sync.
     * @private
     */
    private attachEventListeners;
    /**
     * emitDismiss
     *
     * Emits the dismiss event.
     * @private
     */
    private emitDismiss;
    /**
     * connectedCallback
     * connectedCallback for the tag
     * @public
     */
    connectedCallback(): void;
    /**
     * disconnectedCallback
     *
     * Cleans up event listeners when the element disconnects.
     * @public
     */
    disconnectedCallback(): void;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-tag>
 */
declare const definition$L: _microsoft_fast_element.FASTElementDefinition<typeof Tag>;

/**
 * The size variations for the teaching bubble component
 * @public
 */
declare const TeachingBubbleSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/**
 * The types for teaching bubble size
 * @public
 */
type TeachingBubbleSize = ValuesOf<typeof TeachingBubbleSizes>;
/**
 * The placement variations for the teaching bubble component
 * @public
 */
declare const TeachingBubblePlacements: {
    readonly top: "top";
    readonly topStart: "top-start";
    readonly topEnd: "top-end";
    readonly bottom: "bottom";
    readonly bottomStart: "bottom-start";
    readonly bottomEnd: "bottom-end";
    readonly left: "left";
    readonly leftStart: "left-start";
    readonly leftEnd: "left-end";
    readonly right: "right";
    readonly rightStart: "right-start";
    readonly rightEnd: "right-end";
};
/**
 * The types for teaching bubble placement
 * @public
 */
type TeachingBubblePlacement = ValuesOf<typeof TeachingBubblePlacements>;
/**
 * TeachingBubble event names
 * @public
 */
declare const TeachingBubbleEventNames: {
    readonly openChange: "open-change";
    readonly dismiss: "dismiss";
};

/**
 * TeachingBubble
 * @summary A customizable teaching bubble component for providing contextual help or instruction.
 *
 * @example
 * ```html
 * <fabric-teaching-bubble target="help-button" open placement="top" size="medium">
 *   <span slot="image">Image content</span>
 *   <span slot="close">Close button</span>
 *   <span slot="heading">Heading content</span>
 *   <div>Default content</div>
 *   <span slot="footer">Footer content</span>
 * </fabric-teaching-bubble>
 * ```
 *
 * @attr {string} target - The ID of the target element for the teaching bubble.
 * @attr {TeachingBubblePlacements} placement - The placement of the teaching bubble.
 * @attr {boolean} open - Controls whether the teaching bubble is open.
 * @attr {boolean} disable-trap-focus - Controls whether trap focus is disabled.
 * @attr {TeachingBubbleSize} size - The size of the teaching bubble.
 *
 * @prop {ElementInternals} elementInternals - The internal ElementInternals instance for the component.
 *
 * @slot image - Slot for adding an image inside the teaching bubble.
 * @slot close - Slot for adding a close button inside the teaching bubble.
 * @slot heading - Slot for adding a heading inside the teaching bubble.
 * @slot default - Default slot for adding content inside the teaching bubble.
 * @slot footer - Slot for adding a footer inside the teaching bubble.
 *
 * @csspart image - Style part for the image inside the teaching bubble.
 * @csspart content - Style part for the content inside the teaching bubble.
 * @csspart close - Style part for the close button inside the teaching bubble.
 * @csspart heading - Style part for the heading inside the teaching bubble.
 * @csspart footer - Style part for the footer inside the teaching bubble.
 * @csspart arrow - Style part for the arrow of the teaching bubble.
 *
 * @method show() - Shows the teaching bubble.
 * @method hide(dismiss: boolean) - Hides the teaching bubble, optionally dismissing it.
 * @method openChanged() - Handles changes to the open attribute.
 *
 * @fires open-change - Fires when the 'open' attribute changes.
 * @fires dismiss - Fires when the teaching bubble is dismissed.
 *
 * @extends FASTElement
 * @tagname fabric-teaching-bubble
 * @public
 */
declare class TeachingBubble extends FASTElement {
    /**
     * Called when the element is connected to the DOM.
     * @public
     */
    connectedCallback(): void;
    /**
     * Called when the element is disconnected from the DOM.
     * @public
     */
    disconnectedCallback(): void;
    /**
     * The ID of the target element for the teaching bubble.
     * @public
     * @attr target
     * @type {string}
     */
    target: string;
    /**
     * The placement of the teaching bubble.
     * @public
     * @type {TeachingBubblePlacement}
     * @attr placement
     * @default auto (via Floating UI autoPlacement)
     */
    placement?: TeachingBubblePlacement;
    /**
     * Indicates whether the teaching bubble is open.
     * @public
     * @attr open
     * @type {boolean}
     */
    open?: boolean;
    /**
     * Indicates whether trap focus is disabled.
     * @public
     * @attr disable-trap-focus
     * @type {boolean}
     * @default false
     */
    disableTrapFocus?: boolean;
    /**
     * The size of the teaching bubble.
     * @public
     * @attr
     * @type {TeachingBubbleSize}
     * @default medium
     */
    size?: TeachingBubbleSize;
    /**
     * The internal ElementInternals instance for the component.
     * @public
     */
    elementInternals: ElementInternals;
    /**
     * The target element for the teaching bubble.
     * @private
     * @type {HTMLElement | null}
     */
    private targetEl?;
    /**
     * The arrow element of the teaching bubble.
     * @public
     * @type {HTMLElement | null}
     */
    arrowEl?: HTMLElement | null;
    /**
     * Indicates whether the teaching bubble is trapping focus.
     * @private
     * @type {boolean}
     * @default false
     */
    private isTrappingFocus;
    /**
     * Indicates whether a focus operation is currently in progress.
     * Used to prevent infinite recursion in focus handling.
     * @private
     * @type {boolean}
     * @default false
     */
    private focusInProgress;
    /**
     * Indicates whether the teaching bubble should trap focus.
     * @private
     * @type {boolean}
     * @default false
     */
    private trapFocus;
    /**
     * Function to clean up auto updates.
     * @private
     * @type {() => void | null}
     */
    private cleanAutoUpdate;
    /**
     * Static registry of open TeachingBubble instances.
     */
    private static openInstances;
    /**
     * Shows the teaching bubble.
     * @public
     */
    show: () => void;
    /**
     * Hides the teaching bubble.
     * @public
     * @param {boolean} - Indicates whether the bubble should be dismissed.
     * @fires dismiss - Fires when the teaching bubble is dismissed.
     */
    hide: (dismiss?: boolean) => void;
    /**
     * Handles changes to the open attribute.
     * @public
     * @fires open-change - Emitted when the open attribute changes.
     */
    openChanged(): void;
    /**
     * Sets the target, current, and arrow elements.
     * @private
     */
    private setElements;
    /**
     * Updates the position of the teaching bubble.
     * @private
     */
    private updatePosition;
    /**
     * Handles keydown events on the document.
     * @private
     * @param {KeyboardEvent} e - The keyboard event.
     */
    private handleDocumentKeydown;
    /**
     * Handles the tab keydown event.
     * @private
     * @param {KeyboardEvent} e - The keyboard event.
     */
    private handleTabKeyDown;
    /**
     * Gets the bounds of the tab queue.
     * @private
     * @returns {(HTMLElement | SVGElement)[]}
     */
    private getTabQueueBounds;
    /**
     * Reduces tabbable items to a list of elements.
     * @private
     * @param {HTMLElement[]} elements - The current list of elements.
     * @param {FASTElement} element - The current element to check.
     * @returns {HTMLElement[]}
     */
    private reduceTabbableItems;
    /**
     * Determines if a FAST element is focusable.
     * @private
     * @static
     * @param {FASTElement} element - The element to check.
     * @returns {boolean}
     */
    private static isFocusableFastElement;
    /**
     * Updates the focus trap state.
     * @private
     * @param {boolean} [shouldTrapFocusOverride] - Optional override for whether to trap focus.
     */
    private updateTrapFocus;
    /**
     * Handles focus moving out of the component; re-focus inside when trapping.
     * @private
     */
    private handleFocusOut;
    /**
     * Focuses the first element in the tab queue.
     * @private
     */
    private focusFirstElement;
    /**
     * Determines if the focus should be forced to the teaching bubble.
     * @private
     * @param {Element | null} currentFocusElement - The current focused element.
     * @returns {boolean}
     */
    private shouldForceFocus;
    /**
     * Determines if the teaching bubble should trap focus.
     * @private
     * @returns {boolean}
     */
    private shouldTrapFocus;
    /**
     * Handles the trap focus disable state.
     * @private
     */
    private disableTrapFocusHandler;
    /**
     * Initializes the position of the teaching bubble.
     * @private
     */
    private initializePosition;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-teaching-bubble>
 */
declare const definition$K: _microsoft_fast_element.FASTElementDefinition<typeof TeachingBubble>;

/**
 * The state variations for the WizardStep component
 * @public
 */
declare const WizardStepStates: {
    readonly incomplete: "incomplete";
    readonly complete: "complete";
    readonly error: "error";
};
/**
 * The state types for the WizardStep component
 * @public
 */
type WizardStepState = ValuesOf<typeof WizardStepStates>;
declare const WizardStepEvents: {
    readonly stepChange: "step-change";
    readonly stepSelect: "step-select";
};
type WizardStepEvent = ValuesOf<typeof WizardStepEvents>;

/**
 * WizardStep
 * @summary A customizable step component for a wizard-style interface.
 *
 * @example
 * ```html
 * <fabric-wizard-step
 *   numbered
 *   active
 *   state="complete"
 *   aria-describedby="step1-details"
 *   aria-labelledby="step1-title"
 * >
 *   <span slot="start">Start Content</span>
 *   <span slot="end">End Content</span>
 *   <span slot="title" id="step1-title">Step 1: Title</span>
 *   <span slot="details" id="step1-details">Details about Step 1</span>
 *   <span slot="complete">Complete</span>
 *   <span slot="incomplete">Incomplete</span>
 *   <span slot="error">Error</span>
 * </fabric-wizard-step>
 * ```
 *
 * @attr {boolean | undefined} numbered - Indicates whether the step is numbered.
 * @attr {boolean | undefined} hideConnector - Indicates whether the connector is hidden.
 * @attr {boolean} active - Indicates whether the step is active.
 * @attr {boolean} disabled - Indicates whether the step is disabled.
 * @attr {string | undefined} ariaDescribedby - The aria-describedby attribute for accessibility.
 * @attr {string | undefined} ariaLabelledby - The aria-labelledby attribute for accessibility.
 * @attr {WizardStepState} state - The current state of the wizard step.
 *
 * @prop {number} index - The index of the step in the wizard sequence.
 * @prop {string} details - The details of the step.
 * @prop {string} title - The title of the step.
 * @prop {boolean | undefined} numbered - Indicates whether the step is numbered.
 * @prop {boolean | undefined} hideConnector - Indicates whether the connector is hidden.
 * @prop {boolean} active - Indicates whether the step is active.
 * @prop {boolean} disabled - Indicates whether the step is disabled.
 * @prop {string | undefined} ariaDescribedby - The aria-describedby attribute for accessibility.
 * @prop {string | undefined} ariaLabelledby - The aria-labelledby attribute for accessibility.
 * @prop {WizardStepState} state - The current state of the wizard step.
 *
 * @slot start - The content to display at the start of the step.
 * @slot end - The content to display at the end of the step.
 * @slot incomplete - The content to display when the step is incomplete.
 * @slot complete - The content to display when the step is complete.
 * @slot error - The content to display when the step has an error.
 * @slot title - The content to display as the title of the step.
 * @slot details - The content to display as the details of the step.
 *
 * @csspart state-indicator - The state indicator.
 * @csspart icon - The icon.
 * @csspart order - The ordinal number indicator displayed inside the step circle when the step is numbered.
 * @csspart summary - The summary.
 * @csspart title - The title.
 * @csspart details - The details.
 * @csspart step-connector - The visual connector line that links this step to the next step in the wizard sequence.
 *
 * @method stateChanged - Handles changes to the state attribute.
 * @method activeChanged - Handles changes to the active attribute.
 * @method toggleActive - Toggles the active state of the step.
 * @method setComplete - Sets the step to a complete state.
 * @method setIncomplete - Sets the step to an incomplete state.
 * @method setError - Sets the step to an error state.
 * @method emitChange - Emits a custom event indicating a change in the step's state.
 * @method emitSelect - Emits a custom event indicating a selection of the step.
 * @method clickHandler - Handles click events on the step.
 * @method keydownHandler - Handles keydown events on the step.
 *
 * @fires step-change - Dispatched when the step state changes.
 * @fires step-select - Dispatched when the user selects (clicks or activates via keyboard) this wizard step to navigate to it.
 *
 * @cssprop --borderRadiusCircular - The border radius used for the circular state indicator.
 * @cssprop --colorNeutralBackground4 - The background color of the state indicator in the default state.
 * @cssprop --colorNeutralForeground2 - The border color of the state indicator in the default state.
 * @cssprop --colorNeutralForegroundDisabled - The foreground color applied when the step is disabled.
 * @cssprop --fontSizeBase200 - The font size used for the order label and step details.
 * @cssprop --fontWeightRegular - The regular font weight used for the step title and details.
 * @cssprop --fontWeightSemibold - The semibold font weight used for the active step title.
 * @cssprop --lineHeightBase100 - The line height used for the order label.
 * @cssprop --lineHeightBase200 - The line height used for the step details text.
 *
 * @extends FASTElement
 * @tagname fabric-wizard-step
 * @public
 */
declare class WizardStep extends FASTElement {
    /**
     * Indicates whether the step is numbered.
     * @public
     * @attr
     * @type {boolean | undefined}
     */
    numbered?: boolean;
    /**
     * Indicates whether the connector is hidden.
     * @public
     * @attr
     * @type {boolean | undefined}
     */
    hideConnector?: boolean;
    /**
     * Indicates whether the step is active.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    active: boolean;
    /**
     * Indicates whether the step is disabled.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    disabled?: boolean;
    /**
     * The aria-describedby attribute for accessibility.
     * @public
     * @attr
     * @type {string | undefined}
     */
    ariaDescribedby?: string;
    /**
     * The aria-labelledby attribute for accessibility.
     * @public
     * @attr
     * @type {string | undefined}
     */
    ariaLabelledby?: string;
    /**
     * The current state of the wizard step.
     * @public
     * @attr state
     * @type {WizardStepState}
     * @default incomplete
     */
    state: WizardStepState;
    /**
     * The button element.
     * @public
     * @observable
     * @type {HTMLButtonElement}
     */
    button: HTMLButtonElement;
    /**
     * The index of the step in the wizard sequence.
     * @public
     * @attr
     * @type {number}
     * @default 0
     */
    index: number;
    /**
     * The details of the step.
     * @public
     * @observable
     * @type {string}
     * @default ""
     */
    details: string;
    /**
     * The title of the step.
     * @public
     * @observable
     * @type {string}
     * @default ""
     */
    title: string;
    /**
     * Handles changes to the state attribute.
     * @public
     * @param {WizardStepState} oldValue - The previous state value.
     * @param {WizardStepState} newValue - The new state value.
     */
    stateChanged(oldValue: WizardStepState, newValue: WizardStepState): void;
    /**
     * Handles changes to the active attribute.
     * @public
     * @param {boolean} oldValue - The previous active value.
     * @param {boolean} newValue - The new active value.
     */
    activeChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Toggles the active state of the step.
     * @public
     */
    toggleActive(event?: Event): void;
    /**
     * Sets the step to a complete state.
     * @public
     */
    setComplete(): void;
    /**
     * Sets the step to an incomplete state.
     * @public
     */
    setIncomplete(): void;
    /**
     * Sets the step to an error state.
     * @public
     */
    setError(): void;
    /**
     * Emits a custom event indicating a change in the step's state.
     * @public
     */
    emitChange(): void;
    /**
     * Emits a custom event indicating a selection of the step.
     * @public
     */
    emitSelect(): void;
    /**
     * Handles click events on the step.
     * @public
     * @param {MouseEvent} event - The mouse event.
     */
    clickHandler(event?: MouseEvent): void;
    /**
     * Handles keydown events on the step.
     * @public
     * @param {KeyboardEvent} event - The keyboard event.
     */
    keydownHandler(event: KeyboardEvent): void;
}

/**
 * # Wizard
 * A customizable wizard component for a step-by-step interface.
 *
 * @summary A customizable wizard component for a step-by-step interface.
 *
 * @example
 * ```html
 * <fabric-wizard numbered linear disable-on-complete>
 *   <fabric-wizard-step slot='step'>Step One</fabric-wizard-step>
 *   <fabric-wizard-panel slot='panel'>Content for Step One</fabric-wizard-panel>
 *   <fabric-wizard-step slot='step'>Step Two</fabric-wizard-step>
 *   <fabric-wizard-panel slot='panel'>Content for Step Two</fabric-wizard-panel>
 *   <div slot='title'>Wizard Title</div>
 *   <fabric-wizard-button slot='button'>Next</fabric-wizard-button>
 * </fabric-wizard>
 * ```
 *
 * @attr {boolean} numbered - Determines whether the step state indicator should be labeled with the order of the steps.
 * @attr {boolean} linear - Indicates whether the wizard enforces linear step completion.
 * @attr {boolean} disable-on-complete - Indicates whether steps should be disabled on completion.
 * @attr {number} current-index - The current index of the active step.
 *
 * @prop {number} numbered - Determines whether the step state indicator should be labeled with the order of the steps.
 * @prop {boolean} linear - Indicates whether the wizard enforces linear step completion.
 * @prop {number} currentIndex - The current index of the active step.
 * @prop {boolean} disableOnComplete - Indicates whether steps should be disabled on completion.
 * @prop {HTMLElement} stepcontainer - The container for wizard steps.
 * @prop {HTMLElement} panelcontainer - The container for wizard panels.
 * @prop {HTMLElement[]} slottedsteps - The list of slotted wizard steps.
 * @prop {Button[]} slottedactions - The list of slotted buttons.
 * @prop {HTMLElement[]} slottedpanels - The list of slotted wizard panels.
 * @prop {string | undefined} activeid - The ID of the active step.
 * @prop {WizardStep | undefined} activestep - The currently active step.
 * @prop {number | undefined} prevActiveStepIndex - The index of the previously active step.
 *
 * @slot step - Slot for adding WizardStep components, representing each step in the wizard.
 * @slot panel - Slot for adding WizardPanel components, representing the content of each step.
 * @slot title - Slot for adding a title to the wizard.
 * @slot button - Slot for adding buttons to the wizard toolbar.
 * @slot actions - Slot for action buttons rendered in the toolbar area, such as Back and Next controls.
 * @slot end - Slot for content appended after the panels container.
 * @slot start - Slot for content prepended before the main wizard area.
 *
 * @csspart wizard - The root element of the wizard component.
 * @csspart steps - The navigation element (tablist) that contains the WizardStep components.
 * @csspart panels - The wrapper element containing all WizardPanel components.
 * @csspart panels-container - The outer container wrapping the toolbar and panels sections.
 * @csspart title - The element that renders the title slot content.
 * @csspart toolbar - The toolbar row containing the title element and action buttons.
 * @csspart button-container - The container element wrapping the actions slot inside the toolbar.
 *
 * @cssprop --wizard-tablist-width - Set's the width of the Wizard tablist step container
 * @cssprop --wizard-toolbar-display - Set's the display of the wizard toolbar
 * @cssprop --wizard-overflow-step-width - Sets the width of each wizard step in overflow mode.
 * @cssprop --wizard-overflow-tablist-width - Sets the width of the wizard tablist in overflow mode.
 * @cssprop --wizard-scrollbar-radius - Sets the border radius of the wizard overflow scrollbar.
 * @cssprop --wizard-scrollbar-spacing - Sets the spacing around the wizard overflow scrollbar.
 * @cssprop --wizard-scrollbar-thumb-color - Sets the color of the wizard overflow scrollbar thumb.
 * @cssprop --wizard-scrollbar-track-color - Sets the color of the wizard overflow scrollbar track.
 *
 * @method next() - Moves to the next step.
 * @method previous() - Moves to the previous step.
 * @method show() - Shows the wizard.
 * @method hide() - Hides the wizard.
 * @method enableStep(index?: number) - Enables the specified step.
 * @method disableStep(index?: number) - Disables the specified step.
 * @method errorStep(index?: number) - Sets the specified step to an error state.
 * @method completeStep(index?: number) - Completes the specified step.
 * @method incompleteStep(index?: number) - Sets the specified step to an incomplete state.
 * @method getStepStatus() - Gets the status of the steps.
 * @method reset() - Resets the wizard to its initial state.
 * @method setActiveStep(step: WizardStep) - Sets the active step.
 * @method focusNextStep(setActive?: boolean) - Focuses the next step.
 * @method focusPreviousStep(setActive?: boolean) - Focuses the previous step.
 * @method moveToStepByIndex(index: number, moveFocus?: boolean) - Moves to the step by its index.
 *
 * @fires wizard-change - Fires when there is a change in the wizard, providing the current index and active ID.
 * @fires wizard-complete - Fires when all steps in the wizard are complete.
 *
 * @extends FASTElement
 * @tagname fabric-wizard
 * @public
 */
declare class Wizard extends FASTElement {
    /**
     * Indicates whether the steps should be visually numbered at smaller viewports.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    numbered?: boolean;
    /**
     * Indicates whether the wizard enforces linear step completion.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    linear?: boolean;
    /**
     * Indicates whether steps should be disabled on completion.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    disableOnComplete?: boolean;
    /**
     * The current index of the active step.
     * @public
     * @attr
     * @type {number}
     * @default 0
     */
    currentIndex: number;
    /**
     * The container for wizard steps.
     * @public
     * @observable
     * @type {HTMLElement}
     */
    stepcontainer: HTMLElement;
    /**
     * The container for wizard panels.
     * @public
     * @observable
     * @type {HTMLElement}
     */
    panelcontainer: HTMLElement;
    /**
     * The list of slotted wizard steps.
     * @public
     * @observable
     * @type {HTMLElement[]}
     */
    slottedsteps: HTMLElement[];
    /**
     * The list of slotted buttons.
     * @public
     * @observable
     * @type {HTMLElement[]}
     */
    slottedactions: HTMLElement[];
    /**
     * The list of slotted wizard panels.
     * @public
     * @observable
     * @type {HTMLElement[]}
     */
    slottedpanels: HTMLElement[];
    /**
     * The ID of the active step.
     * @private
     * @observable
     * @type {string | undefined}
     */
    private activeid?;
    /**
     * The currently active step.
     * @public
     * @type {WizardStep | undefined}
     */
    activestep?: WizardStep;
    /**
     * The index of the previously active step.
     * @private
     * @type {number | undefined}
     */
    private prevActiveStepIndex?;
    /**
     * The list of step IDs.
     * @private
     * @type {string[]}
     */
    private stepIds;
    /**
     * The list of panel IDs.
     * @private
     * @type {string[]}
     */
    private panelIds;
    /**
     * Called when the element is connected to the DOM.
     * @public
     */
    connectedCallback(): void;
    /**
     * Called when the element is disconnected from the DOM.
     * @public
     */
    disconnectedCallback(): void;
    /**
     * Handles changes to the activeid attribute.
     * @public
     * @param {string} oldValue - The previous value of the active ID.
     * @param {string} newValue - The new value of the active ID.
     */
    activeidChanged(oldValue: string, newValue: string): void;
    /**
     * Handles changes to the slotted panels.
     * @public
     */
    slottedpanelsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
    /**
     * Handles changes to the slotted steps.
     * @public
     */
    slottedstepsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
    /**
     * Handles changes to the current index.
     * @public
     * @param {number} oldValue - The previous value of the current index.
     * @param {number} newValue - The new value of the current index.
     */
    currentIndexChanged(oldValue: number, newValue: number): void;
    /**
     * Moves to the next step.
     * @public
     */
    next(): void;
    /**
     * Moves to the previous step.
     * @public
     */
    previous(): void;
    /**
     * Shows the wizard.
     * @public
     */
    show(): void;
    /**
     * Hides the wizard.
     * @public
     */
    hide(): void;
    /**
     * Enables the specified step.
     * @public
     * @param {number} [index] - The index of the step to enable.
     */
    enableStep(index?: number): void;
    /**
     * Disables the specified step.
     * @public
     * @param {number} [index] - The index of the step to disable.
     */
    disableStep(index?: number): void;
    /**
     * Sets the specified step to an error state.
     * @public
     * @param {number} [index] - The index of the step to set to an error state.
     */
    errorStep(index?: number): void;
    /**
     * Completes the specified step.
     * @public
     * @param {number} [index] - The index of the step to complete.
     */
    completeStep(index?: number): void;
    /**
     * Sets the specified step to an incomplete state.
     * @public
     * @param {number} [index] - The index of the step to set to an incomplete state.
     */
    incompleteStep(index?: number): void;
    /**
     * Gets the status of the steps.
     * @public
     * @returns {Array<{id: string, state: string, index: number, active: boolean}>}
     */
    /**
     * Returns an array of objects representing the status of each wizard step.
     *
     * Each object in the returned array contains:
     * - `id`: The HTML element ID of the step.
     * - `state`: The current state of the step.
     * - `index`: The zero-based index of the step.
     * - `active`: Whether the step is currently active.
     *
     * @returns An array of step status objects for all slotted steps.
     */
    getStepStatus(): {
        id: string;
        state: string;
        index: number;
        active: boolean;
    }[];
    /**
     * Resets the wizard to its initial state.
     * @public
     */
    reset(): void;
    /**
     * Sets the active step.
     * @public
     * @param {HTMLElement} step - The step to set as active.
     */
    setActiveStep(step: HTMLElement): void;
    /**
     * Focuses the next step.
     * @public
     * @param {boolean} [setActive=false] - Indicates whether to set the next step as active.
     */
    focusNextStep(setActive?: boolean): void;
    /**
     * Focuses the previous step.
     * @public
     * @param {boolean} [setActive=false] - Indicates whether to set the previous step as active.
     */
    focusPreviousStep(setActive?: boolean): void;
    /**
     * Moves to the step by its index.
     * @public
     * @param {number} index - The index of the step to move to.
     * @param {boolean} [moveFocus=true] - Whether to move keyboard focus to the step.
     */
    moveToStepByIndex(index: number, moveFocus?: boolean): void;
    /**
     * Handles keydown events on the step container.
     * @public
     * @param {KeyboardEvent} event - The keyboard event.
     */
    handleStepContainerKeydown(event: KeyboardEvent): void | boolean;
    /**
     * Handles keydown events on a step.
     * @public
     * @param {KeyboardEvent} event - The keyboard event.
     */
    handleStepKeyDown(event: KeyboardEvent): void | boolean;
    /**
     * Sets the steps and updates their attributes.
     * @protected
     */
    protected setSteps(): void;
    /**
     * Sets the panels and updates their attributes.
     * @protected
     */
    protected setPanels(): void;
    /**
     * Adds event listeners to steps and panels.
     * @protected
     */
    protected addListeners(): void;
    /**
     * Removes event listeners from steps and panels.
     * @protected
     */
    protected removeListeners(): void;
    /**
     * Sets the component and updates its state.
     * @private
     */
    private setComponent;
    /**
     * Gets the active step index.
     * @private
     * @returns {number}
     */
    private getActiveIndex;
    /**
     * Gets the IDs of the steps.
     * @private
     * @returns {string[]}
     */
    private getStepIds;
    /**
     * Gets the IDs of the panels.
     * @private
     * @returns {string[]}
     */
    private getPanelIds;
    /**
     * Determines if the element is disabled.
     * @private
     * @param {Element} el - The element to check.
     * @returns {boolean}
     */
    private isDisabledElement;
    /**
     * Determines if the element is hidden.
     * @private
     * @param {Element} el - The element to check.
     * @returns {boolean}
     */
    private isHiddenElement;
    /**
     * Determines if the element is focusable.
     * @private
     * @param {Element} el - The element to check.
     * @returns {boolean}
     */
    private isFocusableElement;
    /**
     * Handles the step state change event.
     * @private
     * @param {CustomEvent} e - The custom event.
     */
    private handleWizardStepStateChange;
    /**
     * Handles the panel state change event.
     * @private
     * @param {CustomEvent} e - The custom event.
     */
    private handlePanelStateChange;
    /**
     * Handles the step select event.
     * @private
     * @param {Event} event - The event.
     */
    private handleStepSelect;
    /**
     * Emits a wizard change event.
     * @fires wizard-change
     * @private
     */
    private emitChange;
    /**
     * Emits a wizard complete event.
     * @fires wizard-complete
     * @private
     */
    private emitComplete;
    private setAllStepTabIndex;
    private focusFirstEnabledStep;
    private handleStepContainerFocus;
    private handleStepContainerBlur;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-wizard>
 */
declare const definition$J: _microsoft_fast_element.FASTElementDefinition<typeof Wizard>;

declare const WizardEvents: {
    readonly wizardChange: "wizard-change";
    readonly wizardComplete: "wizard-complete";
};
type WizardEvent = ValuesOf<typeof WizardEvents>;

declare const WizardPanelEventNames: {
    readonly panelChange: "panel-change";
};
declare const WizardPanelStates: {
    readonly incomplete: "incomplete";
    readonly complete: "complete";
    readonly error: "error";
};
type WizardPanelState = ValuesOf<typeof WizardPanelStates>;

/**
 * WizardPanel
 * @summary A customizable panel component for a wizard-style interface.
 *
 * @example
 * ```html
 * <fabric-wizard-panel id="step1" state="incomplete" hidden>
 *   <div slot="start">Start Content</div>
 *   <div slot="title">Step 1: Title</div>
 *   <div>Step Content</div>
 *   <div slot="footer">Step Footer</div>
 *   <div slot="end">End Content</div>
 * </fabric-wizard-panel>
 * ```
 *
 * @attr {boolean} hidden - Indicates whether the panel is hidden.
 * @attr {WizardStepState} state - The state of the panel.
 * @attr {boolean} active - Indicates whether the panel is active.
 *
 * @prop {number | undefined} index - The index of the panel in the wizard sequence.
 * @prop {boolean} hidden - Indicates whether the panel is hidden.
 * @prop {WizardStepState} state - The current state of the wizard step.
 * @prop {boolean} active - Indicates whether the panel is currently active.
 *
 * @slot default - The default content of the step.
 * @slot start - The content to display at the start of the step.
 * @slot end - The content to display at the end of the step.
 * @slot title - The content to display as the title of the step.
 * @slot footer - The content to display as the footer of the step.
 *
 * @csspart panel - The root panel container element.
 * @csspart title - The title.
 * @csspart content - The content.
 * @csspart footer - The footer.
 *
 * @method stateChanged - Handles changes to the state attribute.
 * @method activeChanged - Handles changes to the active attribute.
 * @method hiddenChanged - Handles changes to the hidden attribute.
 * @method show - Shows the panel by setting the hidden attribute to false.
 * @method hide - Hides the panel by setting the hidden attribute to true.
 * @method emitChange - Emits a custom event indicating a change in the panel's state.
 *
 * @fires panel-change - Dispatched when the panel state changes.
 *
 * @extends FASTElement
 * @tagname fabric-wizard-panel
 * @public
 */
declare class WizardPanel extends FASTElement {
    /**
     * The index of the panel in the wizard sequence.
     * @public
     * @observable
     * @type {number | undefined}
     */
    index?: number;
    /**
     * Indicates whether the panel is hidden.
     * @public
     * @attr
     * @type {boolean}
     * @default true
     */
    hidden: boolean;
    /**
     * The current state of the wizard step.
     * @public
     * @attr
     * @type {WizardPanelState}
     * @default incomplete
     */
    state: WizardPanelState;
    /**
     * Indicates whether the panel is currently active.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    active: boolean;
    /**
     * Handles changes to the state attribute.
     * @public
     * @param {WizardPanelState} oldValue - The previous state value.
     * @param {WizardPanelState} newValue - The new state value.
     */
    stateChanged(oldValue: WizardPanelState, newValue: WizardPanelState): void;
    /**
     * Handles changes to the active attribute.
     * @public
     * @param {boolean} oldValue - The previous active value.
     * @param {boolean} newValue - The new active value.
     */
    activeChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Handles changes to the hidden attribute.
     * @public
     * @param {boolean} oldValue - The previous hidden value.
     * @param {boolean} newValue - The new hidden value.
     */
    hiddenChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Shows the panel by setting the hidden attribute to false.
     * @public
     */
    show(): void;
    /**
     * Hides the panel by setting the hidden attribute to true.
     * @public
     */
    hide(): void;
    /**
     * Emits a custom event indicating a change in the panel's state.
     * @public
     */
    emitChange(): void;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-wizard-panel>
 */
declare const definition$I: _microsoft_fast_element.FASTElementDefinition<typeof WizardPanel>;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-wizard-step>
 */
declare const definition$H: _microsoft_fast_element.FASTElementDefinition<typeof WizardStep>;

/**
 * AccordionItem
 * @summary An Accordion Item Custom HTML Element that can be expanded or collapsed, with customizable size and marker position.
 *
 * @example
 * ```html
 * <fabric-accordion-item size="large" marker-position="end" block>
 *   <span slot="heading">Section 1</span>
 *   Lorem ipsum dolor sit amet...
 * </fabric-accordion-item>
 * ```
 *
 * @attr {AccordionItemSize | undefined} size - The size of the accordion item header which can be small, medium, large, or extra-large.
 * @attr {AccordionItemMarkerPosition | undefined} marker-position - The position of the expand/collapse icon which can be at the start or end of the accordion.
 * @attr {number | undefined} heading-level - The level of the heading.
 * @attr {boolean | undefined} expanded - Whether the accordion item is expanded.
 * @attr {boolean | undefined} disabled - Whether the accordion item is disabled.
 * @attr {boolean | undefined} block - Sets the width of the focus state to fill the container.
 *
 * @prop {AccordionItemSize | undefined} size - The size of the accordion item header which can be small, medium, large, or extra-large.
 * @prop {AccordionItemMarkerPosition | undefined} markerPosition - The position of the expand/collapse icon which can be at the start or end of the accordion.
 * @prop {number | undefined} headingLevel - The level of the heading.
 * @prop {boolean | undefined} expanded - Whether the accordion item is expanded.
 * @prop {boolean | undefined} disabled - Whether the accordion item is disabled.
 * @prop {boolean | undefined} block - Sets the width of the focus state to fill the container.
 *
 * @slot heading - The content for the accordion item's heading.
 * @slot - The default slot for the accordion item's content.
 * @slot marker-expanded - The content for the expanded state marker, defaults to a chevron down icon.
 * @slot marker-collapsed - The content for the collapsed state marker, defaults to a chevron right icon.
 *
 * @csspart heading - The accordion item's heading container.
 * @csspart button - The button element used to expand or collapse the item.
 * @csspart content - The container for the accordion item's content.
 *
 * @extends FluentAccordionItem
 * @tagname fabric-accordion-item
 * @public
 */
declare class AccordionItem extends AccordionItem$1 {
}

/**
 * Available size options for the AccordionItem component.
 * @public
 */
declare const AccordionItemSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly extraLarge: "extra-large";
};
type AccordionItemSize = ValuesOf<typeof AccordionItemSizes>;
/**
 * Defines the available marker positions for accordion items.
 * Extends the base Fluent accordion marker position options.
 * @public
 */
declare const AccordionItemMarkerPositions: {
    readonly start: "start";
    readonly end: "end";
};
type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPositions>;

/**
 * @public
 * @remarks
 * HTML Element: <fabric-accordion-item>
 */
declare const definition$G: _microsoft_fast_element.FASTElementDefinition<typeof AccordionItem>;

/**
 * Accordion
 * @summary An Accordion Custom HTML Element that implements ARIA Accordion, allowing for single or multiple item expansion.
 *
 * @example
 * ```html
 * <fabric-accordion expand-mode="multi">
 *   <fabric-accordion-item>Item 1</fabric-accordion-item>
 *   <fabric-accordion-item>Item 2</fabric-accordion-item>
 *   <fabric-accordion-item>Item 3</fabric-accordion-item>
 * </fabric-accordion>
 * ```
 *
 * @attr {AccordionExpandMode} expand-mode - Controls the expand mode of the Accordion, either allowing single or multiple item expansion.
 *
 * @prop {AccordionExpandMode} expandmode - Controls the expand mode of the Accordion, either allowing single or multiple item expansion.
 *
 * @slot - The default slot for the accordion items
 *
 * @method expandmodeChanged - Called when the expand mode changes.
 * @method findExpandedItem - Find the first expanded item in the accordion.
 * @method isSingleExpandMode - Checks if the accordion is in single expand mode.
 * @method setSingleExpandMode - Controls the behavior of the accordion in single expand mode.
 *
 * @fires change - Fires a custom 'change' event when the active item changes.
 *
 * @extends FluentAccordion
 * @tagname fabric-accordion
 * @public
 */
declare class Accordion extends Accordion$1 {
}

/**
 * The Fabric Accordion component.
 *
 * @public
 * @remarks
 * HTML Element: <fabric-accordion>
 */
declare const definition$F: _microsoft_fast_element.FASTElementDefinition<typeof Accordion>;

/** Expand mode values for {@link Accordion}. */
declare const AccordionExpandModes: {
    readonly single: "single";
    readonly multi: "multi";
};
type AccordionExpandMode = ValuesOf<typeof AccordionExpandModes>;

/**
 * Link
 * @summary A Link Custom HTML Element based on Fluent UI's Link with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-link href="https://example.com" appearance="subtle">
 *   Visit Example
 * </fabric-link>
 * ```
 *
 * @attr {LinkAppearance} appearance - The appearance the link should have.
 * @attr {boolean | undefined} inline - The link is inline with text. In chromium browsers, if the link is contained within a semantic text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`, `:host-context()` ensures inline links are styled appropriately.
 * @attr {string | undefined} download - Prompts the user to save the linked URL.
 * @attr {string | undefined} href - The URL the hyperlink references.
 * @attr {string | undefined} hreflang - Hints at the language of the referenced resource.
 * @attr {string | undefined} ping - The ping attribute.
 * @attr {string | undefined} referrerpolicy - The referrerpolicy attribute. See The `referrerpolicy` attribute.
 * @attr {string | undefined} rel - The rel attribute. See The `rel` attribute.
 * @attr {string | undefined} target - The target attribute.
 * @attr {string | undefined} type - The type attribute.
 *
 * @prop {string} appearance - The appearance the link should have.
 * @prop {boolean} inline - The link is inline with text. In chromium browsers, if the link is contained within a semantic text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`, `:host-context()` ensures inline links are styled appropriately.
 * @prop {string} download - Prompts the user to save the linked URL.
 * @prop {string} href - The URL the hyperlink references.
 * @prop {string} hreflang - Hints at the language of the referenced resource.
 * @prop {string} ping - The ping attribute.
 * @prop {string} referrerpolicy - The referrerpolicy attribute. See The `referrerpolicy` attribute.
 * @prop {string} rel - The rel attribute. See The `rel` attribute.
 * @prop {string} target - The target attribute.
 * @prop {string} type - The type attribute.
 *
 * @slot - The default slot for link content.
 * @slot start - Content which can be provided before the link content
 * @slot end - Content which can be provided after the link content
 *
 * @csspart control - The anchor element.
 * @csspart content - The element wrapping anchor content.
 *
 * @method keydownHandler - Handles keydown events for the anchor.
 *
 * @extends FluentLink
 * @tagname fabric-link
 * @public
 */
declare class Link extends Link$1 {
}

/** Appearance values for {@link Link}. */
declare const LinkAppearances: {
    readonly subtle: "subtle";
};
type LinkAppearance = ValuesOf<typeof LinkAppearances>;
declare const LinkAppearance: {
    readonly subtle: "subtle";
};
/** Target values for {@link Link}. */
declare const LinkTargets: {
    readonly _self: "_self";
    readonly _blank: "_blank";
    readonly _parent: "_parent";
    readonly _top: "_top";
};
type LinkTarget = ValuesOf<typeof LinkTargets>;
declare const LinkTarget: {
    readonly _self: "_self";
    readonly _blank: "_blank";
    readonly _parent: "_parent";
    readonly _top: "_top";
};
/** Anchor target values exposed for downstream consumers. */
declare const AnchorTargets: {
    readonly _self: "_self";
    readonly _blank: "_blank";
    readonly _parent: "_parent";
    readonly _top: "_top";
};
type AnchorTarget = ValuesOf<typeof AnchorTargets>;
declare const AnchorTarget: {
    readonly _self: "_self";
    readonly _blank: "_blank";
    readonly _parent: "_parent";
    readonly _top: "_top";
};

/**
 * The Fabric Link component.
 *
 * @public
 */
declare const definition$E: _microsoft_fast_element.FASTElementDefinition<typeof Link>;

/**
 * Avatar
 * @summary An Avatar Custom HTML Element based on FluentAvatar, including style and layout specific attributes.
 *
 * @example
 * ```html
 * <fabric-avatar
 *   shape="circular"
 *   appearance="ring"
 *   size="48"
 *   color="colorful"
 *   color-id="team-1"
 * >
 *   JD
 *   <span slot="badge">5</span>
 * </fabric-avatar>
 * ```
 *
 * @attr {AvatarShape | undefined} shape - The avatar can have a circular or square shape.
 * @attr {AvatarAppearance | undefined} appearance - The appearance when `active="active"`.
 * @attr {AvatarSize | undefined} size - Size of the avatar in pixels.
 * @attr {AvatarColor | undefined} color - The color when displaying either an icon or initials.
 * @attr {string} color-id - Specify a string to be used instead of the name, to determine which color to use when color="colorful".
 * @attr {string} name - The name of the avatar.
 * @attr {string} initials - The initials of the avatar.
 *
 * @prop {AvatarShape | undefined} shape - The avatar can have a circular or square shape.
 * @prop {AvatarAppearance | undefined} appearance - The appearance when `active="active"`.
 * @prop {AvatarSize | undefined} size - Size of the avatar in pixels.
 * @prop {AvatarColor | undefined} color - The color when displaying either an icon or initials.
 * @prop {string} colorId - Specify a string to be used instead of the name, to determine which color to use when color="colorful".
 * @prop {string} name - The name of the avatar.
 * @prop {string} initials - The initials of the avatar.
 *
 * @slot - The default slot for the avatar's initials or icon.
 * @slot badge - Slot for adding a badge to the avatar.
 *
 * @extends FluentAvatar
 * @tagname fabric-avatar
 * @public
 */
declare class Avatar extends Avatar$1 {
}

/** Active state values for {@link Avatar}. */
declare const AvatarActives: {
    readonly active: "active";
    readonly inactive: "inactive";
};
type AvatarActive = ValuesOf<typeof AvatarActives>;
declare const AvatarActive: {
    readonly active: "active";
    readonly inactive: "inactive";
};
/** Appearance values for {@link Avatar}. */
declare const AvatarAppearances: {
    readonly ring: "ring";
    readonly shadow: "shadow";
    readonly ringShadow: "ring-shadow";
};
type AvatarAppearance = ValuesOf<typeof AvatarAppearances>;
declare const AvatarAppearance: {
    readonly ring: "ring";
    readonly shadow: "shadow";
    readonly ringShadow: "ring-shadow";
};
/** Color scheme values for {@link Avatar}. */
declare const AvatarColors: {
    readonly darkRed: "dark-red";
    readonly cranberry: "cranberry";
    readonly red: "red";
    readonly pumpkin: "pumpkin";
    readonly peach: "peach";
    readonly marigold: "marigold";
    readonly gold: "gold";
    readonly brass: "brass";
    readonly brown: "brown";
    readonly forest: "forest";
    readonly seafoam: "seafoam";
    readonly darkGreen: "dark-green";
    readonly lightTeal: "light-teal";
    readonly teal: "teal";
    readonly steel: "steel";
    readonly blue: "blue";
    readonly royalBlue: "royal-blue";
    readonly cornflower: "cornflower";
    readonly navy: "navy";
    readonly lavender: "lavender";
    readonly purple: "purple";
    readonly grape: "grape";
    readonly lilac: "lilac";
    readonly pink: "pink";
    readonly magenta: "magenta";
    readonly plum: "plum";
    readonly beige: "beige";
    readonly mink: "mink";
    readonly platinum: "platinum";
    readonly anchor: "anchor";
    readonly neutral: "neutral";
    readonly brand: "brand";
    readonly colorful: "colorful";
};
type AvatarColor = ValuesOf<typeof AvatarColors>;
declare const AvatarColor: {
    readonly darkRed: "dark-red";
    readonly cranberry: "cranberry";
    readonly red: "red";
    readonly pumpkin: "pumpkin";
    readonly peach: "peach";
    readonly marigold: "marigold";
    readonly gold: "gold";
    readonly brass: "brass";
    readonly brown: "brown";
    readonly forest: "forest";
    readonly seafoam: "seafoam";
    readonly darkGreen: "dark-green";
    readonly lightTeal: "light-teal";
    readonly teal: "teal";
    readonly steel: "steel";
    readonly blue: "blue";
    readonly royalBlue: "royal-blue";
    readonly cornflower: "cornflower";
    readonly navy: "navy";
    readonly lavender: "lavender";
    readonly purple: "purple";
    readonly grape: "grape";
    readonly lilac: "lilac";
    readonly pink: "pink";
    readonly magenta: "magenta";
    readonly plum: "plum";
    readonly beige: "beige";
    readonly mink: "mink";
    readonly platinum: "platinum";
    readonly anchor: "anchor";
    readonly neutral: "neutral";
    readonly brand: "brand";
    readonly colorful: "colorful";
};
/** Named color values for {@link Avatar}. */
declare const AvatarNamedColors: {
    readonly darkRed: "dark-red";
    readonly cranberry: "cranberry";
    readonly red: "red";
    readonly pumpkin: "pumpkin";
    readonly peach: "peach";
    readonly marigold: "marigold";
    readonly gold: "gold";
    readonly brass: "brass";
    readonly brown: "brown";
    readonly forest: "forest";
    readonly seafoam: "seafoam";
    readonly darkGreen: "dark-green";
    readonly lightTeal: "light-teal";
    readonly teal: "teal";
    readonly steel: "steel";
    readonly blue: "blue";
    readonly royalBlue: "royal-blue";
    readonly cornflower: "cornflower";
    readonly navy: "navy";
    readonly lavender: "lavender";
    readonly purple: "purple";
    readonly grape: "grape";
    readonly lilac: "lilac";
    readonly pink: "pink";
    readonly magenta: "magenta";
    readonly plum: "plum";
    readonly beige: "beige";
    readonly mink: "mink";
    readonly platinum: "platinum";
    readonly anchor: "anchor";
};
type AvatarNamedColor = ValuesOf<typeof AvatarNamedColors>;
declare const AvatarNamedColor: {
    readonly darkRed: "dark-red";
    readonly cranberry: "cranberry";
    readonly red: "red";
    readonly pumpkin: "pumpkin";
    readonly peach: "peach";
    readonly marigold: "marigold";
    readonly gold: "gold";
    readonly brass: "brass";
    readonly brown: "brown";
    readonly forest: "forest";
    readonly seafoam: "seafoam";
    readonly darkGreen: "dark-green";
    readonly lightTeal: "light-teal";
    readonly teal: "teal";
    readonly steel: "steel";
    readonly blue: "blue";
    readonly royalBlue: "royal-blue";
    readonly cornflower: "cornflower";
    readonly navy: "navy";
    readonly lavender: "lavender";
    readonly purple: "purple";
    readonly grape: "grape";
    readonly lilac: "lilac";
    readonly pink: "pink";
    readonly magenta: "magenta";
    readonly plum: "plum";
    readonly beige: "beige";
    readonly mink: "mink";
    readonly platinum: "platinum";
    readonly anchor: "anchor";
};
/** Shape values for {@link Avatar}. */
declare const AvatarShapes: {
    readonly circular: "circular";
    readonly square: "square";
};
type AvatarShape = ValuesOf<typeof AvatarShapes>;
declare const AvatarShape: {
    readonly circular: "circular";
    readonly square: "square";
};
/** Size values for {@link Avatar}. */
declare const AvatarSizes: {
    readonly _16: 16;
    readonly _20: 20;
    readonly _24: 24;
    readonly _28: 28;
    readonly _32: 32;
    readonly _36: 36;
    readonly _40: 40;
    readonly _48: 48;
    readonly _56: 56;
    readonly _64: 64;
    readonly _72: 72;
    readonly _96: 96;
    readonly _120: 120;
    readonly _128: 128;
};
type AvatarSize = ValuesOf<typeof AvatarSizes>;
declare const AvatarSize: {
    readonly _16: 16;
    readonly _20: 20;
    readonly _24: 24;
    readonly _28: 28;
    readonly _32: 32;
    readonly _36: 36;
    readonly _40: 40;
    readonly _48: 48;
    readonly _56: 56;
    readonly _64: 64;
    readonly _72: 72;
    readonly _96: 96;
    readonly _120: 120;
    readonly _128: 128;
};

/**
 * The Fabric Avatar component.
 *
 * @public
 */
declare const definition$D: _microsoft_fast_element.FASTElementDefinition<typeof Avatar>;

/**
 * Badge
 * @summary A badge component representing a small count or label, often used to show status, categorization, or decorative purposes.
 *
 * @example
 * ```html
 * <fabric-badge appearance="filled" color="brand" shape="rounded" size="medium">
 *   <span slot="start">🌟</span>
 *   2
 *   <span slot="end">🔔</span>
 * </fabric-badge>
 * ```
 *
 * @attr {BadgeAppearance} appearance - The appearance the badge should have. One of: 'outline', 'filled', 'ghost', 'tint'.
 * @attr {BadgeColor} color - The color the badge should have. One of: 'subtle', 'brand', 'danger', 'important', 'informative', 'severe', 'success', 'warning'.
 * @attr {BadgeShape} shape - The shape the badge should have. One of: 'circular', 'rounded', 'square'.
 * @attr {BadgeSize} size - The size the badge should have. One of: 'tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'.
 *
 * @prop {BadgeAppearance} appearance - The appearance the badge should have. One of: 'outline', 'filled', 'ghost', 'tint'.
 * @prop {BadgeColor} color - The color the badge should have. One of: 'subtle', 'brand', 'danger', 'important', 'informative', 'severe', 'success', 'warning'.
 * @prop {BadgeShape} shape - The shape the badge should have. One of: 'circular', 'rounded', 'square'.
 * @prop {BadgeSize} size - The size the badge should have. One of: 'tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'.
 *
 * @slot start - Content to be placed at the start of the badge.
 * @slot - Default slot for the badge content.
 * @slot end - Content to be placed at the end of the badge.
 *
 * @method appearanceChanged - Handles changes to appearance attribute custom states.
 * @method colorChanged - Handles changes to color attribute custom states.
 * @method shapeChanged - Handles changes to shape attribute custom states.
 * @method sizeChanged - Handles changes to size attribute custom states.
 *
 * @extends FluentBadge
 * @tagname fabric-badge
 * @public
 */
declare class Badge extends Badge$1 {
}

/** Appearance values for {@link Badge}. */
declare const BadgeAppearances: {
    readonly filled: "filled";
    readonly ghost: "ghost";
    readonly outline: "outline";
    readonly tint: "tint";
};
type BadgeAppearance = ValuesOf<typeof BadgeAppearances>;
declare const BadgeAppearance: {
    readonly filled: "filled";
    readonly ghost: "ghost";
    readonly outline: "outline";
    readonly tint: "tint";
};
/** Color values for {@link Badge}. */
declare const BadgeColors: {
    readonly brand: "brand";
    readonly danger: "danger";
    readonly important: "important";
    readonly informative: "informative";
    readonly severe: "severe";
    readonly subtle: "subtle";
    readonly success: "success";
    readonly warning: "warning";
};
type BadgeColor = ValuesOf<typeof BadgeColors>;
declare const BadgeColor: {
    readonly brand: "brand";
    readonly danger: "danger";
    readonly important: "important";
    readonly informative: "informative";
    readonly severe: "severe";
    readonly subtle: "subtle";
    readonly success: "success";
    readonly warning: "warning";
};
/** Shape values for {@link Badge}. */
declare const BadgeShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
type BadgeShape = ValuesOf<typeof BadgeShapes>;
declare const BadgeShape: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
/** Size values for {@link Badge}. */
declare const BadgeSizes: {
    readonly tiny: "tiny";
    readonly extraSmall: "extra-small";
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly extraLarge: "extra-large";
};
type BadgeSize = ValuesOf<typeof BadgeSizes>;
declare const BadgeSize: {
    readonly tiny: "tiny";
    readonly extraSmall: "extra-small";
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly extraLarge: "extra-large";
};

/**
 * The Fabric Badge component.
 *
 * @public
 */
declare const definition$C: _microsoft_fast_element.FASTElementDefinition<typeof Badge>;

declare const styles$8: _microsoft_fast_element.ElementStyles;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-button>
 */
declare const definition$B: _microsoft_fast_element.FASTElementDefinition<typeof Button>;

/**
 * Checkbox
 * @summary A Checkbox Custom HTML Element that implements the ARIA checkbox role with customizable states and indicators.
 *
 * @example
 * ```html
 * <fabric-checkbox
 *    ?checked="${x => x.checked}"
 *    ?disabled="${x => x.disabled}"
 *    ?indeterminate="${x => x.indeterminate}"
 *    shape="${x => x.shape}"
 *    size="${x => x.size}"
 * >
 *    <span slot="checked-indicator">[Checked Indicator]</span>
 *    <span slot="indeterminate-indicator">[Indeterminate Indicator]</span>
 * </fabric-checkbox>
 * ```
 *
 * @attr {boolean | undefined} checked - The initial checked state of the element.
 * @attr {boolean | undefined} disabled - The initial disabled state of the control.
 * @attr {boolean | undefined} indeterminate - Indicates that the element is in an indeterminate or mixed state.
 * @attr {CheckboxShape | undefined} shape - Indicates the shape of the checkbox.
 * @attr {CheckboxSize | undefined} size - Indicates the size of the control.
 * @attr {boolean | undefined} required - Indicates that the element is required.
 * @attr {string | undefined} name - The name of the checkbox.
 * @attr {string | undefined} value - The value of the checkbox.
 *
 * @prop {boolean} indeterminate - Indicates the indeterminate state of the checkbox.
 * @prop {CheckboxShape} shape - Indicates the shape of the checkbox, can be 'circular' or 'square'.
 * @prop {CheckboxSize} size - Indicates the size of the checkbox, can be 'medium' or 'large'.
 *
 * @slot checked-indicator - The checked indicator.
 * @slot indeterminate-indicator - The indeterminate indicator.
 *
 * @csspart checked-indicator - The checked state indicator.
 * @csspart indeterminate-indicator - The indeterminate state indicator.
 *
 * @method toggleChecked - Toggles the checked state of the control.
 *
 * @fires change - Emits a custom change event when the checked state changes.
 * @fires input - Emits a custom input event when the checked state changes.
 *
 * @extends FluentCheckbox
 * @tagname fabric-checkbox
 * @public
 */
declare class Checkbox extends Checkbox$1 {
}

declare const CheckboxShapes: {
    readonly circular: "circular";
    readonly square: "square";
};
type CheckboxShape = ValuesOf<typeof CheckboxShapes>;
declare const CheckboxSizes: {
    readonly medium: "medium";
    readonly large: "large";
};
type CheckboxSize = ValuesOf<typeof CheckboxSizes>;

/**
 * The Fabric Checkbox component.
 *
 * @public
 */
declare const definition$A: _microsoft_fast_element.FASTElementDefinition<typeof Checkbox>;

/**
 * CounterBadge
 * @summary A CounterBadge component representing a numeric or dot indicator for UI elements, often used to show the number of items in a list or as a notification count.
 *
 * @example
 * ```html
 * <fabric-counter-badge appearance="filled" color="brand" shape="circular" size="medium" count="5" overflow-count="99" show-zero="false" dot="false"></fabric-counter-badge>
 * ```
 *
 * @attr {CounterBadgeAppearance | undefined} appearance - The appearance the badge should have.
 * @attr {CounterBadgeColor | undefined} color - The color the badge should have.
 * @attr {CounterBadgeShape | undefined} shape - The shape the badge should have.
 * @attr {CounterBadgeSize | undefined} size - The size the badge should have.
 * @attr {number} count - The count the badge should have.
 * @attr {number} overflow-count - Max number to be displayed.
 * @attr {boolean} show-zero - If the badge should be shown when count is 0.
 * @attr {boolean} dot - If a dot should be displayed without the count.
 *
 * @prop {number} count - The numeric value for the badge. If not set, defaults to 0.
 * @prop {number} overflowCount - The maximum number to display before showing '+'. Defaults to 99.
 * @prop {boolean} showZero - Determines whether the badge is shown when the count is 0. Defaults to false.
 * @prop {boolean} dot - Displays a dot instead of the count when set to true. Defaults to false.
 *
 * @extends FluentCounterBadge
 * @tagname fabric-counter-badge
 * @public
 */
declare class CounterBadge extends CounterBadge$1 {
}

/**
 * Appearances for {@link CounterBadge}.
 * @public
 */
declare const CounterBadgeAppearances: {
    readonly filled: "filled";
    readonly ghost: "ghost";
};
/**
 * Type describing appearance options for {@link CounterBadge}.
 * @public
 */
type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearances>;
/**
 * Colors for {@link CounterBadge}.
 * @public
 */
declare const CounterBadgeColors: {
    readonly brand: "brand";
    readonly danger: "danger";
    readonly important: "important";
    readonly informative: "informative";
    readonly severe: "severe";
    readonly subtle: "subtle";
    readonly success: "success";
    readonly warning: "warning";
};
/**
 * Type describing color options for {@link CounterBadge}.
 * @public
 */
type CounterBadgeColor = ValuesOf<typeof CounterBadgeColors>;
/**
 * Shapes for {@link CounterBadge}.
 * @public
 */
declare const CounterBadgeShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
};
/**
 * Type describing shape options for {@link CounterBadge}.
 * @public
 */
type CounterBadgeShape = ValuesOf<typeof CounterBadgeShapes>;
/**
 * Sizes for {@link CounterBadge}.
 * @public
 */
declare const CounterBadgeSizes: {
    readonly tiny: "tiny";
    readonly extraSmall: "extra-small";
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly extraLarge: "extra-large";
};
/**
 * Type describing size options for {@link CounterBadge}.
 * @public
 */
type CounterBadgeSize = ValuesOf<typeof CounterBadgeSizes>;

/**
 * The Fabric Counter Badge component.
 *
 * @public
 */
declare const definition$z: _microsoft_fast_element.FASTElementDefinition<typeof CounterBadge>;

/**
 * Dialog
 * @summary A Dialog Custom HTML Element that provides modal, non-modal, and alert dialog types with accessible attributes.
 *
 * @example
 * ```html
 * <fabric-dialog type="modal" aria-labelledby="dialog-label" aria-describedby="dialog-desc">
 *   <span slot="title">Title</span>
 *   <div>Content of the dialog body</div>
 *   <span slot="action">Action buttons</span>
 * </fabric-dialog>
 * ```
 *
 * @attr {string} aria-describedby - Identifies the element (or elements) that describes the object.
 * @attr {string} aria-labelledby - Identifies the element (or elements) that labels the current element.
 * @attr {DialogType} type - The type of dialog ('modal', 'non-modal', 'alert').
 *
 * @prop {HTMLElement} dialog - The internal dialog element reference.
 * @prop {string} ariaDescribedby - Reflects the 'aria-describedby' attribute to associate the dialog with descriptive text.
 * @prop {string} ariaLabelledby - Reflects the 'aria-labelledby' attribute to associate the dialog with its label.
 * @prop {DialogType} type - The type of dialog, which can be 'modal', 'non-modal', or 'alert'.
 *
 * @slot - The default slot for dialog content.
 *
 * @csspart dialog - The dialog container.
 *
 * @method show() - Opens the dialog.
 * @method hide() - Closes the dialog.
 * @method clickHandler() - Handles click events on the dialog.
 *
 * @fires {CustomEvent} beforetoggle - Event emitted before the dialog's open state changes.
 * @fires {CustomEvent} toggle - Event emitted after the dialog's open state changes.
 *
 * @extends FluentDialog
 * @tagname fabric-dialog
 * @public
 */
declare class Dialog extends Dialog$1 {
}

declare const styles$7: _microsoft_fast_element.ElementStyles;

/**
 * The Fabric Dialog component.
 *
 * @public
 */
declare const definition$y: _microsoft_fast_element.FASTElementDefinition<typeof Dialog>;

/**
 * Dialog modal type
 * @public
 */
declare const DialogTypes: {
    readonly modal: "modal";
    readonly nonModal: "non-modal";
    readonly alert: "alert";
};
type DialogType = ValuesOf$1<typeof DialogTypes>;

/**
 * DialogBody
 * @summary Dialog Body component that extends the FASTElement class, providing slots for title, title-action, content, and actions.
 *
 * @example
 * ```html
 * <fabric-dialog-body no-title-action="false">
 *   <span slot="title">Title</span>
 *   <span slot="title-action">Action</span>
 *   <div>Content of the dialog body</div>
 *   <span slot="action">Action buttons</span>
 * </fabric-dialog-body>
 * ```
 *
 * @attr {boolean} no-title-action - Indicates if the title action should be displayed.
 *
 * @prop {boolean} noTitleAction - Indicates whether the dialog has a title action.
 *
 * @slot title - Slot for the dialog title.
 * @slot title-action - Slot for the dialog title action, typically a close button.
 * @slot - The default slot for dialog content.
 * @slot action - Slot for dialog actions, such as buttons.
 *
 * @csspart title - The dialog title container.
 * @csspart content - The dialog content container.
 * @csspart actions - The dialog actions container.
 * @csspart title-action - The dialog title action container.
 *
 * @extends FluentDialogBody
 * @tagname fabric-dialog-body
 * @public
 */
declare class DialogBody extends DialogBody$1 {
}

/**
 * The Fabric Dialog Body component.
 *
 * @public
 */
declare const definition$x: _microsoft_fast_element.FASTElementDefinition<typeof DialogBody>;

/**
 * Divider
 * @summary A Divider Custom HTML Element that semantically separates content or serves for visual presentation.
 *
 * @example
 * ```html
 * <fabric-divider role="separator" orientation="vertical" align-content="center" appearance="strong" inset></fabric-divider>
 * ```
 *
 * @attr {DividerRole} role - The role of the element, either 'separator' or 'presentation'.
 * @attr {DividerOrientation} orientation - The orientation of the divider, either 'horizontal' or 'vertical'.
 * @attr {DividerAlignContent} alignContent - Align content within divider, options are 'center', 'start', 'end'.
 * @attr {DividerAppearance} appearance - Divider appearance, options are 'strong', 'brand', 'subtle'.
 * @attr {boolean} inset - Whether the divider should be inset.
 *
 * @prop {DividerRole} role - The role of the element, either 'separator' or 'presentation'.
 * @prop {DividerOrientation} orientation - The orientation of the divider, either 'horizontal' or 'vertical'.
 * @prop {DividerAlignContent} alignContent - Align content within divider, options are 'center', 'start', 'end'.
 * @prop {DividerAppearance} appearance - Divider appearance, options are 'strong', 'brand', 'subtle'.
 * @prop {boolean} inset - Whether the divider should be inset.
 *
 * @slot - The default slot for the divider content.
 *
 * @extends FluentDivider
 * @tagname fabric-divider
 * @public
 */
declare class Divider extends Divider$1 {
}

/**
 * Align-content values supported by {@link Divider}.
 * @public
 */
declare const DividerAlignContents: {
    readonly center: "center";
    readonly start: "start";
    readonly end: "end";
};
/**
 * Type describing alignment options for {@link Divider}.
 * @public
 */
type DividerAlignContent = ValuesOf<typeof DividerAlignContents>;
/**
 * Appearance values supported by {@link Divider}.
 * @public
 */
declare const DividerAppearances: {
    readonly strong: "strong";
    readonly brand: "brand";
    readonly subtle: "subtle";
};
/**
 * Type describing appearance options for {@link Divider}.
 * @public
 */
type DividerAppearance = ValuesOf<typeof DividerAppearances>;
/**
 * Orientation values supported by {@link Divider}.
 * @public
 */
declare const DividerOrientations: {
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
/**
 * Type describing orientation options for {@link Divider}.
 * @public
 */
type DividerOrientation = ValuesOf<typeof DividerOrientations>;
/**
 * Role values supported by {@link Divider}.
 * @public
 */
declare const DividerRoles: {
    readonly separator: "separator";
    readonly presentation: "presentation";
};
/**
 * Type describing ARIA roles available to {@link Divider}.
 * @public
 */
type DividerRole = ValuesOf<typeof DividerRoles>;

declare const styles$6: _microsoft_fast_element.ElementStyles;

/**
 * Template for the {@link Divider} component.
 * @public
 */
declare const template$5: _microsoft_fast_element.ElementViewTemplate<_fluentui_web_components.Divider, any>;

/**
 * The Fabric Divider component.
 *
 * @public
 */
declare const definition$w: _microsoft_fast_element.FASTElementDefinition<typeof Divider>;

/**
 * Drawer
 * @summary A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
 *
 * @example
 * ```html
 * <fabric-drawer type="modal" position="start" size="large" aria-labelledby="drawer-title" aria-describedby="drawer-description">
 *   <span slot="title">Title Content</span>
 *   <span slot="close">Close Button</span>
 *   Main Content
 *   <div slot="footer">Footer Content</div>
 * </fabric-drawer>
 * ```
 *
 * @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/full).
 * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
 * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
 *
 * @prop {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
 * @prop {DrawerPosition} position - Sets the position of the drawer (start/end).
 * @prop {DrawerSize} size - Sets the size of the drawer (small/medium/large/full).
 * @prop {string} ariaDescribedby - The ID of the element that describes the drawer.
 * @prop {string} ariaLabelledby - The ID of the element that labels the drawer.
 *
 * @slot - Default slot for the content of the drawer.
 * @slot title - Slot for the title content of the drawer.
 * @slot close - Slot for the close button of the drawer.
 * @slot footer - Slot for the footer content of the drawer.
 *
 * @csspart dialog - The dialog element of the drawer.
 *
 * @method show() - Shows the drawer.
 * @method hide() - Hides the drawer.
 * @method clickHandler() - Handles click events on the drawer.
 *
 * @fires {CustomEvent} toggle - Event emitted after the dialog's open state changes.
 * @fires {CustomEvent} beforetoggle - Event emitted before the dialog's open state changes.
 *
 * @extends FluentDrawer
 * @tagname fabric-drawer
 * @public
 */
declare class Drawer extends Drawer$1 {
}

/** Positions supported by {@link Drawer}. */
declare const DrawerPositions: {
    readonly start: "start";
    readonly end: "end";
};
/** Drawer position type. */
type DrawerPosition = ValuesOf<typeof DrawerPositions>;
/** Size values supported by {@link Drawer}. */
declare const DrawerSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly full: "full";
};
/** Drawer size type. */
type DrawerSize = ValuesOf<typeof DrawerSizes>;
/** Type values supported by {@link Drawer}. */
declare const DrawerTypes: {
    readonly nonModal: "non-modal";
    readonly modal: "modal";
    readonly inline: "inline";
};
/** Drawer type union. */
type DrawerType = ValuesOf<typeof DrawerTypes>;

/**
 * The Fabric Drawer component.
 *
 * @public
 */
declare const definition$v: _microsoft_fast_element.FASTElementDefinition<typeof Drawer>;

/**
 * DrawerBody
 * @summary A component that provides a drawer body for displaying content in a side panel.
 *
 * @example
 * ```html
 * <fabric-drawer-body>
 *   <span slot="title">Title Content</span>
 *   <span slot="close">Close Button</span>
 *   Main Content
 *   <div slot="footer">Footer Content</div>
 * </fabric-drawer-body>
 * ```
 *
 * @slot title - The title slot.
 * @slot close - The close button slot.
 * @slot - The default content slot.
 * @slot footer - The footer slot.
 *
 * @csspart header - The header part of the drawer.
 * @csspart content - The content part of the drawer.
 * @csspart footer - The footer part of the drawer.
 *
 * @extends FluentDrawerBody
 * @tagname fabric-drawer-body
 * @public
 */
declare class DrawerBody extends DrawerBody$1 {
}

/**
 * The Fabric Drawer Body component.
 *
 * @public
 */
declare const definition$u: _microsoft_fast_element.FASTElementDefinition<typeof DrawerBody>;

/**
 * Dropdown
 * @summary A Fabric UI Dropdown component that provides a list of options for users to choose from, with support for single or multiple selections, and customizable appearance and size.
 *
 * @example
 * ```html
 * <fabric-dropdown appearance="outline" size="medium" placeholder="Select an option">
 *   <fluent-listbox slot="listbox">
 *     <fluent-option value="option1">Option 1</fluent-option>
 *     <fluent-option value="option2">Option 2</fluent-option>
 *     <fluent-option value="option3">Option 3</fluent-option>
 *   </fluent-listbox>
 *   <span slot="indicator">▼</span>
 * </fabric-dropdown>
 * ```
 *
 * @attr {DropdownAppearance | undefined} appearance - The appearance of the dropdown.
 * @attr {DropdownSize | undefined} size - The size of the dropdown.
 * @attr {string} aria-labelledby - The `aria-labelledby` attribute value of the dropdown.
 * @attr {boolean} disabled - The disabled state of the dropdown.
 * @attr {string} id - Sets the listbox ID to a unique value if one is not provided.
 * @attr {string} value - The value of the selected option.
 * @attr {string} name - The name of the dropdown.
 * @attr {string} placeholder - The placeholder text of the dropdown.
 * @attr {DropdownType | undefined} type - The dropdown type.
 *
 * @prop {DropdownAppearance | undefined} appearance - The appearance of the dropdown.
 * @prop {DropdownSize | undefined} size - The size of the dropdown.
 * @prop {string} ariaLabelledBy - The `aria-labelledby` attribute value of the dropdown.
 * @prop {boolean} disabled - The disabled state of the dropdown.
 * @prop {string} id - Sets the listbox ID to a unique value if one is not provided.
 * @prop {string} value - The value of the selected option.
 * @prop {string} name - The name of the dropdown.
 * @prop {string} placeholder - The placeholder text of the dropdown.
 * @prop {DropdownType | undefined} type - The dropdown type.
 *
 * @slot - The default slot. Accepts a {@link (Listbox:class)} element.
 * @slot indicator - The indicator slot.
 * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
 *
 * @csspart control - The dropdown control container.
 * @csspart indicator - The dropdown indicator.
 *
 * @method disabledChanged - Updates the disabled state of the options when the disabled property changes.
 * @method nameChanged - Updates the name of the options when the name property changes.
 * @method changeHandler - Handles the change events for the dropdown.
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method clickHandler - Handles the click events for the dropdown.
 * @method inputHandler - Handles the input events for the dropdown from the control element.
 * @method insertControl - Inserts the control element based on the dropdown type.
 * @method keydownHandler - Handles the keydown events for the dropdown.
 * @method reportValidity - Reports the validity of the element.
 * @method selectOption - Selects an option by index.
 *
 * @extends FluentDropdown
 * @tagname fabric-dropdown
 * @public
 */
declare class Dropdown extends Dropdown$1 {
}

/** Appearance values for {@link Dropdown}. */
declare const DropdownAppearances: {
    readonly filledDarker: string;
    readonly filledLighter: string;
    readonly outline: string;
    readonly transparent: string;
};
/** Type describing appearance options for {@link Dropdown}. */
type DropdownAppearance = ValuesOf<typeof DropdownAppearances>;
/** Size values for {@link Dropdown}. */
declare const DropdownSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/** Type describing size options for {@link Dropdown}. */
type DropdownSize = ValuesOf<typeof DropdownSizes>;
/** Dropdown type values for {@link Dropdown}. */
declare const DropdownTypes: {
    readonly combobox: "combobox";
    readonly dropdown: "dropdown";
    readonly select: "select";
};
/** Type describing dropdown type options for {@link Dropdown}. */
type DropdownType = ValuesOf<typeof DropdownTypes>;

/**
 * The Fabric Dropdown Element definition.
 *
 * @public
 * @remarks
 * HTML Element: `<fabric-dropdown>`
 */
declare const definition$t: _microsoft_fast_element.FASTElementDefinition<typeof Dropdown>;

/**
 * DropdownOption
 * @summary A DropdownOption Custom HTML Element based on Fluent UI's DropdownOption with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-option>
 *   <span slot="checked-indicator">✔</span>
 *   Option Label
 *   <span slot="description">Detailed description</span>
 * </fabric-option>
 * ```
 *
 * @attr {boolean} current-selected - Indicates the current selected state of the option.
 * @attr {boolean} selected - Sets the selected property to match the currentSelected state.
 * @attr {boolean} disabled - Toggles the disabled state when the user changes the `disabled` property.
 * @attr {string} form - The associated `<form>` element.
 * @attr {boolean} freeform - Indicates if the option is in a freeform input mode.
 * @attr {string} id - The id of the option. If not provided, a unique id will be assigned.
 * @attr {string} value - The initial value of the option.
 * @attr {boolean} multiple - Indicates that the option is in a multiple selection mode context.
 * @attr {string} name - The name of the option.
 * @attr {string} text - The display text of the option.
 *
 * @prop {boolean} active - Indicates that the option is active.
 * @prop {ElementInternals} elementInternals - The internal ElementInternals instance for the component.
 *
 * @slot checked-indicator - Customizable checked indicator slot.
 * @slot - Default slot for the option label.
 * @slot description - Slot for detailed option description.
 * @slot start - Icon or glyph rendered before the main label.
 *
 * @csspart content - The main content container of the option.
 * @csspart description - The container for the option's description.
 *
 * @method toggleSelected - Toggles the selected state of the control.
 *
 * @extends FluentDropdownOption
 * @tagname fabric-option
 * @public
 */
declare class DropdownOption extends DropdownOption$1 {
}

/**
 * The Fabric Option Element definition.
 *
 * @public
 * @remarks
 * HTML Element: `<fabric-option>`
 */
declare const definition$s: _microsoft_fast_element.FASTElementDefinition<typeof DropdownOption>;

/**
 * Listbox
 * @summary A Listbox Custom HTML Element that allows for single or multiple selection from a list of options.
 * Extends the Fluent Listbox to support option groups ({@link @fabric-msft/fabric-web#OptionGroup}).
 *
 * @example
 * ```html
 * <fabric-listbox id="myListbox" multiple>
 *   <fabric-option value="option1">Option 1</fabric-option>
 *   <fabric-option value="option2">Option 2</fabric-option>
 *   <fabric-option value="option3">Option 3</fabric-option>
 * </fabric-listbox>
 * ```
 *
 * @example
 * ```html
 * <fabric-listbox>
 *   <fabric-option-group label="Fruits">
 *     <fabric-option value="apple">Apple</fabric-option>
 *     <fabric-option value="banana">Banana</fabric-option>
 *   </fabric-option-group>
 *   <fabric-option-group label="Vegetables">
 *     <fabric-option value="carrot">Carrot</fabric-option>
 *   </fabric-option-group>
 * </fabric-listbox>
 * ```
 *
 * @attr {string} id - Sets the listbox ID to a unique value if one is not provided.
 * @attr {boolean | undefined} multiple - Indicates whether the listbox allows multiple selection.
 *
 * @prop {Array<HTMLElement>} options - The collection of child options that are not disabled.
 * @prop {Array<HTMLElement>} selectedOptions - The collection of child options that are selected.
 * @prop {number} selectedIndex - The index of the currently selected option.
 *
 * @slot - The default slot for the options and option groups.
 *
 * @method multipleChanged - Updates the multiple selection state of the listbox and its options. Parameters: prev (boolean | undefined), next (boolean | undefined).
 * @method clickHandler - Sets the `selected` state on a target option when clicked. Parameters: e (PointerEvent).
 * @method selectOption - Selects an option by index. Parameters: index (number).
 *
 * @fires connected - Dispatched when the element is connected to the DOM.
 *
 * @extends FluentListbox
 * @tagname fabric-listbox
 * @public
 */
declare class Listbox extends Listbox$1 {
    /**
     * Checks if an option belongs to a disabled option group.
     *
     * @param option - The option to check.
     * @returns true if the option is inside a disabled option group.
     * @internal
     */
    private isOptionInDisabledGroup;
    /**
     * Sets the `selected` state on a target option when clicked.
     * Overrides the base implementation to prevent selection of options in disabled groups.
     *
     * @param e - The pointer event
     * @override
     * @public
     */
    clickHandler(e: PointerEvent): boolean | void;
    /**
     * Selects an option by index.
     * Overrides the base implementation to prevent selection of options in disabled groups.
     *
     * @param index - The index of the option to select.
     * @override
     * @public
     */
    selectOption(index?: number): void;
    /**
     * Handles the slotchange event for the listbox.
     * Overrides the base implementation to support option groups.
     * Extracts options from both direct option elements and option group children,
     * flattening them into a single options array while propagating group disabled states.
     *
     * @param e - The slot change event.
     * @override
     * @internal
     */
    slotchangeHandler(e: Event): void;
    /**
     * Handles changes to the options collection.
     * Overrides the base implementation to apply group-aware ARIA positioning.
     *
     * @param prev - The previous options collection.
     * @param next - The new options collection.
     * @override
     * @internal
     */
    optionsChanged(prev: DropdownOption[] | undefined, next: DropdownOption[] | undefined): void;
    /**
     * Build a list of groups and options
     * @param options
     * @param groups
     */
    private setOptionGroups;
    /**
     * Applies group-scoped ARIA positioning attributes to options.
     * Options within the same group share aria-setsize scoped to that group.
     *
     * @param options - The flattened options collection.
     * @internal
     */
    private applyGroupScopedAria;
    /**
     * Updates the multiple selection state of the listbox and its options.
     *
     * @param prev - the previous multiple value
     * @param next - the current multiple value
     */
    multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
}

/**
 * The Listbox element definition.
 *
 * @public
 * @remarks
 * HTML Element: `<fabric-listbox>`
 */
declare const definition$r: _microsoft_fast_element.FASTElementDefinition<typeof Listbox>;

/**
 * Field
 * @summary A Field Custom HTML Element based on FluentField, including style and layout specific attributes.
 *
 * @example
 * ```html
 * <fabric-field label-position="above">
 *   <label slot="label">Label</label>
 *   <input slot="input" />
 *   <span slot="message">Error message</span>
 * </fabric-field>
 * ```
 *
 * @attr {FieldLabelPosition} label-position - The position of the label relative to the input. Possible values are 'above', 'after', 'before'.
 *
 * @prop {FieldLabelPosition} labelPosition - The position of the label relative to the input. Possible values are 'above', 'after', 'before'.
 *
 * @slot label - The slot for the label element.
 * @slot input - The slot for the input element.
 * @slot message - The slot for the message element.
 *
 * @csspart label - The label part of the field component.
 * @csspart input - The input part of the field component.
 * @csspart message - The message part of the field component.
 *
 * @method labelSlotChanged - Updates attributes on the slotted label elements.
 * @method inputChanged - Updates the field's states and label properties when the assigned input changes.
 * @method setValidationStates - Sets the validation states for the field.
 *
 * @extends FluentField
 * @tagname fabric-field
 * @public
 */
declare class Field extends Field$1 {
}

declare const styles$5: _microsoft_fast_element.ElementStyles;

/**
 * Label position values exposed by {@link Field}.
 */
declare const LabelPositions: {
    readonly above: "above";
    readonly after: "after";
    readonly before: "before";
};
/**
 * Label position type exposed by {@link Field}.
 */
type LabelPosition = ValuesOf<typeof LabelPositions>;
/**
 * Back-compat aliases preserving the Field-prefixed naming used previously.
 */
declare const FieldLabelPositions: {
    readonly above: "above";
    readonly after: "after";
    readonly before: "before";
};
declare const FieldLabelPosition: {
    readonly above: "above";
    readonly after: "after";
    readonly before: "before";
};
type FieldLabelPosition = LabelPosition;
/**
 * Validation flag type for {@link Field}.
 */
type ValidationFlag = ValuesOf<typeof ValidationFlags>;
/**
 * Validation state flags surfaced by {@link Field}.
 */
declare const ValidationFlags: {
    readonly badInput: "bad-input";
    readonly customError: "custom-error";
    readonly patternMismatch: "pattern-mismatch";
    readonly rangeOverflow: "range-overflow";
    readonly rangeUnderflow: "range-underflow";
    readonly stepMismatch: "step-mismatch";
    readonly tooLong: "too-long";
    readonly tooShort: "too-short";
    readonly typeMismatch: "type-mismatch";
    readonly valueMissing: "value-missing";
    readonly valid: "valid";
};
type ValidationFlags = ValidationFlag;
/**
 * Synthetic entry describing the structural requirements for slotted inputs.
 * Provides a plural const so option-normalization rules can derive {@link SlottableInput}.
 */
declare const SlottableInputs: {
    readonly structural: SlottableInput$1;
};
/**
 * Structural type for elements assigned to the `input` slot.
 */
type SlottableInput = ValuesOf<typeof SlottableInputs>;

/**
 * The Fabric Field component.
 *
 * @public
 */
declare const definition$q: _microsoft_fast_element.FASTElementDefinition<typeof Field>;

declare const DesignSystem: Readonly<{
    prefix: "fabric";
    shadowRootMode: "open";
    registry: CustomElementRegistry;
}>;

/**
 * Image
 * @summary A Fabric UI Image component that provides a customizable image element with layout, border, shadow, fit, and shape options.
 *
 * @example
 * ```html
 * <fabric-image block fit="cover" shape="rounded">
 *   <img src="path-to-image.jpg" alt="Descriptive text">
 * </fabric-image>
 * ```
 *
 * @attr {boolean} block - Image layout. Boolean attribute that, when present, applies a block layout to the image.
 * @attr {boolean} bordered - Image border. Boolean attribute that, when present, applies a border to the image.
 * @attr {boolean} shadow - Image shadow. Boolean attribute that, when present, applies a shadow effect to the image.
 * @attr {ImageFit} fit - Image fit, with options 'none', 'center', 'contain', 'cover'. Determines how the image should be resized to fit its container.
 * @attr {ImageShape} shape - Image shape, with options 'circular', 'rounded', 'square'. Determines the shape of the image.
 *
 * @prop {boolean} block - Image layout. Boolean property that, when set, applies a block layout to the image.
 * @prop {boolean} bordered - Image border. Boolean property that, when set, applies a border to the image.
 * @prop {boolean} shadow - Image shadow. Boolean property that, when set, applies a shadow effect to the image.
 * @prop {ImageFit} fit - Image fit, with options 'none', 'center', 'contain', 'cover'. Determines how the image should be resized to fit its container.
 * @prop {ImageShape} shape - Image shape, with options 'circular', 'rounded', 'square'. Determines the shape of the image.
 *
 * @slot - The default slot for the image content. Place an <img> element here to display the image.
 *
 * @extends FluentImage
 * @tagname fabric-image
 * @public
 */
declare class Image extends Image$1 {
}

/** Fit values for {@link Image}. */
declare const ImageFits: {
    readonly none: "none";
    readonly center: "center";
    readonly contain: "contain";
    readonly cover: "cover";
};
type ImageFit = ValuesOf<typeof ImageFits>;
/** Shape values for {@link Image}. */
declare const ImageShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
type ImageShape = ValuesOf<typeof ImageShapes>;

/**
 * The Fabric Image component.
 *
 * @public
 */
declare const definition$p: _microsoft_fast_element.FASTElementDefinition<typeof Image>;

/**
 * Label
 * @summary A Fabric UI Label component that provides a customizable label element, supporting different sizes, weights, and required state indication.
 *
 * @example
 * ```html
 * <fabric-label size="large" weight="semibold" required>
 *   Username
 *   <span slot="asterisk">*</span>
 * </fabric-label>
 * ```
 *
 * @attr {LabelSize} size - Specifies font size of a label. Can be 'small', 'medium', or 'large'.
 * @attr {LabelWeight} weight - Specifies font weight of a label. Can be 'regular' or 'semibold'.
 * @attr {boolean} disabled - Specifies styles for label when associated input is disabled. Defaults to false.
 * @attr {boolean} required - Specifies styles for label when associated input is a required field. Defaults to false.
 *
 * @prop {LabelSize} size - Specifies font size of a label. Can be 'small', 'medium', or 'large'.
 * @prop {LabelWeight} weight - Specifies font weight of a label. Can be 'regular' or 'semibold'.
 * @prop {boolean} disabled - Specifies styles for label when associated input is disabled. Defaults to false.
 * @prop {boolean} required - Specifies styles for label when associated input is a required field. Defaults to false.
 *
 * @slot - The default slot for the label's text.
 * @slot asterisk - The slot for the required field indicator, an asterisk by default.
 *
 * @csspart asterisk - The part representing the required field indicator.
 *
 * @extends FluentLabel
 * @tagname fabric-label
 * @public
 */
declare class Label extends Label$1 {
}

/**
 * The Fabric Label component.
 *
 * @public
 */
declare const definition$o: _microsoft_fast_element.FASTElementDefinition<typeof Label>;

/** Size values for {@link Label}. */
declare const LabelSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
type LabelSize = ValuesOf<typeof LabelSizes>;
/** Weight values for {@link Label}. */
declare const LabelWeights: {
    readonly regular: "regular";
    readonly semibold: "semibold";
};
type LabelWeight = ValuesOf<typeof LabelWeights>;

/**
 * AnchorButton
 * @summary An Anchor Custom HTML Element that functions as a button with customizable appearance, shape, and size, and can be used as a link.
 *
 * @example
 * ```html
 * <fabric-anchor-button appearance="primary" shape="rounded" size="large" href="https://example.com" target="_blank">
 *   <span slot="start">🔗</span>
 *   Visit our page
 *   <span slot="end">→</span>
 * </fabric-anchor-button>
 * ```
 *
 * @attr {AnchorButtonAppearance} appearance - The visual appearance of the button.
 * @attr {AnchorButtonShape} shape - The shape of the button, can be square, circular, or rounded.
 * @attr {AnchorButtonSize} size - The size of the button, can be small, medium, or large.
 * @attr {boolean} icon-only - Indicates the button has an icon only, no text content.
 * @attr {string} href - The URL that the hyperlink points to.
 * @attr {AnchorTarget} target - Specifies where to open the linked document.
 *
 * @prop {boolean} iconOnly - Indicates whether the button has an icon only, with no text content.
 *
 * @slot start - Content before the button content.
 * @slot - The default slot for button text or content.
 * @slot end - Content after the button content.
 *
 * @csspart content - The button content container.
 *
 * @fires click - Fired when the button is clicked.
 *
 * @extends FluentAnchorButton
 * @tagname fabric-anchor-button
 * @public
 */
declare class AnchorButton extends AnchorButton$1 {
}

/** Appearance values for {@link AnchorButton}. */
declare const AnchorButtonAppearances: {
    readonly primary: "primary";
    readonly outline: "outline";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearances>;
declare const AnchorButtonAppearance: {
    readonly primary: "primary";
    readonly outline: "outline";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
/** Shape values for {@link AnchorButton}. */
declare const AnchorButtonShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
type AnchorButtonShape = ValuesOf<typeof AnchorButtonShapes>;
declare const AnchorButtonShape: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
/** Size values for {@link AnchorButton}. */
declare const AnchorButtonSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
type AnchorButtonSize = ValuesOf<typeof AnchorButtonSizes>;
declare const AnchorButtonSize: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};

/**
 * The Fabric Anchor Button component.
 *
 * @public
 */
declare const definition$n: _microsoft_fast_element.FASTElementDefinition<typeof AnchorButton>;

/**
 * MessageBar
 * @summary A Message Bar Custom HTML Element with custom styling and behavior based on Fluent UI's MessageBar.
 *
 * @example
 * ```html
 * <fabric-message-bar
 *   shape="rounded"
 *   layout="singleline"
 *   intent="info"
 *   role="status">
 *   <span slot="icon">ℹ️</span>
 *   Important information
 *   <span slot="actions"><button>Action</button></span>
 *   <span slot="dismiss">✖</span>
 * </fabric-message-bar>
 * ```
 *
 * @attr {MessageBarShape} shape - Sets the shape of the Message Bar. Possible values are 'rounded' or 'square'.
 * @attr {MessageBarLayout} layout - Sets the layout of the control. Possible values are 'multiline' or 'singleline'.
 * @attr {MessageBarIntent} intent - Sets the intent of the control. Possible values are 'success', 'warning', 'error', or 'info'.
 *
 * @prop {MessageBarShape} shape - Sets the shape of the Message Bar. Possible values are 'rounded' or 'square'.
 * @prop {MessageBarLayout} layout - Sets the layout of the control. Possible values are 'multiline' or 'singleline'.
 * @prop {MessageBarIntent} intent - Sets the intent of the control. Possible values are 'success', 'warning', 'error', or 'info'.
 *
 * @slot icon - Slot for the icon content.
 * @slot - The default slot for the content.
 * @slot actions - Slot for the actions content.
 * @slot dismiss - Slot for the dismiss button content.
 *
 * @csspart content - The main content container of the Message Bar.
 * @csspart actions - The container for action elements.
 *
 * @method dismissMessageBar - Method to emit a `dismiss` event when the message bar is dismissed.
 *
 * @fires dismiss - Fired when the message bar is dismissed.
 *
 * @extends FluentMessageBar
 * @tagname fabric-message-bar
 * @public
 */
declare class MessageBar extends MessageBar$1 {
}

/**
 * The Fabric MessageBar Element definition.
 *
 * @public
 * @remarks
 * HTML Element: `<fabric-message-bar>`
 */
declare const definition$m: _microsoft_fast_element.FASTElementDefinition<typeof MessageBar>;

/**
 * MenuButton
 * @summary A MenuButton component that extends Fluent UI's MenuButton with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-menu-button appearance="primary" shape="rounded" size="large">
 *   <span slot="start">🚀</span>
 *   Menu
 *   <span slot="end"></span>
 * </fabric-menu-button>
 * ```
 *
 * @attr {MenuButtonAppearances | undefined} appearance - Indicates the styled appearance of the button.
 * @attr {MenuButtonShape | undefined} shape - The shape of the button.
 * @attr {MenuButtonSize | undefined} size - The size of the button.
 * @attr {boolean | undefined} icon-only - Indicates that the button should only display as an icon with no text content.
 * @attr {boolean | undefined} autofocus - Indicates the button should be focused when the page is loaded.
 * @attr {boolean | undefined} disabled-focusable - Indicates that the button is focusable while disabled.
 * @attr {number | undefined} tabindex - Sets that the button tabindex attribute.
 * @attr {string | undefined} formaction - The URL that processes the form submission.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {string | undefined} formenctype - The encoding type for the form submission.
 * @attr {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
 * @attr {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
 * @attr {string | undefined} formtarget - The target frame or window to open the form submission in.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {string | undefined} type - The button type.
 * @attr {string | undefined} value - The value attribute.
 *
 * @prop {MenuButtonAppearances | undefined} appearance - Indicates the styled appearance of the button.
 * @prop {MenuButtonShape | undefined} shape - The shape of the button.
 * @prop {MenuButtonSize | undefined} size - The size of the button.
 * @prop {boolean | undefined} iconOnly - Indicates that the button should only display as an icon with no text content.
 * @prop {boolean | undefined} autofocus - Indicates the button should be focused when the page is loaded.
 * @prop {boolean | undefined} disabledFocusable - Indicates that the button is focusable while disabled.
 * @prop {number | undefined} tabindex - Sets that the button tabindex attribute.
 * @prop {string | undefined} formaction - The URL that processes the form submission.
 * @prop {string | undefined} form - The id of a form to associate the element to.
 * @prop {string | undefined} formenctype - The encoding type for the form submission.
 * @prop {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
 * @prop {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
 * @prop {string | undefined} formtarget - The target frame or window to open the form submission in.
 * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {string | undefined} type - The button type.
 * @prop {string | undefined} value - The value attribute.
 *
 * @slot start - Content which can be provided before the button content.
 * @slot end - Content which can be provided after the button content.
 * @slot - The default slot for button content.
 *
 * @csspart content - The button content container.
 *
 * @cssprop --icon-spacing - Custom property defined in component styles
 *
 * @method keypressHandler - Handles keypress events for the button.
 * @method press - Programmatically presses the button.
 * @method resetForm - Resets the associated form.
 *
 * @extends FluentMenuButton
 * @tagname fabric-menu-button
 * @public
 */
declare class MenuButton extends MenuButton$1 {
}

/**
 * Menu Button Appearance constants
 * @public
 */
declare const MenuButtonAppearances: {
    readonly primary: "primary";
    readonly outline: "outline";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
/**
 * A Menu Button can be secondary, primary, outline, subtle, transparent
 * @public
 */
type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearances>;
/**
 * A Menu Button can be square, circular or rounded.
 * @public
 */
declare const MenuButtonShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
/**
 * A Menu Button can be square, circular or rounded
 * @public
 */
type MenuButtonShape = ValuesOf<typeof MenuButtonShapes>;
/**
 * A Menu Button can be a size of small, medium or large.
 * @public
 */
declare const MenuButtonSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/**
 * A Menu Button can be on of several preset sizes.
 * @public
 */
type MenuButtonSize = ValuesOf<typeof MenuButtonSizes>;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-menu-button>
 */
declare const definition$l: _microsoft_fast_element.FASTElementDefinition<typeof MenuButton>;

/**
 * Menu items roles.
 * @public
 */
declare const MenuItemRoles: {
    /**
     * The menu item has a "menuitem" role
     */
    readonly menuitem: "menuitem";
    /**
     * The menu item has a "menuitemcheckbox" role
     */
    readonly menuitemcheckbox: "menuitemcheckbox";
    /**
     * The menu item has a "menuitemradio" role
     */
    readonly menuitemradio: "menuitemradio";
};
/**
 * The types for menu item roles
 * @public
 */
type MenuItemRole = ValuesOf<typeof MenuItemRoles>;
/**
 * @internal
 */
declare const roleForMenuItem: {
    [value in keyof typeof MenuItemRoles]: (typeof MenuItemRoles)[value];
};
/**
 * Menu items roles.
 * @public
 */
declare const MenuGroupRoles: {
    /**
     * The "group" role
     */
    readonly group: "group";
};
/**
 * The types for menu group roles
 * @public
 */
type MenuGroupRole = ValuesOf<typeof MenuGroupRoles>;
/**
 * @internal
 */
declare const roleForMenuGroup: Record<MenuGroupRole, MenuGroupRole>;

/**
 * MenuItem
 * @summary A MenuItem component that represents an item in a menu with various states and interactions.
 *
 * @example
 * ```html
 * <fabric-menu-item role="menuitem" disabled checked hidden>
 *   <span slot="start">Start content</span>
 *   Menu item content
 *   <span slot="end">End content</span>
 *   <span slot="submenu-glyph"></span>
 *   <div slot="submenu">Submenu content</div>
 * </fabric-menu-item>
 * ```
 *
 * @attr {boolean} disabled - The disabled state of the element.
 * @attr {MenuItemRole} role - The role of the element. Possible values: 'menuitem', 'menuitemcheckbox', 'menuitemradio'.
 * @attr {boolean} checked - The checked value of the element.
 * @attr {boolean} hidden - The hidden attribute.
 *
 * @prop {boolean} disabled - The disabled state of the element.
 * @prop {MenuItemRole} role - The role of the element.
 * @prop {boolean} checked - The checked value of the element.
 * @prop {boolean} hidden - The hidden attribute.
 * @prop {HTMLElement[]} slottedSubmenu - The submenu slotted content.
 * @prop {HTMLElement | undefined} submenu - The submenu element associated with this menu item.
 *
 * @slot - Default slot for menu item content.
 * @slot start - Slot for the start content.
 * @slot end - Slot for the end content.
 * @slot indicator - The checkbox or radio indicator.
 * @slot submenu-glyph - The submenu expand/collapse indicator.
 * @slot submenu - Slot for the submenu content.
 *
 * @csspart content - The main content of the menu item.
 *
 * @cssprop --indent - Custom property for indentation level (default: 0).
 * @cssprop --menu-max-height - Maximum height for submenu (default: auto).
 *
 * @internal connectedCallback - Called when the element is added to the document.
 * @internal disconnectedCallback - Called when the element is removed from the document.
 * @method disabledChanged - Handles changes to the disabled attribute.
 * @method roleChanged - Handles changes to the role attribute.
 * @method checkedChanged - Handles changes to the checked attribute.
 * @method slottedSubmenuChanged - Handles changes to the slotted submenu content.
 * @method handleMenuItemKeyDown - Handles keydown events for the menu item.
 * @method handleMenuItemClick - Handles click events for the menu item.
 * @method handleMouseOver - Handles mouse over events for the menu item.
 * @method handleMouseOut - Handles mouse out events for the menu item.
 * @method toggleHandler - Handles toggle events from submenu popover.
 *
 * @fires change - Fired when the checked state changes.
 *
 * @extends FASTElement
 * @tagname fabric-menu-item
 * @public
 */
declare class MenuItem extends FASTElement {
    #private;
    /**
     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
     *
     * @internal
     */
    private elementInternals;
    /**
     * The disabled state of the element.
     *
     * @public
     * @remarks
     * HTML Attribute: disabled
     */
    disabled: boolean;
    /**
     * Handles changes to disabled attribute custom states and element internals
     * @param prev - the previous state
     * @param next - the next state
     */
    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
    /**
     * The role of the element.
     *
     * @public
     * @remarks
     * HTML Attribute: role
     */
    role: MenuItemRole;
    /**
     * Handles changes to role attribute element internals properties
     * @param prev - the previous state
     * @param next - the next state
     */
    roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
    /**
     * The checked value of the element.
     *
     * @public
     * @remarks
     * HTML Attribute: checked
     */
    checked: boolean;
    /**
     * Handles changes to checked attribute custom states and element internals.
     * @param prev - the previous state
     * @param next - the next state
     */
    protected checkedChanged(prev: boolean, next: boolean): void;
    /**
     * The hidden attribute.
     *
     * @public
     * @remarks
     * HTML Attribute: hidden
     */
    hidden: boolean;
    /**
     * The submenu slotted content.
     *
     * @internal
     */
    slottedSubmenu: HTMLElement[];
    /**
     * Sets the submenu and updates its position.
     *
     * @internal
     */
    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
    /**
     * @public
     */
    submenu: HTMLElement | undefined;
    /**
     * @public
     * Sets the role and registers event listeners.
     */
    connectedCallback(): void;
    /**
     * Removes event listeners when component is disconnected.
     */
    disconnectedCallback(): void;
    /**
     * Handles keydown events for the menu item.
     *
     * @param e - The keyboard event
     * @returns `false` if the event was handled and should not propagate, `true` otherwise
     * @protected
     */
    protected handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
    /**
     * Handles click events for the menu item.
     *
     * @param e - The mouse event
     * @returns `false` if the event was handled and should not propagate
     * @protected
     */
    protected handleMenuItemClick: (e: MouseEvent) => boolean;
    /**
     * Handles mouse over events for the menu item.
     * Opens any associated submenu when hovering over the item.
     *
     * @param e - The mouse event (unused but required for event handler signature)
     * @returns `false` if the event was handled and should not propagate
     * @protected
     */
    protected handleMouseOver: () => boolean;
    /**
     * Handles mouse out events for the menu item.
     * Closes any associated submenu when the mouse leaves the item,
     * unless the focus remains within the menu item.
     *
     * @param e - The mouse event (unused but required for event handler signature)
     * @returns `false` if the event was handled and should not propagate
     * @protected
     */
    protected handleMouseOut: () => boolean;
    /**
     * Handles toggle events from associated submenu popover.
     * Sets up required ARIA attributes and tab navigation when submenu opens/closes.
     *
     * @param e - The toggle event from the submenu popover
     * @protected
     */
    protected toggleHandler: (e: Event) => void;
    /**
     * Invokes the appropriate action based on the menu item's role.
     * For checkbox items, toggles the checked state.
     * For radio items, sets the checked state to true if not already checked.
     * For regular menu items, opens submenus or emits a change event.
     *
     * @internal
     */
    private invoke;
    /**
     * Sets the fallback position of the submenu when CSS anchor positioning is not supported.
     * Calculates optimal positioning to keep the submenu within the viewport bounds.
     * Positions the submenu to the inline-end by default, but adjusts based on available space.
     *
     * @internal
     */
    private setSubmenuPosition;
}
/**
 * Menu Item column count
 * @public
 */
type MenuItemColumnCount = 0 | 1 | 2;

/** MenuItem styles
 * @public
 */
declare const styles$4: _microsoft_fast_element.ElementStyles;

declare const template$4: ElementViewTemplate<MenuItem>;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-menu-item>
 */
declare const definition$k: _microsoft_fast_element.FASTElementDefinition<typeof MenuItem>;

/** MenuList styles
 * @public
 */
declare const styles$3: _microsoft_fast_element.ElementStyles;

declare const template$3: ElementViewTemplate<MenuList>;

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-menu-list>
 */
declare const definition$j: _microsoft_fast_element.FASTElementDefinition<typeof MenuList>;

/**
 * The position variations for the menu component
 * @public
 */
declare const MenuPositions: {
    readonly above: "above";
    readonly below: "below";
};
/**
 * The types for menu positions
 * @public
 */
type MenuPosition = ValuesOf<typeof MenuPositions>;
/**
 * Reposition modes for the menu
 * @public
 */
declare const MenuRepositionModes: {
    readonly auto: "auto";
    readonly none: "none";
};
/**
 * Reposition mode type for the menu
 * @public
 */
type MenuRepositionMode = ValuesOf<typeof MenuRepositionModes>;

/**
 * Menu
 * @summary A Menu component that provides an interactive menu interface with support for various trigger and open behaviors.
 *
 * @example
 * ```html
 * <fabric-menu open-on-hover="true" open-on-context="true" close-on-scroll="true" persist-on-item-click="true">
 *   <div slot="trigger">Menu Trigger</div>
 *   <ul>
 *     <li>Menu Item 1</li>
 *     <li>Menu Item 2</li>
 *     <li>Menu Item 3</li>
 *   </ul>
 * </fabric-menu>
 * ```
 *
 * @attr {boolean | undefined} open-on-hover - Determines if the menu should open on hover.
 * @attr {boolean | undefined} open-on-context - Determines if the menu should open on right click.
 * @attr {boolean | undefined} close-on-scroll - Determines if the menu should close on scroll.
 * @attr {boolean | undefined} persist-on-item-click - Determines if the menu open state should persist on click of a menu item.
 * @attr {boolean | undefined} split - Determines if the menu is in split state (for split button pattern).
 * @attr {MenuPosition | undefined} menu-position - Determines whether the menu list is above or below the trigger.
 * @attr {MenuRepositionMode | undefined} reposition-mode - The mode for repositioning the menu. Default is "none".
 *
 * @prop {boolean | undefined} openOnHover - Determines if the menu should open on hover.
 * @prop {boolean | undefined} openOnContext - Determines if the menu should open on right click.
 * @prop {boolean | undefined} closeOnScroll - Determines if the menu should close on scroll.
 * @prop {boolean | undefined} persistOnItemClick - Determines if the menu open state should persist on click of a menu item.
 * @prop {boolean | undefined} split - Determines if the menu is in split state.
 * @prop {MenuList[]} slottedMenuList - Holds the slotted menu list.
 * @prop {HTMLElement[]} slottedTriggers - Holds the slotted triggers.
 * @prop {MenuPosition | undefined} menuPosition - Determines whether the menu list is above or below the trigger.
 * @prop {MenuRepositionMode | undefined} repositionMode - The mode for repositioning the menu.
 * @prop {HTMLElement | undefined} overflowBoundary - The overflow boundary element reference.
 *
 * @slot primary-action - Slot for the primary action element (used when split is true).
 * @slot trigger - Slot for the trigger element.
 * @slot - Default slot for the menu list.
 *
 * @csspart trigger - Represents the trigger element of the menu.
 * @csspart menu-list - Represents the menu list element.
 *
 * @method toggleMenu - Toggles the open state of the menu.
 * @method closeMenu - Closes the menu.
 * @method openMenu - Opens the menu.
 * @method focusMenuList - Focuses on the menu list.
 * @method focusTrigger - Focuses on the menu trigger.
 * @method menuKeydownHandler - Handles keyboard interaction for the menu.
 * @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
 *
 * @fires toggle - Event fired when the menu is toggled.
 * @fires change - Event fired when the state of a menu item changes.
 *
 * @extends FASTElement
 * @tagname fabric-menu
 * @public
 */
declare class Menu extends FASTElement {
    /**
     * The positioning instance for the menu.
     * @private
     */
    private positioning;
    /**
     * The intersection observer for tracking overflow.
     * @private
     */
    private intersectionObserver;
    /**
     * The original position before repositioning.
     * @private
     */
    private originalMenuPosition;
    /**
     * The array of open positions based on collision detection.
     * @private
     */
    private openPositions;
    /**
     * Determines if the menu should open on hover.
     * @public
     */
    openOnHover?: boolean;
    /**
     * Determines if the menu should open on right click.
     * @public
     */
    openOnContext?: boolean;
    /**
     * Determines if the menu should close on scroll.
     * @public
     */
    closeOnScroll?: boolean;
    /**
     * Determines if the menu open state should persis on click of menu item
     * @public
     */
    persistOnItemClick?: boolean;
    /**
     * Determines if the menu is in split state (for split button pattern).
     * @public
     */
    split?: boolean;
    /**
     * Determines whether the menu list is above or below the trigger.
     * @public
     */
    menuPosition?: MenuPosition;
    /**
     * The mode for repositioning the menu when it overflows the boundary.
     * @public
     * @default "auto"
     */
    repositionMode?: MenuRepositionMode;
    /**
     * The overflow boundary element reference.
     * @public
     */
    overflowBoundary?: HTMLElement;
    /**
     * Holds the slotted menu list.
     * @public
     */
    slottedMenuList: MenuList[];
    /**
     * Holds the slotted triggers.
     * @public
     */
    slottedTriggers: HTMLElement[];
    /**
     * Defines whether the menu is open or not.
     * @internal
     */
    private _open;
    /**
     * The trigger element of the menu.
     * @internal
     */
    private _trigger?;
    /**
     * The menu list element of the menu which has the popover behavior.
     * @internal
     */
    private _menuList?;
    /**
     * Creates the overflow handler using IntersectionObserver.
     * Note: When a custom overflowBoundary is set, we use direct rect calculations
     * instead because popovers render in the top layer and IntersectionObserver
     * with a custom root won't work correctly.
     * @private
     */
    private createOverflowHandler;
    /**
     * Checks overflow against custom boundary using direct rect calculations.
     * Delegates to MenuPositioning for the actual calculation.
     * @private
     */
    private checkOverflowWithBoundary;
    /**
     * Handles overflow collisions with the menu.
     * @private
     */
    private handleOverflow;
    /**
     * Applies height constraint to make menu scrollable when space is limited.
     * @private
     */
    private applyHeightConstraint;
    /**
     * Clears height constraint from the menu.
     * @private
     */
    private clearHeightConstraint;
    /**
     * Repositions the menu based on collisions.
     * @private
     */
    private repositionMenu;
    /**
     * Releases positions and restores original if valid.
     * @private
     */
    private releasePositions;
    /**
     * Observes the menu for overflow.
     * @private
     */
    private observeMenuOverflow;
    /**
     * Updates the menu position on window changes.
     * @private
     */
    private updateMenuPosition;
    /**
     * Debounced handler for window changes.
     * @private
     */
    private handleWindowChanges;
    /**
     * Adds window event listeners.
     * @private
     */
    private addWindowEventListeners;
    /**
     * Removes window event listeners.
     * @private
     */
    private removeWindowEventListeners;
    /**
     * Adds overflow boundary event listeners.
     * @private
     */
    private addOverflowBoundaryEventListeners;
    /**
     * Adds repositioning handlers.
     * @private
     */
    private addRepositioningHandlers;
    /**
     * Creates the positioning manager.
     * @private
     */
    private createPositioningManager;
    /**
     * Removes repositioning event listeners.
     * @private
     */
    private removeRepositioningListeners;
    /**
     * Called when the element is connected to the DOM.
     * @public
     */
    connectedCallback(): void;
    /**
     * Called when the element is disconnected from the DOM.
     * @public
     */
    disconnectedCallback(): void;
    /**
     * Sets the component.
     * @public
     */
    setComponent(): void;
    /**
     * Sets the menu position.
     * @public
     */
    setMenuPosition(): void;
    /**
     * Toggles the open state of the menu.
     * @public
     */
    toggleMenu: () => void;
    /**
     * Closes the menu.
     * @public
     */
    closeMenu: () => void;
    /**
     * Opens the menu.
     * @public
     */
    openMenu: (e?: Event) => void;
    /**
     * Focuses on the menu list.
     * @public
     */
    focusMenuList(): void;
    /**
     * Focuses on the menu trigger.
     * @public
     */
    focusTrigger(): void;
    /**
     * Handles the 'toggle' event on the popover.
     * @public
     * @param e - the event
     * @returns void
     */
    toggleHandler: (e: Event | ToggleEvent) => void;
    /**
     * Called whenever the 'openOnHover' property changes.
     *
     * @param oldValue - The previous value of 'openOnHover'.
     * @param newValue - The new value of 'openOnHover'.
     * @public
     */
    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Called whenever the 'persistOnItemClick' property changes.
     *
     * @public
     * @param oldValue - The previous value of 'persistOnItemClick'.
     * @param newValue - The new value of 'persistOnItemClick'.
     */
    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Called whenever the 'menuPosition' property changes.
     *
     * @param oldValue - The previous value of 'menuPosition'.
     * @param newValue - The new value of 'menuPosition'.
     * @public
     */
    menuPositionChanged(): void;
    /**
     * Called whenever the 'repositionMode' property changes.
     *
     * @public
     * @param oldValue - The previous value of 'repositionMode'.
     * @param newValue - The new value of 'repositionMode'.
     */
    repositionModeChanged(oldValue: MenuRepositionMode, newValue: MenuRepositionMode): void;
    /**
     * Called whenever the 'openOnContext' property changes.
     *
     * @public
     * @param oldValue - The previous value of 'openOnContext'.
     * @param newValue - The new value of 'openOnContext'.
     */
    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Called whenever the 'closeOnScroll' property changes.
     *
     * @public
     * @param oldValue - The previous value of 'closeOnScroll'.
     * @param newValue - The new value of 'closeOnScroll'.
     */
    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Adds event listeners.
     *
     * @internal
     */
    private addListeners;
    /**
     * Removes event listeners.
     *
     * @internal
     */
    private removeListeners;
    /**
     * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
     *
     * @param e - the keyboard event
     * @public
     */
    menuKeydownHandler(e: KeyboardEvent): boolean | void;
    /**
     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
     *
     * @param e - the keyboard event
     * @public
     */
    triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
    /**
     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
     * @internal
     * @param e - The event triggered on document click.
     */
    private documentClickHandler;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-menu>
 */
declare const definition$i: _microsoft_fast_element.FASTElementDefinition<typeof Menu>;

/** Menu styles
 * @public
 */
declare const styles$2: _microsoft_fast_element.ElementStyles;

declare const template$2: ElementViewTemplate<Menu>;

/**
 * OptionGroup
 * @summary An OptionGroup Custom HTML Element that groups related options within a listbox or dropdown.
 * Implements semantics similar to the native {@link https://developer.mozilla.org/docs/Web/HTML/Element/optgroup | HTMLOptGroupElement}.
 *
 * @example
 * ```html
 * <fabric-listbox>
 *   <fabric-option-group label="Fruits">
 *     <fabric-option value="apple">Apple</fabric-option>
 *     <fabric-option value="banana">Banana</fabric-option>
 *   </fabric-option-group>
 *   <fabric-option-group label="Vegetables" disabled>
 *     <fabric-option value="carrot">Carrot</fabric-option>
 *     <fabric-option value="broccoli">Broccoli</fabric-option>
 *   </fabric-option-group>
 * </fabric-listbox>
 * ```
 *
 * @attr {string} label - The label for the option group, displayed as a non-selectable header.
 * @attr {boolean} disabled - When true, disables all options within this group.
 *
 * @prop {DropdownOption[]} options - The collection of child option elements.
 *
 * @slot - Default slot for fabric-option elements.
 *
 * @csspart label - The label element for the group header.
 *
 * @extends FASTElement
 * @tagname fabric-option-group
 * @public
 */
declare class OptionGroup extends FASTElement {
    /**
     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | ElementInternals} instance for the component.
     *
     * @internal
     */
    elementInternals: ElementInternals;
    /**
     * The label for the option group. Displayed as a non-selectable header.
     *
     * @public
     * @remarks
     * HTML Attribute: label
     */
    label: string;
    /**
     * The disabled state of the option group.
     * When true, all child options are also disabled.
     *
     * @public
     * @remarks
     * HTML Attribute: disabled
     */
    disabled?: boolean;
    /**
     * The collection of slotted option elements.
     *
     * @internal
     */
    slottedOptions: Element[];
    /**
     * Gets the collection of child option elements.
     *
     * @public
     */
    get options(): DropdownOption[];
    /**
     * Handles changes to the disabled attribute.
     * Updates the aria-disabled state on the element internals.
     *
     * @param prev - The previous disabled state.
     * @param next - The new disabled state.
     * @internal
     */
    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
    connectedCallback(): void;
    /**
     * Handles changes to the label attribute.
     * Updates the aria-label for accessibility.
     *
     * @param _prev - The previous label.
     * @param next - The new label.
     * @internal
     */
    labelChanged(_prev: string | undefined, next: string | undefined): void;
}

/**
 * The Fabric OptionGroup Element definition.
 *
 * @public
 * @remarks
 * HTML Element: `<fabric-option-group>`
 */
declare const definition$h: _microsoft_fast_element.FASTElementDefinition<typeof OptionGroup>;

/**
 * Styles for the {@link @fabric-msft/fabric-web#(OptionGroup:class)} component.
 *
 * @public
 */
declare const styles$1: _microsoft_fast_element.ElementStyles;

declare const template$1: ElementViewTemplate<OptionGroup>;

/**
 * Predicate function that determines if the element should be considered an option group.
 * Uses duck-typing by checking for the presence of an `options` array property
 * rather than relying on the tag name, making it prefix-agnostic.
 *
 * @param element - The element to check.
 * @returns true if the element is an option group.
 * @public
 */
declare function isOptionGroup(element?: Element | null): element is OptionGroup;
/**
 * Gets the dropdown options from an element, handling both direct options and option groups.
 *
 * @param element - The element to extract options from.
 * @returns An array of DropdownOption elements.
 * @public
 */
declare function getOptionsFromElement(element: Element): DropdownOption[];

/**
 * ProgressBar
 * @summary A custom progress bar element with customizable thickness, shape, and validation states.
 *
 * @example
 * ```html
 * <fabric-progress-bar thickness="large" shape="rounded" validation-state="success"></fabric-progress-bar>
 * ```
 *
 * @attr {ProgressBarThickness} thickness - The thickness of the progress bar. Possible values are 'medium' and 'large'.
 * @attr {ProgressBarShape} shape - The shape of the progress bar. Possible values are 'rounded' and 'square'.
 * @attr {ProgressBarValidationState} validation-state - The validation state of the progress bar. Possible values are 'success', 'warning', and 'error'.
 *
 * @prop {ProgressBarThickness} thickness - The thickness of the progress bar. Possible values are 'medium' and 'large'.
 * @prop {ProgressBarShape} shape - The shape of the progress bar. Possible values are 'rounded' and 'square'.
 * @prop {ProgressBarValidationState} validationState - The validation state of the progress bar. Possible values are 'success', 'warning', and 'error'.
 *
 * @csspart indicator - The progress bar indicator.
 *
 * @cssprop --indicator-width - Computed percentage width of the progress indicator, based on the current value, min, and max.
 * @cssprop --max - CSS variable reflecting the max attribute value. Defaults to 100.
 * @cssprop --min - CSS variable reflecting the min attribute value. Defaults to 0.
 * @cssprop --value - CSS variable reflecting the current value attribute. Defaults to 0.
 *
 * @extends FluentProgressBar
 * @tagname fabric-progress-bar
 * @public
 */
declare class ProgressBar extends ProgressBar$1 {
}

/**
 * The Fabric Progress Bar component.
 *
 * @public
 */
declare const definition$g: _microsoft_fast_element.FASTElementDefinition<typeof ProgressBar>;

/** Shape values for {@link ProgressBar}. */
declare const ProgressBarShapes: {
    readonly rounded: "rounded";
    readonly square: "square";
};
type ProgressBarShape = ValuesOf<typeof ProgressBarShapes>;
/** Thickness values for {@link ProgressBar}. */
declare const ProgressBarThicknesses: {
    readonly medium: "medium";
    readonly large: "large";
};
type ProgressBarThickness = ValuesOf<typeof ProgressBarThicknesses>;
/** Validation state values for {@link ProgressBar}. */
declare const ProgressBarValidationStates: {
    readonly success: "success";
    readonly warning: "warning";
    readonly error: "error";
};
type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationStates>;

/**
 * RadioGroup
 * @summary A custom Radio Group element based on Fluent UI's RadioGroup with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-radio-group name="group1" orientation="horizontal">
 *   <fabric-radio value="option1">Option 1</fabric-radio>
 *   <fabric-radio value="option2">Option 2</fabric-radio>
 *   <fabric-radio value="option3">Option 3</fabric-radio>
 * </fabric-radio-group>
 * ```
 *
 * @attr {boolean} disabled - Disables the radio group and child radios.
 * @attr {string} value - The value of the checked radio.
 * @attr {string} name - The name of the radio group.
 * @attr {RadioGroupOrientation} orientation - The orientation of the group.
 * @attr {boolean} required - Indicates whether the radio group is required.
 *
 * @prop {boolean} disabled - Disables the radio group and child radios.
 * @prop {string} value - The value of the checked radio.
 * @prop {string} name - The name of the radio group.
 * @prop {RadioGroupOrientation} orientation - The orientation of the group.
 * @prop {boolean} required - Indicates whether the radio group is required.
 *
 * @slot - The default slot for the radio group.
 *
 * @method initialValueChanged - Sets the matching radio to checked when the value changes.
 * @method radiosChanged - Updates the enabled radios collection when properties on the child radios change.
 * @method requiredChanged - Called when the required property changes.
 * @method changeHandler - Sets the checked state of all radios when any radio emits a `change` event.
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method formResetCallback - Resets the radio group to its initial state during a form reset.
 * @method reportValidity - Reports the validity of the element.
 *
 * @fires change - Emits when the checked radio changes.
 *
 * @extends FASTElement
 * @tagname fabric-radio-group
 * @public
 */
declare class RadioGroup extends RadioGroup$1 {
}

/** Orientation values for {@link RadioGroup}. */
declare const RadioGroupOrientations: {
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
/** Type describing orientation options for {@link RadioGroup}. */
type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientations>;

/**
 * The Fabric Radio Group component.
 *
 * @public
 */
declare const definition$f: _microsoft_fast_element.FASTElementDefinition<typeof RadioGroup>;

/**
 * Radio
 * @summary A Radio Custom HTML Element based on Fluent UI's Radio with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-radio name="group1" value="option1" checked>
 *   Option 1
 * </fabric-radio>
 * <fabric-radio name="group1" value="option2">
 *   Option 2
 * </fabric-radio>
 * ```
 *
 * @attr {boolean} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @attr {boolean} disabled - The initial disabled state of the control.
 * @attr {string} form - The id of a form to associate the element to.
 * @attr {boolean} checked - The initial checked state of the element.
 * @attr {string} value - The initial value of the input.
 * @attr {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 *
 * @prop {boolean} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @prop {boolean} disabled - The initial disabled state of the control.
 * @prop {string} form - The id of a form to associate the element to.
 * @prop {boolean} checked - The initial checked state of the element.
 * @prop {string} value - The initial value of the input.
 * @prop {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 *
 * @slot checked-indicator - Custom slot for the checked indicator.
 *
 * @csspart checked-indicator - The checked state indicator of the radio.
 * @cssprop --size - Controls the size of the radio control.
 *
 * @method toggleChecked - Toggles the checked state of the control.
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method reportValidity - Reports the validity of the element.
 * @method setCustomValidity - Sets a custom validity message.
 *
 * @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 disabled - Emits a custom event when the disabled state changes
 *
 * @extends FluentRadio
 * @tagname fabric-radio
 * @public
 */
declare class Radio extends Radio$1 {
}

/**
 * The Fabric Radio component.
 *
 * @public
 */
declare const definition$e: _microsoft_fast_element.FASTElementDefinition<typeof Radio>;

/**
 * RatingDisplay
 * @summary A Rating Display Custom HTML Element. Based on FluentRatingDisplay and includes style and layout specific attributes.
 *
 * @example
 * ```html
 * <fabric-rating-display color="marigold" size="large" compact>
 *   <svg slot="icon" viewBox="0 0 20 20"><use href="#star"></use></svg>
 *   <span slot="value">4.5</span>
 *   <span slot="count">(10)</span>
 * </fabric-rating-display>
 * ```
 *
 * @attr {RatingDisplayColor | undefined} color - The color of the rating display icons. Default: `marigold`
 * @attr {RatingDisplaySize | undefined} size - The size of the component. Default: 'medium'
 * @attr {boolean | undefined} compact - Renders a single filled icon with a label next to it. Default: false
 *
 * @prop {boolean} compact - Renders a single filled icon with a label next to it. Default: false
 *
 * @slot icon - SVG element used as the rating icon. Default: star symbol.
 * @slot value - Displays the value of the rating.
 * @slot count - Displays the number of ratings.
 *
 * @cssprop --_attr-max - Internal max value derived from the max attribute.
 * @cssprop --_attr-value - Internal value derived from the value attribute.
 * @cssprop --_default-max - Default max fallback used when no attribute is set.
 * @cssprop --_default-value - Default value fallback used when no attribute is set.
 * @cssprop --_icon-color-empty - Color for empty (unfilled) icons.
 * @cssprop --_icon-color-value - Color for the filled icon portion.
 * @cssprop --_icon-gradient-degree - Gradient angle used for partial fill rendering.
 * @cssprop --_icon-gradient-stop - Primary gradient stop for partial fill.
 * @cssprop --_icon-gradient-stop-visual-adjustment - Adjustment applied to the gradient stop to align visuals.
 * @cssprop --_icon-size - Computed icon size used for layout.
 * @cssprop --_mask-image-filled - Mask image for the filled icon state.
 * @cssprop --_mask-image-outlined - Mask image for the outlined icon state.
 * @cssprop --_mask-inline-size - Inline size of the mask image.
 * @cssprop --_mask-position-x - Horizontal mask position used for partial fill.
 * @cssprop --_max - Computed max value used in layout calculations.
 * @cssprop --_value - Computed current value used in layout calculations.
 *
 * @extends FluentRatingDisplay
 * @tagname fabric-rating-display
 * @public
 */
declare class RatingDisplay extends RatingDisplay$1 {
}

/**
 * @public
 * @remarks
 * HTML Element: <fabric-rating-display>
 */
declare const definition$d: _microsoft_fast_element.FASTElementDefinition<typeof RatingDisplay>;

/** Color values for {@link RatingDisplay}. */
declare const RatingDisplayColors: {
    readonly neutral: "neutral";
    readonly brand: "brand";
    readonly marigold: "marigold";
};
/** Type describing color options for {@link RatingDisplay}. */
type RatingDisplayColor = ValuesOf<typeof RatingDisplayColors>;
/** Size values for {@link RatingDisplay}. */
declare const RatingDisplaySizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/** Type describing size options for {@link RatingDisplay}. */
type RatingDisplaySize = ValuesOf<typeof RatingDisplaySizes>;

/**
 * TextInput configuration options.
 *
 * @public
 */
type TextInputOptions = StartEndOptions<TextInput>;
/**
 * Values for the `control-size` attribute on TextInput elements.
 *
 * @public
 */
declare const TextInputControlSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
type TextInputControlSize = ValuesOf<typeof TextInputControlSizes>;
/**
 * Values for the `appearance` attribute on TextInput elements.
 *
 * @public
 */
declare const TextInputAppearances: {
    readonly outline: "outline";
    readonly underline: "underline";
    readonly filledLighter: "filled-lighter";
    readonly filledDarker: "filled-darker";
};
type TextInputAppearance = ValuesOf<typeof TextInputAppearances>;
/**
 * Values for the `type` attribute on TextInput elements.
 *
 * @public
 */
declare const TextInputTypes: {
    readonly email: "email";
    readonly password: "password";
    readonly number: "number";
    readonly tel: "tel";
    readonly text: "text";
    readonly url: "url";
};
type TextInputType = ValuesOf<typeof TextInputTypes>;
/**
 * Input types that block implicit form submission.
 *
 * @public
 */
declare const ImplicitSubmissionBlockingTypes$1: string[];

/**
 * A Text Input Custom HTML Element.
 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
 *
 * @slot start - Content which can be provided before the input
 * @slot end - Content which can be provided after the input
 * @slot - The default slot for button content
 * @csspart label - The internal `<label>` element
 * @csspart root - the root container for the internal control
 * @csspart control - The internal `<input>` control
 * @public
 */
declare class BaseTextInput extends FASTElement {
    /**
     * Indicates the element's autocomplete state.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
     *
     * @public
     * @remarks
     * 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
     * @remarks
     * HTML Attribute: `current-value`
     */
    currentValue: string;
    /**
     * Tracks the current value of the input.
     *
     * @param prev - the previous value
     * @param next - the next value
     *
     * @internal
     */
    currentValueChanged(prev: string, next: string): void;
    /**
     * The default slotted content. This is the content that appears in the text field label.
     *
     * @internal
     */
    defaultSlottedNodes: Node[];
    /**
     * Updates the control label visibility based on the presence of default slotted content.
     *
     * @internal
     */
    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
    /**
     * Sets the directionality of the element to be submitted with form data.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `dirname`
     */
    dirname?: string;
    /**
     * Sets the element's disabled state.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `disabled`
     */
    disabled?: boolean;
    /**
     * The id of a form to associate the element to.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `form`
     */
    formAttribute?: string;
    /**
     * The initial value of the input.
     *
     * @public
     * @remarks
     * HTML Attribute: `value`
     */
    initialValue: string;
    /**
     * Sets the value of the element to the initial value.
     *
     * @internal
     */
    initialValueChanged(): void;
    /**
     * Allows associating a `<datalist>` to the element by ID.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#list | `list`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `list`
     */
    list: string;
    /**
     * The maximum number of characters a user can enter.
     *
     * @public
     * @remarks
     * HTML Attribute: `maxlength`
     */
    maxlength: number;
    /**
     * The minimum number of characters a user can enter.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `minlength`
     */
    minlength: number;
    /**
     * Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple | `multiple`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `multiple`
     */
    multiple: boolean;
    /**
     * The name of the element. This element's value will be surfaced during form submission under the provided name.
     *
     * @public
     * @remarks
     * HTML Attribute: `name`
     */
    name: string;
    /**
     * A regular expression that the value must match to pass validation.
     *
     * @public
     * @remarks
     * HTML Attribute: `pattern`
     */
    pattern: string;
    /**
     * Sets the placeholder value of the element, generally used to provide a hint to the user.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `placeholder`
     * This attribute is not a valid substitute for a label.
     */
    placeholder: string;
    /**
     * When true, the control will be immutable by user interaction.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `readonly`
     */
    readOnly?: boolean;
    /**
     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
     *
     * @internal
     */
    readOnlyChanged(): void;
    /**
     * The element's required attribute.
     *
     * @public
     * @remarks
     * HTML Attribute: `required`
     */
    required: boolean;
    /**
     * Syncs the element's internal `aria-required` state with the `required` attribute.
     *
     * @param previous - the previous required state
     * @param next - the current required state
     *
     * @internal
     */
    requiredChanged(previous: boolean, next: boolean): void;
    /**
     * Sets the width of the element to a specified number of characters.
     *
     * @public
     * @remarks
     * HTML Attribute: `size`
     */
    size: number;
    /**
     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
     *
     * @public
     * @remarks
     * HTML Attribute: `spellcheck`
     */
    spellcheck: boolean;
    /**
     * Allows setting a type or mode of text.
     *
     * @public
     * @remarks
     * HTML Attribute: `type`
     */
    type: TextInputType;
    /**
     * A reference to the internal input element.
     *
     * @internal
     */
    control: HTMLInputElement;
    /**
     * Calls the `setValidity` method when the control reference changes.
     *
     * @param prev - the previous control reference
     * @param next - the current control reference
     *
     * @internal
     */
    controlChanged(_prev: HTMLInputElement | undefined, _next: HTMLInputElement | undefined): void;
    /**
     * A reference to the internal label element.
     *
     * @internal
     */
    controlLabel: HTMLLabelElement;
    /**
     * Indicates that the value has been changed by the user.
     *
     * @internal
     */
    private dirtyValue;
    /**
     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
     *
     * @internal
     */
    elementInternals: ElementInternals;
    /**
     * The form-associated flag.
     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
     *
     * @public
     */
    static readonly formAssociated = true;
    /**
     * The element's validity state.
     *
     * @public
     * @remarks
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
     */
    get validity(): ValidityState;
    /**
     * The validation message.
     *
     * @public
     * @remarks
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
     */
    get validationMessage(): string;
    /**
     * The current value of the input.
     * @public
     */
    get value(): string;
    set value(value: string);
    /**
     * Determines if the control can be submitted for constraint validation.
     *
     * @public
     * @remarks
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
     */
    get willValidate(): boolean;
    /**
     * The associated form element.
     *
     * @public
     * @remarks
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
     */
    get form(): HTMLFormElement | null;
    /**
     * Handles the internal control's `keypress` event.
     *
     * @internal
     */
    beforeinputHandler(e: InputEvent): boolean | void;
    /**
     * Change event handler for inner control.
     *
     * @internal
     * @privateRemarks
     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
     */
    changeHandler(e: InputEvent): boolean | void;
    /**
     * Checks the validity of the element and returns the result.
     *
     * @public
     * @remarks
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
     */
    checkValidity(): boolean;
    /**
     * Clicks the inner control when the component is clicked.
     *
     * @param e - the event object
     */
    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.
     *
     * @internal
     */
    formResetCallback(): void;
    /**
     * Handles implicit form submission when the user presses the "Enter" key.
     *
     * @internal
     */
    private implicitSubmit;
    /**
     * Handles the internal control's `input` event.
     *
     * @internal
     */
    inputHandler(_e: InputEvent): boolean | void;
    /**
     * Handles the internal control's `keydown` event.
     *
     * @param e - the event object
     * @internal
     */
    keydownHandler(e: KeyboardEvent): boolean | void;
    /**
     * Selects all the text in the text field.
     *
     * @public
     * @privateRemarks
     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
     * emitting a `select` event whenever the internal control emits a `select` event
     *
     */
    select(): void;
    /**
     * Sets the custom validity message.
     * @param message - The message to set
     *
     * @public
     */
    setCustomValidity(message: string): void;
    /**
     * Reports the validity of the element.
     *
     * @public
     * @remarks
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
     */
    reportValidity(): boolean;
    /**
     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
     *
     * @internal
     */
    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
    /**
     * Sets the validity of the control.
     *
     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
     *
     * @internal
     */
    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
}

/**
 * TextInput
 * @summary A custom text input element based on Fluent UI's TextInput with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-text-input appearance="outline" control-size="medium" type="text" placeholder="Enter text here...">
 *   <span slot="start">🔍</span>
 *   <span slot="end">✖️</span>
 * </fabric-text-input>
 * ```
 *
 * @attr {string | undefined} appearance - Indicates the styled appearance of the element.
 * @attr {string | undefined} control-size - Sets the size of the control.
 * @attr {string | undefined} autocomplete - Indicates the element's autocomplete state.
 * @attr {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @attr {string} current-value - The current value of the input.
 * @attr {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
 * @attr {boolean | undefined} disabled - Sets the element's disabled state.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
 * @attr {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @attr {number | undefined} minlength - The minimum number of characters a user can enter.
 * @attr {boolean | undefined} multiple - Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {string | undefined} pattern - A regular expression that the value must match to pass validation.
 * @attr {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @attr {boolean | undefined} readonly - When true, the control will be immutable by user interaction.
 * @attr {boolean | undefined} required - The element's required attribute.
 * @attr {number | undefined} size - Sets the width of the element to a specified number of characters.
 * @attr {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
 * @attr {string | undefined} type - Allows setting a type or mode of text.
 * @attr {string} value - The initial value of the input.
 *
 * @prop {string | undefined} appearance - Indicates the styled appearance of the element.
 * @prop {string | undefined} controlSize - Sets the size of the control.
 * @prop {string | undefined} autocomplete - Indicates the element's autocomplete state.
 * @prop {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @prop {string} currentValue - The current value of the input.
 * @prop {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
 * @prop {boolean | undefined} disabled - Sets the element's disabled state.
 * @prop {string | undefined} form - The id of a form to associate the element to.
 * @prop {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
 * @prop {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @prop {number | undefined} minlength - The minimum number of characters a user can enter.
 * @prop {boolean | undefined} multiple - Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`.
 * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {string | undefined} pattern - A regular expression that the value must match to pass validation.
 * @prop {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @prop {boolean | undefined} readOnly - When true, the control will be immutable by user interaction.
 * @prop {boolean | undefined} required - The element's required attribute.
 * @prop {number | undefined} size - Sets the width of the element to a specified number of characters.
 * @prop {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
 * @prop {string | undefined} type - Allows setting a type or mode of text.
 * @prop {string} value - The initial value of the input.
 *
 * @slot start - Content which can be provided before the input.
 * @slot end - Content which can be provided after the input.
 * @slot - The default slot for button content.
 *
 * @csspart label - The internal `<label>` element.
 * @csspart root - The root container for the internal control.
 * @csspart control - The internal `<input>` control.
 *
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method clickHandler - Clicks the inner control when the component is clicked.
 * @method focusinHandler - Focuses the inner control when the component is focused.
 * @method select - Selects all the text in the text field.
 * @method setCustomValidity - Sets the custom validity message.
 * @method reportValidity - Reports the validity of the element.
 *
 * @extends FluentTextInput
 * @tagname fabric-text-input
 * @public
 */
declare class TextInput extends BaseTextInput {
    /**
     * Indicates the styled appearance of the element.
     *
     * @public
     * @remarks
     * HTML Attribute: `appearance`
     */
    appearance?: TextInputAppearance;
    /**
     * Sets the size of the control.
     *
     * @public
     * @remarks
     * HTML Attribute: `control-size`
     */
    controlSize?: TextInputControlSize;
}
/**
 * @internal
 * @privateRemarks
 * Mark internal because exporting class and interface of the same name
 * confuses API documenter.
 * TODO: https://github.com/microsoft/rushstack/issues/1308
 */
interface TextInput extends StartEnd {
}

/**
 * SearchBox
 * @summary A SearchBox custom HTML input element based on Fluent UI's SearchBox. Inherits from fabric UX TextInput.
 *
 * @example
 * ```html
 * <fabric-search-box aria-label="Search Box" placeholder="Search..."></fabric-search-box>
 * ```
 *
 * @attr {string | undefined} appearance - Indicates the styled appearance of the element.
 * @attr {string | undefined} control-size - Sets the size of the control.
 * @attr {string | undefined} autocomplete - Indicates the element's autocomplete state.
 * @attr {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @attr {string} current-value - The current value of the input.
 * @attr {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
 * @attr {boolean | undefined} disabled - Sets the element's disabled state.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
 * @attr {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @attr {number | undefined} minlength - The minimum number of characters a user can enter.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {string | undefined} pattern - A regular expression that the value must match to pass validation.
 * @attr {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @attr {boolean | undefined} readonly - When true, the control will be immutable by user interaction.
 * @attr {boolean | undefined} required - The element's required attribute.
 * @attr {number | undefined} size - Sets the width of the element to a specified number of characters.
 * @attr {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
 * @attr {string | undefined} type - Allows setting a type or mode of text.
 * @attr {string} value - The initial value of the input.
 *
 * @prop {string | undefined} appearance - Indicates the styled appearance of the element.
 * @prop {string | undefined} controlSize - Sets the size of the control.
 * @prop {string | undefined} autocomplete - Indicates the element's autocomplete state.
 * @prop {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @prop {string} currentValue - The current value of the input.
 * @prop {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
 * @prop {boolean | undefined} disabled - Sets the element's disabled state.
 * @prop {string | undefined} form - The id of a form to associate the element to.
 * @prop {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
 * @prop {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @prop {number | undefined} minlength - The minimum number of characters a user can enter.
 * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {string | undefined} pattern - A regular expression that the value must match to pass validation.
 * @prop {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @prop {boolean | undefined} readOnly - When true, the control will be immutable by user interaction.
 * @prop {boolean | undefined} required - The element's required attribute.
 * @prop {number | undefined} size - Sets the width of the element to a specified number of characters.
 * @prop {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
 * @prop {string | undefined} type - Allows setting a type or mode of text.
 * @prop {string} value - The initial value of the input.
 * @prop {HTMLElement | undefined} clearButton - The clear button element.
 *
 * @slot start - Content which can be provided before the input.
 * @slot end - Content which can be provided after the input.
 * @slot - The default slot for input content.
 *
 * @csspart root - The root container for the internal control.
 * @csspart control - The internal `<input>` control.
 *
 * @fires change - Fires a custom 'change' event when the value has changed.
 * @fires input - Fires a custom 'input' event when the value has changed.
 * @fires search - Fires a custom 'submit' event when the search is submitted.
 * @fires select - Fired when text is selected in the input.
 *
 * @method clear - Clears the search box value and focuses the input.
 * @method currentValueChanged - Tracks the current value of the input and shows/hides the clear button.
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method select - Selects all the text in the text field.
 * @method setCustomValidity - Sets the custom validity message.
 * @method reportValidity - Reports the validity of the element.
 *
 * @extends TextInput
 * @tagname fabric-search-box
 * @public
 */
declare class SearchBox extends TextInput {
    type: "text";
    /**
     * The clear button element.
     */
    clearButton: HTMLElement | undefined;
    /** Focuses the input element */
    focus(): void;
    /** Blurs the input element */
    blur(): void;
    /** Show the clear button */
    private showClearButton;
    /** Hide the clear button */
    private hideClearButton;
    /**
     * Tracks the current value of the input.
     *
     * @param prev - the previous value
     * @param next - the next value
     *
     * @internal
     */
    currentValueChanged(prev: string, next: string): void;
    /**
     * Clear the search box value
     * @method
     */
    clear(): void;
    /** Handle the submit action */
    private handleSubmit;
    /**
     * Emits the search event.
     *
     * @fires search - Fired when a search is submitted.
     */
    private emitSearch;
    private handleKeydown;
    connectedCallback(): void;
    disconnectedCallback(): void;
}

/**
 *
 * @public
 * @remarks
 * HTML Element: <fabric-search-box>
 */
declare const definition$c: _microsoft_fast_element.FASTElementDefinition<typeof SearchBox>;

/**
 * Values for the `control-size` attribute on SearchBox elements.
 *
 * @public
 */
declare const SearchBoxControlSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
type SearchBoxControlSize = ValuesOf<typeof SearchBoxControlSizes>;
/**
 * Values for the `appearance` attribute on SearchBox elements.
 *
 * @public
 */
declare const SearchBoxAppearances: {
    readonly outline: "outline";
    readonly underline: "underline";
    readonly filledLighter: "filled-lighter";
    readonly filledDarker: "filled-darker";
};
type SearchBoxAppearance = ValuesOf<typeof SearchBoxAppearances>;
/**
 * Values for the `type` attribute on SearchBox elements.
 *
 * @public
 */
declare const SearchBoxTypes: {
    readonly email: "email";
    readonly password: "password";
    readonly number: "number";
    readonly tel: "tel";
    readonly text: "text";
    readonly url: "url";
};
type SearchBoxType = ValuesOf<typeof SearchBoxTypes>;
/**
 * Input types that block implicit form submission.
 *
 * @public
 */
declare const ImplicitSubmissionBlockingTypes: string[];
/**
 * SearchBox event names.
 *
 * @public
 */
declare const SearchBoxEventNames: {
    readonly search: "search";
};

/**
 * Slider
 * @summary A Slider Custom HTML Element based on Fluent UI's Slider with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-slider min="0" max="10" step="1" value="5" orientation="horizontal">
 *   <div slot="thumb" class="custom-thumb"></div>
 * </fabric-slider>
 * ```
 *
 * @attr {SliderSize | undefined} size - The size of the slider.
 * @attr {string} value - The initial value of the input.
 * @attr {boolean} disabled - The element's disabled state.
 * @attr {number} min - The minimum allowed value.
 * @attr {number} max - The maximum allowed value.
 * @attr {number} step - Value to increment or decrement via arrow keys, mouse click or drag.
 * @attr {SliderOrientation | undefined} orientation - The orientation of the slider.
 * @attr {SliderMode | undefined} mode - The selection mode.
 *
 * @prop {SliderSize | undefined} size - The size of the slider.
 * @prop {string} value - The initial value of the input.
 * @prop {boolean} disabled - The element's disabled state.
 * @prop {number} min - The minimum allowed value.
 * @prop {number} max - The maximum allowed value.
 * @prop {number} step - Value to increment or decrement via arrow keys, mouse click or drag.
 * @prop {SliderOrientation | undefined} orientation - The orientation of the slider.
 * @prop {SliderMode | undefined} mode - The selection mode.
 *
 * @slot thumb - The slot for a custom thumb element.
 *
 * @csspart track-container - The container element of the track.
 * @csspart thumb-container - The container element of the thumb.
 *
 * @cssprop --border-radius - Sets the border radius for the track and thumb.
 * @cssprop --rail-color - Sets the color of the unfilled rail.
 * @cssprop --slider-direction - Defines the direction used to calculate the track styling.
 * @cssprop --slider-progress - Represents the current progress for styling the track.
 * @cssprop --slider-thumb - Defines the thumb styling for the slider.
 * @cssprop --step-marker-inset - Offsets step markers relative to the track.
 * @cssprop --step-rate - Defines the spacing rate for step markers.
 * @cssprop --thumb-size - Sets the size of the slider thumb.
 * @cssprop --track-color - Sets the color of the filled track.
 * @cssprop --track-margin-inline - Sets the inline margin for the track.
 * @cssprop --track-overhang - Controls how far the track extends past the thumb.
 * @cssprop --track-size - Sets the thickness of the track.
 *
 * @method handleChange - Handles changes to the slider's value.
 * @method handleStepStyles - Handles changes to step styling based on the step value.
 * @method checkValidity - Checks the element's validity.
 * @method reportValidity - Reports the element's validity.
 * @method setCustomValidity - Sets a custom validity message.
 * @method directionChanged - Called when the direction changes.
 * @method increment - Increment the value by the step.
 * @method decrement - Decrement the value by the step.
 * @method handleKeydown - Handles keydown events for the slider.
 * @method setSliderPosition - Places the thumb based on the current value.
 * @method updateStepMultiplier - Update the step multiplier used to ensure rounding errors from steps that are not whole numbers.
 * @method convertToConstrainedValue - Converts a given value to a constrained value within the slider's min and max.
 * @method setDisabledSideEffect - Makes sure the side effects are set up when the disabled state changes.
 *
 * @fires change - Fires a custom 'change' event when the value changes.
 *
 * @extends FluentSlider
 * @tagname fabric-slider
 * @public
 */
declare class Slider extends Slider$1 {
}

/** Selection mode values for {@link Slider}. */
declare const SliderModes: {
    readonly singleValue: "single-value";
};
/** Single selection mode value for {@link Slider}. */
type SliderMode = ValuesOf<typeof SliderModes>;
/** Orientation values for {@link Slider}. */
declare const SliderOrientations: {
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
/** Single orientation value for {@link Slider}. */
type SliderOrientation = ValuesOf<typeof SliderOrientations>;
/** Size values for {@link Slider}. */
declare const SliderSizes: {
    readonly small: "small";
    readonly medium: "medium";
};
/** Single size value for {@link Slider}. */
type SliderSize = ValuesOf<typeof SliderSizes>;
/** Event names for {@link Slider}. */
declare const SliderEventNames: {
    readonly change: "change";
};

/**
 * The Fabric Slider component.
 *
 * @public
 */
declare const definition$b: _microsoft_fast_element.FASTElementDefinition<typeof Slider>;

/**
 * Spinner
 * @summary A Fabric UI Spinner component that provides a visual indication of loading state with customizable size and appearance.
 *
 * @example
 * ```html
 * <fabric-spinner size="large" appearance="primary"></fabric-spinner>
 * ```
 *
 * @attr {SpinnerSize} size - The size of the spinner. One of 'tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'.
 * @attr {SpinnerAppearance} appearance - The appearance of the spinner. One of 'primary', 'inverted'.
 *
 * @prop {SpinnerSize} size - The size of the spinner. One of 'tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'.
 * @prop {SpinnerAppearance} appearance - The appearance of the spinner. One of 'primary', 'inverted'.
 *
 * @slot indicator - Custom content that replaces the default spinner indicator.
 *
 * @csspart background - The background layer of the spinner.
 * @csspart progress - The container for the spinner progress animation.
 * @csspart spinner - The spinner animation container.
 * @csspart start - The start section of the spinner animation.
 * @csspart end - The end section of the spinner animation.
 * @csspart indicator - The visual element that indicates the loading process.
 *
 * @cssprop --duration - Controls the animation duration for the spinner.
 * @cssprop --indicatorSize - Sets the rendered size of the spinner indicator.
 * @cssprop --size - Sets the overall size used by the spinner component.
 *
 * @extends FluentSpinner
 * @tagname fabric-spinner
 * @public
 */
declare class Spinner extends Spinner$1 {
}

/** Appearance values for {@link Spinner}. */
declare const SpinnerAppearances: {
    readonly primary: "primary";
    readonly inverted: "inverted";
};
type SpinnerAppearance = ValuesOf<typeof SpinnerAppearances>;
/** Size values for {@link Spinner}. */
declare const SpinnerSizes: {
    readonly tiny: "tiny";
    readonly extraSmall: "extra-small";
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
    readonly extraLarge: "extra-large";
    readonly huge: "huge";
};
type SpinnerSize = ValuesOf<typeof SpinnerSizes>;

/**
 * The Fabric Spinner component.
 *
 * @public
 */
declare const definition$a: _microsoft_fast_element.FASTElementDefinition<typeof Spinner>;

/**
 * Switch
 * @summary A Fabric UI Switch component that extends Fluent UI's Switch with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-switch checked>
 *   <span slot="switch">Toggle</span>
 * </fabric-switch>
 * ```
 *
 * @attr {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @attr {boolean | undefined} disabled - The disabled state of the control.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {boolean | undefined} checked - The initial checked state of the element.
 * @attr {string | undefined} value - The initial value of the input.
 * @attr {boolean | undefined} required - The required state of the element.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 *
 * @prop {boolean} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @prop {boolean} disabled - The disabled state of the control.
 * @prop {string} form - The id of a form to associate the element to.
 * @prop {boolean} checked - The initial checked state of the element.
 * @prop {boolean} required - The required state of the element.
 * @prop {string} value - The initial value of the input.
 * @prop {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 *
 * @slot switch - Custom slot for the switch indicator.
 *
 * @csspart checked-indicator - The part representing the checked state indicator.
 *
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method reportValidity - Reports the validity of the element.
 * @method setCustomValidity - Sets a custom validity message with the provided message.
 * @method toggleChecked - Toggles the checked state of the control, with an optional force parameter.
 *
 * @extends FluentSwitch
 * @tagname fabric-switch
 * @public
 */
declare class Switch extends Switch$1 {
}

/**
 * The Fabric Switch component.
 *
 * @public
 */
declare const definition$9: _microsoft_fast_element.FASTElementDefinition<typeof Switch>;

/**
 * Tab
 * @summary A Fabric UI Tab component that extends Fluent UI's Tab, providing a tab item for use within a tab list with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-tab disabled>
 *   <span slot="start">Icon</span>
 *   Tab Title
 *   <span slot="end">Close</span>
 * </fabric-tab>
 * ```
 *
 * @attr {boolean} disabled - When true, the control will be immutable by user interaction.
 *
 * @prop {boolean} disabled - When true, the control will be immutable by user interaction.
 *
 * @slot start - Content before the tab content.
 * @slot default - The default slot for tab text or content.
 * @slot end - Content after the tab content.
 *
 * @csspart tab-content - The container for the tab's content.
 * @cssprop --textContent - Controls the tab text content styling.
 *
 * @extends FluentTab
 * @tagname fabric-tab
 * @public
 */
declare class Tab extends Tab$1 {
}

/**
 * The Fabric Tab component
 *
 * @public
 */
declare const definition$8: _microsoft_fast_element.FASTElementDefinition<typeof Tab>;

/**
 * Tablist
 * @summary A custom Tablist component based on Fluent UI's Tablist, enhanced with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-tablist appearance="subtle" size="medium" orientation="horizontal" disabled="false" activeid="tab1">
 *   <fabric-tab slot="tab">Tab 1</fabric-tab>
 *   <fabric-tab slot="tab">Tab 2</fabric-tab>
 *   <fabric-tab slot="tab">Tab 3</fabric-tab>
 * </fabric-tablist>
 * ```
 *
 * @attr {string} appearance - There are two modes of appearance: transparent and subtle.
 * @attr {string} size - Used to set the size of all the tab controls, which affects text size and margins. Three sizes: small, medium, and large.
 * @attr {string} orientation - The orientation, which can be 'horizontal' or 'vertical'.
 * @attr {boolean} disabled - Used for disabling all click and keyboard events for the tabs, child tab elements.
 * @attr {string} activeid - The id of the active tab.
 *
 * @prop {TablistAppearance} appearance - There are two modes of appearance: transparent and subtle.
 * @prop {TablistSize} size - Used to set the size of all the tab controls, which affects text size and margins. Three sizes: small, medium, and large.
 * @prop {TablistOrientation} orientation - The orientation, which can be 'horizontal' or 'vertical'.
 * @prop {boolean} disabled - Used for disabling all click and keyboard events for the tabs, child tab elements.
 * @prop {string} activeid - The id of the active tab.
 *
 * @slot tab - Slot for individual tabs.
 *
 * @cssprop --tabIndicatorInsetBlock - Controls the block inset for the active tab indicator.
 * @cssprop --tabIndicatorInsetInline - Controls the inline inset for the active tab indicator.
 * @cssprop --tabIndicatorOffset - Offsets the active tab indicator from its default position.
 * @cssprop --tabIndicatorScale - Scales the active tab indicator size.
 * @cssprop --tabPaddingBlock - Sets the block padding for each tab.
 * @cssprop --tabPaddingInline - Sets the inline padding for each tab.
 *
 * @method activeidChanged - Initiates the active tab indicator animation loop when activeid changes.
 * @method activeTabIndexPublic - Returns the index of the currently active tab based on the activeid property.
 * @method tabsChanged - Initiates the active tab indicator animation loop when tabs change.
 * @method setTabs - Function that is invoked whenever the selected tab or the tab collection changes.
 * @method adjust - The adjust method for FASTTabs.
 *
 * @fires active-index-change - Event fired when the active tab index changes, providing the new index in the event detail.
 * @fires change - Event fired when the active tab id changes, providing the new id in the event detail.
 *
 * @extends FluentTablist
 * @tagname fabric-tablist
 * @public
 */
declare class Tablist extends Tablist$1 {
    get activeTabIndexPublic(): number;
    private emitActiveIndexChange;
    activeidChanged(oldValue: string, newValue: string): void;
}

/**
 * The Fabric Tablist component.
 *
 * @public
 */
declare const definition$7: _microsoft_fast_element.FASTElementDefinition<typeof Tablist>;

/** Appearance values for Tablist. */
declare const TablistAppearances: {
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
type TablistAppearance = ValuesOf<typeof TablistAppearances>;
/** Orientation values for Tablist. */
declare const TablistOrientations: {
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
type TablistOrientation = ValuesOf<typeof TablistOrientations>;
/** Size values for Tablist. */
declare const TablistSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
type TablistSize = ValuesOf<typeof TablistSizes>;
/** Event names for Tablist. */
declare const TablistEventNames: {
    readonly activeIndexChange: "active-index-change";
    readonly change: "change";
};

/**
 * TextArea
 * @summary A Fabric UI TextArea component that extends Fluent UI's TextArea with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-textarea
 *   appearance="filled-darker"
 *   block
 *   size="large"
 *   autocomplete="on"
 *   auto-resize
 *   maxlength="500"
 *   minlength="10"
 *   placeholder="Enter text here..."
 *   readonly
 *   required
 * >
 *   <span slot="label">Label</span>
 *   Your text here...
 * </fabric-textarea>
 * ```
 *
 * @attr {TextAreaAppearance | undefined} appearance - Indicates the visual appearance of the element.
 * @attr {boolean | undefined} block - Indicates whether the textarea should be a block-level element.
 * @attr {TextAreaSize | undefined} size - Sets the size of the control.
 * @attr {TextAreaAutocomplete | undefined} autocomplete - Indicates the element's autocomplete state.
 * @attr {boolean | undefined} auto-resize - Indicates whether the element’s block size (height) should be automatically changed based on the content.
 * @attr {string | undefined} dirname - Sets the name of the value directionality to be submitted with form data.
 * @attr {boolean | undefined} display-shadow - Indicates whether the element displays a box shadow.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @attr {number | undefined} minlength - The minimum number of characters a user can enter.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @attr {boolean | undefined} readonly - When true, the control will be immutable by user interaction.
 * @attr {boolean | undefined} required - The element's required attribute.
 *
 * @prop {string} appearance - Indicates the visual appearance of the element.
 * @prop {boolean} block - Indicates whether the textarea should be a block-level element.
 * @prop {TextAreaSize} size - Sets the size of the control.
 * @prop {TextAreaAutocomplete} autocomplete - Indicates the element's autocomplete state.
 * @prop {boolean} autoResize - Indicates whether the element’s block size (height) should be automatically changed based on the content.
 * @prop {string} dirname - Sets the name of the value directionality to be submitted with form data.
 * @prop {boolean} displayShadow - Indicates whether the element displays a box shadow.
 * @prop {string} form - The id of a form to associate the element to.
 * @prop {number} maxlength - The maximum number of characters a user can enter.
 * @prop {number} minlength - The minimum number of characters a user can enter.
 * @prop {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {string} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @prop {boolean} readonly - When true, the control will be immutable by user interaction.
 * @prop {boolean} required - The element's required attribute.
 *
 * @slot - The default content/value of the component.
 * @slot label - The content for the `<label>`, it should be a `<fluent-label>` element.
 *
 * @csspart label - The `<label>` element.
 * @csspart root - The container element of the `<textarea>` element.
 * @csspart control - The internal `<textarea>` element.
 *
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method reportValidity - Reports the validity of the element.
 * @method setCustomValidity - Sets the custom validity message.
 * @method select - Selects the content in the element.
 *
 * @fires change - Fires after the control loses focus, if the content has changed.
 * @fires select - Fires when the `select()` method is called.
 *
 * @extends FluentTextArea
 * @tagname fabric-textarea
 * @public
 */
declare class TextArea extends TextArea$1 {
}

/**
 * The Fabric Text Area component.
 *
 * @public
 */
declare const definition$6: _microsoft_fast_element.FASTElementDefinition<typeof TextArea>;

/** Appearance values for {@link TextArea}. */
declare const TextareaAppearances: {
    readonly outline: "outline";
    readonly filledLighter: "filled-lighter";
    readonly filledDarker: "filled-darker";
};
/** Type describing appearance options for {@link TextArea}. */
type TextareaAppearance = ValuesOf<typeof TextareaAppearances>;
/** Autocomplete values for {@link TextArea}. */
declare const TextareaAutocompletes: {
    readonly on: "on";
    readonly off: "off";
};
/** Type describing autocomplete options for {@link TextArea}. */
type TextareaAutocomplete = ValuesOf<typeof TextareaAutocompletes>;
/** Resize values for {@link TextArea}. */
declare const TextareaResizes: {
    readonly none: "none";
    readonly both: "both";
    readonly horizontal: "horizontal";
    readonly vertical: "vertical";
};
/** Type describing resize options for {@link TextArea}. */
type TextareaResize = ValuesOf<typeof TextareaResizes>;
/** Size values for {@link TextArea}. */
declare const TextareaSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/** Type describing size options for {@link TextArea}. */
type TextareaSize = ValuesOf<typeof TextareaSizes>;
/** Appearance values that support display shadows for {@link TextArea}. */
declare const TextareaAppearancesForDisplayShadows: readonly (TextAreaAppearance | undefined)[];
/** Type describing appearance values that support display shadows for {@link TextArea}. */
type TextareaAppearancesForDisplayShadow = ValuesOf<typeof TextareaAppearancesForDisplayShadows>;

/**
 * Styles for the TextInput component.
 *
 * @public
 */
declare const styles: ElementStyles;

/**
 * @internal
 */
declare const template: ElementViewTemplate<TextInput>;

/**
 * The Fabric Text Input component.
 *
 * @public
 */
declare const definition$5: _microsoft_fast_element.FASTElementDefinition<typeof TextInput>;

/**
 * Text
 * @summary A Text Custom HTML Element based on Fluent UI's Text with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-text nowrap size="700" weight="bold" align="center">
 *   Your text here
 * </fabric-text>
 * ```
 *
 * @attr {boolean} nowrap - The text will not wrap. Boolean attributes which default to true in HTML can't be switched off in the DOM.
 * @attr {boolean} truncate - The text truncates.
 * @attr {boolean} italic - The text style is italic.
 * @attr {boolean} underline - The text style is underline.
 * @attr {boolean} strikethrough - The text style is strikethrough.
 * @attr {boolean} block - A text can take up the width of its container.
 * @attr {TextSize} size - The Text size. One of '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'.
 * @attr {TextFont} font - The Text font. One of 'base', 'numeric', 'monospace'.
 * @attr {TextWeight} weight - The Text weight. One of 'medium', 'regular', 'semibold', 'bold'.
 * @attr {TextAlign} align - The Text alignment. One of 'start', 'end', 'center', 'justify'.
 *
 * @prop {boolean} nowrap - The text will not wrap.
 * @prop {boolean} truncate - The text truncates.
 * @prop {boolean} italic - The text style is italic.
 * @prop {boolean} underline - The text style is underline.
 * @prop {boolean} strikethrough - The text style is strikethrough.
 * @prop {boolean} block - A text can take up the width of its container.
 * @prop {TextSize} size - The Text size.
 * @prop {TextFont} font - The Text font.
 * @prop {TextWeight} weight - The Text weight.
 * @prop {TextAlign} align - The Text alignment.
 *
 * @slot default - The default slot for text content.
 *
 * @extends FluentText
 * @tagname fabric-text
 * @public
 */
declare class Text extends Text$1 {
}

/**
 * The Fabric Text component.
 *
 * @public
 */
declare const definition$4: _microsoft_fast_element.FASTElementDefinition<typeof Text>;

declare const TextAligns: {
    readonly start: "start";
    readonly end: "end";
    readonly center: "center";
    readonly justify: "justify";
};
type TextAlign = ValuesOf<typeof TextAligns>;
declare const TextFonts: {
    readonly base: "base";
    readonly numeric: "numeric";
    readonly monospace: "monospace";
};
type TextFont = ValuesOf<typeof TextFonts>;
declare const TextSizes: {
    readonly _100: "100";
    readonly _200: "200";
    readonly _300: "300";
    readonly _400: "400";
    readonly _500: "500";
    readonly _600: "600";
    readonly _700: "700";
    readonly _800: "800";
    readonly _900: "900";
    readonly _1000: "1000";
};
type TextSize = ValuesOf<typeof TextSizes>;
declare const TextWeights: {
    readonly medium: "medium";
    readonly regular: "regular";
    readonly semibold: "semibold";
    readonly bold: "bold";
};
type TextWeight = ValuesOf<typeof TextWeights>;

/**
 * Tree
 * @summary A Fabric UI Tree component that extends Fluent UI's Tree with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-tree size="medium" appearance="subtle">
 *   <fabric-tree-item expanded>
 *     Root Item
 *     <fabric-tree-item>Child Item 1</fabric-tree-item>
 *     <fabric-tree-item selected>Child Item 2</fabric-tree-item>
 *   </fabric-tree-item>
 * </fabric-tree>
 * ```
 *
 * @attr {string | undefined} size - The size of tree items within this tree (small, medium).
 * @attr {string | undefined} appearance - The appearance variant of tree items (subtle, subtleAlpha, transparent).
 *
 * @prop {string} size - The size of tree items within this tree.
 * @prop {string} appearance - The appearance variant of tree items.
 * @prop {HTMLElement | null} currentSelected - The currently selected tree item.
 * @prop {Array} childTreeItems - Array of immediate child tree items.
 *
 * @slot default - Container for tree-item elements that make up the tree structure.
 *
 * @csspart root - The component's outermost element.
 *
 * @method keydownHandler - Handles keyboard navigation (arrow keys, home, end, enter, space).
 * @method focusHandler - Manages focus behavior when tree receives focus.
 * @method blurHandler - Manages focus behavior when tree loses focus.
 * @method clickHandler - Handles click events from child tree items.
 * @method changeHandler - Handles selection change events from child tree items.
 * @method updateSizeAndAppearance - Updates size and appearance of all child tree items.
 *
 * @fires change - Fired when a tree item selection changes.
 *
 * @extends FluentTree
 * @tagname fabric-tree
 * @public
 */
declare class Tree extends Tree$1 {
}

/**
 * The Fabric Tree component.
 *
 * @public
 */
declare const definition$3: _microsoft_fast_element.FASTElementDefinition<typeof Tree>;

/**
 * TreeItem
 * @summary A Fabric UI TreeItem component that extends Fluent UI's TreeItem with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-tree-item expanded selected>
 *   <span slot="start">📁</span>
 *   Folder Name
 *   <span slot="end">🔔</span>
 *   <fabric-tree-item>Child Item</fabric-tree-item>
 * </fabric-tree-item>
 * ```
 *
 * @attr {boolean | undefined} expanded - Whether the tree item is expanded to show child items.
 * @attr {boolean | undefined} selected - Whether the tree item is selected.
 * @attr {boolean | undefined} empty - Whether the tree item has no child items.
 * @attr {string | undefined} size - The size of the tree item (small, medium).
 * @attr {string | undefined} appearance - The appearance variant (subtle, subtleAlpha, transparent).
 * @attr {number | undefined} data-indent - The indentation level for nested items.
 *
 * @prop {boolean} expanded - Whether the tree item is expanded.
 * @prop {boolean} selected - Whether the tree item is selected.
 * @prop {boolean} empty - Whether the tree item has no child items.
 * @prop {string} size - The size of the tree item.
 * @prop {string} appearance - The appearance variant.
 * @prop {number} dataIndent - The indentation level.
 * @prop {Array} childTreeItems - Array of child tree items.
 * @prop {boolean} isNestedItem - Whether this item is nested within another tree item.
 *
 * @slot default - The main content of the tree item.
 * @slot start - Content displayed before the main content (typically icons).
 * @slot end - Content displayed after the main content.
 * @slot aside - Content displayed at the far end of the tree item.
 * @slot chevron - Custom expand/collapse indicator (defaults to built-in chevron).
 * @slot item - Container where child tree items are automatically placed.
 *
 * @csspart positioning-region - Container for the tree item content and aside sections.
 * @csspart content - Container for the main tree item content (chevron, start, default, end slots).
 * @csspart chevron - The expand/collapse indicator.
 * @csspart aside - Container for the aside slot content.
 * @csspart items - Container for nested child tree items.
 *
 * @method toggleExpansion - Toggles the expanded state if the item has children.
 * @method updateChildTreeItems - Updates the indentation and appearance of child items.
 * @method updateSizeAndAppearance - Updates size and appearance of all child tree items.
 *
 * @fires toggle - Fired when the expanded state changes. Detail: {oldState: string, newState: string}
 * @fires change - Fired when the selected state changes.
 *
 * @extends FluentTreeItem
 * @tagname fabric-tree-item
 * @public
 */
declare class TreeItem extends TreeItem$1 {
}

/**
 * The Fabric TreeItem component.
 *
 * @public
 */
declare const definition$2: _microsoft_fast_element.FASTElementDefinition<typeof TreeItem>;

/**
 * ToggleButton
 * @summary A ToggleButton Custom HTML Element based on Fluent UI's ToggleButton with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-toggle-button appearance="primary" shape="rounded" size="large" type="submit" autofocus>
 *   <span slot="start">🚀</span>
 *   Toggle me!
 *   <span slot="end">→</span>
 * </fabric-toggle-button>
 * ```
 *
 * @attr {boolean | undefined} pressed - Indicates the pressed state of the control.
 * @attr {boolean | undefined} mixed - Indicates the mixed state of the control. This property takes precedence over `pressed`.
 * @attr {ToggleButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
 * @attr {ToggleButtonShape | undefined} shape - The shape of the button.
 * @attr {ToggleButtonSize | undefined} size - The size of the button.
 * @attr {boolean | undefined} icon-only - Indicates that the button should only display as an icon with no text content.
 * @attr {boolean | undefined} autofocus - Indicates the button should be focused when the page is loaded.
 * @attr {boolean | undefined} disabled - Sets the element's disabled state.
 * @attr {boolean | undefined} disabled-focusable - Indicates that the button is focusable while disabled.
 * @attr {number | undefined} tabindex - Sets that the button tabindex attribute.
 * @attr {string | undefined} form - The associated form element.
 * @attr {string | undefined} formaction - The URL that processes the form submission.
 * @attr {string | undefined} formenctype - The encoding type for the form submission.
 * @attr {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
 * @attr {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
 * @attr {ToggleButtonFormTarget | undefined} formtarget - The target frame or window to open the form submission in.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {ToggleButtonType | undefined} type - The button type.
 * @attr {string | undefined} value - The value attribute.
 *
 * @prop {boolean} pressed - Indicates the pressed state of the control.
 * @prop {boolean} mixed - Indicates the mixed state of the control. This property takes precedence over `pressed`.
 * @prop {ToggleButtonAppearance} appearance - Indicates the styled appearance of the button.
 * @prop {ToggleButtonShape} shape - The shape of the button.
 * @prop {ToggleButtonSize} size - The size of the button.
 * @prop {boolean} icon-only - Indicates that the button should only display as an icon with no text content.
 * @prop {boolean} autofocus - Indicates the button should be focused when the page is loaded.
 * @prop {boolean} disabled - Sets the element's disabled state.
 * @prop {boolean} disabled-focusable - Indicates that the button is focusable while disabled.
 * @prop {number} tabindex - Sets that the button tabindex attribute.
 * @prop {string} form - The associated form element.
 * @prop {string} formaction - The URL that processes the form submission.
 * @prop {string} formenctype - The encoding type for the form submission.
 * @prop {string} formmethod - The HTTP method that the browser uses to submit the form.
 * @prop {boolean} formnovalidate - Indicates that the form will not be validated when submitted.
 * @prop {ToggleButtonFormTarget} formtarget - The target frame or window to open the form submission in.
 * @prop {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {ToggleButtonType} type - The button type.
 * @prop {string} value - The value attribute.
 *
 * @slot start - Content which can be provided before the button content.
 * @slot end - Content which can be provided after the button content.
 * @slot - The default slot for button content.
 *
 * @csspart content - The button content container.
 *
 * @method press - Toggles the pressed state of the button.
 * @method keypressHandler - Handles keypress events for the button.
 * @method resetForm - Resets the associated form.
 *
 * @extends FluentToggleButton
 * @tagname fabric-toggle-button
 * @public
 */
declare class ToggleButton extends ToggleButton$1 {
}

/** Appearance values for {@link ToggleButton}. */
declare const ToggleButtonAppearances: {
    readonly primary: "primary";
    readonly outline: "outline";
    readonly subtle: "subtle";
    readonly transparent: "transparent";
};
/** Type describing appearance options for {@link ToggleButton}. */
type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearances>;
/** Shape values for {@link ToggleButton}. */
declare const ToggleButtonShapes: {
    readonly circular: "circular";
    readonly rounded: "rounded";
    readonly square: "square";
};
/** Type describing shape options for {@link ToggleButton}. */
type ToggleButtonShape = ValuesOf<typeof ToggleButtonShapes>;
/** Size values for {@link ToggleButton}. */
declare const ToggleButtonSizes: {
    readonly small: "small";
    readonly medium: "medium";
    readonly large: "large";
};
/** Type describing size options for {@link ToggleButton}. */
type ToggleButtonSize = ValuesOf<typeof ToggleButtonSizes>;
/** Type values for {@link ToggleButton}. */
declare const ToggleButtonTypes: {
    readonly submit: "submit";
    readonly reset: "reset";
    readonly button: "button";
};
/** Type describing type options for {@link ToggleButton}. */
type ToggleButtonType = ValuesOf<typeof ToggleButtonTypes>;
/** Type values for {@link ToggleButton}. */
declare const ToggleButtonFormTargets: {
    readonly blank: "_blank";
    readonly self: "_self";
    readonly parent: "_parent";
    readonly top: "_top";
};
/** Type describing type options for {@link ToggleButton}. */
type ToggleButtonFormTarget = ValuesOf<typeof ToggleButtonFormTargets>;

/**
 * The Fabric Toggle Button component.
 *
 * @public
 */
declare const definition$1: _microsoft_fast_element.FASTElementDefinition<typeof ToggleButton>;

/**
 * Tooltip
 * @summary A custom HTML Tooltip element based on Fluent UI's Tooltip, enhanced with custom styling and behavior.
 *
 * @example
 * ```html
 * <fabric-tooltip id="exampleTooltip" anchor="buttonId" delay="300" positioning="above">
 *   Tooltip content
 * </fabric-tooltip>
 * ```
 *
 * @attr {string} id - The item ID.
 * @attr {number | null} delay - Set the delay for the tooltip to appear.
 * @attr {string} positioning - Set the positioning of the tooltip relative to the anchor element.
 * @attr {string} anchor - The id of the anchor element for the tooltip.
 *
 * @prop {string} id - The item ID.
 * @prop {number | null} delay - Set the delay for the tooltip to appear.
 * @prop {string} positioning - Set the positioning of the tooltip relative to the anchor element.
 * @prop {string} anchor - The id of the anchor element for the tooltip.
 *
 * @slot - The default slot for the tooltip content.
 *
 * @cssprop --block-offset - Offset applied along the block axis for tooltip positioning.
 * @cssprop --inline-offset - Offset applied along the inline axis for tooltip positioning.
 * @cssprop --position-area - CSS position area used to place the tooltip.
 * @cssprop --position-try-options - CSS position-try options for tooltip fallback placement.
 *
 * @extends FluentTooltip
 * @tagname fabric-tooltip
 * @public
 */
declare class Tooltip extends Tooltip$1 {
    private showTimer;
    private hideTimer;
    private static readonly DEFAULT_DELAY;
    /**
     * Resolves the anchor element from the DOM.
     */
    private get resolvedAnchorElement();
    disconnectedCallback(): void;
    /**
     * Shows the tooltip after the specified delay.
     * Cancels any pending hide timer to prevent conflicts.
     * @param delay - Number of milliseconds to delay showing the tooltip
     * @internal
     */
    showTooltip(delay?: number): void;
    /**
     * Hides the tooltip after the specified delay.
     * Cancels any pending show timer so the tooltip won't appear after the mouse leaves.
     * @param delay - Number of milliseconds to delay hiding the tooltip
     * @internal
     */
    hideTooltip(delay?: number): void;
}

/**
 * The Fabric Tooltip component.
 *
 * @public
 */
declare const definition: _microsoft_fast_element.FASTElementDefinition<typeof Tooltip>;

/** Positioning values for {@link Tooltip}. */
declare const TooltipPositioningOptions: {
    readonly 'above-start': "block-start span-inline-end";
    readonly above: "block-start";
    readonly 'above-end': "block-start span-inline-start";
    readonly 'below-start': "block-end span-inline-end";
    readonly below: "block-end";
    readonly 'below-end': "block-end span-inline-start";
    readonly 'before-top': "inline-start span-block-end";
    readonly before: "inline-start";
    readonly 'before-bottom': "inline-start span-block-start";
    readonly 'after-top': "inline-end span-block-end";
    readonly after: "inline-end";
    readonly 'after-bottom': "inline-end span-block-start";
};
/** Type describing positioning options for {@link Tooltip}. */
type TooltipPositioningOption = ValuesOf<typeof TooltipPositioningOptions>;

/**
 * Selector for the `disabled` state.
 * @public
 */
declare const disabledState: ":state(disabled)" | "[state--disabled]";
/**
 * Selector for the `expanded` state.
 * @public
 */
declare const expandedState: ":state(expanded)" | "[state--expanded]";

/**
 * A value that can be statically composed into a
 * foundation template.
 * @remarks
 * When providing a string, take care to ensure that it is
 * safe and will not enable an XSS attack.
 * @public
 */
type StaticallyComposableHTML<TSource = unknown, TParent = unknown> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
/**
 * A function to compose template options.
 * @public
 */
declare function staticallyCompose<TSource = unknown, TParent = unknown>(item: StaticallyComposableHTML<TSource, TParent>): CaptureType<TSource, TParent>;

/**
 * This function is used to toggle a state on the control. If the browser supports Custom States, the state is toggled
 * on the `ElementInternals.states` set. If the browser does not support Custom States, the state is toggled on the host
 * element as an attribute with the format `state--{state}`.
 *
 * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet | CustomStateSet} interface
 * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | ElementInternals} interface
 * @see The CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:state | `:state()`} pseudo-class
 *
 * @param elementInternals - the `ElementInternals` instance for the component
 * @param state - the state to toggle
 * @param force - force the state to be toggled on or off
 * @internal
 */
declare function toggleState(elementInternals: ElementInternals | undefined, state: string | undefined, force?: boolean): void;

type Constructor = new (...args: unknown[]) => unknown;
/**
 * Apply mixins to a constructor.
 * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
 *
 * TODO: Remove with https://github.com/microsoft/fast/pull/6797
 * This was used for Badge where start/end was not yet implemented.
 * The method itself was deprecated as it was largely intended to be "internals" for Fast Foundation.
 * Adding here to avoid breaking of the existing API.
 * @internal
 */
declare function applyMixins(derivedCtor: Constructor, ...baseCtors: Constructor[]): void;

/**
 * filters out any whitespace-only nodes, to be used inside a template.
 *
 * @param value - The Node that is being inspected
 * @param index - The index of the node within the array
 * @param array - The Node array that is being filtered
 * @returns true if the node is not a whitespace-only node, false otherwise
 *
 * @public
 */
declare const whitespaceFilter: ElementsFilter;

export { Accordion, definition$F as AccordionDefinition, AccordionExpandModes, AccordionItem, definition$G as AccordionItemDefinition, AccordionItemMarkerPositions, AccordionItemSizes, AccordionMenu, definition$11 as AccordionMenuDefinition, AccordionMenuExpandModes, AccordionMenuPanel, definition$10 as AccordionMenuPanelDefinition, AccordionMenuPanelMarkerPositions, AccordionMenuPanelSizes, styles$e as AccordionMenuPanelStyles, template$b as AccordionMenuPanelTemplate, styles$f as AccordionMenuStyles, template$c as AccordionMenuTemplate, AnchorButton, AnchorButtonAppearance, AnchorButtonAppearances, definition$n as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonShapes, AnchorButtonSize, AnchorButtonSizes, AnchorTarget, AnchorTargets, Avatar, AvatarActive, AvatarActives, AvatarAppearance, AvatarAppearances, AvatarColor, AvatarColors, definition$D as AvatarDefinition, AvatarNamedColor, AvatarNamedColors, AvatarShape, AvatarShapes, AvatarSize, AvatarSizes, Badge, BadgeAppearance, BadgeAppearances, BadgeColor, BadgeColors, definition$C as BadgeDefinition, BadgeShape, BadgeShapes, BadgeSize, BadgeSizes, Button, ButtonAppearances, definition$B as ButtonDefinition, ButtonFormTargets, ButtonShapes, ButtonSizes, styles$8 as ButtonStyles, ButtonTypes, Card, CardAppearance, CardAppearances, definition$$ as CardDefinition, CardEventNames, CardFocusMode, CardFocusModes, CardFooter, definition$_ as CardFooterDefinition, CardHeader, definition$Z as CardHeaderDefinition, CardOrientation, CardOrientations, CardPreview, definition$Y as CardPreviewDefinition, styles$d as CardStyles, template$a as CardTemplate, Carousel, definition$X as CarouselDefinition, styles$c as CarouselStyles, template$9 as CarouselTemplate, Checkbox, definition$A as CheckboxDefinition, CheckboxShapes, CheckboxSizes, CollisionEdges, CompoundButton, CompoundButtonAppearances, definition$V as CompoundButtonDefinition, CompoundButtonFormTargets, CompoundButtonShapes, CompoundButtonSizes, CompoundButtonTypes, CounterBadge, CounterBadgeAppearances, CounterBadgeColors, definition$z as CounterBadgeDefinition, CounterBadgeShapes, CounterBadgeSizes, Dialog, DialogBody, definition$x as DialogBodyDefinition, definition$y as DialogDefinition, styles$7 as DialogStyles, DialogTypes, Divider, DividerAlignContents, DividerAppearances, definition$w as DividerDefinition, DividerOrientations, DividerRoles, styles$6 as DividerStyles, template$5 as DividerTemplate, Drawer, DrawerBody, definition$u as DrawerBodyDefinition, definition$v as DrawerDefinition, DrawerPositions, DrawerSizes, DrawerTypes, Dropdown, DropdownAppearances, definition$t as DropdownDefinition, DropdownOption, definition$s as DropdownOptionDefinition, DropdownSizes, DropdownTypes, DesignSystem as FabricDesignSystem, Field, definition$q as FieldDefinition, FieldLabelPosition, FieldLabelPositions, styles$5 as FieldStyles, FilterPill, FilterPillAppearances, definition$W as FilterPillDefinition, FilterPillEventNames, FilterPillFormTargets, FilterPillShapes, FilterPillSizes, FilterPillTypes, Image, definition$p as ImageDefinition, ImageFits, ImageShapes, ImplicitSubmissionBlockingTypes$1 as ImplicitSubmissionBlockingTypes, Label, definition$o as LabelDefinition, LabelPositions, LabelSizes, LabelWeights, Link, LinkAppearance, LinkAppearances, definition$E as LinkDefinition, LinkTarget, LinkTargets, Listbox, definition$r as ListboxDefinition, LoadingButton, definition$U as LoadingButtonDefinition, Menu, MenuButton, MenuButtonAppearances, definition$l as MenuButtonDefinition, MenuButtonShapes, MenuButtonSizes, definition$i as MenuDefinition, MenuGroupRoles, MenuItem, definition$k as MenuItemDefinition, MenuItemRoles, styles$4 as MenuItemStyles, template$4 as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$3 as MenuListStyles, template$3 as MenuListTemplate, MenuPositions, MenuRepositionModes, styles$2 as MenuStyles, template$2 as MenuTemplate, MessageBar, definition$m as MessageBarDefinition, MultiView, MultiViewController, definition$S as MultiViewControllerDefinition, definition$T as MultiViewDefinition, MultiViewEventNames, MultiViewGroup, definition$R as MultiViewGroupDefinition, MultiViewGroupPositions, OptionGroup, definition$h as OptionGroupDefinition, Popover, definition$Q as PopoverDefinition, PopoverEventNames, PopoverPositions, PopoverRepositionModes, styles$b as PopoverStyles, template$8 as PopoverTemplate, PositioningShorthand, ProgressBar, definition$g as ProgressBarDefinition, ProgressBarShapes, ProgressBarThicknesses, ProgressBarValidationStates, Radio, definition$e as RadioDefinition, RadioGroup, definition$f as RadioGroupDefinition, RadioGroupOrientations, RatingDisplay, RatingDisplayColors, definition$d as RatingDisplayDefinition, RatingDisplaySizes, SearchBox, SearchBoxAppearances, SearchBoxControlSizes, definition$c as SearchBoxDefinition, SearchBoxEventNames, ImplicitSubmissionBlockingTypes as SearchBoxImplicitSubmissionBlockingTypes, SearchBoxTypes, SimpleTable, definition$N as SimpleTableDefinition, Slider, definition$b as SliderDefinition, SliderEventNames, SliderModes, SliderOrientations, SliderSizes, SlottableInputs, SortDirections, Spinner, SpinnerAppearances, definition$a as SpinnerDefinition, SpinnerSizes, SvgIcon, definition$P as SvgIconDefinition, Switch, definition$9 as SwitchDefinition, Tab, definition$8 as TabDefinition, Table, TableCell, definition$M as TableCellDefinition, TableCellSizes, styles$9 as TableCellStyles, template$6 as TableCellTemplate, definition$O as TableDefinition, styles$a as TableStyles, template$7 as TableTemplate, Tablist, TablistAppearances, definition$7 as TablistDefinition, TablistEventNames, TablistOrientations, TablistSizes, Tag, TagAppearances, definition$L as TagDefinition, TagEventNames, TagShapes, TagSizes, TagTextSizes, TeachingBubble, definition$K as TeachingBubbleDefinition, TeachingBubbleEventNames, TeachingBubblePlacements, TeachingBubbleSizes, Text, TextAligns, TextArea, TextareaAppearances as TextAreaAppearances, TextareaAppearancesForDisplayShadows as TextAreaAppearancesForDisplayShadows, TextareaAutocompletes as TextAreaAutocompletes, definition$6 as TextAreaDefinition, TextareaResizes as TextAreaResizes, TextareaSizes as TextAreaSizes, definition$4 as TextDefinition, TextFonts, TextInput, TextInputAppearances, TextInputControlSizes, definition$5 as TextInputDefinition, styles as TextInputStyles, template as TextInputTemplate, TextInputTypes, TextSizes, TextWeights, ToggleButton, ToggleButtonAppearances, definition$1 as ToggleButtonDefinition, ToggleButtonFormTargets, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes, Tooltip, definition as TooltipDefinition, TooltipPositioningOptions, Tree, definition$3 as TreeDefinition, TreeItem, definition$2 as TreeItemDefinition, ValidationFlags, Wizard, definition$J as WizardDefinition, WizardEvents, WizardPanel, definition$I as WizardPanelDefinition, WizardPanelEventNames, WizardPanelStates, WizardStep, definition$H as WizardStepDefinition, WizardStepEvents, WizardStepStates, applyMixins, disabledState, expandedState, getOptionsFromElement, isOptionGroup, styles$1 as optionGroupStyles, template$1 as optionGroupTemplate, roleForMenuGroup, roleForMenuItem, staticallyCompose, toggleState, whitespaceFilter };
export type { AccordionExpandMode, AccordionItemMarkerPosition, AccordionItemSize, AccordionMenuExpandMode, AccordionMenuPanelMarkerPosition, AccordionMenuPanelSize, ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType, CheckboxShape, CheckboxSize, CollisionEdge, CompoundButtonAppearance, CompoundButtonFormTarget, CompoundButtonShape, CompoundButtonSize, CompoundButtonType, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, DialogType, DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole, DrawerPosition, DrawerSize, DrawerType, DropdownAppearance, DropdownSize, DropdownType, FilterPillAppearance, FilterPillFormTarget, FilterPillShape, FilterPillSize, FilterPillType, HTMLPopoverElement, ImageFit, ImageShape, LabelPosition, LabelSize, LabelWeight, MenuButtonAppearance, MenuButtonShape, MenuButtonSize, MenuGroupRole, MenuItemColumnCount, MenuItemRole, MenuPosition, MenuRepositionMode, MultiViewGroupPosition, PopoverEventData, PopoverMode, PopoverRepositionMode, PopoverSize, PositioningShorthandKeys, PositioningShorthandValues, ProgressBarShape, ProgressBarThickness, ProgressBarValidationState, RadioGroupOrientation, RatingDisplayColor, RatingDisplaySize, SearchBoxAppearance, SearchBoxControlSize, SearchBoxType, SliderMode, SliderOrientation, SliderSize, SlottableInput, SortDirection, SpinnerAppearance, SpinnerSize, StaticallyComposableHTML, TableCellRenderFunction, TableCellSize, TableColumnData, TableRowData, TablistAppearance, TablistOrientation, TablistSize, TagAppearance, TagShape, TagSize, TagTextSize, TeachingBubblePlacement, TeachingBubbleSize, TextAlign, TextareaAppearance as TextAreaAppearance, TextareaAppearancesForDisplayShadow as TextAreaAppearancesForDisplayShadow, TextareaAutocomplete as TextAreaAutocomplete, TextareaResize as TextAreaResize, TextareaSize as TextAreaSize, TextFont, TextInputAppearance, TextInputControlSize, TextInputOptions, TextInputType, TextSize, TextWeight, ToggleButtonAppearance, ToggleButtonFormTarget, ToggleButtonShape, ToggleButtonSize, ToggleButtonType, TooltipPositioningOption, ValidationFlag, WizardEvent, WizardPanelState, WizardStepEvent, WizardStepState };
//# sourceMappingURL=index.d.ts.map