import { PropertyValues, TemplateResult } from 'lit';
import { UiElement } from '../../UiElement.js';
import type UiOption from './Option.js';
import type { UiMenuElement } from '../../menu/ui-menu.js';
import '../../text-field/ui-outlined-text-field.js';
import '../../menu/ui-menu.js';
import '../../icons/ui-icon.js';
import '../../focus-ring/ui-focus-ring.js';
export interface UiSelectChangeEvent {
    value: string | undefined;
    item: UiOption | null;
}
/**
 * Material Design 3 Select component that behaves like an outlined text field with dropdown.
 *
 * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.
 *                 The `event.detail` object contains the `value` and `item` properties.
 * @fires open - Dispatched when the dropdown opens
 * @fires close - Dispatched when the dropdown closes
 */
export default class UiSelect extends UiElement {
    #private;
    static readonly formAssociated = true;
    /**
     * Timeout duration for type-ahead reset (in milliseconds)
     */
    static readonly TYPE_AHEAD_TIMEOUT = 1000;
    /**
     * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.
     * When set programmatically, it will update the selected option if a matching option exists.
     *
     * @attribute
     * @example
     * ```html
     * <ui-select value="apple">
     *   <ui-option value="apple">Apple</ui-option>
     *   <ui-option value="banana">Banana</ui-option>
     * </ui-select>
     * ```
     */
    get value(): string | undefined;
    set value(newValue: string | undefined);
    /**
     * The name attribute for form submission. This value will be used as the key
     * when the form is submitted.
     *
     * @attribute
     * @example
     * ```html
     * <ui-select name="country" value="us">
     *   <ui-option value="us">United States</ui-option>
     * </ui-select>
     * ```
     */
    accessor name: string | undefined;
    /**
     * The label text displayed in the select field. Provides accessible labeling
     * and is shown as the floating label in the outlined text field.
     *
     * @attribute
     * @example
     * ```html
     * <ui-select label="Select a country">
     *   <ui-option value="us">United States</ui-option>
     * </ui-select>
     * ```
     */
    accessor label: string | undefined;
    /**
     * Whether the select is required for form validation. When true, the select
     * must have a value selected for the form to be valid.
     *
     * @attribute
     * @example
     * ```html
     * <ui-select required label="Required field">
     *   <ui-option value="option1">Option 1</ui-option>
     * </ui-select>
     * ```
     */
    accessor required: boolean;
    /**
     * Whether the select is in an invalid state. This is typically set automatically
     * during validation, but can be set manually to indicate validation errors.
     *
     * @attribute
     * @example
     * ```html
     * <ui-select invalid invalidText="Please select a valid option">
     *   <ui-option value="option1">Option 1</ui-option>
     * </ui-select>
     * ```
     */
    accessor invalid: boolean | undefined;
    /**
     * The error message to display when the select is invalid. This text is shown
     * below the select field when `invalid` is true.
     *
     * @attribute
     * @example
     * ```html
     * <ui-select invalid invalidText="This field is required">
     *   <ui-option value="option1">Option 1</ui-option>
     * </ui-select>
     * ```
     */
    accessor invalidText: string | undefined;
    /**
     * @attribute
     */
    accessor supportingText: string | undefined;
    /**
     * Whether the select is disabled. When disabled, the select cannot be interacted
     * with and will not receive focus or respond to user input.
     *
     * @default false
     * @attribute
     * @example
     * ```html
     * <ui-select disabled label="Disabled select">
     *   <ui-option value="option1">Option 1</ui-option>
     * </ui-select>
     * ```
     */
    accessor disabled: boolean;
    /**
     * Whether the dropdown menu is currently open. This property reflects the
     * current state of the dropdown and can be set programmatically to open/close it.
     *
     * @default false
     * @example
     * ```javascript
     * // Open the dropdown programmatically
     * selectElement.open = true;
     *
     * // Close the dropdown
     * selectElement.open = false;
     * ```
     */
    accessor open: boolean;
    accessor selectedOption: UiOption | null;
    accessor menu: UiMenuElement;
    /**
     * Returns the currently selected option element. This provides access to the
     * full `ui-option` element, not just its value.
     *
     * @readonly
     * @example
     * ```javascript
     * const select = document.querySelector('ui-select');
     * const selectedItem = select.selectedItem;
     * if (selectedItem) {
     *   console.log('Selected option:', selectedItem.textContent);
     * }
     * ```
     */
    get selectedItem(): UiOption | null;
    /**
     * Returns the text content that should be displayed in the select field.
     * This is the rendered value of the currently selected option.
     *
     * @readonly
     * @example
     * ```javascript
     * const select = document.querySelector('ui-select');
     * console.log('Display text:', select.renderValue);
     * ```
     */
    get renderValue(): string;
    /**
     * Returns the form element that contains this select, if any.
     * Part of the form-associated custom element API.
     *
     * @readonly
     */
    get form(): HTMLFormElement | null;
    /**
     * Returns the validity state of the select element.
     * Part of the form-associated custom element API.
     *
     * @readonly
     */
    get validity(): ValidityState;
    /**
     * Returns the validation message for the select element.
     * Part of the form-associated custom element API.
     *
     * @readonly
     */
    get validationMessage(): string;
    /**
     * Returns whether the select element will be validated when the form is submitted.
     * Part of the form-associated custom element API.
     *
     * @readonly
     */
    get willValidate(): boolean;
    /**
     * Checks the validity of the select element and returns true if valid.
     * Part of the form-associated custom element API.
     *
     * @returns {boolean} True if the element is valid, false otherwise
     * @example
     * ```javascript
     * const select = document.querySelector('ui-select');
     * if (!select.checkValidity()) {
     *   console.log('Select is invalid:', select.validationMessage);
     * }
     * ```
     */
    checkValidity(): boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Resets the select to its initial state. Called automatically when the parent
     * form is reset. Part of the form-associated custom element API.
     *
     * @example
     * ```javascript
     * const select = document.querySelector('ui-select');
     * select.formResetCallback(); // Clears the selection
     * ```
     */
    formResetCallback(): void;
    /**
     * Restores the select's state from saved form data. Called automatically when
     * the browser restores form state. Part of the form-associated custom element API.
     *
     * @param {string | null} state - The saved state to restore
     */
    formStateRestoreCallback(state: string | null): void;
    /**
     * Validates the select element and updates its validity state. This is called
     * automatically during property changes, but can be called manually to trigger validation.
     *
     * @example
     * ```javascript
     * const select = document.querySelector('ui-select');
     * select.validate();
     * if (select.invalid) {
     *   console.log('Validation failed:', select.invalidText);
     * }
     * ```
     */
    validate(): void;
    protected willUpdate(changedProperties: PropertyValues<this>): void;
    protected firstUpdated(cp: PropertyValues): void;
    protected setCurrentOption(): void;
    protected handleKeydown(e: KeyboardEvent): void;
    protected handleBlur(e: FocusEvent): void;
    handleClick(e: Event): void;
    protected handleOpenChange(): Promise<void>;
    /**
     * Focus the next menu item in the dropdown, skipping disabled options
     */
    focusNextMenuItem(): void;
    /**
     * Focus the previous menu item in the dropdown, skipping disabled options
     */
    focusPreviousMenuItem(): void;
    /**
     * Focus the first menu item in the dropdown, skipping disabled options
     */
    focusFirstMenuItem(): void;
    /**
     * Focus the last menu item in the dropdown, skipping disabled options
     */
    focusLastMenuItem(): void;
    /**
     * Gets the first selectable (non-disabled) option
     */
    getFirstSelectableOption(): UiOption | null;
    /**
     * Gets the last selectable (non-disabled) option
     */
    getLastSelectableOption(): UiOption | null;
    /**
     * Gets the next selectable option after the current one, wrapping around if needed
     */
    protected getNextSelectableOption(currentOption: UiOption): UiOption | null;
    /**
     * Gets the previous selectable option before the current one, wrapping around if needed
     */
    protected getPreviousSelectableOption(currentOption: UiOption): UiOption | null;
    /**
     * Checks if an option is selectable (not disabled and not hidden)
     */
    protected isOptionSelectable(option: UiOption): boolean;
    /**
     * Handles type-ahead functionality for keyboard navigation
     */
    protected handleTypeAhead(char: string): void;
    /**
     * Finds an option that matches the type-ahead search string
     */
    protected findOptionByTypeAhead(searchString: string): UiOption | null;
    /**
     * Gets the display text for an option (either textContent or renderValue)
     */
    protected getOptionDisplayText(option: UiOption): string;
    /**
     * Selects an option and updates the component state
     */
    protected selectOption(option: UiOption): void;
    protected handleSelect(e: CustomEvent<{
        item: UiOption;
    }>): void;
    protected handleMenuClose(): void;
    protected handleMenuToggle(e: ToggleEvent): void;
    protected dispatchChangeEvent(item: UiOption): void;
    protected renderInput(): TemplateResult;
    protected renderMenu(): TemplateResult;
    protected handleSlotChange(): Promise<void>;
    protected renderFocusRing(): TemplateResult;
    render(): TemplateResult;
}
//# sourceMappingURL=Select.d.ts.map