@mdn/fred 1.3.2 → 1.4.0

package/out/static/client/{3132.ec59f4619872c415.js → 3132.5ae6f61e3998aef1.js}

@@ -7,7 +7,7 @@ export const __webpack_id__="3132";export const __webpack_ids__=["3132"];export
             href="https://scrimba.com/learn/frontend?via=mdn"
             target="_blank"
             rel="noreferrer"
-            data-glean="pong: pong->click fallback-scrimba"
+            data-glean-id=${"pong: pong->click fallback-scrimba"}
           >
             Scrimba
           </a>
@@ -22,10 +22,10 @@ export const __webpack_id__="3132";export const __webpack_ids__=["3132"];export
             <div class="placement-inner">
               <a
                 class="placement-link"
-                data-glean="pong: pong-&gt;click top-banner"
+                data-glean-id=${"pong: pong->click top-banner"}
                 href=${this.clickLink(r,k)}
                 target="_blank"
-                rel="sponsored noreferrer"
+                rel="sponsored"
                 ><div class="placement-content">
                   <img
                     src=${this.imgLink(d)}
@@ -48,10 +48,10 @@ export const __webpack_id__="3132";export const __webpack_ids__=["3132"];export
             <div class="placement-inner">
               <a
                 class="placement-link"
-                data-glean="pong: pong-&gt;click top-banner"
+                data-glean-id=${"pong: pong->click top-banner"}
                 href=${this.clickLink(r,k)}
                 target="_blank"
-                rel="sponsored noreferrer"
+                rel="sponsored"
                 ><div class="placement-content">
                   <img
                     src=${this.imgLink(d)}
@@ -67,4 +67,4 @@ export const __webpack_id__="3132";export const __webpack_ids__=["3132"];export
             <mdn-placement-no></mdn-placement-no>
           </section>
         </div>`}};customElements.define("mdn-placement-top",MDNPlacementTop)}};
-//# sourceMappingURL=3132.ec59f4619872c415.js.map
+//# sourceMappingURL=3132.5ae6f61e3998aef1.js.map

package/out/static/client/{3132.ec59f4619872c415.js.map → 3132.5ae6f61e3998aef1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"3132.ec59f4619872c415.js","sources":["webpack://@mdn/fred/./components/placement-top/element.css","webpack://@mdn/fred/./components/placement-top/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{background-color:var(--color-background-primary);display:block}.top-placement,.top-placement-leaderboard{--place-top-background-light:var(--color-background-primary);--place-top-color-light:var(--color-text-primary);--place-top-cta-background-light:var(--color-text-primary);--place-top-cta-color-light:var(--color-background-secondary);--place-top-background-dark:var(--color-background-primary);--place-top-color-dark:var(--color-text-primary);--place-top-cta-background-dark:var(--color-text-primary);--place-top-cta-color-dark:var(--color-background-secondary);--csstools-light-dark-toggle-2c33ad20-0:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle-2c33ad20-0,var(--place-top-color-light));--csstools-light-dark-toggle-2c33ad20-1:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle-2c33ad20-1,var(--place-top-cta-background-light));--csstools-light-dark-toggle-2c33ad20-2:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle-2c33ad20-2,var(--place-top-cta-color-light));background-color:var(--place-top-background);min-height:calc(var(--top-placement-inner-height) + var(--top-placement-inner-padding)*2);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.top-placement,.top-placement-leaderboard{--place-top-color:light-dark(var(--place-top-color-light),var(--place-top-color-dark));--place-top-cta-background:light-dark(var(--place-top-cta-background-light),var(--place-top-cta-background-dark));--place-top-cta-color:light-dark(var(--place-top-cta-color-light),var(--place-top-cta-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.top-placement,.top-placement-leaderboard) *{--csstools-light-dark-toggle-2c33ad20-0:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle-2c33ad20-0,var(--place-top-color-light));--csstools-light-dark-toggle-2c33ad20-1:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle-2c33ad20-1,var(--place-top-cta-background-light));--csstools-light-dark-toggle-2c33ad20-2:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle-2c33ad20-2,var(--place-top-cta-color-light))}}.top-placement{--csstools-light-dark-toggle-2c33ad20-3:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle-2c33ad20-3,var(--place-top-background-light));--top-placement-inner-height:3.125rem;--top-placement-inner-padding:0.125rem;border-bottom:1px solid var(--color-border-primary);padding-bottom:.125rem}@supports (color:light-dark(red,red)){.top-placement{--place-top-background:light-dark(var(--place-top-background-light),var(--place-top-background-dark))}}@supports not (color:light-dark(tan,tan)){.top-placement *{--csstools-light-dark-toggle-2c33ad20-3:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle-2c33ad20-3,var(--place-top-background-light))}}.top-placement .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:\"pong cta\" \"no note\";height:100%;margin:0 auto;width:100%}@media (769px < width){.top-placement .placement-container{grid-template-areas:\"pong cta note\" \"pong cta no\";grid-template-columns:fit-content(100%) auto fit-content(100%)}}:is(.top-placement .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;color:var(--place-top-color);display:flex;flex-direction:row;grid-area:pong;padding:var(--top-placement-inner-padding);-webkit-text-decoration:none;text-decoration:none}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) img{height:var(--top-placement-inner-height);max-height:var(--top-placement-inner-height);width:auto}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) span{color:var(--place-top-color);max-height:var(--top-placement-inner-height);overflow:auto;padding:0 1rem}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-cta{background-color:var(--place-top-cta-background);border-radius:.25rem;color:var(--place-top-cta-color);font-size:var(--font-size-small);grid-area:cta;height:fit-content;margin-right:auto;padding:.25rem 1rem;text-align:center}:is(:is(.top-placement .placement-container) .placement-inner) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}:is(.top-placement .placement-container) mdn-placement-no{color:var(--place-top-color);grid-area:no;margin:auto 0 0 2rem;width:auto}.top-placement-leaderboard{--place-top-background:#0000;--top-placement-inner-height:5.625rem;--top-placement-inner-padding:0rem;padding-bottom:0}.top-placement-leaderboard .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:\"left pong note\" \"left pong no\";grid-template-columns:1fr fit-content(100%) 1fr;height:100%;margin:0 auto;width:100%}:is(.top-placement-leaderboard .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;display:flex;flex-direction:column;grid-area:pong;justify-content:center;padding:0}:is(:is(:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link) .placement-content) img{height:5.625rem;width:45.5rem}:is(.top-placement-leaderboard .placement-container) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}@media (width <= 992px){:is(.top-placement-leaderboard .placement-container) mdn-placement-note{display:none}}:is(.top-placement-leaderboard .placement-container) mdn-placement-no{color:var(--color-text-secondary);grid-area:no;margin:auto 0 .25rem auto}@media (width <= 992px){:is(.top-placement-leaderboard .placement-container) mdn-placement-no{display:none}}.top-placement.empty{border-bottom:none}.fallback{align-items:center;background-color:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);display:flex;flex-direction:column;justify-content:center}.fallback__copy{color:var(--color-text-secondary);font-size:var(--font-size-normal);line-height:var(--top-banner-height);margin:0 auto}.fallback__copy a{color:var(--color-link-normal)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n * @import { TemplateResult } from \"lit\";\n */\n\nconst EMPTY = html`<div class=\"top-placement empty\"></div>`;\n\nexport class MDNPlacementTop extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  /**\n   *\n   * @returns {TemplateResult | symbol}\n   */\n  renderInitial() {\n    return EMPTY;\n  }\n\n  renderFallback() {\n    return html`\n      <div class=\"fallback\">\n        <p class=\"fallback__copy\">\n          Learn front-end development with high quality, interactive courses\n          from\n          <a\n            href=\"https://scrimba.com/learn/frontend?via=mdn\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            data-glean=\"pong: pong-&gt;click fallback-scrimba\"\n          >\n            Scrimba\n          </a>\n        </p>\n      </div>\n    `;\n  }\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    if (placementContext.status === \"noads\") {\n      return nothing;\n    }\n\n    const data = placementContext?.hpTop || placementContext?.top;\n    if (!data) {\n      return EMPTY;\n    }\n    const {\n      status,\n      click,\n      view,\n      copy,\n      image,\n      imageFormat,\n      alt,\n      cta,\n      colors,\n      version,\n    } = data;\n    if (status !== \"success\") {\n      return EMPTY;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const {\n      textColor,\n      backgroundColor,\n      ctaTextColor,\n      ctaBackgroundColor,\n      textColorDark,\n      backgroundColorDark,\n      ctaTextColorDark,\n      ctaBackgroundColorDark,\n    } = colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--place-top-background-light\", backgroundColor],\n        [\"--place-top-color-light\", textColor],\n        [\"--place-top-cta-background-light\", ctaBackgroundColor],\n        [\"--place-top-cta-color-light\", ctaTextColor],\n        [\"--place-top-background-dark\", backgroundColorDark || backgroundColor],\n        [\"--place-top-color-dark\", textColorDark || textColor],\n        [\n          \"--place-top-cta-background-dark\",\n          ctaBackgroundColorDark || ctaBackgroundColor,\n        ],\n        [\"--place-top-cta-color-dark\", ctaTextColorDark || ctaBackgroundColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return imageFormat === \"leaderboard\"\n      ? html`<div\n          ${ref(this._placementRef)}\n          class=\"top-placement-leaderboard\"\n          style=${styleMap(styles)}\n        >\n          <section class=\"placement-container\">\n            <div class=\"placement-inner\">\n              <a\n                class=\"placement-link\"\n                data-glean=\"pong: pong-&gt;click top-banner\"\n                href=${this.clickLink(click, version)}\n                target=\"_blank\"\n                rel=\"sponsored noreferrer\"\n                ><div class=\"placement-content\">\n                  <img\n                    src=${this.imgLink(image)}\n                    aria-hidden=${!alt}\n                    alt=${alt || \"\"}\n                    height=\"90\"\n                  />\n                </div>\n              </a>\n            </div>\n            <mdn-placement-note></mdn-placement-note>\n            <mdn-placement-no></mdn-placement-no>\n          </section>\n        </div>`\n      : html`<div\n          ${ref(this._placementRef)}\n          class=\"top-placement\"\n          style=${styleMap(styles)}\n        >\n          <section class=\"placement-container\">\n            <div class=\"placement-inner\">\n              <a\n                class=\"placement-link\"\n                data-glean=\"pong: pong-&gt;click top-banner\"\n                href=${this.clickLink(click, version)}\n                target=\"_blank\"\n                rel=\"sponsored noreferrer\"\n                ><div class=\"placement-content\">\n                  <img\n                    src=${this.imgLink(image)}\n                    aria-hidden=${!alt}\n                    alt=${alt || \"\"}\n                    height=\"50\"\n                  /><span>${copy}</span>\n                </div>\n                <span class=\"placement-cta\">${cta}</span></a\n              >\n              <mdn-placement-note></mdn-placement-note>\n            </div>\n            <mdn-placement-no></mdn-placement-no>\n          </section>\n        </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-top\", MDNPlacementTop);\n"],"names":["MDNPlacementTop","b","Object","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,qzNAAszN,GAAG,EAEl2N,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,6JCQvD,IAAM,EAAQ,QAAI,CAAC,uCAAuC,CAAC,CAEpD,IAAMA,gBAAN,MAAMA,uBAAwB,QAAe,IAAU,EAC5D,OAAO,OAAS,GAAM,AAAC,AAMvB,gBAAgB,CACd,OAAO,CACT,CAEA,gBAAiB,CACf,MAAO,QAAI,CAAC;;;;;;;;;;;;;;;IAeZ,CAAC,AACH,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAI,AAA4B,UAA5B,EAAiB,MAAM,CACzB,OAAO,IAAO,CAGhB,IAAM,EAAO,GAAkB,OAAS,GAAkB,IAC1D,GAAI,CAAC,EACH,OAAO,EAET,GAAM,CACJ,QAAM,CACN,OAAK,CACL,MAAI,CACJ,MAAI,CACJ,OAAK,CACL,aAAW,CACX,KAAG,CACH,KAAG,CACH,QAAM,CACN,SAAO,CACR,CAAG,EACJ,GAAI,AAAW,YAAX,EACF,OAAO,CAEJ,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CACJ,WAAS,CACTC,gBAAAA,CAAe,CACf,cAAY,CACZ,oBAAkB,CAClB,eAAa,CACb,qBAAmB,CACnB,kBAAgB,CAChB,wBAAsB,CACvB,CAAG,GAAU,CAAC,EACT,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,+BAAgCD,EAAgB,CACjD,CAAC,0BAA2B,EAAU,CACtC,CAAC,mCAAoC,EAAmB,CACxD,CAAC,8BAA+B,EAAa,CAC7C,CAAC,8BAA+B,GAAuBA,EAAgB,CACvE,CAAC,yBAA0B,GAAiB,EAAU,CACtD,CACE,kCACA,GAA0B,EAC3B,CACD,CAAC,6BAA8B,GAAoB,EAAmB,CACvE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,AAAgB,gBAAhB,EACH,QAAI,CAAC;UACH,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;gBAEpB,EAAE,QAAS,GAAQ;;;;;;;qBAOd,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;wBAK9B,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;gCACd,EAAE,CAAC,EAAI;wBACf,EAAE,GAAO,GAAG;;;;;;;;;cAStB,CAAC,CACP,QAAI,CAAC;UACH,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;gBAEpB,EAAE,QAAS,GAAQ;;;;;;;qBAOd,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;wBAK9B,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;gCACd,EAAE,CAAC,EAAI;wBACf,EAAE,GAAO,GAAG;;0BAEV,EAAE,EAAK;;4CAEW,EAAE,EAAI;;;;;;cAMpC,CAAC,AACb,CACF,EAEAE,eAAe,MAAM,CAAC,oBAAqBH,gB"}
+{"version":3,"file":"3132.5ae6f61e3998aef1.js","sources":["webpack://@mdn/fred/./components/placement-top/element.css","webpack://@mdn/fred/./components/placement-top/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{background-color:var(--color-background-primary);display:block}.top-placement,.top-placement-leaderboard{--place-top-background-light:var(--color-background-primary);--place-top-color-light:var(--color-text-primary);--place-top-cta-background-light:var(--color-text-primary);--place-top-cta-color-light:var(--color-background-secondary);--place-top-background-dark:var(--color-background-primary);--place-top-color-dark:var(--color-text-primary);--place-top-cta-background-dark:var(--color-text-primary);--place-top-cta-color-dark:var(--color-background-secondary);--csstools-light-dark-toggle-2c33ad20-0:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle-2c33ad20-0,var(--place-top-color-light));--csstools-light-dark-toggle-2c33ad20-1:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle-2c33ad20-1,var(--place-top-cta-background-light));--csstools-light-dark-toggle-2c33ad20-2:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle-2c33ad20-2,var(--place-top-cta-color-light));background-color:var(--place-top-background);min-height:calc(var(--top-placement-inner-height) + var(--top-placement-inner-padding)*2);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.top-placement,.top-placement-leaderboard{--place-top-color:light-dark(var(--place-top-color-light),var(--place-top-color-dark));--place-top-cta-background:light-dark(var(--place-top-cta-background-light),var(--place-top-cta-background-dark));--place-top-cta-color:light-dark(var(--place-top-cta-color-light),var(--place-top-cta-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.top-placement,.top-placement-leaderboard) *{--csstools-light-dark-toggle-2c33ad20-0:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle-2c33ad20-0,var(--place-top-color-light));--csstools-light-dark-toggle-2c33ad20-1:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle-2c33ad20-1,var(--place-top-cta-background-light));--csstools-light-dark-toggle-2c33ad20-2:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle-2c33ad20-2,var(--place-top-cta-color-light))}}.top-placement{--csstools-light-dark-toggle-2c33ad20-3:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle-2c33ad20-3,var(--place-top-background-light));--top-placement-inner-height:3.125rem;--top-placement-inner-padding:0.125rem;border-bottom:1px solid var(--color-border-primary);padding-bottom:.125rem}@supports (color:light-dark(red,red)){.top-placement{--place-top-background:light-dark(var(--place-top-background-light),var(--place-top-background-dark))}}@supports not (color:light-dark(tan,tan)){.top-placement *{--csstools-light-dark-toggle-2c33ad20-3:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle-2c33ad20-3,var(--place-top-background-light))}}.top-placement .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:\"pong cta\" \"no note\";height:100%;margin:0 auto;width:100%}@media (769px < width){.top-placement .placement-container{grid-template-areas:\"pong cta note\" \"pong cta no\";grid-template-columns:fit-content(100%) auto fit-content(100%)}}:is(.top-placement .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;color:var(--place-top-color);display:flex;flex-direction:row;grid-area:pong;padding:var(--top-placement-inner-padding);-webkit-text-decoration:none;text-decoration:none}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) img{height:var(--top-placement-inner-height);max-height:var(--top-placement-inner-height);width:auto}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) span{color:var(--place-top-color);max-height:var(--top-placement-inner-height);overflow:auto;padding:0 1rem}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-cta{background-color:var(--place-top-cta-background);border-radius:.25rem;color:var(--place-top-cta-color);font-size:var(--font-size-small);grid-area:cta;height:fit-content;margin-right:auto;padding:.25rem 1rem;text-align:center}:is(:is(.top-placement .placement-container) .placement-inner) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}:is(.top-placement .placement-container) mdn-placement-no{color:var(--place-top-color);grid-area:no;margin:auto 0 0 2rem;width:auto}.top-placement-leaderboard{--place-top-background:#0000;--top-placement-inner-height:5.625rem;--top-placement-inner-padding:0rem;padding-bottom:0}.top-placement-leaderboard .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:\"left pong note\" \"left pong no\";grid-template-columns:1fr fit-content(100%) 1fr;height:100%;margin:0 auto;width:100%}:is(.top-placement-leaderboard .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;display:flex;flex-direction:column;grid-area:pong;justify-content:center;padding:0}:is(:is(:is(:is(.top-placement-leaderboard .placement-container) .placement-inner) .placement-link) .placement-content) img{height:5.625rem;width:45.5rem}:is(.top-placement-leaderboard .placement-container) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}@media (width <= 992px){:is(.top-placement-leaderboard .placement-container) mdn-placement-note{display:none}}:is(.top-placement-leaderboard .placement-container) mdn-placement-no{color:var(--color-text-secondary);grid-area:no;margin:auto 0 .25rem auto}@media (width <= 992px){:is(.top-placement-leaderboard .placement-container) mdn-placement-no{display:none}}.top-placement.empty{border-bottom:none}.fallback{align-items:center;background-color:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);display:flex;flex-direction:column;justify-content:center}.fallback__copy{color:var(--color-text-secondary);font-size:var(--font-size-normal);line-height:var(--top-banner-height);margin:0 auto}.fallback__copy a{color:var(--color-link-normal)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n * @import { TemplateResult } from \"lit\";\n */\n\nconst EMPTY = html`<div class=\"top-placement empty\"></div>`;\n\nexport class MDNPlacementTop extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  /**\n   *\n   * @returns {TemplateResult | symbol}\n   */\n  renderInitial() {\n    return EMPTY;\n  }\n\n  renderFallback() {\n    return html`\n      <div class=\"fallback\">\n        <p class=\"fallback__copy\">\n          Learn front-end development with high quality, interactive courses\n          from\n          <a\n            href=\"https://scrimba.com/learn/frontend?via=mdn\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            data-glean-id=${`pong: pong->click fallback-scrimba`}\n          >\n            Scrimba\n          </a>\n        </p>\n      </div>\n    `;\n  }\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    if (placementContext.status === \"noads\") {\n      return nothing;\n    }\n\n    const data = placementContext?.hpTop || placementContext?.top;\n    if (!data) {\n      return EMPTY;\n    }\n    const {\n      status,\n      click,\n      view,\n      copy,\n      image,\n      imageFormat,\n      alt,\n      cta,\n      colors,\n      version,\n    } = data;\n    if (status !== \"success\") {\n      return EMPTY;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const {\n      textColor,\n      backgroundColor,\n      ctaTextColor,\n      ctaBackgroundColor,\n      textColorDark,\n      backgroundColorDark,\n      ctaTextColorDark,\n      ctaBackgroundColorDark,\n    } = colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--place-top-background-light\", backgroundColor],\n        [\"--place-top-color-light\", textColor],\n        [\"--place-top-cta-background-light\", ctaBackgroundColor],\n        [\"--place-top-cta-color-light\", ctaTextColor],\n        [\"--place-top-background-dark\", backgroundColorDark || backgroundColor],\n        [\"--place-top-color-dark\", textColorDark || textColor],\n        [\n          \"--place-top-cta-background-dark\",\n          ctaBackgroundColorDark || ctaBackgroundColor,\n        ],\n        [\"--place-top-cta-color-dark\", ctaTextColorDark || ctaBackgroundColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return imageFormat === \"leaderboard\"\n      ? html`<div\n          ${ref(this._placementRef)}\n          class=\"top-placement-leaderboard\"\n          style=${styleMap(styles)}\n        >\n          <section class=\"placement-container\">\n            <div class=\"placement-inner\">\n              <a\n                class=\"placement-link\"\n                data-glean-id=${`pong: pong->click top-banner`}\n                href=${this.clickLink(click, version)}\n                target=\"_blank\"\n                rel=\"sponsored\"\n                ><div class=\"placement-content\">\n                  <img\n                    src=${this.imgLink(image)}\n                    aria-hidden=${!alt}\n                    alt=${alt || \"\"}\n                    height=\"90\"\n                  />\n                </div>\n              </a>\n            </div>\n            <mdn-placement-note></mdn-placement-note>\n            <mdn-placement-no></mdn-placement-no>\n          </section>\n        </div>`\n      : html`<div\n          ${ref(this._placementRef)}\n          class=\"top-placement\"\n          style=${styleMap(styles)}\n        >\n          <section class=\"placement-container\">\n            <div class=\"placement-inner\">\n              <a\n                class=\"placement-link\"\n                data-glean-id=${`pong: pong->click top-banner`}\n                href=${this.clickLink(click, version)}\n                target=\"_blank\"\n                rel=\"sponsored\"\n                ><div class=\"placement-content\">\n                  <img\n                    src=${this.imgLink(image)}\n                    aria-hidden=${!alt}\n                    alt=${alt || \"\"}\n                    height=\"50\"\n                  /><span>${copy}</span>\n                </div>\n                <span class=\"placement-cta\">${cta}</span></a\n              >\n              <mdn-placement-note></mdn-placement-note>\n            </div>\n            <mdn-placement-no></mdn-placement-no>\n          </section>\n        </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-top\", MDNPlacementTop);\n"],"names":["MDNPlacementTop","b","Object","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,qzNAAszN,GAAG,EAEl2N,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,6JCQvD,IAAM,EAAQ,QAAI,CAAC,uCAAuC,CAAC,CAEpD,IAAMA,gBAAN,MAAMA,uBAAwB,QAAe,IAAU,EAC5D,OAAO,OAAS,GAAM,AAAC,AAMvB,gBAAgB,CACd,OAAO,CACT,CAEA,gBAAiB,CACf,MAAO,QAAI,CAAC;;;;;;;;;0BASU,EAAE,qCAAqC;;;;;;IAM7D,CAAC,AACH,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAI,AAA4B,UAA5B,EAAiB,MAAM,CACzB,OAAO,IAAO,CAGhB,IAAM,EAAO,GAAkB,OAAS,GAAkB,IAC1D,GAAI,CAAC,EACH,OAAO,EAET,GAAM,CACJ,QAAM,CACN,OAAK,CACL,MAAI,CACJ,MAAI,CACJ,OAAK,CACL,aAAW,CACX,KAAG,CACH,KAAG,CACH,QAAM,CACN,SAAO,CACR,CAAG,EACJ,GAAI,AAAW,YAAX,EACF,OAAO,CAEJ,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CACJ,WAAS,CACTC,gBAAAA,CAAe,CACf,cAAY,CACZ,oBAAkB,CAClB,eAAa,CACb,qBAAmB,CACnB,kBAAgB,CAChB,wBAAsB,CACvB,CAAG,GAAU,CAAC,EACT,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,+BAAgCD,EAAgB,CACjD,CAAC,0BAA2B,EAAU,CACtC,CAAC,mCAAoC,EAAmB,CACxD,CAAC,8BAA+B,EAAa,CAC7C,CAAC,8BAA+B,GAAuBA,EAAgB,CACvE,CAAC,yBAA0B,GAAiB,EAAU,CACtD,CACE,kCACA,GAA0B,EAC3B,CACD,CAAC,6BAA8B,GAAoB,EAAmB,CACvE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,AAAgB,gBAAhB,EACH,QAAI,CAAC;UACH,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;gBAEpB,EAAE,QAAS,GAAQ;;;;;;8BAML,EAAE,+BAA+B;qBAC1C,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;wBAK9B,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;gCACd,EAAE,CAAC,EAAI;wBACf,EAAE,GAAO,GAAG;;;;;;;;;cAStB,CAAC,CACP,QAAI,CAAC;UACH,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;gBAEpB,EAAE,QAAS,GAAQ;;;;;;8BAML,EAAE,+BAA+B;qBAC1C,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;wBAK9B,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;gCACd,EAAE,CAAC,EAAI;wBACf,EAAE,GAAO,GAAG;;0BAEV,EAAE,EAAK;;4CAEW,EAAE,EAAI;;;;;;cAMpC,CAAC,AACb,CACF,EAEAE,eAAe,MAAM,CAAC,oBAAqBH,gB"}

package/out/static/client/{3733.60667669ab613e1f.js → 3733.94bd76664194890b.js}

@@ -6,10 +6,10 @@ export const __webpack_id__="3733";export const __webpack_ids__=["3733"];export
           >
             <a
               class="placement-link"
-              data-glean="pong: pong-&gt;click side"
+              data-glean-id=${"pong: pong->click side"}
               href=${this.clickLink(o,h)}
               target="_blank"
-              rel="sponsored noreferrer"
+              rel="sponsored"
               ><img
                 src=${this.imgLink(c)}
                 aria-hidden=${!m}
@@ -31,10 +31,10 @@ export const __webpack_id__="3733";export const __webpack_ids__=["3733"];export
           >
             <a
               class="placement-link"
-              data-glean="pong: pong-&gt;click side"
+              data-glean-id=${"pong: pong->click side"}
               href=${this.clickLink(o,h)}
               target="_blank"
-              rel="sponsored noreferrer"
+              rel="sponsored"
               ><img
                 src=${this.imgLink(c)}
                 aria-hidden=${!m}
@@ -52,4 +52,4 @@ export const __webpack_id__="3733";export const __webpack_ids__=["3733"];export
           </div>
           <mdn-placement-no></mdn-placement-no>
         </section>`}};customElements.define("mdn-placement-sidebar",MDNPlacementSidebar)}};
-//# sourceMappingURL=3733.60667669ab613e1f.js.map
+//# sourceMappingURL=3733.94bd76664194890b.js.map

package/out/static/client/{3733.60667669ab613e1f.js.map → 3733.94bd76664194890b.js.map}

@@ -1 +1 @@
-{"version":3,"file":"3733.60667669ab613e1f.js","sources":["webpack://@mdn/fred/./components/placement-sidebar/element.css","webpack://@mdn/fred/./components/placement-sidebar/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/external-link.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.sidebar-placement-skyscraper{display:grid;grid-template-areas:\"pong pong\" \"note no\";grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:fit-content;margin:1rem 0;max-width:12rem;min-height:37.5rem}.sidebar-placement-skyscraper .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light));grid-area:pong;height:37.5rem;margin:0;overflow:hidden;width:10rem}@supports (color:light-dark(red,red)){.sidebar-placement-skyscraper .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement-skyscraper .placement-container) *{--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light))}}:is(.sidebar-placement-skyscraper .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>.placement-content{align-items:center;color:var(--side-color);display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.sidebar-placement-skyscraper mdn-placement-note{grid-area:note;margin:0 auto 0 0}.sidebar-placement-skyscraper mdn-placement-no{grid-area:no;margin:0 0 0 auto}.sidebar-placement{display:flex;flex-direction:column;height:fit-content;margin:1rem 0;max-width:12rem;min-height:22rem}.sidebar-placement .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light));--border-radius:0.5rem;border:1px solid var(--color-border-primary);border-radius:var(--border-radius);margin:0;min-height:20rem;overflow:hidden;position:relative;width:11rem}@supports (color:light-dark(red,red)){.sidebar-placement .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement .placement-container) *{--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light))}}:is(.sidebar-placement .placement-container):has(>.placement-link:focus-visible){outline:auto}:is(.sidebar-placement .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content{background:linear-gradient(to top,var(--side-background) 9rem,#0000 12rem,#0000);border-radius:var(--border-radius);color:var(--side-color);display:flex;flex-direction:column;gap:.25rem;height:100%;justify-content:end;line-height:1.25;position:absolute;top:0;width:100%}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-heading{font-size:.8875rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-copy{font-size:.75rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta{--color:var(--side-color);--icon-primary:var(--color);background-color:#ffffff11;border:2px solid;border-radius:2rem;color:var(--color);font-size:.75rem;font-weight:var(--font-weight-bold);margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:\"\";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (width >= 31rem){.sidebar-placement.horizontal{align-self:flex-end;max-width:30rem;min-height:12rem}.sidebar-placement.horizontal .placement-container{height:10rem;min-height:0;width:25rem}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link)>img{height:100%;position:absolute;width:auto;z-index:1}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link) .placement-content{align-items:end;background:var(--side-background);flex-direction:column;height:100%;justify-content:end;left:0;padding-left:10rem;width:auto}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementSidebar extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    horizontal: { type: Boolean },\n  };\n\n  constructor() {\n    super();\n    this.horizontal = false;\n  }\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const { side: data } = placementContext;\n    if (!data) {\n      return nothing;\n    }\n    const {\n      status,\n      click,\n      view,\n      copy,\n      image,\n      imageFormat,\n      alt,\n      cta,\n      colors,\n      version,\n      heading,\n    } = data;\n    if (status !== \"success\") {\n      return nothing;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const { textColor, backgroundColor, textColorDark, backgroundColorDark } =\n      colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--side-background-light\", backgroundColor],\n        [\"--side-color-light\", textColor],\n        [\"--side-background-dark\", backgroundColorDark || backgroundColor],\n        [\"--side-color-dark\", textColorDark || textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return imageFormat === \"skyscraper\"\n      ? html`<section class=\"sidebar-placement-skyscraper\">\n          <div\n            ${ref(this._placementRef)}\n            class=\"placement-container\"\n            style=${styleMap(styles)}\n          >\n            <a\n              class=\"placement-link\"\n              data-glean=\"pong: pong-&gt;click side\"\n              href=${this.clickLink(click, version)}\n              target=\"_blank\"\n              rel=\"sponsored noreferrer\"\n              ><img\n                src=${this.imgLink(image)}\n                aria-hidden=${!alt}\n                alt=${alt || \"\"}\n                width=\"160px\"\n                height=\"600px\"\n              />\n            </a>\n          </div>\n          <mdn-placement-no></mdn-placement-no>\n          <mdn-placement-note></mdn-placement-note>\n        </section>`\n      : html`<section\n          class=${`sidebar-placement ${this.horizontal ? \"horizontal\" : \"\"}`}\n        >\n          <div\n            ${ref(this._placementRef)}\n            class=\"placement-container\"\n            style=${styleMap(styles)}\n          >\n            <a\n              class=\"placement-link\"\n              data-glean=\"pong: pong-&gt;click side\"\n              href=${this.clickLink(click, version)}\n              target=\"_blank\"\n              rel=\"sponsored noreferrer\"\n              ><img\n                src=${this.imgLink(image)}\n                aria-hidden=${!alt}\n                alt=${alt || \"\"}\n                width=\"125px\"\n                height=\"125px\"\n              />\n              <div class=\"placement-content\">\n                <strong class=\"placement-heading\">${heading}</strong>\n                <span class=\"placement-copy\">${copy}</span>\n                <span class=\"placement-cta external\">${cta}</span>\n              </div>\n            </a>\n            <mdn-placement-note></mdn-placement-note>\n          </div>\n          <mdn-placement-no></mdn-placement-no>\n        </section>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-sidebar\", MDNPlacementSidebar);\n"],"names":["MDNPlacementSidebar","Boolean","Object","r","customElements"],"mappings":"0NAKI,EAAgC,iBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,u5KAAu5K,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,orBAAorB,CAAC,CAAE,GAAG,EAEttM,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,4OCIhD,IAAMA,oBAAN,MAAMA,2BAA4B,QAAe,IAAU,EAChE,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,WAAY,CAAE,KAAMC,OAAQ,CAC9B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,UAAU,CAAG,EACpB,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,KAAM,CAAI,CAAE,CAAG,EACvB,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CACJ,QAAM,CACN,OAAK,CACL,MAAI,CACJ,MAAI,CACJ,OAAK,CACL,aAAW,CACX,KAAG,CACH,KAAG,CACH,QAAM,CACN,SAAO,CACP,SAAO,CACR,CAAG,EACJ,GAAI,AAAW,YAAX,EACF,OAAO,IAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,WAAS,CAAE,iBAAe,CAAE,eAAa,CAAE,qBAAmB,CAAE,CACtE,GAAU,CAAC,EACP,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,0BAA2B,EAAgB,CAC5C,CAAC,qBAAsB,EAAU,CACjC,CAAC,yBAA0B,GAAuB,EAAgB,CAClE,CAAC,oBAAqB,GAAiB,EAAU,CAClD,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,AAAgB,eAAhB,EACH,QAAI,CAAC;;YAED,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;kBAEpB,EAAE,QAAS,GAAQ;;;;;mBAKlB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;oBAIhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;4BACd,EAAE,CAAC,EAAI;oBACf,EAAE,GAAO,GAAG;;;;;;;;kBAQd,CAAC,CACX,QAAI,CAAC;gBACG,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAG,aAAe,GAAG,CAAC,CAAC;;;YAGjE,EAAE,GAAAA,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;kBAEpB,EAAE,QAAS,GAAQ;;;;;mBAKlB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;oBAIhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;4BACd,EAAE,CAAC,EAAI;oBACf,EAAE,GAAO,GAAG;;;;;kDAKkB,EAAE,EAAQ;6CACf,EAAE,EAAK;qDACC,EAAE,EAAI;;;;;;kBAMzC,CAAC,AACjB,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBJ,oB"}
+{"version":3,"file":"3733.94bd76664194890b.js","sources":["webpack://@mdn/fred/./components/placement-sidebar/element.css","webpack://@mdn/fred/./components/placement-sidebar/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/external-link.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.sidebar-placement-skyscraper{display:grid;grid-template-areas:\"pong pong\" \"note no\";grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:fit-content;margin:1rem 0;max-width:12rem;min-height:37.5rem}.sidebar-placement-skyscraper .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light));grid-area:pong;height:37.5rem;margin:0;overflow:hidden;width:10rem}@supports (color:light-dark(red,red)){.sidebar-placement-skyscraper .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement-skyscraper .placement-container) *{--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light))}}:is(.sidebar-placement-skyscraper .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>.placement-content{align-items:center;color:var(--side-color);display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.sidebar-placement-skyscraper mdn-placement-note{grid-area:note;margin:0 auto 0 0}.sidebar-placement-skyscraper mdn-placement-no{grid-area:no;margin:0 0 0 auto}.sidebar-placement{display:flex;flex-direction:column;height:fit-content;margin:1rem 0;max-width:12rem;min-height:22rem}.sidebar-placement .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light));--border-radius:0.5rem;border:1px solid var(--color-border-primary);border-radius:var(--border-radius);margin:0;min-height:20rem;overflow:hidden;position:relative;width:11rem}@supports (color:light-dark(red,red)){.sidebar-placement .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement .placement-container) *{--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light))}}:is(.sidebar-placement .placement-container):has(>.placement-link:focus-visible){outline:auto}:is(.sidebar-placement .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content{background:linear-gradient(to top,var(--side-background) 9rem,#0000 12rem,#0000);border-radius:var(--border-radius);color:var(--side-color);display:flex;flex-direction:column;gap:.25rem;height:100%;justify-content:end;line-height:1.25;position:absolute;top:0;width:100%}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-heading{font-size:.8875rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-copy{font-size:.75rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta{--color:var(--side-color);--icon-primary:var(--color);background-color:#ffffff11;border:2px solid;border-radius:2rem;color:var(--color);font-size:.75rem;font-weight:var(--font-weight-bold);margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:\"\";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (width >= 31rem){.sidebar-placement.horizontal{align-self:flex-end;max-width:30rem;min-height:12rem}.sidebar-placement.horizontal .placement-container{height:10rem;min-height:0;width:25rem}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link)>img{height:100%;position:absolute;width:auto;z-index:1}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link) .placement-content{align-items:end;background:var(--side-background);flex-direction:column;height:100%;justify-content:end;left:0;padding-left:10rem;width:auto}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementSidebar extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    horizontal: { type: Boolean },\n  };\n\n  constructor() {\n    super();\n    this.horizontal = false;\n  }\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const { side: data } = placementContext;\n    if (!data) {\n      return nothing;\n    }\n    const {\n      status,\n      click,\n      view,\n      copy,\n      image,\n      imageFormat,\n      alt,\n      cta,\n      colors,\n      version,\n      heading,\n    } = data;\n    if (status !== \"success\") {\n      return nothing;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const { textColor, backgroundColor, textColorDark, backgroundColorDark } =\n      colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--side-background-light\", backgroundColor],\n        [\"--side-color-light\", textColor],\n        [\"--side-background-dark\", backgroundColorDark || backgroundColor],\n        [\"--side-color-dark\", textColorDark || textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return imageFormat === \"skyscraper\"\n      ? html`<section class=\"sidebar-placement-skyscraper\">\n          <div\n            ${ref(this._placementRef)}\n            class=\"placement-container\"\n            style=${styleMap(styles)}\n          >\n            <a\n              class=\"placement-link\"\n              data-glean-id=${`pong: pong->click side`}\n              href=${this.clickLink(click, version)}\n              target=\"_blank\"\n              rel=\"sponsored\"\n              ><img\n                src=${this.imgLink(image)}\n                aria-hidden=${!alt}\n                alt=${alt || \"\"}\n                width=\"160px\"\n                height=\"600px\"\n              />\n            </a>\n          </div>\n          <mdn-placement-no></mdn-placement-no>\n          <mdn-placement-note></mdn-placement-note>\n        </section>`\n      : html`<section\n          class=${`sidebar-placement ${this.horizontal ? \"horizontal\" : \"\"}`}\n        >\n          <div\n            ${ref(this._placementRef)}\n            class=\"placement-container\"\n            style=${styleMap(styles)}\n          >\n            <a\n              class=\"placement-link\"\n              data-glean-id=${`pong: pong->click side`}\n              href=${this.clickLink(click, version)}\n              target=\"_blank\"\n              rel=\"sponsored\"\n              ><img\n                src=${this.imgLink(image)}\n                aria-hidden=${!alt}\n                alt=${alt || \"\"}\n                width=\"125px\"\n                height=\"125px\"\n              />\n              <div class=\"placement-content\">\n                <strong class=\"placement-heading\">${heading}</strong>\n                <span class=\"placement-copy\">${copy}</span>\n                <span class=\"placement-cta external\">${cta}</span>\n              </div>\n            </a>\n            <mdn-placement-note></mdn-placement-note>\n          </div>\n          <mdn-placement-no></mdn-placement-no>\n        </section>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-sidebar\", MDNPlacementSidebar);\n"],"names":["MDNPlacementSidebar","Boolean","Object","r","customElements"],"mappings":"0NAKI,EAAgC,iBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,u5KAAu5K,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,orBAAorB,CAAC,CAAE,GAAG,EAEttM,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,4OCIhD,IAAMA,oBAAN,MAAMA,2BAA4B,QAAe,IAAU,EAChE,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,WAAY,CAAE,KAAMC,OAAQ,CAC9B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,UAAU,CAAG,EACpB,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,KAAM,CAAI,CAAE,CAAG,EACvB,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CACJ,QAAM,CACN,OAAK,CACL,MAAI,CACJ,MAAI,CACJ,OAAK,CACL,aAAW,CACX,KAAG,CACH,KAAG,CACH,QAAM,CACN,SAAO,CACP,SAAO,CACR,CAAG,EACJ,GAAI,AAAW,YAAX,EACF,OAAO,IAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,WAAS,CAAE,iBAAe,CAAE,eAAa,CAAE,qBAAmB,CAAE,CACtE,GAAU,CAAC,EACP,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,0BAA2B,EAAgB,CAC5C,CAAC,qBAAsB,EAAU,CACjC,CAAC,yBAA0B,GAAuB,EAAgB,CAClE,CAAC,oBAAqB,GAAiB,EAAU,CAClD,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,AAAgB,eAAhB,EACH,QAAI,CAAC;;YAED,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;kBAEpB,EAAE,QAAS,GAAQ;;;;4BAIT,EAAE,yBAAyB;mBACpC,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;oBAIhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;4BACd,EAAE,CAAC,EAAI;oBACf,EAAE,GAAO,GAAG;;;;;;;;kBAQd,CAAC,CACX,QAAI,CAAC;gBACG,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAG,aAAe,GAAG,CAAC,CAAC;;;YAGjE,EAAE,GAAAA,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;kBAEpB,EAAE,QAAS,GAAQ;;;;4BAIT,EAAE,yBAAyB;mBACpC,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;oBAIhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;4BACd,EAAE,CAAC,EAAI;oBACf,EAAE,GAAO,GAAG;;;;;kDAKkB,EAAE,EAAQ;6CACf,EAAE,EAAK;qDACC,EAAE,EAAI;;;;;;kBAMzC,CAAC,AACjB,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBJ,oB"}

package/out/static/client/{451.cd85e2808f388a00.js → 451.fb2679190b3266e1.js}

@@ -1,4 +1,4 @@
-export const __webpack_id__="451";export const __webpack_ids__=["451"];export const __webpack_modules__={18526:function(t,e,a){a.r(e),a.d(e,{MDNCompatTableLazy:()=>MDNCompatTableLazy});var o=a(64889),r=a(63819);a(30191);var i=a(86484),s=a(96336),n=a(36728);let MDNCompatTableLazy=class MDNCompatTableLazy extends(0,i.J)(r.WF){static properties={query:{},locale:{}};constructor(){super(),this.query="",this.locale=s.Xn}connectedCallback(){super.connectedCallback()}get _issueUrl(){let t=new URLSearchParams,e=s.Nx.replaceAll("$DATE",new Date().toISOString()).replaceAll("$QUERY_ID",this.query).trim();return t.set("mdn-url",`https://developer.mozilla.org${globalThis.location.pathname}`),t.set("metadata",e),t.set("title",`${this.query} - Missing compatibility data`),t.set("template","data-problem.yml"),`https://github.com/mdn/browser-compat-data/issues/new?${t.toString()}`}get _issueLink(){let t=t=>{t.preventDefault(),window.open(this._issueUrl,"_blank","noopener,noreferrer")};return(0,r.qy)`<a
+export const __webpack_id__="451";export const __webpack_ids__=["451"];export const __webpack_modules__={18526:function(t,e,a){a.r(e),a.d(e,{MDNCompatTableLazy:()=>MDNCompatTableLazy});var o=a(64889),r=a(63819);a(30191);var i=a(86484),s=a(96336),n=a(36728);let MDNCompatTableLazy=class MDNCompatTableLazy extends(0,i.J)(r.WF){static properties={query:{},locale:{}};constructor(){super(),this.query="",this.locale=s.X}connectedCallback(){super.connectedCallback()}get _issueUrl(){let t=new URLSearchParams,e=s.N.replaceAll("$DATE",new Date().toISOString()).replaceAll("$QUERY_ID",this.query).trim();return t.set("mdn-url",`https://developer.mozilla.org${globalThis.location.pathname}`),t.set("metadata",e),t.set("title",`${this.query} - Missing compatibility data`),t.set("template","data-problem.yml"),`https://github.com/mdn/browser-compat-data/issues/new?${t.toString()}`}get _issueLink(){let t=t=>{t.preventDefault(),window.open(this._issueUrl,"_blank","noopener,noreferrer")};return(0,r.qy)`<a
       class="bc-github-link external external-icon"
       href="#"
       @click=${t}
@@ -14,4 +14,4 @@ export const __webpack_id__="451";export const __webpack_ids__=["451"];export co
                 .data=${t.data}
                 .browserInfo=${t.browsers}
               ></mdn-compat-table>`:(0,r.qy)`<p>No compatibility data found</p>`,error:t=>(0,r.qy)`<p>${t}</p>`})}};customElements.define("mdn-compat-table-lazy",MDNCompatTableLazy)}};
-//# sourceMappingURL=451.cd85e2808f388a00.js.map
+//# sourceMappingURL=451.fb2679190b3266e1.js.map

package/out/static/client/{451.cd85e2808f388a00.js.map → 451.fb2679190b3266e1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"451.cd85e2808f388a00.js","sources":["webpack://@mdn/fred/./components/compat-table-lazy/element.js"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\n\nimport \"../compat-table/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport {\n  DEFAULT_LOCALE,\n  ISSUE_METADATA_TEMPLATE,\n} from \"../compat-table/constants.js\";\nimport { BCD_BASE_URL } from \"../env/index.js\";\n\n/**\n * @typedef {{data: import(\"@bcd\").Identifier, browsers: import(\"@bcd\").Browsers}} Compat\n */\n\nexport class MDNCompatTableLazy extends L10nMixin(LitElement) {\n  static properties = {\n    query: {},\n    locale: {},\n  };\n\n  constructor() {\n    super();\n    this.query = \"\";\n    this.locale = DEFAULT_LOCALE;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  get _issueUrl() {\n    const url = \"https://github.com/mdn/browser-compat-data/issues/new\";\n    const sp = new URLSearchParams();\n    const metadata = ISSUE_METADATA_TEMPLATE.replaceAll(\n      \"$DATE\",\n      new Date().toISOString(),\n    )\n      .replaceAll(\"$QUERY_ID\", this.query)\n      .trim();\n    sp.set(\n      \"mdn-url\",\n      `https://developer.mozilla.org${globalThis.location.pathname}`,\n    );\n    sp.set(\"metadata\", metadata);\n    sp.set(\"title\", `${this.query} - Missing compatibility data`);\n    sp.set(\"template\", \"data-problem.yml\");\n\n    return `${url}?${sp.toString()}`;\n  }\n\n  get _issueLink() {\n    const onClick = (/** @type {MouseEvent} */ event) => {\n      event.preventDefault();\n      window.open(this._issueUrl, \"_blank\", \"noopener,noreferrer\");\n    };\n\n    return html`<a\n      class=\"bc-github-link external external-icon\"\n      href=\"#\"\n      @click=${onClick}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title=${this.l10n(\n        \"compat-link-report-missing-title\",\n      )`Report missing compatibility data`}\n      >${this.l10n(\"compat-link-report-missing\")`Report this issue`}</a\n    >`;\n  }\n\n  _dataTask = new Task(this, {\n    args: () => [this.query],\n    task: async ([query], { signal }) => {\n      const response = await fetch(\n        `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,\n        { signal },\n      );\n      if (!response.ok) {\n        console.error(\"Failed to fetch BCD data:\", response);\n\n        if (response.status === 404) {\n          throw html`No compatibility data found for <code>${query}</code>.\n            (${this._issueLink})`;\n        }\n\n        throw html`Got HTTP ${response.status} when fetching browser\n          compatibility data for <code>${query}</code>`;\n      }\n      return /** @type {Promise<Compat>} */ response.json();\n    },\n  });\n\n  render() {\n    return this._dataTask.render({\n      initial: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n      pending: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n\n      complete:\n        /**\n         * @param {Compat} compat\n         */\n        (compat) =>\n          compat\n            ? html`<mdn-compat-table\n                query=${this.query}\n                locale=${this.locale}\n                .data=${compat.data}\n                .browserInfo=${compat.browsers}\n              ></mdn-compat-table>`\n            : html`<p>No compatibility data found</p>`,\n      error: (error) => html`<p>${error}</p>`,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-compat-table-lazy\", MDNCompatTableLazy);\n"],"names":["MDNCompatTableLazy","URLSearchParams","Date","globalThis","window","fetch","console","customElements"],"mappings":"iQAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAU,IAAU,EAC1D,OAAO,WAAa,CAClB,MAAO,CAAC,EACR,OAAQ,CAAC,CACX,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,MAAM,CAAG,IAAc,AAC9B,CAEA,mBAAoB,CAClB,KAAK,CAAC,mBACR,CAEA,IAAI,WAAY,CAEd,IAAM,EAAK,IAAIC,gBACT,EAAW,eAAkC,CACjD,QACA,IAAIC,OAAO,WAAW,IAErB,UAAU,CAAC,YAAa,IAAI,CAAC,KAAK,EAClC,IAAI,GASP,OARA,EAAG,GAAG,CACJ,UACA,CAAC,6BAA6B,EAAEC,WAAW,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEhE,EAAG,GAAG,CAAC,WAAY,GACnB,EAAG,GAAG,CAAC,QAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAC5D,EAAG,GAAG,CAAC,WAAY,oBAEZ,yDAAU,EAAG,QAAQ,IAAI,AAClC,CAEA,IAAI,YAAa,CACf,IAAM,EAAU,AAA2B,IACzC,EAAM,cAAc,GACpBC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAE,SAAU,sBACxC,EAEA,MAAO,QAAI,CAAC;;;aAGH,EAAE,EAAQ;;;YAGX,EAAE,IAAI,CAAC,IAAI,CACf,mCACD,CAAC,iCAAiC,CAAC,CAAC;OACpC,EAAE,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;KAC/D,CAAC,AACJ,CAEA,UAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,IAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,KAAM,MAAO,CAAC,EAAM,CAAE,CAAE,QAAM,CAAE,IAC9B,IAAM,EAAW,MAAMC,MACrB,CAAC,EAAE,IAAY,CAAC,oBAAoB,EAAE,EAAM,KAAK,CAAC,CAClD,CAAE,QAAO,GAEX,GAAI,CAAC,EAAS,EAAE,CAAE,CAGhB,GAFAC,QAAQ,KAAK,CAAC,4BAA6B,GAEvC,AAAoB,MAApB,EAAS,MAAM,CACjB,KAAM,QAAI,CAAC,sCAAsC,EAAE,EAAM;aACtD,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,AAGzB,MAAM,QAAI,CAAC,SAAS,EAAE,EAAS,MAAM,CAAC;uCACP,EAAE,EAAM,OAAO,CAAC,AACjD,CACA,OAAsC,EAAS,IAAI,EACrD,CACF,EAAG,AAEH,SAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACpE,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAEpE,SAIE,AAAC,GACC,EACI,QAAI,CAAC;sBACG,EAAE,IAAI,CAAC,KAAK,CAAC;uBACZ,EAAE,IAAI,CAAC,MAAM,CAAC;sBACf,EAAE,EAAO,IAAI,CAAC;6BACP,EAAE,EAAO,QAAQ,CAAC;kCACb,CAAC,CACrB,QAAI,CAAC,kCAAkC,CAAC,CAChD,MAAO,AAAC,GAAU,QAAI,CAAC,GAAG,EAAE,EAAM,IAAI,CAAC,AACzC,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBP,mB"}
+{"version":3,"file":"451.fb2679190b3266e1.js","sources":["webpack://@mdn/fred/./components/compat-table-lazy/element.js"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\n\nimport \"../compat-table/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport {\n  DEFAULT_LOCALE,\n  ISSUE_METADATA_TEMPLATE,\n} from \"../compat-table/constants.js\";\nimport { BCD_BASE_URL } from \"../env/index.js\";\n\n/**\n * @typedef {{data: import(\"@bcd\").Identifier, browsers: import(\"@bcd\").Browsers}} Compat\n */\n\nexport class MDNCompatTableLazy extends L10nMixin(LitElement) {\n  static properties = {\n    query: {},\n    locale: {},\n  };\n\n  constructor() {\n    super();\n    this.query = \"\";\n    this.locale = DEFAULT_LOCALE;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  get _issueUrl() {\n    const url = \"https://github.com/mdn/browser-compat-data/issues/new\";\n    const sp = new URLSearchParams();\n    const metadata = ISSUE_METADATA_TEMPLATE.replaceAll(\n      \"$DATE\",\n      new Date().toISOString(),\n    )\n      .replaceAll(\"$QUERY_ID\", this.query)\n      .trim();\n    sp.set(\n      \"mdn-url\",\n      `https://developer.mozilla.org${globalThis.location.pathname}`,\n    );\n    sp.set(\"metadata\", metadata);\n    sp.set(\"title\", `${this.query} - Missing compatibility data`);\n    sp.set(\"template\", \"data-problem.yml\");\n\n    return `${url}?${sp.toString()}`;\n  }\n\n  get _issueLink() {\n    const onClick = (/** @type {MouseEvent} */ event) => {\n      event.preventDefault();\n      window.open(this._issueUrl, \"_blank\", \"noopener,noreferrer\");\n    };\n\n    return html`<a\n      class=\"bc-github-link external external-icon\"\n      href=\"#\"\n      @click=${onClick}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title=${this.l10n(\n        \"compat-link-report-missing-title\",\n      )`Report missing compatibility data`}\n      >${this.l10n(\"compat-link-report-missing\")`Report this issue`}</a\n    >`;\n  }\n\n  _dataTask = new Task(this, {\n    args: () => [this.query],\n    task: async ([query], { signal }) => {\n      const response = await fetch(\n        `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,\n        { signal },\n      );\n      if (!response.ok) {\n        console.error(\"Failed to fetch BCD data:\", response);\n\n        if (response.status === 404) {\n          throw html`No compatibility data found for <code>${query}</code>.\n            (${this._issueLink})`;\n        }\n\n        throw html`Got HTTP ${response.status} when fetching browser\n          compatibility data for <code>${query}</code>`;\n      }\n      return /** @type {Promise<Compat>} */ response.json();\n    },\n  });\n\n  render() {\n    return this._dataTask.render({\n      initial: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n      pending: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n\n      complete:\n        /**\n         * @param {Compat} compat\n         */\n        (compat) =>\n          compat\n            ? html`<mdn-compat-table\n                query=${this.query}\n                locale=${this.locale}\n                .data=${compat.data}\n                .browserInfo=${compat.browsers}\n              ></mdn-compat-table>`\n            : html`<p>No compatibility data found</p>`,\n      error: (error) => html`<p>${error}</p>`,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-compat-table-lazy\", MDNCompatTableLazy);\n"],"names":["MDNCompatTableLazy","URLSearchParams","Date","globalThis","window","fetch","console","customElements"],"mappings":"iQAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAU,IAAU,EAC1D,OAAO,WAAa,CAClB,MAAO,CAAC,EACR,OAAQ,CAAC,CACX,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,MAAM,CAAG,GAAc,AAC9B,CAEA,mBAAoB,CAClB,KAAK,CAAC,mBACR,CAEA,IAAI,WAAY,CAEd,IAAM,EAAK,IAAIC,gBACT,EAAW,cAAkC,CACjD,QACA,IAAIC,OAAO,WAAW,IAErB,UAAU,CAAC,YAAa,IAAI,CAAC,KAAK,EAClC,IAAI,GASP,OARA,EAAG,GAAG,CACJ,UACA,CAAC,6BAA6B,EAAEC,WAAW,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEhE,EAAG,GAAG,CAAC,WAAY,GACnB,EAAG,GAAG,CAAC,QAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAC5D,EAAG,GAAG,CAAC,WAAY,oBAEZ,yDAAU,EAAG,QAAQ,IAAI,AAClC,CAEA,IAAI,YAAa,CACf,IAAM,EAAU,AAA2B,IACzC,EAAM,cAAc,GACpBC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAE,SAAU,sBACxC,EAEA,MAAO,QAAI,CAAC;;;aAGH,EAAE,EAAQ;;;YAGX,EAAE,IAAI,CAAC,IAAI,CACf,mCACD,CAAC,iCAAiC,CAAC,CAAC;OACpC,EAAE,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;KAC/D,CAAC,AACJ,CAEA,UAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,IAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,KAAM,MAAO,CAAC,EAAM,CAAE,CAAE,QAAM,CAAE,IAC9B,IAAM,EAAW,MAAMC,MACrB,CAAC,EAAE,IAAY,CAAC,oBAAoB,EAAE,EAAM,KAAK,CAAC,CAClD,CAAE,QAAO,GAEX,GAAI,CAAC,EAAS,EAAE,CAAE,CAGhB,GAFAC,QAAQ,KAAK,CAAC,4BAA6B,GAEvC,AAAoB,MAApB,EAAS,MAAM,CACjB,KAAM,QAAI,CAAC,sCAAsC,EAAE,EAAM;aACtD,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,AAGzB,MAAM,QAAI,CAAC,SAAS,EAAE,EAAS,MAAM,CAAC;uCACP,EAAE,EAAM,OAAO,CAAC,AACjD,CACA,OAAsC,EAAS,IAAI,EACrD,CACF,EAAG,AAEH,SAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACpE,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAEpE,SAIE,AAAC,GACC,EACI,QAAI,CAAC;sBACG,EAAE,IAAI,CAAC,KAAK,CAAC;uBACZ,EAAE,IAAI,CAAC,MAAM,CAAC;sBACf,EAAE,EAAO,IAAI,CAAC;6BACP,EAAE,EAAO,QAAQ,CAAC;kCACb,CAAC,CACrB,QAAI,CAAC,kCAAkC,CAAC,CAChD,MAAO,AAAC,GAAU,QAAI,CAAC,GAAG,EAAE,EAAM,IAAI,CAAC,AACzC,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBP,mB"}

package/out/static/client/{603.8cdd963a9e248a75.js → 603.8670965b0722be3a.js}

@@ -1,5 +1,5 @@
-/*! For license information please see 603.8cdd963a9e248a75.js.LICENSE.txt */
-export const __webpack_id__="603";export const __webpack_ids__=["603"];export const __webpack_modules__={19734:function(e,t,n){n.d(t,{A:()=>c});var a=n(63819),o=n(31601),s=n.n(o),i=n(76314),r=n.n(i)()(s());r.push([e.id,".content-feedback{border:none;margin:0 0 .25rem;padding:0}.content-feedback>label{display:block;margin-bottom:.25rem}.content-feedback .thank-you{display:block;margin-bottom:calc(2.75rem + 2px)}.content-feedback mdn-button{flex:1;min-width:0}.content-feedback--buttons{display:inline-flex;gap:.75rem;margin:.25rem 0}.content-feedback--radios{align-items:center;display:flex;gap:.25rem;margin:.25rem 0}",""]);let c=(0,a.AH)([r.toString()])},21672:function(e,t,n){n.r(t),n.d(t,{MDNContentFeedback:()=>MDNContentFeedback}),n(99638);var a=n(63819),o=n(86484),s=n(39943);let i=(0,a.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88"/></svg>`,r=(0,a.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88"/></svg>`;var c=n(19734);let l={outdated:"Content is out of date",incomplete:"Missing information",code_examples:"Code examples not working as expected",other:"Other"},d={technical:"\xdcbersetzung enth\xe4lt fachliche Fehler",consistency:"Begriffe sind inkonsistent \xfcbersetzt",incomprehensible:"\xdcbersetzung ist nicht verst\xe4ndlich",linguistic:"\xdcbersetzung enth\xe4lt sprachliche Fehler",code_examples:"Code-Beispiele funktionieren nicht",other:"Sonstige"};let MDNContentFeedback=class MDNContentFeedback extends(0,o.J)(a.WF){static styles=c.A;static properties={locale:{type:String},_reason:{state:!0},_view:{state:!0}};constructor(){super(),this.locale="",this._reason="",this._view="vote"}_handleVote({target:e}){if(e instanceof HTMLElement){let t=e.dataset.vote;"yes"===t?this._view="thanks":"no"===t&&(this._view="feedback"),(0,s.w)("thumbs",{type:"article-footer",label:"yes"===t?"1":"0"})}}_handleFeedback(){this._view="thanks",(0,s.w)("article-footer",{type:"feedback",label:this._reason})}_renderVote(){return(0,a.qy)`<label
+/*! For license information please see 603.8670965b0722be3a.js.LICENSE.txt */
+export const __webpack_id__="603";export const __webpack_ids__=["603"];export const __webpack_modules__={19734:function(e,t,n){n.d(t,{A:()=>c});var a=n(63819),o=n(31601),s=n.n(o),i=n(76314),r=n.n(i)()(s());r.push([e.id,".content-feedback{border:none;margin:0 0 .25rem;padding:0}.content-feedback>label{display:block;margin-bottom:.25rem}.content-feedback .thank-you{display:block;margin-bottom:calc(2.75rem + 2px)}.content-feedback mdn-button{flex:1;min-width:0}.content-feedback--buttons{display:inline-flex;gap:.75rem;margin:.25rem 0}.content-feedback--radios{align-items:center;display:flex;gap:.25rem;margin:.25rem 0}",""]);let c=(0,a.AH)([r.toString()])},21672:function(e,t,n){n.r(t),n.d(t,{MDNContentFeedback:()=>MDNContentFeedback}),n(99638);var a=n(63819),o=n(86484),s=n(39943);let i=(0,a.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88"/></svg>`,r=(0,a.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88"/></svg>`;var c=n(19734);let d={outdated:"Content is out of date",incomplete:"Missing information",code_examples:"Code examples not working as expected",other:"Other"},l={technical:"\xdcbersetzung enth\xe4lt fachliche Fehler",consistency:"Begriffe sind inkonsistent \xfcbersetzt",incomprehensible:"\xdcbersetzung ist nicht verst\xe4ndlich",linguistic:"\xdcbersetzung enth\xe4lt sprachliche Fehler",code_examples:"Code-Beispiele funktionieren nicht",other:"Sonstige"};let MDNContentFeedback=class MDNContentFeedback extends(0,o.J)(a.WF){static styles=c.A;static properties={locale:{type:String},_reason:{state:!0},_view:{state:!0}};constructor(){super(),this.locale="",this._reason="",this._view="vote"}_handleVote({target:e}){if(e instanceof HTMLElement){let t=e.dataset.vote;"yes"===t?this._view="thanks":"no"===t&&(this._view="feedback"),(0,s.w)(`thumbs: article-footer" -> ${"yes"===t?"1":"0"}`)}}_handleFeedback(){this._view="thanks",(0,s.w)(`article_footer: feedback -> ${this._reason}`)}_renderVote(){return(0,a.qy)`<label
         >${this.l10n("content-feedback-question")`Was this page helpful to you?`}
       </label>
       <div class="content-feedback--buttons">
@@ -24,7 +24,7 @@ export const __webpack_id__="603";export const __webpack_ids__=["603"];export co
       </div>`}_renderFeedback(){let e=({target:e})=>{e instanceof HTMLInputElement&&(this._reason=e.value)};return(0,a.qy)`<label
         >${this.l10n("content-feedback-reason")`Why was this page not helpful to you?`}</label
       >
-      ${Object.entries("de"===this.locale?d:l).map(([t,n])=>(0,a.qy)`<div class="content-feedback--radios">
+      ${Object.entries("de"===this.locale?l:d).map(([t,n])=>(0,a.qy)`<div class="content-feedback--radios">
             <input
               type="radio"
               id=${`reason_${t}`}
@@ -44,5 +44,5 @@ export const __webpack_id__="603";export const __webpack_ids__=["603"];export co
       <span class="emoji">❤️</span>
     </span>`}_renderInner(e){switch(e){case"vote":return this._renderVote();case"feedback":return this._renderFeedback();case"thanks":return this._renderThanks()}}render(){return(0,a.qy)`<fieldset class="content-feedback">
       ${this._renderInner(this._view)}
-    </fieldset>`}};customElements.define("mdn-content-feedback",MDNContentFeedback)},62963:function(e,t,n){n.d(t,{J:()=>o});var a=n(97160);let o=e=>e??a.s6},39943:function(e,t,n){n.d(t,{w:()=>o});var a=n(92);function o(e,{type:t,label:n}){a.A.recordElementClick({id:e,type:t,label:n})}}};
-//# sourceMappingURL=603.8cdd963a9e248a75.js.map
+    </fieldset>`}};customElements.define("mdn-content-feedback",MDNContentFeedback)},62963:function(e,t,n){n.d(t,{J:()=>o});var a=n(97160);let o=e=>e??a.s6},39943:function(e,t,n){n.d(t,{w:()=>o});var a=n(92);function o(e){a.A.recordElementClick({id:e})}}};
+//# sourceMappingURL=603.8670965b0722be3a.js.map

package/out/static/client/603.8670965b0722be3a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"603.8670965b0722be3a.js","sources":["webpack://@mdn/fred/./components/content-feedback/element.css","webpack://@mdn/fred/./components/icon/thumbs-down.svg","webpack://@mdn/fred/./components/icon/thumbs-up.svg","webpack://@mdn/fred/./components/content-feedback/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js","webpack://@mdn/fred/./utils/glean.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.content-feedback{border:none;margin:0 0 .25rem;padding:0}.content-feedback>label{display:block;margin-bottom:.25rem}.content-feedback .thank-you{display:block;margin-bottom:calc(2.75rem + 2px)}.content-feedback mdn-button{flex:1;min-width:0}.content-feedback--buttons{display:inline-flex;gap:.75rem;margin:.25rem 0}.content-feedback--radios{align-items:center;display:flex;gap:.25rem;margin:.25rem 0}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88\"/></svg>`;","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88\"/></svg>`;","import \"../button/element.js\";\n\nimport { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport thumbsDown from \"../icon/thumbs-down.svg?lit\";\nimport thumbsUp from \"../icon/thumbs-up.svg?lit\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @typedef {\"outdated\"|\"incomplete\"|\"code_examples\"|\"technical\"|\"consistency\"|\"incomprehensible\"|\"linguistic\"|\"other\"} FeedbackReason\n */\n\n/** @type {Partial<Record<FeedbackReason, string>>} */\nconst FEEDBACK_REASONS = {\n  outdated: \"Content is out of date\",\n  incomplete: \"Missing information\",\n  code_examples: \"Code examples not working as expected\",\n  other: \"Other\",\n};\n\n/** @type {Partial<Record<FeedbackReason, string>>} */\nconst FEEDBACK_REASONS_DE = {\n  technical: \"Übersetzung enthält fachliche Fehler\",\n  consistency: \"Begriffe sind inkonsistent übersetzt\",\n  incomprehensible: \"Übersetzung ist nicht verständlich\",\n  linguistic: \"Übersetzung enthält sprachliche Fehler\",\n  code_examples: \"Code-Beispiele funktionieren nicht\",\n  other: \"Sonstige\",\n};\n\nexport class MDNContentFeedback extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    locale: { type: String },\n    _reason: { state: true },\n    _view: { state: true },\n  };\n\n  constructor() {\n    super();\n    this.locale = \"\";\n    this._reason = \"\";\n    /** @type {'vote'|'feedback'|'thanks'} */\n    this._view = \"vote\";\n  }\n\n  /**\n   * @param {MouseEvent} event\n   */\n  _handleVote({ target }) {\n    if (target instanceof HTMLElement) {\n      const vote = target.dataset.vote;\n      if (vote === \"yes\") {\n        this._view = \"thanks\";\n      } else if (vote === \"no\") {\n        this._view = \"feedback\";\n      }\n      // Reusing Thumbs' key to be able to reuse queries.\n      gleanClick(`thumbs: article-footer\" -> ${vote === \"yes\" ? \"1\" : \"0\"}`);\n    }\n  }\n\n  _handleFeedback() {\n    this._view = \"thanks\";\n    gleanClick(`article_footer: feedback -> ${this._reason}`);\n  }\n\n  _renderVote() {\n    return html`<label\n        >${this.l10n(\n          \"content-feedback-question\",\n        )`Was this page helpful to you?`}\n      </label>\n      <div class=\"content-feedback--buttons\">\n        <mdn-button\n          data-vote=\"yes\"\n          @click=${this._handleVote}\n          .icon=${thumbsUp}\n          variant=\"secondary\"\n          action=\"positive\"\n        >\n          ${this.l10n`Yes`}\n        </mdn-button>\n        <mdn-button\n          data-vote=\"no\"\n          @click=${this._handleVote}\n          .icon=${thumbsDown}\n          variant=\"secondary\"\n          action=\"negative\"\n        >\n          ${this.l10n`No`}\n        </mdn-button>\n      </div>`;\n  }\n\n  _renderFeedback() {\n    const setReason =\n      /** @param {Event} event */\n      ({ target }) => {\n        if (target instanceof HTMLInputElement) {\n          this._reason = target.value;\n        }\n      };\n\n    return html`<label\n        >${this.l10n(\n          \"content-feedback-reason\",\n        )`Why was this page not helpful to you?`}</label\n      >\n      ${Object.entries(\n        this.locale === \"de\" ? FEEDBACK_REASONS_DE : FEEDBACK_REASONS,\n      ).map(\n        ([key, label]) =>\n          html`<div class=\"content-feedback--radios\">\n            <input\n              type=\"radio\"\n              id=${`reason_${key}`}\n              name=\"reason\"\n              .value=${key}\n              ?checked=${this._reason === key}\n              @change=${setReason}\n            />\n            <label for=${`reason_${key}`}>${label}</label>\n          </div>`,\n      )}\n      <div class=\"button-container\">\n        <mdn-button @click=${this._handleFeedback} ?disabled=${!this._reason}>\n          ${this.l10n`Submit`}\n        </mdn-button>\n      </div>`;\n  }\n\n  _renderThanks() {\n    return html`<span class=\"thank-you\">\n      ${this.l10n(\"content-feedback-thanks\")`Thank you for your feedback!`}\n      <span class=\"emoji\">❤️</span>\n    </span>`;\n  }\n\n  /**\n   * @param {'vote'|'feedback'|'thanks'} view\n   */\n  _renderInner(view) {\n    switch (view) {\n      case \"vote\":\n        return this._renderVote();\n      case \"feedback\":\n        return this._renderFeedback();\n      case \"thanks\":\n        return this._renderThanks();\n    }\n  }\n\n  render() {\n    return html`<fieldset class=\"content-feedback\">\n      ${this._renderInner(this._view)}\n    </fieldset>`;\n  }\n}\n\ncustomElements.define(\"mdn-content-feedback\", MDNContentFeedback);\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","// @ts-expect-error \"Could not find declaration file\"\nimport GleanMetrics from \"@mozilla/glean/metrics\";\n\n/**\n * Records a click event.\n *\n * Use only if automatic click events are not an option.\n * See: https://mozilla.github.io/glean.js/automatic_instrumentation/click_events/\n *\n * @param {string} source\n */\nexport function gleanClick(source) {\n  GleanMetrics.recordElementClick({\n    id: source,\n  });\n}\n"],"names":["MDNContentFeedback","String","HTMLElement","HTMLInputElement","Object","customElements","o"],"mappings":"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"}

package/out/static/client/{6040.80c6f96d0152ac99.js → 6040.13e672aff6757a47.js}

@@ -117,5 +117,5 @@ export const __webpack_id__="6040";export const __webpack_ids__=["6040"];export
           </div>
         </mdn-play-controller>
       `}render(){return"tabbed"===this._template?this.#l():super.render()}},v=["focus","copy","cut","paste","click"];let InteractiveExampleBase=class InteractiveExampleBase extends o.WF{static ssr=!1;static properties={name:{type:String}};static styles=l.A;constructor(){super(),this.name="",this._languages=[],this._code={}}_controller=(0,a._)();_runner=(0,a._)();_run(){this._controller.value?.run()}_reset(){this._controller.value?.reset()}_initialCode(){let e={};for(let t of this.closest("section")?.querySelectorAll(".code-example pre.interactive-example")??[]){let r=(0,s.upgradePre)(t);if(r){let{language:t,code:o}=r;e[t]=e[t]?`${e[t]}
-${o}`:o}}return this._choices=[...this.closest("section")?.querySelectorAll(".code-example pre.interactive-example-choice")||[]].map(e=>(0,s.upgradePre)(e)?.code.trim()).filter(e=>void 0!==e),this._languages=Object.keys(e),this._template=this._choices.length>0?"choices":1===this._languages.length&&"js"===this._languages[0]||this._languages.includes("js")&&this._languages.includes("wat")?"console":"tabbed",e}_langName(e){return"js"===e?"JavaScript":e.toUpperCase()}_telemetryHandler(e){let t=e.type;"click"===e.type&&e.target instanceof HTMLElement&&e.target.id&&(t=`click@${e.target.id}`),(0,i.w)("interactive-example",{type:"action",label:t})}connectedCallback(){for(let e of(super.connectedCallback(),this._telemetryHandler=this._telemetryHandler.bind(this),v))this.renderRoot.addEventListener(e,this._telemetryHandler);this._code=this._initialCode()}firstUpdated(){this._controller.value&&(this._controller.value.code=this._code)}disconnectedCallback(){for(let e of(super.disconnectedCallback(),v))this.renderRoot.removeEventListener(e,this._telemetryHandler)}};let MDNInteractiveExample=class MDNInteractiveExample extends m(b(g(InteractiveExampleBase))){};customElements.define("interactive-example",MDNInteractiveExample)},39943:function(e,t,r){r.d(t,{w:()=>a});var o=r(92);function a(e,{type:t,label:r}){o.A.recordElementClick({id:e,type:t,label:r})}}};
-//# sourceMappingURL=6040.80c6f96d0152ac99.js.map
+${o}`:o}}return this._choices=[...this.closest("section")?.querySelectorAll(".code-example pre.interactive-example-choice")||[]].map(e=>(0,s.upgradePre)(e)?.code.trim()).filter(e=>void 0!==e),this._languages=Object.keys(e),this._template=this._choices.length>0?"choices":1===this._languages.length&&"js"===this._languages[0]||this._languages.includes("js")&&this._languages.includes("wat")?"console":"tabbed",e}_langName(e){return"js"===e?"JavaScript":e.toUpperCase()}_telemetryHandler(e){let t=e.type;"click"===e.type&&e.target instanceof HTMLElement&&e.target.id&&(t=`click@${e.target.id}`),(0,i.w)(`interactive-example: ${t}`)}connectedCallback(){for(let e of(super.connectedCallback(),this._telemetryHandler=this._telemetryHandler.bind(this),v))this.renderRoot.addEventListener(e,this._telemetryHandler);this._code=this._initialCode()}firstUpdated(){this._controller.value&&(this._controller.value.code=this._code)}disconnectedCallback(){for(let e of(super.disconnectedCallback(),v))this.renderRoot.removeEventListener(e,this._telemetryHandler)}};let MDNInteractiveExample=class MDNInteractiveExample extends m(b(g(InteractiveExampleBase))){};customElements.define("interactive-example",MDNInteractiveExample)},39943:function(e,t,r){r.d(t,{w:()=>a});var o=r(92);function a(e){o.A.recordElementClick({id:e})}}};
+//# sourceMappingURL=6040.13e672aff6757a47.js.map

package/out/static/client/{6040.80c6f96d0152ac99.js.map → 6040.13e672aff6757a47.js.map}

@@ -1 +1 @@
-{"version":3,"file":"6040.80c6f96d0152ac99.js","sources":["webpack://@mdn/fred/./components/interactive-example/element.css","webpack://@mdn/fred/./components/interactive-example/utils.js","webpack://@mdn/fred/./components/interactive-example/with-choices.js","webpack://@mdn/fred/./components/interactive-example/with-console.js","webpack://@mdn/fred/./components/interactive-example/with-tabs.js","webpack://@mdn/fred/./components/interactive-example/element.js","webpack://@mdn/fred/./utils/glean.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/chevron-right.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/triangle-alert.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--border:1px solid var(--color-border-primary);--tabbed-font-heading:600 0.625rem/1.2 var(--font-family-text);--elem-radius:0.25rem}header{align-items:center;border-bottom:var(--border);border-top-left-radius:var(--elem-radius);border-top-right-radius:var(--elem-radius);display:flex;grid-area:header;justify-content:space-between;padding:.5rem 1rem}header h4{font-size:var(--font-size-normal);font-weight:400;line-height:1.1876;margin:0;overflow-wrap:anywhere}header mdn-button{margin-right:-.5rem}mdn-play-editor{grid-area:editor;height:100%;overflow:auto}.buttons{display:flex;flex-direction:column;gap:.5rem;grid-area:buttons}mdn-play-console{border:var(--border);border-radius:var(--elem-radius);grid-area:console}mdn-ix-tab-wrapper{grid-area:tabs}.template-console{align-content:start;display:grid;gap:.5rem;grid-template-areas:\"header  header\" \"editor  editor\" \"buttons console\";grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr 8rem;height:100%}.template-console header{border:var(--border)}.template-console mdn-play-runner{display:none}.template-console mdn-ix-tab-wrapper,.template-console>mdn-play-editor{border:var(--border);border-bottom-left-radius:var(--elem-radius);border-bottom-right-radius:var(--elem-radius);border-top:0;grid-area:editor;margin-top:-.5rem}@media (width <= 769px){.template-console{grid-template-areas:\"header\" \"editor\" \"buttons\" \"console\";grid-template-columns:1fr;grid-template-rows:max-content 1fr max-content 8rem}.template-console .buttons{flex-direction:row;justify-content:space-between}}.template-tabbed{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"tabs   runner\";grid-template-columns:6fr 4fr;grid-template-rows:max-content 1fr;height:100%;overflow:hidden}.template-tabbed .output-wrapper{border-left:var(--border);grid-area:runner;overflow:hidden;position:relative}:is(.template-tabbed .output-wrapper) h4{background-color:var(--color-background-secondary);border-bottom-left-radius:var(--elem-radius);color:var(--color-text-secondary);font:var(--tabbed-font-heading);margin:0;padding:.5rem 1.6rem;position:absolute;right:0;text-transform:uppercase;top:0;z-index:2}@media (width <= 992px){.template-tabbed{grid-template-areas:\"header\" \"tabs\" \"runner\";grid-template-columns:1fr;grid-template-rows:max-content 1fr 1fr}.template-tabbed .output-wrapper{border-left:0;border-top:var(--border)}}.template-choices{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"choice runner\";grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content 1fr;height:100%}@media (width <= 992px){.template-choices{grid-template-areas:\"header\" \"choice\" \"runner\";grid-template-columns:1fr}}.template-choices .choice-wrapper{border-right:var(--border);display:flex;flex-direction:column;grid-area:choice;overflow-y:auto;padding:1rem 0 1rem 1rem;row-gap:.4rem}@media (width <= 992px){.template-choices .choice-wrapper{border-bottom:var(--border);border-right:none;padding-right:1em}}:is(.template-choices .choice-wrapper) .choice{--csstools-light-dark-toggle-f9892825-0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle-f9892825-0,var(--color-blue-50));--csstools-light-dark-toggle-f9892825-1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle-f9892825-1,var(--color-blue-90));align-items:center;display:flex;flex-grow:1}@supports (color:light-dark(red,red)){:is(.template-choices .choice-wrapper) .choice{--field-focus-border:light-dark(var(--color-blue-50),var(--color-blue-80));--focus-01:0 0 0 3px light-dark(var(--color-blue-90),var(--color-blue-10))}}@supports not (color:light-dark(tan,tan)){:is(:is(.template-choices .choice-wrapper) .choice) *{--csstools-light-dark-toggle-f9892825-0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle-f9892825-0,var(--color-blue-50));--csstools-light-dark-toggle-f9892825-1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle-f9892825-1,var(--color-blue-90))}}:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:currentcolor;color:var(--field-focus-border);content:\"\";display:block;height:1.25rem;margin:0 .75rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;opacity:0;width:1.25rem}@media (width <= 992px){:is(:is(.template-choices .choice-wrapper) .choice):after{display:none}}.selected:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--field-focus-border);box-shadow:var(--focus-01);cursor:text}.selected:is(:is(.template-choices .choice-wrapper) .choice):after{opacity:1;transition:all .2s ease-out}.unsupported:is(:is(.template-choices .choice-wrapper) .choice){--csstools-light-dark-toggle-f9892825-2:var(--csstools-color-scheme--light) var(--color-yellow-80);--color-unsupported:var(--csstools-light-dark-toggle-f9892825-2,var(--color-yellow-50))}@supports (color:light-dark(red,red)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice){--color-unsupported:light-dark(var(--color-yellow-50),var(--color-yellow-80))}}@supports not (color:light-dark(tan,tan)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice) *{--csstools-light-dark-toggle-f9892825-2:var(--csstools-color-scheme--light) var(--color-yellow-80);--color-unsupported:var(--csstools-light-dark-toggle-f9892825-2,var(--color-yellow-50))}}.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--color-unsupported)}.unsupported:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:var(--color-unsupported);-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:none}:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border:var(--border);border-radius:var(--elem-radius);cursor:pointer;width:100%}.template-choices .output-wrapper{height:300px;overflow:hidden}@media print{mdn-button{display:none!important}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","/**\n * Checks if the CSS code is supported by the current browser.\n *\n * @param {string} code\n */\nexport function isCSSSupported(code) {\n  // http://regexr.com/3fvik\n  const cssCommentsMatch = /(\\/\\*)[\\s\\S]+(\\*\\/)/g;\n  const element = document.createElement(\"div\");\n\n  // strip out any CSS comments before applying the code\n  code = code.replaceAll(cssCommentsMatch, \"\");\n\n  const vendorPrefixMatch = /^-(?:webkit|moz|ms|o)-/;\n  const style = element.style;\n  // Expecting declarations to be separated by \";\"\n  // Declarations with just white space are ignored\n  const declarationsArray = code\n    .split(\";\")\n    .map((d) => d.trim())\n    .filter((d) => d.length > 0);\n\n  /**\n   * @param {string} declaration\n   * @returns {boolean} - true if declaration starts with -webkit-, -moz-, -ms- or -o-\n   */\n  function hasVendorPrefix(declaration) {\n    return vendorPrefixMatch.test(declaration);\n  }\n\n  /**\n   * Looks for property name by cutting off optional vendor prefix at the beginning\n   * and then cutting off rest of the declaration, starting from any whitespace or \":\" in property name.\n   * @param {string} declaration - single css declaration, with not white space at the beginning\n   * @returns {string} - property name without vendor prefix.\n   */\n  function getPropertyNameNoPrefix(declaration) {\n    const prefixMatch = vendorPrefixMatch.exec(declaration);\n    const prefix = prefixMatch === null ? \"\" : prefixMatch[0];\n    const declarationNoPrefix =\n      prefix === null ? declaration : declaration.slice(prefix.length);\n    // Expecting property name to be over, when any whitespace or \":\" is found\n    const propertyNameSeparator = /[\\s:]/;\n    return declarationNoPrefix.split(propertyNameSeparator)[0] ?? \"\";\n  }\n\n  // Clearing previous state\n  style.cssText = \"\";\n\n  // List of found and applied properties with vendor prefix\n  const appliedPropertiesWithPrefix = new Set();\n  // List of not applied properties - because of lack of support for its name or value\n  const notAppliedProperties = new Set();\n\n  for (const declaration of declarationsArray) {\n    const previousCSSText = style.cssText;\n    // Declarations are added one by one, because browsers sometimes combine multiple declarations into one\n    // For example Chrome changes \"column-count: auto;column-width: 8rem;\" into \"columns: 8rem auto;\"\n    style.cssText += declaration + \";\"; // \";\" was previous removed while using split method\n    // In case property name or value is not supported, browsers skip single declaration, while leaving rest of them intact\n    const correctlyApplied = style.cssText !== previousCSSText;\n\n    const vendorPrefixFound = hasVendorPrefix(declaration);\n    const propertyName = getPropertyNameNoPrefix(declaration);\n\n    if (correctlyApplied && vendorPrefixFound) {\n      // We are saving applied properties with prefix, so equivalent property with no prefix doesn't need to be supported\n      appliedPropertiesWithPrefix.add(propertyName);\n    } else if (!correctlyApplied && !vendorPrefixFound) {\n      notAppliedProperties.add(propertyName);\n    }\n  }\n\n  if (notAppliedProperties.size > 0) {\n    // If property with vendor prefix is supported, we can ignore the fact that browser doesn't support property with no prefix\n    for (const substitute of appliedPropertiesWithPrefix) {\n      notAppliedProperties.delete(substitute);\n    }\n    // If any other declaration is not supported, whole block should be marked as invalid\n    if (notAppliedProperties.size > 0) return false;\n  }\n  return true;\n}\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { MDNPlayEditor } from \"../play-editor/element.js\";\nimport { randomIdString } from \"../utils/index.js\";\n\nimport { isCSSSupported } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-runner/element.js\";\n\n/**\n * @import { InteractiveExampleBase } from \"./element.js\";\n */\n\n/**\n * @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n */\nexport const InteractiveExampleWithChoices = (Base) =>\n  class extends L10nMixin(Base) {\n    static properties = {\n      __choiceSelected: { state: true },\n      __choiceUnsupported: { state: true },\n      __choiceUpdated: { state: true },\n    };\n\n    /** @param {any[]} _args  */\n    constructor(..._args) {\n      super();\n      /** @type {number} */\n      this.__choiceSelected = -1;\n      /** @type {boolean[]} */\n      this.__choiceUnsupported = [];\n      /** @type {boolean} */\n      this.__choiceUpdated = false;\n    }\n\n    /** @param {MouseEvent} event  */\n    #choiceFocus({ target }) {\n      if (target instanceof MDNPlayEditor) {\n        target.focus();\n      }\n    }\n\n    /** @param {MouseEvent} event  */\n    #choiceSelect({ target }) {\n      if (target instanceof MDNPlayEditor) {\n        this.#updateUnsupported(target);\n        this.#selectChoice(target);\n      }\n    }\n\n    /** @param {Event} event  */\n    #choiceUpdate({ target }) {\n      if (target instanceof MDNPlayEditor) {\n        this.#updateUnsupported(target);\n        if (this.__choiceSelected === this.#getIndex(target)) {\n          this.#selectChoice(target);\n        }\n        this.__choiceUpdated = true;\n      }\n    }\n\n    #resetChoices() {\n      this.__choiceSelected = -1;\n      this.__choiceUpdated = false;\n\n      const editorNodes = [\n        ...(this.shadowRoot?.querySelectorAll(\"mdn-play-editor\") || []),\n      ];\n\n      for (const [index, editorNode] of [...editorNodes].entries()) {\n        const code = this._choices?.at(index) ?? \"\";\n        editorNode.value = code;\n      }\n\n      this.__choiceUnsupported =\n        this._choices?.map((code) => !isCSSSupported(code || \"\")) || [];\n\n      const first = editorNodes[0];\n      if (first) {\n        this.#selectChoice(first);\n      }\n    }\n\n    /** @param {MDNPlayEditor} editor */\n    async #selectChoice(editor) {\n      const index = this.#getIndex(editor);\n      await this._runner.value?.postMessage({\n        typ: \"choice\",\n        code: editor.value,\n      });\n      this.__choiceSelected = index;\n    }\n\n    /** @param {MDNPlayEditor} editor */\n    #updateUnsupported(editor) {\n      const index = this.#getIndex(editor);\n      this.__choiceUnsupported = this.__choiceUnsupported.map((value, i) =>\n        index === i ? !isCSSSupported(editor.value) : value,\n      );\n    }\n\n    /** @param {MDNPlayEditor} editor */\n    #getIndex(editor) {\n      return Number.parseInt(editor.dataset.index ?? \"-1\", 10);\n    }\n\n    #render() {\n      const id = randomIdString();\n\n      return html`\n        <div class=\"template-choices\" aria-labelledby=${id}>\n          <header>\n            <h4 id=${id}>${decode(this.name)}</h4>\n            <mdn-button\n              id=\"reset\"\n              @click=${this._reset}\n              variant=\"secondary\"\n              .disabled=${!this.__choiceUpdated}\n              >${this.l10n`Reset`}</mdn-button\n            >\n          </header>\n          <ul\n            class=\"choice-wrapper\"\n            @click=${this.#choiceFocus}\n            @focus=${this.#choiceSelect}\n            @update=${this.#choiceUpdate}\n            aria-label=${this.l10n`Value select`}\n          >\n            ${this._choices?.map(\n              (code, index) => html`\n                <li\n                  class=${[\n                    \"choice\",\n                    ...(index === this.__choiceSelected ? [\"selected\"] : []),\n                    ...(this.__choiceUnsupported[index] ? [\"unsupported\"] : []),\n                  ].join(\" \")}\n                >\n                  <mdn-play-editor\n                    data-index=${index}\n                    language=\"css\"\n                    minimal=\"true\"\n                    .delay=${100}\n                    .value=${code?.trim()}\n                    aria-label=${ifDefined(\n                      this.__choiceUnsupported[index]\n                        ? this\n                            .l10n`The current value is not supported by your browser.`\n                        : undefined,\n                    )}\n                  ></mdn-play-editor>\n                </li>\n              `,\n            )}\n          </ul>\n          <div class=\"output-wrapper\">\n            <mdn-play-controller ${ref(this._controller)} run-on-start>\n              <mdn-play-runner\n                ${ref(this._runner)}\n                defaults=\"ix-choice\"\n              ></mdn-play-runner>\n            </mdn-play-controller>\n          </div>\n        </div>\n      `;\n    }\n\n    _reset() {\n      if (this._template === \"choices\") {\n        this.#resetChoices();\n      } else {\n        super._reset();\n      }\n    }\n\n    _initialCode() {\n      const code = super._initialCode();\n      if (this._template === \"choices\") {\n        code[\"js-hidden\"] = `setChoice(${JSON.stringify(this._choices?.[0])})`;\n      }\n      return code;\n    }\n\n    render() {\n      return this._template === \"choices\" ? this.#render() : super.render();\n    }\n\n    firstUpdated() {\n      super.firstUpdated();\n      if (this._template === \"choices\") {\n        this.#resetChoices();\n      }\n    }\n  };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { randomIdString } from \"../utils/index.js\";\n\n/**\n * @import { InteractiveExampleBase } from \"./element.js\";\n */\n\n/**\n * @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n */\nexport const InteractiveExampleWithConsole = (Base) =>\n  class extends L10nMixin(Base) {\n    #render() {\n      const id = randomIdString();\n\n      return html`\n        <mdn-play-controller ${ref(this._controller)}>\n          <div class=\"template-console\" aria-labelledby=${id}>\n            <header>\n              <h4 id=${id}>${decode(this.name)}</h4>\n            </header>\n            ${this._languages.length === 1\n              ? html`<mdn-play-editor\n                  id=\"editor\"\n                  language=${ifDefined(this._languages[0])}\n                ></mdn-play-editor>`\n              : html`<mdn-ix-tab-wrapper>\n                  ${this._languages.map(\n                    (lang) => html`\n                      <mdn-ix-tab id=${lang}\n                        >${this._langName(lang)}</mdn-ix-tab\n                      >\n                      <mdn-ix-tab-panel id=${`${lang}-panel`}>\n                        <mdn-play-editor language=${lang}></mdn-play-editor>\n                      </mdn-ix-tab-panel>\n                    `,\n                  )}\n                </mdn-ix-tab-wrapper>`}\n            <div class=\"buttons\">\n              <mdn-button\n                id=\"execute\"\n                @click=${this._run}\n                variant=\"secondary\"\n                title=${this.l10n`Run example, and show console output`}\n                >${this.l10n`Run`}</mdn-button\n              >\n              <mdn-button\n                id=\"reset\"\n                @click=${this._reset}\n                variant=\"secondary\"\n                title=${this.l10n`Reset example, and clear console output`}\n                >${this.l10n`Reset`}</mdn-button\n              >\n            </div>\n            <mdn-play-console\n              id=\"console\"\n              title=${this.l10n`Console output`}\n            ></mdn-play-console>\n            <mdn-play-runner\n              defaults=${ifDefined(\n                this._languages.includes(\"wat\") ? \"ix-wat\" : undefined,\n              )}\n            ></mdn-play-runner>\n          </div>\n        </mdn-play-controller>\n      `;\n    }\n\n    render() {\n      return this._template === \"console\" ? this.#render() : super.render();\n    }\n  };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { randomIdString } from \"../utils/index.js\";\n\n/**\n * @import { InteractiveExampleBase } from \"./element.js\";\n */\n\n/**\n * @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n */\nexport const InteractiveExampleWithTabs = (Base) =>\n  class extends L10nMixin(Base) {\n    #render() {\n      const id = randomIdString();\n\n      return html`\n        <mdn-play-controller\n          ${ref(this._controller)}\n          run-on-start\n          run-on-change\n        >\n          <div class=\"template-tabbed\" aria-labelledby=${id}>\n            <header>\n              <h4 id=${id}>${decode(this.name)}</h4>\n              <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n                >${this.l10n`Reset`}</mdn-button\n              >\n            </header>\n            <mdn-ix-tab-wrapper>\n              ${this._languages.map(\n                (lang) => html`\n                  <mdn-ix-tab id=${lang}>${this._langName(lang)}</mdn-ix-tab>\n                  <mdn-ix-tab-panel id=${`${lang}-panel`}>\n                    <mdn-play-editor language=${lang}></mdn-play-editor>\n                  </mdn-ix-tab-panel>\n                `,\n              )}\n            </mdn-ix-tab-wrapper>\n            <div class=\"output-wrapper\">\n              <h4>${this.l10n`Output`}</h4>\n              <mdn-play-runner\n                ${ref(this._runner)}\n                sandbox=\"allow-top-navigation-by-user-activation\"\n                defaults=\"ix-tabbed\"\n              ></mdn-play-runner>\n            </div>\n          </div>\n        </mdn-play-controller>\n      `;\n    }\n\n    render() {\n      return this._template === \"tabbed\" ? this.#render() : super.render();\n    }\n  };\n","import { LitElement } from \"lit\";\nimport { createRef } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { upgradePre } from \"../code-example/element.js\";\n\nimport styles from \"./element.css?lit\";\nimport { InteractiveExampleWithChoices } from \"./with-choices.js\";\nimport { InteractiveExampleWithConsole } from \"./with-console.js\";\nimport { InteractiveExampleWithTabs } from \"./with-tabs.js\";\n\n/**\n * @import { Ref } from 'lit/directives/ref.js';\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNPlayRunner } from \"../play-runner/element.js\";\n */\n\nconst GLEAN_EVENT_TYPES = [\"focus\", \"copy\", \"cut\", \"paste\", \"click\"];\n\n// eslint-disable-next-line fred/custom-element-name\nexport class InteractiveExampleBase extends LitElement {\n  static ssr = false;\n\n  static properties = { name: { type: String } };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    this.name = \"\";\n    /** @type {string[]} */\n    this._languages = [];\n    /** @type {Record<string, string>} */\n    this._code = {};\n  }\n\n  /** @type {Ref<MDNPlayController>} */\n  _controller = createRef();\n  /** @type {Ref<MDNPlayRunner>} */\n  _runner = createRef();\n\n  _run() {\n    this._controller.value?.run();\n  }\n\n  _reset() {\n    this._controller.value?.reset();\n  }\n\n  _initialCode() {\n    /** @type {Record<string, string>} */\n    const initialCode = {};\n    for (const pre of this.closest(\"section\")?.querySelectorAll(\n      \".code-example pre.interactive-example\",\n    ) ?? []) {\n      const example = upgradePre(pre);\n      if (example) {\n        const { language, code } = example;\n        initialCode[language] = initialCode[language]\n          ? `${initialCode[language]}\\n${code}`\n          : code;\n      }\n    }\n\n    this._choices = [\n      ...(this.closest(\"section\")?.querySelectorAll(\n        \".code-example pre.interactive-example-choice\",\n      ) || []),\n    ]\n      .map((pre) => upgradePre(pre)?.code.trim())\n      .filter((x) => x !== undefined);\n\n    this._languages = Object.keys(initialCode);\n    this._template =\n      this._choices.length > 0\n        ? \"choices\"\n        : (this._languages.length === 1 && this._languages[0] === \"js\") ||\n            (this._languages.includes(\"js\") && this._languages.includes(\"wat\"))\n          ? \"console\"\n          : \"tabbed\";\n\n    return initialCode;\n  }\n\n  /** @param {string} lang */\n  _langName(lang) {\n    switch (lang) {\n      case \"js\":\n        return \"JavaScript\";\n      default:\n        return lang.toUpperCase();\n    }\n  }\n\n  /** @param {Event} ev  */\n  _telemetryHandler(ev) {\n    let action = ev.type;\n    if (\n      ev.type === \"click\" &&\n      ev.target instanceof HTMLElement &&\n      ev.target.id\n    ) {\n      action = `click@${ev.target.id}`;\n    }\n    gleanClick(\"interactive-example\", { type: \"action\", label: action });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._telemetryHandler = this._telemetryHandler.bind(this);\n    for (const type of GLEAN_EVENT_TYPES) {\n      this.renderRoot.addEventListener(type, this._telemetryHandler);\n    }\n    this._code = this._initialCode();\n  }\n\n  firstUpdated() {\n    if (this._controller.value) {\n      this._controller.value.code = this._code;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    for (const type of GLEAN_EVENT_TYPES) {\n      this.renderRoot.removeEventListener(type, this._telemetryHandler);\n    }\n  }\n}\n\nexport class MDNInteractiveExample extends InteractiveExampleWithChoices(\n  InteractiveExampleWithTabs(\n    InteractiveExampleWithConsole(InteractiveExampleBase),\n  ),\n) {}\n\n// TODO: rari outputs <interactive-example> rather than <mdn-interactive-example>\n// customElements.define(\"mdn-interactive-example\", MDNInteractiveExample);\ncustomElements.define(\"interactive-example\", MDNInteractiveExample);\n","// @ts-expect-error \"Could not find declaration file\"\nimport GleanMetrics from \"@mozilla/glean/metrics\";\n\n/**\n * Records a click event.\n *\n * Use only if automatic click events are not an option.\n * See: https://mozilla.github.io/glean.js/automatic_instrumentation/click_events/\n *\n * @param {string} id\n * @param {object} options\n * @param {string=} options.type\n * @param {string=} options.label\n */\nexport function gleanClick(id, { type, label }) {\n  GleanMetrics.recordElementClick({\n    id,\n    type,\n    label,\n  });\n}\n"],"names":["document","Set","e","Number","JSON","InteractiveExampleBase","String","Object","HTMLElement","MDNInteractiveExample","customElements","t"],"mappings":"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"}
+{"version":3,"file":"6040.13e672aff6757a47.js","sources":["webpack://@mdn/fred/./components/interactive-example/element.css","webpack://@mdn/fred/./components/interactive-example/utils.js","webpack://@mdn/fred/./components/interactive-example/with-choices.js","webpack://@mdn/fred/./components/interactive-example/with-console.js","webpack://@mdn/fred/./components/interactive-example/with-tabs.js","webpack://@mdn/fred/./components/interactive-example/element.js","webpack://@mdn/fred/./utils/glean.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/chevron-right.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/triangle-alert.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--border:1px solid var(--color-border-primary);--tabbed-font-heading:600 0.625rem/1.2 var(--font-family-text);--elem-radius:0.25rem}header{align-items:center;border-bottom:var(--border);border-top-left-radius:var(--elem-radius);border-top-right-radius:var(--elem-radius);display:flex;grid-area:header;justify-content:space-between;padding:.5rem 1rem}header h4{font-size:var(--font-size-normal);font-weight:400;line-height:1.1876;margin:0;overflow-wrap:anywhere}header mdn-button{margin-right:-.5rem}mdn-play-editor{grid-area:editor;height:100%;overflow:auto}.buttons{display:flex;flex-direction:column;gap:.5rem;grid-area:buttons}mdn-play-console{border:var(--border);border-radius:var(--elem-radius);grid-area:console}mdn-ix-tab-wrapper{grid-area:tabs}.template-console{align-content:start;display:grid;gap:.5rem;grid-template-areas:\"header  header\" \"editor  editor\" \"buttons console\";grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr 8rem;height:100%}.template-console header{border:var(--border)}.template-console mdn-play-runner{display:none}.template-console mdn-ix-tab-wrapper,.template-console>mdn-play-editor{border:var(--border);border-bottom-left-radius:var(--elem-radius);border-bottom-right-radius:var(--elem-radius);border-top:0;grid-area:editor;margin-top:-.5rem}@media (width <= 769px){.template-console{grid-template-areas:\"header\" \"editor\" \"buttons\" \"console\";grid-template-columns:1fr;grid-template-rows:max-content 1fr max-content 8rem}.template-console .buttons{flex-direction:row;justify-content:space-between}}.template-tabbed{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"tabs   runner\";grid-template-columns:6fr 4fr;grid-template-rows:max-content 1fr;height:100%;overflow:hidden}.template-tabbed .output-wrapper{border-left:var(--border);grid-area:runner;overflow:hidden;position:relative}:is(.template-tabbed .output-wrapper) h4{background-color:var(--color-background-secondary);border-bottom-left-radius:var(--elem-radius);color:var(--color-text-secondary);font:var(--tabbed-font-heading);margin:0;padding:.5rem 1.6rem;position:absolute;right:0;text-transform:uppercase;top:0;z-index:2}@media (width <= 992px){.template-tabbed{grid-template-areas:\"header\" \"tabs\" \"runner\";grid-template-columns:1fr;grid-template-rows:max-content 1fr 1fr}.template-tabbed .output-wrapper{border-left:0;border-top:var(--border)}}.template-choices{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"choice runner\";grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content 1fr;height:100%}@media (width <= 992px){.template-choices{grid-template-areas:\"header\" \"choice\" \"runner\";grid-template-columns:1fr}}.template-choices .choice-wrapper{border-right:var(--border);display:flex;flex-direction:column;grid-area:choice;overflow-y:auto;padding:1rem 0 1rem 1rem;row-gap:.4rem}@media (width <= 992px){.template-choices .choice-wrapper{border-bottom:var(--border);border-right:none;padding-right:1em}}:is(.template-choices .choice-wrapper) .choice{--csstools-light-dark-toggle-f9892825-0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle-f9892825-0,var(--color-blue-50));--csstools-light-dark-toggle-f9892825-1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle-f9892825-1,var(--color-blue-90));align-items:center;display:flex;flex-grow:1}@supports (color:light-dark(red,red)){:is(.template-choices .choice-wrapper) .choice{--field-focus-border:light-dark(var(--color-blue-50),var(--color-blue-80));--focus-01:0 0 0 3px light-dark(var(--color-blue-90),var(--color-blue-10))}}@supports not (color:light-dark(tan,tan)){:is(:is(.template-choices .choice-wrapper) .choice) *{--csstools-light-dark-toggle-f9892825-0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle-f9892825-0,var(--color-blue-50));--csstools-light-dark-toggle-f9892825-1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle-f9892825-1,var(--color-blue-90))}}:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:currentcolor;color:var(--field-focus-border);content:\"\";display:block;height:1.25rem;margin:0 .75rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;opacity:0;width:1.25rem}@media (width <= 992px){:is(:is(.template-choices .choice-wrapper) .choice):after{display:none}}.selected:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--field-focus-border);box-shadow:var(--focus-01);cursor:text}.selected:is(:is(.template-choices .choice-wrapper) .choice):after{opacity:1;transition:all .2s ease-out}.unsupported:is(:is(.template-choices .choice-wrapper) .choice){--csstools-light-dark-toggle-f9892825-2:var(--csstools-color-scheme--light) var(--color-yellow-80);--color-unsupported:var(--csstools-light-dark-toggle-f9892825-2,var(--color-yellow-50))}@supports (color:light-dark(red,red)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice){--color-unsupported:light-dark(var(--color-yellow-50),var(--color-yellow-80))}}@supports not (color:light-dark(tan,tan)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice) *{--csstools-light-dark-toggle-f9892825-2:var(--csstools-color-scheme--light) var(--color-yellow-80);--color-unsupported:var(--csstools-light-dark-toggle-f9892825-2,var(--color-yellow-50))}}.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--color-unsupported)}.unsupported:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:var(--color-unsupported);-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:none}:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border:var(--border);border-radius:var(--elem-radius);cursor:pointer;width:100%}.template-choices .output-wrapper{height:300px;overflow:hidden}@media print{mdn-button{display:none!important}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","/**\n * Checks if the CSS code is supported by the current browser.\n *\n * @param {string} code\n */\nexport function isCSSSupported(code) {\n  // http://regexr.com/3fvik\n  const cssCommentsMatch = /(\\/\\*)[\\s\\S]+(\\*\\/)/g;\n  const element = document.createElement(\"div\");\n\n  // strip out any CSS comments before applying the code\n  code = code.replaceAll(cssCommentsMatch, \"\");\n\n  const vendorPrefixMatch = /^-(?:webkit|moz|ms|o)-/;\n  const style = element.style;\n  // Expecting declarations to be separated by \";\"\n  // Declarations with just white space are ignored\n  const declarationsArray = code\n    .split(\";\")\n    .map((d) => d.trim())\n    .filter((d) => d.length > 0);\n\n  /**\n   * @param {string} declaration\n   * @returns {boolean} - true if declaration starts with -webkit-, -moz-, -ms- or -o-\n   */\n  function hasVendorPrefix(declaration) {\n    return vendorPrefixMatch.test(declaration);\n  }\n\n  /**\n   * Looks for property name by cutting off optional vendor prefix at the beginning\n   * and then cutting off rest of the declaration, starting from any whitespace or \":\" in property name.\n   * @param {string} declaration - single css declaration, with not white space at the beginning\n   * @returns {string} - property name without vendor prefix.\n   */\n  function getPropertyNameNoPrefix(declaration) {\n    const prefixMatch = vendorPrefixMatch.exec(declaration);\n    const prefix = prefixMatch === null ? \"\" : prefixMatch[0];\n    const declarationNoPrefix =\n      prefix === null ? declaration : declaration.slice(prefix.length);\n    // Expecting property name to be over, when any whitespace or \":\" is found\n    const propertyNameSeparator = /[\\s:]/;\n    return declarationNoPrefix.split(propertyNameSeparator)[0] ?? \"\";\n  }\n\n  // Clearing previous state\n  style.cssText = \"\";\n\n  // List of found and applied properties with vendor prefix\n  const appliedPropertiesWithPrefix = new Set();\n  // List of not applied properties - because of lack of support for its name or value\n  const notAppliedProperties = new Set();\n\n  for (const declaration of declarationsArray) {\n    const previousCSSText = style.cssText;\n    // Declarations are added one by one, because browsers sometimes combine multiple declarations into one\n    // For example Chrome changes \"column-count: auto;column-width: 8rem;\" into \"columns: 8rem auto;\"\n    style.cssText += declaration + \";\"; // \";\" was previous removed while using split method\n    // In case property name or value is not supported, browsers skip single declaration, while leaving rest of them intact\n    const correctlyApplied = style.cssText !== previousCSSText;\n\n    const vendorPrefixFound = hasVendorPrefix(declaration);\n    const propertyName = getPropertyNameNoPrefix(declaration);\n\n    if (correctlyApplied && vendorPrefixFound) {\n      // We are saving applied properties with prefix, so equivalent property with no prefix doesn't need to be supported\n      appliedPropertiesWithPrefix.add(propertyName);\n    } else if (!correctlyApplied && !vendorPrefixFound) {\n      notAppliedProperties.add(propertyName);\n    }\n  }\n\n  if (notAppliedProperties.size > 0) {\n    // If property with vendor prefix is supported, we can ignore the fact that browser doesn't support property with no prefix\n    for (const substitute of appliedPropertiesWithPrefix) {\n      notAppliedProperties.delete(substitute);\n    }\n    // If any other declaration is not supported, whole block should be marked as invalid\n    if (notAppliedProperties.size > 0) return false;\n  }\n  return true;\n}\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { MDNPlayEditor } from \"../play-editor/element.js\";\nimport { randomIdString } from \"../utils/index.js\";\n\nimport { isCSSSupported } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-runner/element.js\";\n\n/**\n * @import { InteractiveExampleBase } from \"./element.js\";\n */\n\n/**\n * @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n */\nexport const InteractiveExampleWithChoices = (Base) =>\n  class extends L10nMixin(Base) {\n    static properties = {\n      __choiceSelected: { state: true },\n      __choiceUnsupported: { state: true },\n      __choiceUpdated: { state: true },\n    };\n\n    /** @param {any[]} _args  */\n    constructor(..._args) {\n      super();\n      /** @type {number} */\n      this.__choiceSelected = -1;\n      /** @type {boolean[]} */\n      this.__choiceUnsupported = [];\n      /** @type {boolean} */\n      this.__choiceUpdated = false;\n    }\n\n    /** @param {MouseEvent} event  */\n    #choiceFocus({ target }) {\n      if (target instanceof MDNPlayEditor) {\n        target.focus();\n      }\n    }\n\n    /** @param {MouseEvent} event  */\n    #choiceSelect({ target }) {\n      if (target instanceof MDNPlayEditor) {\n        this.#updateUnsupported(target);\n        this.#selectChoice(target);\n      }\n    }\n\n    /** @param {Event} event  */\n    #choiceUpdate({ target }) {\n      if (target instanceof MDNPlayEditor) {\n        this.#updateUnsupported(target);\n        if (this.__choiceSelected === this.#getIndex(target)) {\n          this.#selectChoice(target);\n        }\n        this.__choiceUpdated = true;\n      }\n    }\n\n    #resetChoices() {\n      this.__choiceSelected = -1;\n      this.__choiceUpdated = false;\n\n      const editorNodes = [\n        ...(this.shadowRoot?.querySelectorAll(\"mdn-play-editor\") || []),\n      ];\n\n      for (const [index, editorNode] of [...editorNodes].entries()) {\n        const code = this._choices?.at(index) ?? \"\";\n        editorNode.value = code;\n      }\n\n      this.__choiceUnsupported =\n        this._choices?.map((code) => !isCSSSupported(code || \"\")) || [];\n\n      const first = editorNodes[0];\n      if (first) {\n        this.#selectChoice(first);\n      }\n    }\n\n    /** @param {MDNPlayEditor} editor */\n    async #selectChoice(editor) {\n      const index = this.#getIndex(editor);\n      await this._runner.value?.postMessage({\n        typ: \"choice\",\n        code: editor.value,\n      });\n      this.__choiceSelected = index;\n    }\n\n    /** @param {MDNPlayEditor} editor */\n    #updateUnsupported(editor) {\n      const index = this.#getIndex(editor);\n      this.__choiceUnsupported = this.__choiceUnsupported.map((value, i) =>\n        index === i ? !isCSSSupported(editor.value) : value,\n      );\n    }\n\n    /** @param {MDNPlayEditor} editor */\n    #getIndex(editor) {\n      return Number.parseInt(editor.dataset.index ?? \"-1\", 10);\n    }\n\n    #render() {\n      const id = randomIdString();\n\n      return html`\n        <div class=\"template-choices\" aria-labelledby=${id}>\n          <header>\n            <h4 id=${id}>${decode(this.name)}</h4>\n            <mdn-button\n              id=\"reset\"\n              @click=${this._reset}\n              variant=\"secondary\"\n              .disabled=${!this.__choiceUpdated}\n              >${this.l10n`Reset`}</mdn-button\n            >\n          </header>\n          <ul\n            class=\"choice-wrapper\"\n            @click=${this.#choiceFocus}\n            @focus=${this.#choiceSelect}\n            @update=${this.#choiceUpdate}\n            aria-label=${this.l10n`Value select`}\n          >\n            ${this._choices?.map(\n              (code, index) => html`\n                <li\n                  class=${[\n                    \"choice\",\n                    ...(index === this.__choiceSelected ? [\"selected\"] : []),\n                    ...(this.__choiceUnsupported[index] ? [\"unsupported\"] : []),\n                  ].join(\" \")}\n                >\n                  <mdn-play-editor\n                    data-index=${index}\n                    language=\"css\"\n                    minimal=\"true\"\n                    .delay=${100}\n                    .value=${code?.trim()}\n                    aria-label=${ifDefined(\n                      this.__choiceUnsupported[index]\n                        ? this\n                            .l10n`The current value is not supported by your browser.`\n                        : undefined,\n                    )}\n                  ></mdn-play-editor>\n                </li>\n              `,\n            )}\n          </ul>\n          <div class=\"output-wrapper\">\n            <mdn-play-controller ${ref(this._controller)} run-on-start>\n              <mdn-play-runner\n                ${ref(this._runner)}\n                defaults=\"ix-choice\"\n              ></mdn-play-runner>\n            </mdn-play-controller>\n          </div>\n        </div>\n      `;\n    }\n\n    _reset() {\n      if (this._template === \"choices\") {\n        this.#resetChoices();\n      } else {\n        super._reset();\n      }\n    }\n\n    _initialCode() {\n      const code = super._initialCode();\n      if (this._template === \"choices\") {\n        code[\"js-hidden\"] = `setChoice(${JSON.stringify(this._choices?.[0])})`;\n      }\n      return code;\n    }\n\n    render() {\n      return this._template === \"choices\" ? this.#render() : super.render();\n    }\n\n    firstUpdated() {\n      super.firstUpdated();\n      if (this._template === \"choices\") {\n        this.#resetChoices();\n      }\n    }\n  };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { randomIdString } from \"../utils/index.js\";\n\n/**\n * @import { InteractiveExampleBase } from \"./element.js\";\n */\n\n/**\n * @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n */\nexport const InteractiveExampleWithConsole = (Base) =>\n  class extends L10nMixin(Base) {\n    #render() {\n      const id = randomIdString();\n\n      return html`\n        <mdn-play-controller ${ref(this._controller)}>\n          <div class=\"template-console\" aria-labelledby=${id}>\n            <header>\n              <h4 id=${id}>${decode(this.name)}</h4>\n            </header>\n            ${this._languages.length === 1\n              ? html`<mdn-play-editor\n                  id=\"editor\"\n                  language=${ifDefined(this._languages[0])}\n                ></mdn-play-editor>`\n              : html`<mdn-ix-tab-wrapper>\n                  ${this._languages.map(\n                    (lang) => html`\n                      <mdn-ix-tab id=${lang}\n                        >${this._langName(lang)}</mdn-ix-tab\n                      >\n                      <mdn-ix-tab-panel id=${`${lang}-panel`}>\n                        <mdn-play-editor language=${lang}></mdn-play-editor>\n                      </mdn-ix-tab-panel>\n                    `,\n                  )}\n                </mdn-ix-tab-wrapper>`}\n            <div class=\"buttons\">\n              <mdn-button\n                id=\"execute\"\n                @click=${this._run}\n                variant=\"secondary\"\n                title=${this.l10n`Run example, and show console output`}\n                >${this.l10n`Run`}</mdn-button\n              >\n              <mdn-button\n                id=\"reset\"\n                @click=${this._reset}\n                variant=\"secondary\"\n                title=${this.l10n`Reset example, and clear console output`}\n                >${this.l10n`Reset`}</mdn-button\n              >\n            </div>\n            <mdn-play-console\n              id=\"console\"\n              title=${this.l10n`Console output`}\n            ></mdn-play-console>\n            <mdn-play-runner\n              defaults=${ifDefined(\n                this._languages.includes(\"wat\") ? \"ix-wat\" : undefined,\n              )}\n            ></mdn-play-runner>\n          </div>\n        </mdn-play-controller>\n      `;\n    }\n\n    render() {\n      return this._template === \"console\" ? this.#render() : super.render();\n    }\n  };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { randomIdString } from \"../utils/index.js\";\n\n/**\n * @import { InteractiveExampleBase } from \"./element.js\";\n */\n\n/**\n * @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n */\nexport const InteractiveExampleWithTabs = (Base) =>\n  class extends L10nMixin(Base) {\n    #render() {\n      const id = randomIdString();\n\n      return html`\n        <mdn-play-controller\n          ${ref(this._controller)}\n          run-on-start\n          run-on-change\n        >\n          <div class=\"template-tabbed\" aria-labelledby=${id}>\n            <header>\n              <h4 id=${id}>${decode(this.name)}</h4>\n              <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n                >${this.l10n`Reset`}</mdn-button\n              >\n            </header>\n            <mdn-ix-tab-wrapper>\n              ${this._languages.map(\n                (lang) => html`\n                  <mdn-ix-tab id=${lang}>${this._langName(lang)}</mdn-ix-tab>\n                  <mdn-ix-tab-panel id=${`${lang}-panel`}>\n                    <mdn-play-editor language=${lang}></mdn-play-editor>\n                  </mdn-ix-tab-panel>\n                `,\n              )}\n            </mdn-ix-tab-wrapper>\n            <div class=\"output-wrapper\">\n              <h4>${this.l10n`Output`}</h4>\n              <mdn-play-runner\n                ${ref(this._runner)}\n                sandbox=\"allow-top-navigation-by-user-activation\"\n                defaults=\"ix-tabbed\"\n              ></mdn-play-runner>\n            </div>\n          </div>\n        </mdn-play-controller>\n      `;\n    }\n\n    render() {\n      return this._template === \"tabbed\" ? this.#render() : super.render();\n    }\n  };\n","import { LitElement } from \"lit\";\nimport { createRef } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { upgradePre } from \"../code-example/element.js\";\n\nimport styles from \"./element.css?lit\";\nimport { InteractiveExampleWithChoices } from \"./with-choices.js\";\nimport { InteractiveExampleWithConsole } from \"./with-console.js\";\nimport { InteractiveExampleWithTabs } from \"./with-tabs.js\";\n\n/**\n * @import { Ref } from 'lit/directives/ref.js';\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNPlayRunner } from \"../play-runner/element.js\";\n */\n\nconst GLEAN_EVENT_TYPES = [\"focus\", \"copy\", \"cut\", \"paste\", \"click\"];\n\n// eslint-disable-next-line fred/custom-element-name\nexport class InteractiveExampleBase extends LitElement {\n  static ssr = false;\n\n  static properties = { name: { type: String } };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    this.name = \"\";\n    /** @type {string[]} */\n    this._languages = [];\n    /** @type {Record<string, string>} */\n    this._code = {};\n  }\n\n  /** @type {Ref<MDNPlayController>} */\n  _controller = createRef();\n  /** @type {Ref<MDNPlayRunner>} */\n  _runner = createRef();\n\n  _run() {\n    this._controller.value?.run();\n  }\n\n  _reset() {\n    this._controller.value?.reset();\n  }\n\n  _initialCode() {\n    /** @type {Record<string, string>} */\n    const initialCode = {};\n    for (const pre of this.closest(\"section\")?.querySelectorAll(\n      \".code-example pre.interactive-example\",\n    ) ?? []) {\n      const example = upgradePre(pre);\n      if (example) {\n        const { language, code } = example;\n        initialCode[language] = initialCode[language]\n          ? `${initialCode[language]}\\n${code}`\n          : code;\n      }\n    }\n\n    this._choices = [\n      ...(this.closest(\"section\")?.querySelectorAll(\n        \".code-example pre.interactive-example-choice\",\n      ) || []),\n    ]\n      .map((pre) => upgradePre(pre)?.code.trim())\n      .filter((x) => x !== undefined);\n\n    this._languages = Object.keys(initialCode);\n    this._template =\n      this._choices.length > 0\n        ? \"choices\"\n        : (this._languages.length === 1 && this._languages[0] === \"js\") ||\n            (this._languages.includes(\"js\") && this._languages.includes(\"wat\"))\n          ? \"console\"\n          : \"tabbed\";\n\n    return initialCode;\n  }\n\n  /** @param {string} lang */\n  _langName(lang) {\n    switch (lang) {\n      case \"js\":\n        return \"JavaScript\";\n      default:\n        return lang.toUpperCase();\n    }\n  }\n\n  /** @param {Event} ev  */\n  _telemetryHandler(ev) {\n    let action = ev.type;\n    if (\n      ev.type === \"click\" &&\n      ev.target instanceof HTMLElement &&\n      ev.target.id\n    ) {\n      action = `click@${ev.target.id}`;\n    }\n    gleanClick(`interactive-example: ${action}`);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._telemetryHandler = this._telemetryHandler.bind(this);\n    for (const type of GLEAN_EVENT_TYPES) {\n      this.renderRoot.addEventListener(type, this._telemetryHandler);\n    }\n    this._code = this._initialCode();\n  }\n\n  firstUpdated() {\n    if (this._controller.value) {\n      this._controller.value.code = this._code;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    for (const type of GLEAN_EVENT_TYPES) {\n      this.renderRoot.removeEventListener(type, this._telemetryHandler);\n    }\n  }\n}\n\nexport class MDNInteractiveExample extends InteractiveExampleWithChoices(\n  InteractiveExampleWithTabs(\n    InteractiveExampleWithConsole(InteractiveExampleBase),\n  ),\n) {}\n\n// TODO: rari outputs <interactive-example> rather than <mdn-interactive-example>\n// customElements.define(\"mdn-interactive-example\", MDNInteractiveExample);\ncustomElements.define(\"interactive-example\", MDNInteractiveExample);\n","// @ts-expect-error \"Could not find declaration file\"\nimport GleanMetrics from \"@mozilla/glean/metrics\";\n\n/**\n * Records a click event.\n *\n * Use only if automatic click events are not an option.\n * See: https://mozilla.github.io/glean.js/automatic_instrumentation/click_events/\n *\n * @param {string} source\n */\nexport function gleanClick(source) {\n  GleanMetrics.recordElementClick({\n    id: source,\n  });\n}\n"],"names":["document","Set","e","Number","JSON","InteractiveExampleBase","String","Object","HTMLElement","MDNInteractiveExample","customElements"],"mappings":"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"}

package/out/static/client/{6536.faff8f026d145aad.js → 6536.ecdcc4458cbd0504.js}

@@ -3,7 +3,7 @@ export const __webpack_id__="6536";export const __webpack_ids__=["6536"];export
       display: contents;
     }
   `;constructor(){super(),this.runOnStart=!1,this.runOnChange=!1,this.srcPrefix="",this._code={},this._hiddenCode={}}set code(e){for(let t of(this._code=Object.fromEntries(Object.entries(e).filter(([e])=>!e.endsWith("-hidden"))),this._hiddenCode=Object.fromEntries(Object.entries(e).filter(([e])=>e.endsWith("-hidden")).map(([e,t])=>[e.replace(/-hidden$/,""),t])),this.initialCode||(this.initialCode=e),this.querySelectorAll("mdn-play-editor"))){let r=t.language;r&&(t.value=e[r]??"")}this.runOnStart&&this.run()}get code(){let e={...this._code};for(let t of this.querySelectorAll("mdn-play-editor")){let r=t.language;r&&(e[r]=t.value)}for(let[t,r]of Object.entries(this._hiddenCode))e[t]=e[t]?`${r}
-${e[t]}`:r;return e}async format(){try{await Promise.all([...this.querySelectorAll("mdn-play-editor")].map(e=>e.format()))}catch(e){console.error(e)}}run(){this.querySelector("mdn-play-console")?.vconsole.clear();let e=this.querySelector("mdn-play-runner");e&&(e.srcPrefix=this.srcPrefix,e.code=this.code)}reset(){if(this.code=this.initialCode??{},this.runOnStart)this.run();else{this.querySelector("mdn-play-console")?.vconsole.clear();let e=this.querySelector("mdn-play-runner");e&&(e.code=void 0)}}clear(){this.initialCode=void 0,this.srcPrefix="",this.reset()}_onEditorUpdate(){this.runOnChange&&this.run()}_onConsole(e){this.querySelector("mdn-play-console")?.onConsole(e)}render(){return(0,o.qy)`
+${e[t]}`:r;return e}async format(){try{await Promise.all([...this.querySelectorAll("mdn-play-editor")].map(e=>e.format()))}catch(e){console.error(e)}}run(){this.querySelector("mdn-play-console")?.vconsole.clear();let e=this.querySelector("mdn-play-runner");e&&(e.srcPrefix=this.srcPrefix,e.code=this.code)}reset(){if(this.code=this.initialCode??{},this.runOnStart)this.run();else{this.querySelector("mdn-play-console")?.vconsole.clear();let e=this.querySelector("mdn-play-runner");e&&(e.code=void 0)}}clear(){this.runOnChange=!0,this.initialCode=void 0,this.srcPrefix="",this.reset()}_onEditorUpdate(){this.runOnChange&&this.run()}_onConsole(e){this.querySelector("mdn-play-console")?.onConsole(e)}render(){return(0,o.qy)`
       <slot @update=${this._onEditorUpdate} @console=${this._onConsole}></slot>
     `}};customElements.define("mdn-play-controller",MDNPlayController)}};
-//# sourceMappingURL=6536.faff8f026d145aad.js.map
+//# sourceMappingURL=6536.ecdcc4458cbd0504.js.map

package/out/static/client/6536.ecdcc4458cbd0504.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"6536.ecdcc4458cbd0504.js","sources":["webpack://@mdn/fred/./components/play-controller/element.js"],"sourcesContent":["import { LitElement, css, html } from \"lit\";\n\n/** @import { VConsole } from \"../play-console/types.js\" */\n\nexport class MDNPlayController extends LitElement {\n  static properties = {\n    runOnStart: { type: Boolean, attribute: \"run-on-start\" },\n    runOnChange: { type: Boolean, attribute: \"run-on-change\" },\n    srcPrefix: { attribute: false },\n  };\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  constructor() {\n    super();\n    this.runOnStart = false;\n    this.runOnChange = false;\n    this.srcPrefix = \"\";\n    /** @type {Record<string, string>} */\n    this._code = {};\n    /** @type {Record<string, string>} */\n    this._hiddenCode = {};\n  }\n\n  /** @param {Record<string, string>} code */\n  set code(code) {\n    this._code = Object.fromEntries(\n      Object.entries(code).filter(\n        ([language]) => !language.endsWith(\"-hidden\"),\n      ),\n    );\n    this._hiddenCode = Object.fromEntries(\n      Object.entries(code)\n        .filter(([language]) => language.endsWith(\"-hidden\"))\n        .map(([language, value]) => [language.replace(/-hidden$/, \"\"), value]),\n    );\n    if (!this.initialCode) {\n      this.initialCode = code;\n    }\n    const editors = this.querySelectorAll(\"mdn-play-editor\");\n    for (const editor of editors) {\n      const language = editor.language;\n      if (language) {\n        const value = code[language];\n        editor.value = value ?? \"\";\n      }\n    }\n    if (this.runOnStart) {\n      this.run();\n    }\n  }\n\n  get code() {\n    const code = { ...this._code };\n    const editors = this.querySelectorAll(\"mdn-play-editor\");\n    for (const editor of editors) {\n      const language = editor.language;\n      if (language) {\n        code[language] = editor.value;\n      }\n    }\n    for (const [language, value] of Object.entries(this._hiddenCode)) {\n      code[language] = code[language] ? `${value}\\n${code[language]}` : value;\n    }\n    return code;\n  }\n\n  async format() {\n    try {\n      await Promise.all(\n        [...this.querySelectorAll(\"mdn-play-editor\")].map((e) => e.format()),\n      );\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  run() {\n    this.querySelector(\"mdn-play-console\")?.vconsole.clear();\n    const runner = this.querySelector(\"mdn-play-runner\");\n    if (runner) {\n      runner.srcPrefix = this.srcPrefix;\n      runner.code = this.code;\n    }\n  }\n\n  reset() {\n    this.code = this.initialCode ?? {};\n    if (this.runOnStart) {\n      this.run();\n    } else {\n      this.querySelector(\"mdn-play-console\")?.vconsole.clear();\n      const runner = this.querySelector(\"mdn-play-runner\");\n      if (runner) {\n        runner.code = undefined;\n      }\n    }\n  }\n\n  clear() {\n    this.runOnChange = true;\n    this.initialCode = undefined;\n    this.srcPrefix = \"\";\n    this.reset();\n  }\n\n  _onEditorUpdate() {\n    if (this.runOnChange) {\n      this.run();\n    }\n  }\n\n  /** @param {CustomEvent<VConsole>} ev */\n  _onConsole(ev) {\n    this.querySelector(\"mdn-play-console\")?.onConsole(ev);\n  }\n\n  render() {\n    return html`\n      <slot @update=${this._onEditorUpdate} @console=${this._onConsole}></slot>\n    `;\n  }\n}\n\ncustomElements.define(\"mdn-play-controller\", MDNPlayController);\n"],"names":["MDNPlayController","Boolean","Object","Promise","e","console","customElements"],"mappings":"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"}

package/out/static/client/{8036.9065b84aac240378.js → 8036.6e177b49bfa9b7c4.js}

@@ -6,10 +6,10 @@ export const __webpack_id__="8036";export const __webpack_ids__=["8036"];export
       <section class="placement-container">
         <a
           class="placement-link"
-          data-glean="pong: pong-&gt;click top-banner"
+          data-glean-id=${"pong: pong->click top-banner"}
           href=${this.clickLink(n,g)}
           target="_blank"
-          rel="sponsored noreferrer"
+          rel="sponsored"
         >
           <img
             src=${this.imgLink(m)}
@@ -22,4 +22,4 @@ export const __webpack_id__="8036";export const __webpack_ids__=["8036"];export
         <mdn-placement-note></mdn-placement-note>
       </section>
     </div>`}};customElements.define("mdn-placement-bottom",MDNPlacementBottom)}};
-//# sourceMappingURL=8036.9065b84aac240378.js.map
+//# sourceMappingURL=8036.6e177b49bfa9b7c4.js.map