export const __webpack_ids__=["2713"];export const __webpack_modules__={19425:function(e,t,s){s.r(t),s.d(t,{MDNThemedImage:()=>MDNThemedImage});var r=s(14703),i=s(21409);let MDNThemedImage=class MDNThemedImage extends r.oi{static styles=i.Z;static ssr=!1;static properties={srcLight:{type:String,attribute:"src-light"},srcDark:{type:String,attribute:"src-dark"},alt:{type:String},_theme:{type:String}};constructor(){super(),this.srcLight="",this.srcDark="",this.alt="",this._theme="os"}connectedCallback(){super.connectedCallback(),this._setupThemeObserver(),this._updateTheme()}disconnectedCallback(){super.disconnectedCallback(),this._themeObserver&&this._themeObserver.disconnect()}_updateTheme(){this._theme="light dark"===document.documentElement.dataset.theme?"os":document.documentElement.dataset.theme??"light"}_setupThemeObserver(){let e=new MutationObserver(this._handleThemeChange.bind(this));e.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]}),this._themeObserver=e}_handleThemeChange(e){for(let t of e)"attributes"===t.type&&"data-theme"===t.attributeName&&this._updateTheme()}render(){switch(this._theme){case"os":return(0,r.dy)`<picture>
          <source
            srcset=${this.srcLight}
            media="(prefers-color-scheme: light)"
          />
          <source srcset=${this.srcDark} media="(prefers-color-scheme: dark)" />
          <img src=${this.srcLight} alt=${this.alt} />
        </picture>`;case"dark":return(0,r.dy)`<img src=${this.srcDark} alt=${this.alt} />`;default:return(0,r.dy)`<img src=${this.srcLight} alt=${this.alt} />`}}};customElements.define("mdn-themed-image",MDNThemedImage)},21409:function(e,t,s){s.d(t,{Z:()=>d});var r=s(14703),i=s(8081),h=s.n(i),a=s(23645),c=s.n(a)()(h());c.push([e.id,":host{display:block}:host picture{display:block;max-width:100%}:host img{height:auto;width:100%}:host picture{justify-self:end;width:100%}",""]);let d=(0,r.iv)([c.toString()])}};
//# sourceMappingURL=2713.782e501f1dcfabc0.js.map