import CwElement from '../../internal/cw-element.js';
import CwIcon from '../icon/icon.component.js';
import type { CSSResultGroup } from 'lit';
/**
 * @summary A lazy-loading facade for embedding third-party video (YouTube, Vimeo, etc.) without paying its cost until
 * someone actually wants to watch.
 * @documentation https://cordwainer.dev/components/video-embed
 * @status experimental
 * @since 1.6
 *
 * @dependency cw-icon
 *
 * @slot - An inert `<template>` containing the real embed markup (typically an `<iframe>`). Its content is cloned
 *  into the light DOM the first time the embed is activated, never before — this is what keeps a third-party
 *  player's own JS and tracking scripts from loading until someone actually clicks.
 * @slot caption - Optional caption content shown below the embed.
 *
 * @event cw-activate - Emitted once, the first time the embed is activated (by a user click or a call to `activate()`).
 *
 * @csspart base - The component's base wrapper.
 * @csspart play-button - The clickable button shown before activation, wrapping the thumbnail and play icon.
 * @csspart thumbnail - The poster image shown before activation.
 * @csspart play-icon - The play icon overlaid on the thumbnail.
 * @csspart embed - The container the real embed is cloned into after activation.
 * @csspart caption - The container wrapping the `caption` slot.
 */
export default class CwVideoEmbed extends CwElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'cw-icon': typeof CwIcon;
    };
    private readonly localize;
    /** The URL of the poster image shown before the embed is activated. */
    thumbnail: string;
    /**
     * An accessible label for the play control, e.g. `"Play: Introducing Cordwainer Elements"`. A generic facade
     * component has no way to know what the embedded video actually is, so provide this whenever the surrounding
     * context doesn't already make it obvious — falls back to a generic "Play video" otherwise.
     */
    label: string;
    /**
     * The aspect ratio to reserve for the embed before it activates, as a valid CSS `aspect-ratio` value (e.g.
     * `"16 / 9"`, `"4 / 3"`). Reserves layout space up front so activating the embed can't cause content to shift.
     * Set to an empty string to let the embed size itself instead.
     */
    aspectRatio: string;
    /** Whether the thumbnail image should load eagerly or lazily. */
    loading: 'eager' | 'lazy';
    /** Indicates whether the real embed has been activated. Reflects, so activation state is stylable and inspectable. */
    activated: boolean;
    private handlePlayButtonClick;
    /**
     * Activates the embed: clones the slotted `<template>`'s content into the light DOM and emits `cw-activate`.
     * Does nothing if already activated, or if no `<template>` is present.
     */
    activate(): void;
    render(): import("lit-html").TemplateResult<1>;
}