/**
 * @typedef {Object} FormStateMember - The form state member.
 * @property {string | number | boolean | string[] | null} value - The value of the form element.
 * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
 * @property {boolean} required - Whether the form element is required or not.
 * @property {HTMLElement} element - Whether the form element is required or not.
 */
/**
 * @typedef {Object.<string, FormStateMember>} FormState - The form state.
 */
/**
 * The auro-form element provides users a way to ... (it would be great if you fill this out).
 *
 * @attr {Boolean} fixed - Uses fixed pixel values for element shape
 * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
 * @event {Event} change - Fires when form state changes.
 */
export class AuroForm extends LitElement {
    static get properties(): {
        formState: {
            attribute: boolean;
        };
        _validity: {
            attribute: boolean;
        };
        _isInitialState: {
            attribute: boolean;
        };
        _elements: {
            attribute: boolean;
        };
        _submitElements: {
            attribute: boolean;
        };
        _resetElements: {
            attribute: boolean;
        };
    };
    static get formElementTags(): string[];
    static get buttonElementTags(): string[];
    static get styles(): import("lit").CSSResult[];
    /**
     * This will register this element with the browser.
     * @param {string} [name="auro-form"] - The name of element that you want to register to.
     *
     * @example
     * AuroForm.register("custom-form") // this will register this element to <custom-form/>
     *
     */
    static register(name?: string): void;
    /** @type {FormState} */
    formState: FormState;
    /** @type {"valid" | "invalid" | null} */
    _validity: "valid" | "invalid" | null;
    _isInitialState: boolean;
    /** @type {(HTMLElement & {reset: () => void})[]} */
    _elements: (HTMLElement & {
        reset: () => void;
    })[];
    /** @type {HTMLButtonElement[]} */
    _submitelements: HTMLButtonElement[];
    /** @type {HTMLButtonElement[]} */
    _resetElements: HTMLButtonElement[];
    /**
     * @private
     * @type {MutationObserver[]}
     */
    private mutationObservers;
    /**
     * Reset fires an event called `reset` - just as you would expect from a normal form.
     */
    reset(): void;
    /**
     * Submit fires an event called `submit` - just as you would expect from a normal form.
     */
    submit(): void;
    /**
     * Shared input listener for all form elements.
     * @private
     * @param {Event} event - The event that is fired from the form element.
     */
    private sharedInputListener;
    /**
     * Shared validation listener for all form elements.
     * @private
     * @param {Event} event - The event that is fired from the form element.
     */
    private sharedValidationListener;
    /**
     * Mutation observer for form elements. Slot change does not trigger unless
     * root-level elements are added/removed. This is a workaround to ensure
     * nested form elements are also observed.
     *
     * @private
     * @returns {void}
     */
    private mutationEventListener;
    /**
     * Compare tag name with element to identify it (for API purposes).
     * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
     * @param {HTMLElement} element - The actual HTML element to compare.
     * @returns {boolean}
     * @private
     */
    private _isElementTag;
    /**
     * Shared code for determining if an element is something we care about (submit, form element, etc.).
     * @param {string[]} collection - The array to use for tag name search.
     * @param {HTMLElement} element - The element to compare against the master list.
     * @returns {boolean}
     * @private
     */
    private _isInElementCollection;
    /**
     * Check if the tag name is a form element.
     * @param {HTMLElement} element - The element to check (attr or tag name).
     * @returns {boolean}
     */
    isFormElement(element: HTMLElement): boolean;
    /**
     * Validates if an event is from a valid form element with a name.
     * @param {Event} event - The event to validate.
     * @returns {boolean} - True if event is valid for processing.
     * @private
     */
    private _eventIsValidFormEvent;
    /**
     * Check if the tag name is a button element.
     * @param {HTMLElement} element - The element to check.
     * @returns {boolean}
     */
    isButtonElement(element: HTMLElement): boolean;
    /**
     * Reduce the form value into a key-value pair.
     *
     * NOTE: form keys use `name` first, and `id` second if `name` is not available.
     * This follows standard HTML5 form behavior - submission uses `name` by default when creating
     * the FormData object.
     *
     * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
     */
    get value(): Record<string, string | number | boolean | string[] | null>;
    /**
     * Getter for internal _submitElements.
     * @returns {HTMLButtonElement[]}
     */
    get submitElements(): HTMLButtonElement[];
    /**
     * Returns a collection of elements that will reset the form.
     * @returns {HTMLButtonElement[]}
     */
    get resetElements(): HTMLButtonElement[];
    /**
     * Infer validity status based on current formState.
     * @private
     */
    private _calculateValidity;
    /**
     * Current validity state of the form, based on form element events.
     * @returns {"valid" | "invalid"}
     */
    get validity(): "valid" | "invalid";
    _setInitialState(): void;
    /**
     * Mostly internal way to determine if a form is in the initial state.
     * @returns {boolean}
     */
    get isInitialState(): boolean;
    setDisabledStateOnButtons(): void;
    /**
     * Construct the query strings from elements, append them together, execute, and return the NodeList.
     * @returns {NodeList}
     */
    queryAuroElements(): NodeList;
    /**
     * Store an element in state and on the _elements array.
     * @param {HTMLElement} element - The element to add to our state.
     * @private
     */
    private _addElementToState;
    /**
     * Initialize (or reinitialize) the form state.
     */
    initializeState(): void;
    _attachEventListeners(): void;
    firstUpdated(_changedProperties: any): void;
    updated(_changedProperties: any): void;
    /**
     * Slot change event listener. This is the main entry point for the form element.
     * @param {Event} event - The slot change event.
     * @returns {void}
     */
    onSlotChange(event: Event): void;
    render(): import("lit-html").TemplateResult<1>;
}
/**
 * - The form state member.
 */
export type FormStateMember = {
    /**
     * - The value of the form element.
     */
    value: string | number | boolean | string[] | null;
    /**
     * - The validity state of the form element, stored when fired from the form element.
     */
    validity: ValidityState;
    /**
     * - Whether the form element is required or not.
     */
    required: boolean;
    /**
     * - Whether the form element is required or not.
     */
    element: HTMLElement;
};
/**
 * - The form state.
 */
export type FormState = {
    [x: string]: FormStateMember;
};
import { LitElement } from "lit";
