import { LitElement } from 'lit';
import { TriggerShortcut } from '../types';
declare const NAME = "canary-trigger-searchbar";
/**
 * @csspart button - Button
 * @csspart icon - Icon
 * @csspart text - Text
 * @csspart kbd - kbd
 * @cssprop --canary-trigger-searchbar-max-width - Max width
 * @cssprop --canary-trigger-searchbar-height - Height
 * @description
 * This component probably has the most customization needs.
 *
 * You can use existing CSS parts, like below:
 *
 * ```css
 * canary-trigger-searchbar::part(button) {
 *   background-color: var(--vp-code-block-bg);
 * }
 * canary-trigger-searchbar::part(kbd) {
 *   background-color: var(--vp-code-bg);
 * }
 *
 * But in most cases, you'll want to bring your own, and plug it in the "trigger" slot.
 *
 * ```html
 * <YourComponent slot="trigger" />
 * ```
 */
export declare class CanaryTriggerSearchbar extends LitElement {
    shortcut: TriggerShortcut;
    render(): import('lit-html').TemplateResult<1>;
    mobile(): import('lit-html').TemplateResult<1>;
    desktop(): import('lit-html').TemplateResult<1>;
    constructor();
    static styles: import('lit').CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        [NAME]: CanaryTriggerSearchbar;
    }
    namespace JSX {
        interface IntrinsicElements {
            [NAME]: any;
        }
    }
}
export {};