/**
 * TySelect Web Component
 *
 * The select control — replaces ty-dropdown and ty-multiselect.
 *
 * Cardinality (native <select> semantics):
 * - default: SINGLE select — scalar value, picking an option closes the popup
 * - `multiple`: multi select — comma value / repeated FormData entries,
 *   options toggle and the popup stays open
 *
 * Skins:
 * - default: form FIELD — full width, --ty-input-* tokens, matches ty-input;
 *   shows the selected label(s) inline
 * - `compact`: content-hugging trigger for toolbars/filter bars; single shows
 *   the selected label, multiple shows placeholder + count badge (pair with
 *   <ty-selected-options>)
 * - slot="trigger": consumer skin — replaces field/compact chrome entirely,
 *   behavior/ARIA/form participation unchanged
 *
 * - ty-option children (ty-tag also accepted)
 * - Desktop popup with smart positioning, mobile full-screen modal
 * - Search / external-search / debounce, keyboard navigation
 * - Form association: single submits one entry, multiple submits repeated
 *   `name=` entries (HTMX-ready)
 * - change event detail: { value, values, items: [{value, label, flavor}], action, item }
 *   (`value` is a scalar for single, array for multiple)
 *
 * @example
 * ```html
 * <!-- Single select, field skin -->
 * <ty-select label="Robot" name="robot">
 *   <ty-option value="bobo">Bobo Robot</ty-option>
 *   <ty-option value="eywa">EYWA Dataset Example</ty-option>
 * </ty-select>
 *
 * <!-- Multi select, compact skin + out-of-band chips -->
 * <ty-select multiple compact label="Robots" name="robots" id="robots">...</ty-select>
 * <ty-selected-options for="robots"></ty-selected-options>
 * ```
 */
import type { Flavor, Size } from "../types/common.js";
import { TyComponent } from "../base/ty-component.js";
import type { PropertyChange } from "../utils/property-manager.js";
/**
 * Tag data structure
 */
interface TagData {
    value: string;
    text: string;
    element: HTMLElement;
}
/**
 * Component state structure
 */
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";
        };
        searchable: {
            type: "string";
            visual: boolean;
            default: string;
            coerce: (v: any) => "auto" | "always" | "never";
        };
        align: {
            type: "string";
            visual: boolean;
            default: string;
            validate: (v: any) => boolean;
            coerce: (v: any) => "start" | "end";
        };
        size: {
            type: "string";
            visual: boolean;
            default: string;
            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;
        };
        "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 _searchable;
    private _loading;
    private _scrollLockId;
    private _size;
    private _availableLabel;
    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();
    /**
     * Called when component is connected to DOM
     * TyComponent handles property capture automatically
     */
    protected onConnect(): void;
    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
    private _syncCustomFlavor;
    /**
     * Called when component is disconnected from DOM
     * Clean up event listeners and timers
     */
    protected onDisconnect(): void;
    /**
     * Called when properties change
     * 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;
    /**
     * Get the form value for this component
     * Returns FormData with multiple entries (HTMX standard)
     */
    protected getFormValue(): FormDataEntryValue | FormData | null;
    /**
     * Parse select value (comma-separated string to array)
     */
    private parseValue;
    /**
     * Initialize component state from attributes
     * Reads from both property and attribute (like ClojureScript version)
     */
    private initializeState;
    /**
     * Get all option elements from the component (ty-option preferred, ty-tag accepted)
     */
    private getTagElements;
    /**
     * Extract value and text from a ty-tag element
     */
    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 array of currently selected values from tags (ALWAYS reads from DOM)
     */
    private getSelectedValues;
    /**
     * Sync tag selection states with desired values
     */
    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
     * Uses TyComponent's property system for proper lifecycle
     */
    private updateComponentValue;
    /**
     * Build rich item info for values, read off the matching option elements
     */
    private getSelectedItems;
    /**
     * Calculate and set dropdown position with smart direction detection
     */
    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;
    /**
     * Close dropdown dialog (desktop mode)
     */
    private closeDropdown;
    /**
     * Open mobile modal (mobile mode)
     * Now using <dialog> element for native z-index management
     */
    private openMobileModal;
    /**
     * Close mobile modal (mobile mode)
     * Now using <dialog> element for native management
     */
    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;
    /**
     * Filter tags based on search query
     */
    private filterTags;
    /**
     * Update visibility of tags based on filtered list
     */
    private updateTagVisibility;
    /**
     * Show/hide the dropdown options area
     */
    private updateOptionsVisibility;
    /**
     * Clear all tag highlights
     */
    private clearHighlights;
    /**
     * Highlight tag at specific index
     */
    private highlightTag;
    /**
     * Dispatch search event for external search handling
     * With optional debounce support
     */
    private dispatchSearchEvent;
    /**
     * Fire the actual search event
     */
    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;
    /**
     * Dispatch custom change event
     */
    private dispatchChangeEvent;
    /**
     * Main render method (required by TyComponent)
     * Delegates to mode-specific renderer
     */
    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;
    /**
     * Setup event listeners
     */
    private setupEventListeners;
    /**
     * Build CSS class list for stub
     */
    private buildStubClasses;
    /**
     * Render desktop mode with dialog
     */
    private renderDesktop;
    /**
     * Render mobile mode with full-screen modal
     * Following dropdown.ts mobile structure
     */
    private renderMobile;
    /**
     * Setup event listeners for mobile mode
     * Using <dialog> element - backdrop clicks handled natively
     */
    private setupMobileEventListeners;
    /**
     * Handle mobile stub click - open modal
     */
    private handleMobileStubClick;
    /** Keyboard-open the (closed) mobile stub — see handleStubKeydown for why this is needed. */
    private handleMobileStubKeydown;
    /**
     * Handle mobile tag click - select and potentially close
     */
    private handleMobileTagClick;
    /**
     * Update mobile options section state (count, empty state)
     */
    private updateMobileSelectedState;
    /**
     * Update selection display: count badge next to the placeholder
     */
    /**
     * Should the popup show a search row? external-search always (the input is
     * the mechanism); searchable always/never wins otherwise; 'auto' shows it
     * only when the option list is long enough to need filtering.
     */
    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 searchable(): "auto" | "always" | "never";
    set searchable(value: "auto" | "always" | "never" | 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" | "end";
    set align(value: "start" | "end");
    get flavor(): Flavor;
    set flavor(value: Flavor);
    get form(): HTMLFormElement | null;
}
export {};
//# sourceMappingURL=select.d.ts.map