import { TemplateResult } from 'lit';
import { Placement } from '@floating-ui/dom';
import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';
export type ComboboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/** A single option read from the `<datalist>`. */
export interface ComboboxItem {
    value: string;
    /** Plain text used for filtering and the input display. */
    label: string;
    disabled: boolean;
    /** Rich inner markup (from a non-empty `<option>`), projected into the row. */
    html?: string;
}
/** Default filter: accent/case-insensitive, every space-separated keyword must match. */
export type ComboboxFilter = (item: ComboboxItem, query: string) => boolean;
/** Fired when an option is committed (selected). Bubbles; not composed. */
export declare class ComboboxChangeEvent extends Event {
    readonly value: string;
    constructor(value: string);
}
/** Fired as the user types (filter query changes). Bubbles; not composed. */
export declare class ComboboxInputEvent extends Event {
    /** The current query text. */
    readonly value: string;
    constructor(value: string);
}
interface ComboboxEventMap {
    change: ComboboxChangeEvent;
    input: ComboboxInputEvent;
}
/**
 * A text input paired with a filterable list of options (the ARIA combobox
 * pattern). Options are authored as a native `<datalist>` of `<option>` —
 * the same authoring surface as `l-select`. Form-associated.
 *
 * @summary A searchable text input with a filtered list of options.
 *
 * @example
 * ```html
 * <l-combobox label="Country" name="country" placeholder="Search…">
 *   <datalist>
 *     <option value="us">United States</option>
 *     <option value="fr">France</option>
 *   </datalist>
 * </l-combobox>
 * ```
 *
 * @event change - Fired when an option is selected. Bubbles. Not cancelable. Properties: `value: string`.
 * @event input - Fired as the user types. Bubbles. Not cancelable. Properties: `value: string` (the query).
 * @event show - Fired before the list opens. Cancelable.
 * @event hide - Fired before the list closes. Cancelable.
 *
 * @csspart base - The host wrapper.
 * @csspart control - The input control row (input + clear + chevron).
 * @csspart input - The text input.
 * @csspart panel - The floating popover panel.
 * @csspart listbox - The options container.
 * @csspart option - Each option row.
 * @csspart empty - The "no results" message.
 *
 * @cssproperty [--height] - Control height. Defaults to the form-control height.
 * @cssproperty [--border-radius] - Control + panel radius.
 * @cssproperty [--background] - Panel background.
 *
 * @customElement l-combobox
 */
export declare class Combobox extends LuxenFormAssociatedElement {
    static styles: import('lit').CSSResult[];
    private _localize;
    private readonly _listId;
    private _floating;
    /** Selected value (the chosen option's `value`). */
    accessor value: string;
    /** Placeholder text in the input. */
    accessor placeholder: string;
    /** Accessible label for the input. */
    accessor label: string;
    /** Control size. */
    accessor size: ComboboxSize;
    /** Show a button to clear the value. */
    accessor withClear: boolean;
    /** Accept a typed value that matches no option. */
    accessor allowCustom: boolean;
    /** Wrap the matching substring of each option in `<mark>`. */
    accessor highlight: boolean;
    /** Panel placement relative to the control. */
    accessor placement: Placement;
    /** Override the option filter. `(item, query) => boolean`. */
    filter: ComboboxFilter;
    private accessor _open;
    private accessor _query;
    private accessor _activeIndex;
    private accessor _items;
    private get _controlEl();
    private get _panelEl();
    private get _inputEl();
    connectedCallback(): void;
    updated(changed: Map<string, unknown>): void;
    formResetCallback(): void;
    formStateRestoreCallback(state: string): void;
    private _readItems;
    private _labelForValue;
    private get _filtered();
    private _resetDisplay;
    private _updateValidity;
    show(): void;
    hide(): void;
    private _commit;
    private _commitActiveOrCustom;
    private _clear;
    private _moveActive;
    private _stepActive;
    private _scrollActiveIntoView;
    private _onKeyDown;
    private _onInput;
    private _onControlPointerDown;
    private _onFocusOut;
    private _highlight;
    render(): TemplateResult<1>;
}
export interface Combobox {
    addEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: Combobox, ev: ComboboxEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: Combobox, ev: ComboboxEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
export {};
//# sourceMappingURL=combobox.d.ts.map