import CwElement from '../../internal/cw-element.js';
import type { CSSResultGroup } from 'lit';
/**
 * @summary A responsive image with resolution switching, art direction, format negotiation, and layout-shift-free
 * loading, wrapping the native `<picture>` element.
 * @documentation https://cordwainer.dev/components/picture
 * @status experimental
 * @since 1.6
 *
 * @event cw-load - Emitted when the image loads successfully.
 * @event cw-error - Emitted when the image fails to load.
 *
 * @slot - Optional `<source>` elements, used exactly like the ones inside a native `<picture>` — `media` for art
 *  direction, `type` for format negotiation, `srcset`/`sizes` for resolution switching. Any other slotted element is
 *  ignored.
 * @slot caption - Optional caption shown below the image.
 *
 * @csspart base - The component's base wrapper.
 * @csspart frame - The container that holds the placeholder and the image, and reserves the image's layout space.
 * @csspart placeholder - The placeholder shown until the image loads.
 * @csspart image - The underlying `<img>` element.
 * @csspart caption - The container wrapping the `caption` slot.
 *
 * @cssproperty [--placeholder-color=var(--cw-color-neutral-100)] - The solid color shown until the image loads.
 */
export default class CwPicture extends CwElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private sourceObserver;
    private picture;
    private image;
    /** The URL of the fallback image, used when no `srcset` or slotted `<source>` matches. */
    src?: string;
    /**
     * One or more candidate image URLs with either density (`1x`, `2x`) or width (`400w`, `800w`) descriptors. Use width
     * descriptors together with `sizes` so the browser can pick an image before layout.
     */
    srcset?: string;
    /** The rendered width of the image at different viewport conditions. Only meaningful with width descriptors in `srcset`. */
    sizes?: string;
    /**
     * A description of the image for assistive devices. Required for meaningful images. An empty string (`alt=""`) marks
     * the image as decorative, the same as the `decorative` attribute does.
     */
    alt?: string;
    /** Marks the image as purely decorative, so assistive devices skip it. Renders `alt=""`, ignoring `alt`. */
    decorative: boolean;
    /**
     * The image's intrinsic width in pixels. Together with `height`, this reserves the right amount of layout space
     * before the image loads. It does not set the rendered size — size the element with CSS.
     */
    width?: number;
    /** The image's intrinsic height in pixels. See `width`. */
    height?: number;
    /**
     * Overrides the aspect ratio implied by `width` and `height`, as a valid CSS `aspect-ratio` value (e.g. `"16 / 9"`).
     * Useful to crop every image to a consistent shape — see `fit` and `position`.
     */
    aspectRatio: string;
    /**
     * Indicates how the browser should load the image. Use `eager` (with `fetchpriority="high"`) for images that are
     * visible on first paint, such as a hero image.
     */
    loading: 'eager' | 'lazy';
    /** Hints how the browser should decode the image. */
    decoding: 'sync' | 'async' | 'auto';
    /** Hints at the relative priority the browser should give this image when fetching it. */
    fetchpriority: 'high' | 'low' | 'auto';
    /** Sets the CORS mode used when fetching the image. */
    crossorigin?: 'anonymous' | 'use-credentials';
    /** Controls how much referrer information is sent when fetching the image. */
    referrerpolicy?: ReferrerPolicy;
    /** How the image is resized to fit its frame. Only visible when `aspect-ratio` crops the image. */
    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
    /** How the image is positioned within its frame, as a valid CSS `object-position` value. */
    position: string;
    /**
     * The URL (or data URI) of a low-quality image to show, blurred, until the real image loads. Without it, a solid
     * `--placeholder-color` is shown instead.
     */
    placeholder?: string;
    /** Indicates whether the image has loaded successfully. */
    loaded: boolean;
    /** Indicates whether the image failed to load. */
    error: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    private handleSourceMutation;
    /**
     * A native `<picture>` only honors `<source>` elements that are its direct children, and ignores ones that are merely
     * slotted into it. So instead of slotting them, mirror the light DOM's `<source>` elements into the shadow `<picture>`.
     */
    private syncSources;
    private handleLoad;
    private handleError;
    handleSourceChange(): void;
    render(): import("lit-html").TemplateResult<1>;
}