export type InputSuggestInstance = {
    focus: () => void;
    select: () => void;
    clear: () => void;
    open: () => void;
    close: () => void;
};
import { type IconProp } from '../icon';
import type { InputSuggestion } from './types';
import type { HTMLInputAttributes } from 'svelte/elements';
type Props = {
    /** Controlled — feed `on.input` back into it; the suggestion filter reads this prop, not the DOM. */
    value: string | null | undefined;
    /** Advisory shortcuts offered in the popover. Never a constraint — any typed text stays valid. */
    suggestions: InputSuggestion[];
    /** @default 'md' */
    size?: 'sm' | 'md' | 'lg';
    placeholder?: string;
    disabled?: boolean;
    /** Non-editable but selectable; the popover never opens. */
    readonly?: boolean;
    /** Visual display mode — non-focusable, no hover/focus animations. */
    inert?: boolean;
    /** Visual error state — also sets `aria-invalid="true"`. */
    error?: boolean;
    /** Strip border + background + focus underline. */
    borderless?: boolean;
    /** Show the × clear button when the value is non-empty. */
    clearable?: boolean;
    /**
     * Strip leading / trailing whitespace when the value is committed — focus leaving the control or
     * Enter. Typing is never touched, so the committed value always equals what the field shows.
     * @default true
     */
    trim?: boolean;
    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
    icon?: IconProp;
    name?: string;
    id?: string;
    /** @default 'off' */
    autocomplete?: HTMLInputAttributes['autocomplete'];
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-required'?: boolean;
    on?: {
        /** Fires on every keystroke, and on pick / clear — same signature and timing as `Input`. */
        input?: (value: string) => void;
        /** Fires when an edit is committed — focus leaving the control or Enter — and on pick / clear. */
        change?: (value: string) => void;
        /** Fires after `input` and `change` when the user picked a suggestion. */
        select?: (suggestion: InputSuggestion) => void;
        /** Fires when focus leaves the whole control — reaching into the popover does not count as leaving. */
        blur?: () => void;
        focus?: () => void;
        keydown?: (event: KeyboardEvent) => void;
    };
};
/**
 * InputSuggest — a plain text field that offers suggestions. **NOT a select:** the value is the
 * string the user typed, it changes on every keystroke, and it is never constrained to the
 * suggestion list — typed text that matches nothing stays valid, and there is no "Use …" /
 * "Create …" confirmation step. `on.input` fires per keystroke exactly like `Input`'s; `on.change`
 * commits once per edit — when focus leaves the whole control, on Enter, or on pick / clear —
 * so reaching into the popover never commits the half-typed query. `on.select` additionally fires
 * when a suggestion was picked. `value` is controlled and is what the filter reads.
 *
 * A click opens the full list, typing filters it by case-insensitive substring, no match closes the
 * popover and the field keeps working as an ordinary input. Focus alone opens nothing — tabbing in
 * just places the caret, as with the selects. ArrowDown / ArrowUp move through the
 * suggestions, Enter substitutes the highlighted one (and is left alone when nothing is
 * highlighted), Escape closes without touching the text, Tab closes and keeps what was typed.
 * Trigger chrome, popover and rows are shared with the selects, minus the chevron.
 *
 * Leading / trailing whitespace is stripped on commit, so the committed value always matches what the
 * field shows. Typing is untouched. Pass `trim={false}` to opt out.
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--input-suggest--description--color` | Suggestion description line color | `var(--sc-kit--color--text--muted)` |
 * | `--sc-kit--input-suggest--description--font-size` | Suggestion description line font size | `var(--sc-kit--font-size--sm)` |
 *
 * **Trigger** (shared with the selects): `--sc-kit--select--trigger--{height, padding-inline, gap,
 * background, background--disabled, border-color, border-color--hover, border-color--error,
 * border-radius, underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 *
 * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius, box-shadow,
 * font-size, max-height, padding}`.
 *
 * **Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 * padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins
 * it to `auto` so a row with a `description` can grow to two lines.
 *
 * **Clear button** (rendered when `clearable` and the value is non-empty):
 * `--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
 * background--hover}`.
 */
declare const Cmp: import("svelte").Component<Props, {
    focus: () => void;
    select: () => void;
    open: () => void;
    close: () => void;
    clear: () => void;
}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;