import { LitElement } from "lit";
import type { PropertyValues } from "lit";
export type SkyImageLoading = "lazy" | "eager";
export type SkyImageDecoding = "async" | "sync" | "auto";
/**
 * @element sky-image
 *
 * @summary Responsive image component with style controls, `srcset`, and optional auto `sizes`.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/image
 *
 * @slot - No slots are exposed; image content is rendered internally.
 * @property {string} src - Primary image source URL.
 * @property {string} alt - Alternative text for accessibility.
 * @property {string} width - CSS width for the rendered image.
 * @property {string} height - CSS height for the rendered image.
 * @property {string | null} aspectRatio - CSS `aspect-ratio` value.
 * @property {string} borderRadius - CSS border radius.
 * @property {string} boxShadow - CSS box shadow.
 * @property {string} objectFit - CSS object-fit value.
 * @property {string} objectPosition - CSS object-position value.
 * @property {string} srcset - Responsive source set string.
 * @property {string} sizes - Responsive sizes string.
 * @property {boolean} autoSizes - Computes `sizes` from host width when true.
 * @property {SkyImageLoading} loading - Native loading hint.
 * @property {SkyImageDecoding} decoding - Native decoding hint.
 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
 *
 * @csspart img - The underlying `<img>` element.
 *
 * @Behavior
 * - Renders a fallback visual placeholder when `src` is empty
 * - Supports automatic `sizes` updates using ResizeObserver
 * - Forwards native image loading and decoding hints
 *
 * @example
 * ```html
 * <sky-image
 *   src="/images/photo-1280.jpg"
 *   srcset="/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w"
 *   sizes="(max-width: 768px) 100vw, 50vw"
 *   alt="Responsive photo"
 *   width="100%"
 *   aspect-ratio="4/3"
 *   border-radius="8px"
 *   loading="lazy"
 * ></sky-image>
 * ```
 * ```vue
 * <template>
 *   <sky-image
 *     src="/images/photo-1280.jpg"
 *     srcset="/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w"
 *     sizes="(max-width: 768px) 100vw, 50vw"
 *     alt="Responsive photo"
 *     width="100%"
 *     aspect-ratio="4/3"
 *     border-radius="8px"
 *   ></sky-image>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return (
 *     <sky-image
 *       src="/images/photo-1280.jpg"
 *       srcset="/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w"
 *       sizes="(max-width: 768px) 100vw, 50vw"
 *       alt="Responsive photo"
 *       width="100%"
 *       aspect-ratio="4/3"
 *       border-radius="8px"
 *     ></sky-image>
 *   );
 * }
 * ```
 */
export declare class SkyImage extends LitElement {
    src: string;
    alt: string;
    width: string;
    height: string;
    aspectRatio: string | null;
    borderRadius: string;
    boxShadow: string;
    objectFit: string;
    objectPosition: string;
    srcset: string;
    sizes: string;
    autoSizes: boolean;
    private _computedSizes;
    loading: SkyImageLoading;
    decoding: SkyImageDecoding;
    /** Named prop preset from nearest `sky-config-provider`. */
    preset: string;
    private _presets;
    static styles: import("lit").CSSResult;
    private _ro?;
    private _sizesRafId;
    private _updateSizes;
    connectedCallback(): void;
    firstUpdated(): void;
    private _ensureAutoSizesObserver;
    updated(changed: PropertyValues<this>): void;
    disconnectedCallback(): void;
    /** Browsers keep the resolved resource when only srcset/sizes attrs change on a live <img>. */
    private _shouldResyncImageSource;
    private _resolvedSizesAttr;
    /** `src` used on <img> — must stay in sync with `srcset` when the set changes. */
    private _displaySrc;
    private _applyImgAttrs;
    private _resyncImageSource;
    render(): import("lit-html").TemplateResult<1>;
}