import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
const PdsImageStyle0 = baseCss;

const pdsImageCss = ":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio)}";
const PdsImageStyle1 = pdsImageCss;

const PdsImage$1 = /*@__PURE__*/ proxyCustomElement(class PdsImage extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.alt = '';
        this.componentId = undefined;
        this.height = undefined;
        this.loading = 'eager';
        this.sizes = undefined;
        this.src = undefined;
        this.srcset = undefined;
        this.width = undefined;
    }
    render() {
        return (h(Host, { key: 'b74f7f59eadec75c48052e0760ef07ea0b5eb848', class: {
                'pds-image': true,
            }, id: this.componentId }, h("img", { key: '0e993e6d4cb70d73562cbcd3cf193080406adf7a', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
    }
    static get style() { return PdsImageStyle0 + PdsImageStyle1; }
}, [1, "pds-image", {
        "alt": [1],
        "componentId": [1, "component-id"],
        "height": [2],
        "loading": [1],
        "sizes": [1],
        "src": [1],
        "srcset": [1],
        "width": [2]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-image"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-image":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsImage$1);
            }
            break;
    } });
}

const PdsImage = PdsImage$1;
const defineCustomElement = defineCustomElement$1;

export { PdsImage, defineCustomElement };

//# sourceMappingURL=pds-image.js.map