import { ReactiveControllerHost } from 'lit';
import { BaseController } from './base.controller.js';
/**
 * Controller for reactive media query matching.
 * Automatically updates the host when the media query matches or unmatches.
 *
 * @example
 * ```ts
 * class MyComponent extends LitElement {
 *   private mobile = new MatchMediaController(this, '(max-width: 768px)');
 *   private darkMode = new MatchMediaController(this, '(prefers-color-scheme: dark)');
 *
 *   render() {
 *     return html`
 *       <div class=${this.mobile.matches ? 'mobile' : 'desktop'}>
 *         ${this.darkMode.matches ? 'Dark mode' : 'Light mode'}
 *       </div>
 *     `;
 *   }
 * }
 * ```
 */
export declare class MatchMediaController extends BaseController {
    private mediaQuery;
    private _matches;
    constructor(host: ReactiveControllerHost, query: string);
    get matches(): boolean;
    private handleChange;
    hostConnected(): void;
    hostDisconnected(): void;
}
//# sourceMappingURL=match-media.controller.d.ts.map