/**
 * createDropdownList - the HEADLESS core behind <SvDropDownList>: a single-select
 * dropdown state machine (trigger open/close, roving active index over enabled
 * options, full keyboard) exposed as **prop-getters** you spread onto YOUR OWN
 * markup. No styles, no DOM, no portal/measurement - those stay in the styled
 * component.
 *
 * ```svelte
 * <script lang="ts">
 *   import { createDropdownList } from '@svgrid/grid'
 *   let value = $state<string | null>(null)
 *   const dd = createDropdownList({ options: () => options, value: () => value, onChange: (v) => (value = v) })
 * </script>
 * <button {...dd.triggerProps()}>{dd.selected?.label ?? 'Select'}</button>
 * {#if dd.open}
 *   <ul {...dd.listboxProps()}>
 *     {#each options as opt, i (opt.value)}<li {...dd.optionProps(i)}>{opt.label}</li>{/each}
 *   </ul>
 * {/if}
 * ```
 */
import { type ListOption } from './list-option';
export type DropdownValue = string | number | null;
/** Reactive inputs are passed as getters so the core tracks live prop changes. */
export type DropdownListConfig = {
    options: () => ReadonlyArray<ListOption>;
    value: () => DropdownValue;
    onChange?: (value: string | number) => void;
    disabled?: () => boolean;
    /** Read-only: value shown, trigger focusable, but the panel will not open. */
    readonly?: () => boolean;
    ariaLabel?: () => string | undefined;
    /** DOM focus hook provided by the renderer; the core never touches the DOM. */
    focusTrigger?: () => void;
    id?: () => string | undefined;
    invalid?: () => boolean;
    required?: () => boolean;
    error?: () => string | undefined;
    hint?: () => string | undefined;
};
export declare function createDropdownList(config: DropdownListConfig): {
    /** Panel open state. */
    readonly open: boolean;
    /** Highlighted option index into `options`. */
    readonly activeIndex: number;
    /** The option matching the controlled value, if any. */
    readonly selected: ListOption | null;
    /** Controlled value. */
    readonly value: DropdownValue;
    isActive: (i: number) => boolean;
    isSelected: (o: ListOption) => boolean;
    setActive: (i: number) => void;
    openPanel: () => void;
    close: () => void;
    toggle: () => void;
    pick: (i: number) => void;
    move: (d: number) => void;
    onKeydown: (e: KeyboardEvent) => void;
    /** Spread onto the trigger <button>. */
    triggerProps: () => {
        'aria-readonly': true | undefined;
        disabled: boolean;
        onclick: () => void;
        onkeydown: (e: KeyboardEvent) => void;
        'aria-invalid': "true" | undefined;
        'aria-required': "true" | undefined;
        'aria-describedby': string | undefined;
        'aria-label': string | undefined;
        id: string | undefined;
        type: "button";
        'aria-haspopup': "listbox";
        'aria-expanded': boolean;
        'aria-controls': string;
        'aria-activedescendant': string | undefined;
    };
    /** Spread onto the listbox container. */
    listboxProps: () => {
        id: string;
        role: "listbox";
        tabindex: number;
    };
    /** Spread onto the option at `index` (index into `options`). */
    optionProps: (index: number) => {
        role: "option";
        id: string;
        tabindex: number;
        'aria-selected': boolean;
        'aria-disabled': boolean | undefined;
        'data-idx': number;
        onclick: () => void;
        onpointermove: () => void;
    };
};
export type DropdownList = ReturnType<typeof createDropdownList>;