/**
 * TySelect Web Component — THE select control (replaces ty-dropdown/ty-multiselect).
 * Cardinality follows native <select>: default single (scalar value, picking closes
 * the popup), `multiple` toggles options and submits repeated `name=` FormData entries.
 * Skins: default form field, `compact` content-hugging trigger, slot="trigger" custom.
 */
import type { Flavor, Size } from "../types/common.js";
import { type Placement } from "../utils/positioning.js";
import { TyComponent } from "../base/ty-component.js";
import type { PropertyChange } from "../utils/property-manager.js";
interface TagData {
    value: string;
    text: string;
    element: HTMLElement;
}
interface SelectState {
    open: boolean;
    search: string;
    highlightedIndex: number;
    filteredTags: TagData[];
    selectedValues: string[];
    mode: "desktop" | "mobile";
}
/**
 * Ty Select Component
 */
export declare class TySelect extends TyComponent<SelectState> {
    protected static properties: {
        value: {
            type: "string";
            visual: boolean;
            formValue: boolean;
            emitChange: boolean;
            default: string;
            coerce: (v: any) => string;
        };
        name: {
            type: "string";
            default: string;
        };
        multiple: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        compact: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        placeholder: {
            type: "string";
            visual: boolean;
            default: string;
        };
        label: {
            type: "string";
            visual: boolean;
            default: string;
        };
        disabled: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        readonly: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        required: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        clearable: {
            type: "boolean";
            visual: boolean;
            default: boolean;
            aliases: {
                "not-clearable": boolean;
            };
        };
        externalSearch: {
            type: "boolean";
            visual: boolean;
            default: boolean;
            aliases: {
                "external-search": boolean;
            };
        };
        allowCreate: {
            type: "boolean";
            visual: boolean;
            default: boolean;
            aliases: {
                "allow-create": boolean;
            };
        };
        createTransform: {
            type: "string";
            visual: boolean;
            default: string;
            aliases: {
                "create-transform": boolean;
            };
            coerce: (v: any) => "none" | "slug";
        };
        notSearchable: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        align: {
            type: "string";
            visual: boolean;
            default: string;
            validate: (v: any) => boolean;
            coerce: (v: any) => "start" | "end" | "center";
        };
        placement: {
            type: "string";
            visual: boolean;
            default: string;
        };
        size: {
            type: "string";
            visual: boolean;
            default: Size;
            validate: (v: any) => boolean;
            coerce: (v: any) => any;
        };
        debounce: {
            type: "number";
            default: number;
            validate: (v: any) => boolean;
            coerce: (v: any) => number;
        };
        "available-label": {
            type: "string";
            visual: boolean;
            default: string;
        };
        "selected-label": {
            type: "string";
            visual: boolean;
            default: string;
        };
        "no-options-message": {
            type: "string";
            visual: boolean;
            default: string;
        };
        loading: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        flavor: {
            type: "string";
            visual: boolean;
            default: string;
        };
    };
    private _name;
    private _multiple;
    private _compact;
    private _placeholder;
    private _label;
    private _disabled;
    private _readonly;
    private _required;
    private _clearable;
    private _externalSearch;
    private _allowCreate;
    private _createTransform;
    private _notSearchable;
    private _loading;
    private _scrollLockId;
    private _size;
    private _availableLabel;
    private _selectedLabel;
    private _noOptionsMessage;
    private _state;
    private _stubClickHandler;
    private _tagClickHandler;
    private _searchInputHandler;
    private _blockSearchClick;
    private _keyboardHandler;
    private _debounce;
    private _searchDebounceTimer;
    private _optionsScrollbar;
    private _childObserver;
    private _selectedClone;
    private _customFlavorSheet;
    constructor();
    /** TyComponent handles property capture automatically. */
    protected onConnect(): void;
    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
    private _syncCustomFlavor;
    protected onDisconnect(): void;
    /** Handle state synchronization BEFORE render. */
    protected onPropertiesChanged(changes: PropertyChange[]): void;
    /**
     * Toggle the loading visual state on the open popup.
     * Replaces the available-options area with a centered spinner; search input stays usable.
     * Pulls the latest registered loader SVG on each call so registry changes
     * take effect on the next loading toggle.
     */
    private applyLoadingState;
    /** Form value: a plain entry for single, FormData with repeated entries for multiple (HTMX standard). */
    protected getFormValue(): FormDataEntryValue | FormData | null;
    private parseValue;
    /** Initialize component state from the value property / pre-selected children. */
    private initializeState;
    /**
     * Declarative init: no `value` attribute, but markup pre-marked one or more
     * options `selected` — native <select> semantics. This is the ONE place
     * selection is read FROM the DOM rather than treated as a rendering of
     * state (see getSelectedValues()): it seeds initial state, once. After
     * this, `value` rules — flipping an option's `selected` property later
     * does nothing, same as native.
     *
     * Called from initializeState() at connect AND from the child observer:
     * a real HTML parser upgrades a custom element the moment its start tag is
     * seen, BEFORE its children exist — `<ty-select>` connects with zero
     * `<ty-option>` children when it's part of the page's own markup (as
     * opposed to an already-built fragment attached via innerHTML/appendChild,
     * where children exist at connect). Calling this only at connect would
     * silently miss every option parsed after that instant, which is the
     * common case for markup that is literally in the page's initial HTML.
     *
     * Safe to call repeatedly: no-ops once `value` has ever been explicitly
     * set (attribute or property) or state is already non-empty — including
     * after a real `.clear()`, which removes `selected` from every option via
     * syncSelectedTags, so there is nothing left here to (re-)seed from.
     */
    private resolveDeclarativeSelection;
    /**
     * Get all option elements from the component (ty-option preferred, ty-tag accepted)
     */
    private getTagElements;
    private getTagData;
    /**
     * Select an option - attribute only. The option stays in the list with
     * selected styling; chips are rendered out-of-band (ty-selected-options).
     */
    private selectTag;
    /**
     * Deselect an option - attribute only.
     */
    private deselectTag;
    /**
     * Get the array of currently selected values.
     *
     * Reads STATE (`_state.selectedValues`), not the DOM: `value` is the
     * selection, and an option's `selected` attribute is a rendering of it
     * (written by syncSelectedTags below), never the other way round. This
     * matters whenever options don't fully reflect the selection — external
     * search legitimately has a selected value with no matching option
     * present; a DOM scan would report empty and desync .value, `required`
     * validation and the click-toggle logic from what's actually selected.
     */
    private getSelectedValues;
    private syncSelectedTags;
    /**
     * role="option" for every current option/tag — separate from
     * syncSelectedTags (which only runs when the `value` property changes)
     * so it also covers the "nothing selected yet, value never touched"
     * startup case. Idempotent; cheap to call from the child MutationObserver
     * on every light-DOM change.
     */
    private ensureOptionRoles;
    /** Central update function — synchronizes everything via TyComponent's property system. */
    private updateComponentValue;
    /**
     * Build rich item info for values, read off the matching option elements
     */
    private getSelectedItems;
    private calculatePosition;
    private _setupOptionsScrollbar;
    private _destroyOptionsScrollbar;
    /**
     * Open dropdown dialog (desktop mode)
     *
     * `<dialog>.showModal()` puts the dialog in the top layer with a backdrop, but
     * does NOT prevent the page behind it from scrolling. We use the shared scroll
     * lock utility (overflow:hidden on <html>) to keep wheel/touch scrolling from
     * leaking through to the body — same behavior <ty-dropdown> and <ty-modal>
     * implement.
     */
    private openDropdown;
    private closeDropdown;
    /** Open mobile modal — <dialog> handles z-index natively. */
    private openMobileModal;
    private closeMobileModal;
    private handleStubClick;
    /**
     * .select-clear click — must stop propagation before it bubbles to the
     * stub's own click handler (which would otherwise also open the dropdown).
     */
    private handleClearClick;
    /**
     * Keyboard-open the (closed) stub. The stub is a plain div with
     * tabindex="0", not a native <button> — Enter/Space don't turn into
     * click events on their own the way they do for real form controls, and
     * without this a keyboard-only user could Tab to the field but never
     * open it. document-level handleKeyboard() only runs once already open
     * (it early-returns on !this._state.open), so this is the other half.
     */
    private handleStubKeydown;
    private handleTagClick;
    /**
     * Select/toggle a tag by element — the part of handleTagClick that has no
     * dependency on a real DOM event, so keyboard/programmatic callers (Enter
     * on a highlighted option, allow-create's exact-match dedup) can call it
     * directly instead of faking an Event object just to satisfy
     * preventDefault()/stopPropagation().
     */
    private selectByTag;
    /**
     * allow-create: Enter with unmatched search text mints a new option.
     * Returns true if it handled the key (created, or selected an existing
     * exact match instead of duplicating) — false if there's nothing to do
     * (blank query, or allow-create is off), so the caller's normal Enter
     * handling (select highlighted, or no-op) proceeds.
     */
    private tryCreateFromSearch;
    /**
     * Multiple + allow-create: clear the search box and re-show the full
     * (now-longer) option list so the next tag can be typed immediately —
     * the tags-input pattern.
     */
    private clearSearchAfterCreate;
    private blockSearchClick;
    private handleSearchInput;
    private handleKeyboard;
    /**
     * Next tag index in `direction` (-1/1) that isn't disabled, wrapping
     * around — mirrors handleTagClick's disabled check so keyboard nav can
     * never land on/select what a click already refuses to. Returns -1 if
     * every tag is disabled (or there are none).
     */
    private nextEnabledTagIndex;
    private filterTags;
    private updateTagVisibility;
    private updateOptionsVisibility;
    private clearHighlights;
    private highlightTag;
    /** Dispatch the search event for external search handling, with optional debounce. */
    private dispatchSearchEvent;
    private fireSearchEvent;
    /**
     * Dispatch lifecycle events for popup open/close.
     * On open with external-search, also fire a `search` event with an empty
     * query so consumers have a clean hook to reset/refetch the option list.
     */
    private fireOpenEvent;
    private fireCloseEvent;
    private dispatchChangeEvent;
    protected render(): void;
    /**
     * Reflect constraint validation to the owning <form> via ElementInternals.
     * Without this `required` is only cosmetic — form.checkValidity() (and a
     * real submit) never actually blocks on an empty required select. Mirrors
     * ty-input's updateValidity(): empty + required => valueMissing; disabled
     * fields are barred from constraint validation.
     */
    private updateValidity;
    /**
     * When a consumer slots their own trigger (slot="trigger"), strip the
     * default field chrome so the trigger is styled entirely by the consumer.
     */
    private setupTriggerSlot;
    private setupEventListeners;
    private buildStubClasses;
    private renderDesktop;
    private renderMobile;
    private setupMobileEventListeners;
    private handleMobileStubClick;
    /** Keyboard-open the (closed) mobile stub — see handleStubKeydown for why this is needed. */
    private handleMobileStubKeydown;
    private handleMobileTagClick;
    private updateMobileSelectedState;
    /**
     * Hand the dialog's spare vertical space to one section or the other. Only
     * one can own it: on a phone there isn't enough height for two scrollable
     * lists to both be usefully tall, so tapping a header trades the space
     * rather than splitting it. Selecting from the list hands it back to
     * "available" — you're still picking, so that's the list you want open.
     */
    private expandMobileSection;
    /**
     * The selected values as dismissible chips, pinned above the available
     * list so a long list can never scroll the current selection out of sight.
     * Rebuilt wholesale: the strip is small, and diffing it would have to
     * track chip identity for the sake of a handful of nodes.
     */
    private renderMobileSelectedChips;
    /**
     * Should the popup show a search row? external-search/allow-create pin it
     * on (the input is the only way to get a query out at all), not-searchable
     * forces it off, and otherwise it follows the list: shown once there are
     * more options than fit without scrolling.
     */
    private shouldShowSearch;
    /**
     * Toggle the search row (desktop header / mobile input) per shouldShowSearch.
     */
    private updateSearchVisibility;
    /**
     * Selection summary appropriate to cardinality × skin:
     * - single (field or compact): the selected OPTION itself — cloned into
     *   slot="selected" so rich HTML options display intact (dropdown parity);
     *   placeholder when empty
     * - multiple + field: joined labels (ellipsis via CSS), or placeholder
     * - multiple + compact: placeholder + count badge
     */
    private updateSelectionDisplay;
    /**
     * Keep exactly one display clone (slot="selected", marked `cloned`) in our
     * light DOM matching the given value — or none. The clone never counts as
     * an option (getTagElements filters [cloned]) and ty-option's own
     * :host([cloned]) styling strips its list-row chrome.
     */
    private syncSelectedClone;
    /**
     * Deselect a value programmatically WITH a change event.
     * Used by out-of-band chip displays (ty-selected-options) so dismissing a chip
     * fires change like any in-popup interaction (HTMX hx-trigger="change" etc.).
     */
    deselectValue(value: string): void;
    /**
     * Clear the entire selection programmatically WITH a change event
     * (action: 'clear'). No-op if nothing is selected. Exists so slot="trigger"
     * consumers (custom chrome, built-in clear UI hidden by design) can wire
     * their own clear icon's click handler to it.
     */
    clear(): void;
    get value(): string;
    set value(val: string);
    get name(): string;
    set name(val: string);
    get multiple(): boolean;
    set multiple(value: boolean);
    get compact(): boolean;
    set compact(value: boolean);
    get placeholder(): string;
    set placeholder(val: string);
    get label(): string;
    set label(val: string);
    get disabled(): boolean;
    set disabled(value: boolean);
    get loading(): boolean;
    set loading(value: boolean);
    get readonly(): boolean;
    set readonly(value: boolean);
    get clearable(): boolean;
    set clearable(value: boolean);
    get required(): boolean;
    set required(value: boolean);
    get notSearchable(): boolean;
    set notSearchable(value: boolean);
    get externalSearch(): boolean;
    set externalSearch(value: boolean);
    get debounce(): number;
    set debounce(value: number | string);
    get size(): Size;
    set size(value: Size);
    get align(): "start" | "center" | "end";
    set align(value: "start" | "center" | "end");
    get placement(): Placement | "";
    set placement(value: Placement | "");
    get flavor(): Flavor;
    set flavor(value: Flavor);
    get form(): HTMLFormElement | null;
}
export {};