/**
 * The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
 * @customElement auro-select
 *
 * @slot - Default slot for the menu content.
 * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
 * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
 * @slot label - Defines the content of the label.
 * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
 * @slot helpText - Defines the content of the helpText.
 * @slot valueText - Dropdown value text display.
 * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
 * @event auroSelect-valueSet - Notifies that the component has a new value set.
 * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
 * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
 * @csspart dropdownTrigger - Apply CSS to the trigger content container.
 * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
 * @csspart dropdownSize - Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only).
 * @csspart helpText - Apply CSS to the help text.
 */
export class AuroSelect extends AuroElement {
    static get properties(): {
        /**
         * Defines whether the component will be on lighter or darker backgrounds.
         * @type {'default' | 'inverse'}
         * @default 'default'
         */
        appearance: "default" | "inverse";
        /**
         * If declared, bib's position will be automatically calculated where to appear.
         */
        autoPlacement: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, sets the autocomplete attribute for the select element.
         */
        autocomplete: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * When attribute is present, element shows disabled state.
         */
        disabled: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
         */
        error: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * If declared, make the width of the bib match the width of the content, rather than the trigger.
         */
        flexMenuWidth: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * When attribute is present, element will be 100% width of container element.
         */
        fluid: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
         */
        forceDisplayValue: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
         *
         * When expanded, the dropdown will automatically display in fullscreen mode
         * if the screen size is equal to or smaller than the selected breakpoint.
         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
         * @default 'sm'
         */
        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
        /**
         * @private
         */
        hasDisplayValueContent: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * @private
         */
        hasFocus: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * @private
         */
        isPopoverVisible: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, make bib.fullscreen.headline in HeadingDisplay.
         * Otherwise, Heading 600.
         */
        largeFullscreenHeadline: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Determines the overall layout of the select component.
         * @type {'classic' | 'emphasized' | 'snowflake'}
         * @default 'classic'
         */
        layout: "classic" | "emphasized" | "snowflake";
        /**
         * If declared, the popover and trigger will be set to the same width.
         */
        matchWidth: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Sets multi-select mode, allowing multiple options to be selected at once.
         */
        multiSelect: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: string;
        };
        /**
         * The name for the select element.
         */
        name: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * When true, checkmark on selected option will no longer be present.
         */
        noCheckmark: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, the bib will NOT flip to an alternate position
         * when there isn't enough space in the specified `placement`.
         */
        noFlip: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If set, disables auto-validation on blur.
         */
        noValidate: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Gap between the trigger element and bib.
         * @default 0
         */
        offset: {
            type: NumberConstructor;
            reflect: boolean;
        };
        /**
         * DEPRECATED - use `appearance="inverse"` instead.
         */
        onDark: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * @private
         */
        options: {
            type: ArrayConstructor;
            state: boolean;
        };
        /**
         * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
         * @type {HTMLElement|Array<HTMLElement>}
         */
        optionSelected: HTMLElement | Array<HTMLElement>;
        /**
         * Define custom placeholder text.
         */
        placeholder: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Position where the bib should appear relative to the trigger.
         * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
         * @default 'bottom-start'
         */
        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
        /**
         * Populates the `required` attribute on the element. Used for client-side validation.
         */
        required: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Sets a custom help text message to display for all validityStates.
         */
        setCustomValidity: {
            type: StringConstructor;
        };
        /**
         * Custom help text message to display when validity = `customError`.
         */
        setCustomValidityCustomError: {
            type: StringConstructor;
        };
        /**
         * Custom help text message to display when validity = `valueMissing`.
         */
        setCustomValidityValueMissing: {
            type: StringConstructor;
        };
        /**
         * Determines the shape of the dropdown bib.
         * @type {'classic' | 'pill' | 'pill-left' | 'pill-right' | 'snowflake'}
         */
        shape: "classic" | "pill" | "pill-left" | "pill-right" | "snowflake";
        /**
         * If set, the dropdown will shift its position to avoid being cut off by the viewport.
         */
        shift: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`.
         * @type {'lg' | 'xl'}
         */
        size: "lg" | "xl";
        /**
         * Indicates whether the input is in a dirty state (has been interacted with).
         * @private
         */
        touched: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * Specifies the `validityState` this element is in.
         */
        validity: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Value selected for the component.
         */
        value: {
            type: StringConstructor;
            reflect: boolean;
            attribute: string;
        };
    };
    static get styles(): import("lit").CSSResult[];
    /**
     * This will register this element with the browser.
     * @param {string} [name="auro-select"] - The name of element that you want to register to.
     *
     * @example
     * AuroSelect.register("custom-select") // this will register this element to <custom-select/>
     *
     */
    static register(name?: string): void;
    matchWidth: boolean;
    placement: string;
    offset: number;
    noFlip: boolean;
    shift: boolean;
    autoPlacement: boolean;
    forceDisplayValue: boolean;
    /**
     * @private
     */
    private uniqueId;
    /**
     * @private
     */
    private validation;
    /**
     * @private
     */
    private runtimeUtils;
    /**
     * @private
     */
    private dropdownTag;
    /**
     * @private
     */
    private bibtemplateTag;
    /**
     * @private
     */
    private helpTextTag;
    /**
     * @private
     */
    private isHiddenWhileLoading;
    /**
     * @private
     */
    private hasFocus;
    /**
     * @private
     */
    private hasDisplayValueContent;
    /**
     * @private
     * @returns {void} Internal defaults.
     */
    private _initializeDefaults;
    appearance: string;
    value: any;
    fullscreenBreakpoint: string;
    onDark: boolean;
    isPopoverVisible: any;
    shape: string;
    size: string;
    /**
     * Formatted value based on `multiSelect` state.
     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
     * @private
     * @returns {String|Array<String>}
     */
    private get formattedValue();
    /**
     * Returns classmap configuration for html5 input labels in all layouts.
     * @private
     * @returns {Record<string, boolean>}
     */
    private get commonLabelClasses();
    /**
     * Returns the label font class based on layout and selection state.
     * @private
     * @returns {string} - The font class for the label.
     */
    private get labelFontClass();
    /**
     * Whether or not the component has a value.
     * @returns {boolean} - Returns true if the component has a value or placeholder.
     * @private
     */
    private get hasValue();
    /**
     * Binds all behavior needed to the dropdown after rendering.
     * @private
     * @returns {void}
     */
    private configureDropdown;
    dropdown: any;
    optionActive: any;
    bibtemplate: any;
    /**
     * Updates the displayed value in an Auro dropdown component based on optionSelected.
     * @private
     * @returns {void}
     */
    private updateDisplayedValue;
    /**
     * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
     * @private
     */
    private updateMenuShapeSize;
    /**
     * Sets aria-setsize and aria-posinset on each menu option so screen readers
     * can announce position even when the listbox context is broken by
     * shadow DOM boundaries.
     * @private
     * @returns {void}
     */
    private updateOptionPositions;
    /**
     * Binds all behavior needed to the menu after rendering.
     * @private
     * @returns {void}
     */
    private configureMenu;
    menu: Element;
    defaultMenuSize: string;
    defaultMenuShape: string;
    options: any;
    optionSelected: any;
    /**
     * Binds all behavior needed to the component after rendering.
     * @private
     * @returns {void}
     */
    private configureSelect;
    nativeSelect: HTMLSelectElement;
    /**
     * Updates the active option in the menu.
     * @param {number} index - Index of the option to make active.
     */
    updateActiveOption(index: number): void;
    /**
     * Updates the active option in the menu based on keyboard input.
     * @private
     * @param {string} _key - The key pressed by the user.
     * @returns {void}
     */
    private updateActiveOptionBasedOnKey;
    sameLetterTimes: any;
    lastLetter: string;
    /**
     * Manages the visibility of the dropdown based on loading state changes.
     *
     * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
     * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
     * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
     * hidden, it checks if the active element is within the dropdown and shows it again if true.
     *
     * @private
     * @param {CustomEvent} event - The event object containing details about the loading state change.
     * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
     * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
     * @returns {void}
     */
    private handleMenuLoadingChange;
    /**
     * Hides the dropdown bib if its open.
     * @returns {void}
     */
    hideBib(): void;
    /**
     * Shows the dropdown bib if there are options to show.
     * @returns {void}
     */
    showBib(): void;
    /**
     * Function to support @focusin event.
     * @private
     * @return {void}
     */
    private handleFocusin;
    touched: boolean;
    /**
     * Watch for slot changes and recalculate the menuoptions.
     * @private
     * @param {Event} event - `slotchange` event.
     * @returns {void}
     */
    private handleSlotChange;
    /**
     * Resets all options to their default state.
     * @private
     */
    private clearSelection;
    firstUpdated(): void;
    setMenuValue(value: any): void;
    /**
     * Scrolls the currently active option into view.
     * Respects user's motion preferences for accessibility.
     * @private
     */
    private scrollActiveOptionIntoView;
    /**
     * Scrolls the currently selected option into view.
     * Respects user's motion preferences for accessibility.
     * @private
     */
    private scrollSelectedOptionIntoView;
    updated(changedProperties: any): void;
    /**
     * Resets component to initial state.
     * @returns {void}
     */
    reset(): void;
    /**
     * Validates value.
     * @param {boolean} [force=false] - Whether to force validation.
     */
    validate(force?: boolean): void;
    /**
     * Syncs the value from the native select element to the component's value.
     * @param {Event} event // The change event from the native select element.
     * @returns {void}
     * @private
     */
    private _handleNativeSelectChange;
    /**
     * Updates the native select element's value based on the component's value.
     * @returns {void}
     * @private
     */
    private _updateNativeSelect;
    /**
     * Returns HTML for the hidden HTML5 select.
     * @private
     * @returns {html} - Returns HTML for the hidden HTML5 select.
     */
    private renderNativeSelect;
    /**
     * Returns HTML for the help text and error message.
     * @private
     * @returns {html} - Returns HTML for the help text and error message.
     */
    private renderHtmlHelpText;
    /**
     * Returns HTML for the emphasized layout.
     * @private
     * @returns {import("lit").TemplateResult} - Returns HTML for the emphasized layout.
     */
    private renderLayoutEmphasized;
    /**
     * Returns HTML for the snowflake layout.
     * @private
     * @returns {import("lit").TemplateResult} - Returns HTML for the snowflake layout.
     */
    private renderLayoutSnowflake;
    /**
     * Returns HTML for the classic layout.
     * @private
     * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
     */
    private renderLayoutClassic;
    /**
     * Logic to determine the layout of the component.
     * @private
     * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
     * @returns {void}
     */
    private renderLayout;
}
import { AuroElement } from '../../layoutElement/src/auroElement.js';