@mdn/fred 1.0.0 → 1.1.0

package/out/static/client/1042.27bb5503b59546d7.js

@@ -0,0 +1,2 @@
+export const __webpack_ids__=["1042"];export const __webpack_modules__={52084:function(e,t,a){a.r(t),a.d(t,{default:()=>MDNWriterReload});var o=a(14703);let MDNWriterReload=class MDNWriterReload extends o.oi{constructor(){super(),this._state=""}connectedCallback(){super.connectedCallback(),this._pollForChanges()}render(){return o.Ld}async _reloadIfChanged(){let e=new URL("index.json",new URL(location.pathname+"/",location.origin)),t=await fetch(e);if(t.ok){let e=await t.text();this._state?this._state!==e&&location.reload():this._state=e}else console.error("Failed to fetch document",t.status,t.statusText)}async _pollForChanges(){for(;;)"visible"===document.visibilityState&&await this._reloadIfChanged(),await n(1e3)}};async function n(e){return new Promise(t=>setTimeout(t,e))}customElements.define("mdn-writer-reload",MDNWriterReload)}};
+//# sourceMappingURL=1042.27bb5503b59546d7.js.map

package/out/static/client/1042.27bb5503b59546d7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1042.27bb5503b59546d7.js","sources":["webpack://@mdn/fred/./components/writer-reload/element.js"],"sourcesContent":["import { LitElement, nothing } from \"lit\";\n\n/**\n * Custom element which reloads the page when the document has changed.\n */\nexport default class MDNWriterReload extends LitElement {\n  constructor() {\n    super();\n    this._state = \"\";\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._pollForChanges();\n  }\n\n  render() {\n    return nothing;\n  }\n\n  async _reloadIfChanged() {\n    const url = new URL(\n      \"index.json\",\n      new URL(location.pathname + \"/\", location.origin),\n    );\n    const res = await fetch(url);\n    if (res.ok) {\n      const state = await res.text();\n      if (!this._state) {\n        this._state = state;\n      } else if (this._state !== state) {\n        location.reload();\n      }\n    } else {\n      console.error(\"Failed to fetch document\", res.status, res.statusText);\n    }\n  }\n\n  async _pollForChanges() {\n    while (true) {\n      if (document.visibilityState === \"visible\") {\n        await this._reloadIfChanged();\n      }\n      await timeout(1000);\n    }\n  }\n}\n\n/**\n * @param {number} ms\n */\nasync function timeout(ms) {\n  return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\ncustomElements.define(\"mdn-writer-reload\", MDNWriterReload);\n"],"names":["MDNWriterReload","URL","location","fetch","console","document","Promise","setTimeout","customElements"],"mappings":"yJAKe,IAAMA,gBAAN,MAAMA,wBAAwB,IAAU,CACrD,aAAc,CACZ,KAAK,GACL,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,eAAe,EACtB,CAEA,QAAS,CACP,OAAO,IAAO,AAChB,CAEA,MAAM,kBAAmB,CACvB,IAAM,EAAM,IAAIC,IACd,aACA,IAAIA,IAAIC,SAAS,QAAQ,CAAG,IAAKA,SAAS,MAAM,GAE5C,EAAM,MAAMC,MAAM,GACxB,GAAI,EAAI,EAAE,CAAE,CACV,IAAM,EAAQ,MAAM,EAAI,IAAI,EACvB,KAAI,CAAC,MAAM,CAEL,IAAI,CAAC,MAAM,GAAK,GACzBD,SAAS,MAAM,GAFf,IAAI,CAAC,MAAM,CAAG,CAIlB,MACEE,QAAQ,KAAK,CAAC,2BAA4B,EAAI,MAAM,CAAE,EAAI,UAAU,CAExE,CAEA,MAAM,iBAAkB,CACtB,OACMC,AAA6B,YAA7BA,SAAS,eAAe,EAC1B,MAAM,IAAI,CAAC,gBAAgB,GAE7B,MAAM,EAAQ,IAElB,CACF,EAKA,eAAe,EAAQ,CAAE,EACvB,OAAO,IAAIC,QAAQ,AAAC,GAAYC,WAAW,EAAS,GACtD,CAEAC,eAAe,MAAM,CAAC,oBAAqBR,gB"}

package/out/static/client/1048.24d67c3ed51f92e5.js

@@ -0,0 +1,6 @@
+export const __webpack_ids__=["1048"];export const __webpack_modules__={4976:function(e,t,r){r.r(t),r.d(t,{MDNPlayConsole:()=>MDNPlayConsole});var o=r(14703),s=r(48116);function n(e){let t="";for(let r=0,o=e.length;r<o;r++){if("string"==typeof e[r])t+='"'+e[r]+'"';else if(Array.isArray(e[r]))t+="Array [",t+=n(e[r]),t+="]";else if(Object.prototype.hasOwnProperty.call(e,r))t+=i(e[r]);else{let s=1;for(;r+1<o&&!Object.prototype.hasOwnProperty.call(e,r+1);)s++,r++;t+=1===s?"<1 empty slot>":`<${s} empty slots>`}r<e.length-1&&(t+=", ")}return t}function i(e){if(null==e||"boolean"==typeof e)return String(e);if("number"==typeof e)return Object.is(e,-0)?"-0":String(e);if("bigint"==typeof e)return String(e)+"n";if("string"==typeof e)return e.includes('"')?"'"+e+"'":'"'+e+'"';if(Array.isArray(e))return"Array ["+n(e)+"]";else return function(e){let t=e.constructor?e.constructor.name:e;if("String"===t)return`String { "${e.valueOf()}" }`;if(e===JSON)return"JSON {}";if(t.match&&/^(ArrayBuffer|SharedArrayBuffer|DataView)$/.test(t))return t+" {}";if(t.match&&/^(Int8Array|Int16Array|Int32Array|Uint8Array|Uint16Array|Uint32Array|Uint8ClampedArray|Float32Array|Float64Array|BigInt64Array|BigUint64Array)$/.test(t))return e.length>0?t+" ["+n(e)+"]":t+" []";if("Symbol"===t&&void 0!==e)return e.toString();if("Object"===t){if(e?._MDNPlaySerializedObject)return e._MDNPlaySerializedObject;let r="",o=!0;for(let t in e)Object.prototype.hasOwnProperty.call(e,t)&&(o?o=!1:r+=", ",r=r+t+": "+i(e[t]));return t+" { "+r+" }"}if(!e.constructor&&!e.prototype){let t="",r=!0;for(let o in e)r?r=!1:t+=", ",t=t+o+": "+i(e[o]);return"Object { "+t+" }"}return e}(e)}let VirtualConsole=class VirtualConsole{#e;constructor(e){this.#e=e}clear(){this.#e._messages=[]}debug(...e){return this.log(...e)}error(...e){return this.log(...e)}info(...e){return this.log(...e)}log(...e){e.length>1&&"string"==typeof e[0]&&(e[0]=e[0].replaceAll(/%(?:\.([0-9]+))?(.)/g,(t,r,o)=>{switch(o){case"o":case"O":return i(e.splice(1,1)[0]);case"d":case"i":return Math.trunc(e.splice(1,1)[0]).toFixed(0).padStart(r,"0");case"s":return e.splice(1,1)[0].toString();case"f":{let t=e.splice(1,1)[0];return("number"==typeof t?t:Number.parseFloat(t)).toFixed(r??6)}case"c":return e.splice(1,1),"";case"%":return"%";default:return t}})),this.#e._messages=[...this.#e._messages,e.map(e=>i(e)).join(" ")]}warn(...e){return this.log(...e)}};let MDNPlayConsole=class MDNPlayConsole extends o.oi{static properties={_messages:{state:!0}};static styles=s.Z;constructor(){super(),this.vconsole=new VirtualConsole(this),this._messages=[]}onConsole({detail:e}){if(e.prop in this.vconsole){let t=e.prop;e.args?this.vconsole[t](...e.args):this.vconsole[t]()}else this.vconsole.warn("[Playground] Unsupported console message (see browser console)")}render(){return(0,o.dy)`
+      <ul aria-live="polite">
+        ${this._messages.map(e=>(0,o.dy)`<li><code>${e}</code></li>`)}
+      </ul>
+    `}updated(){this.scrollTo({top:this.scrollHeight})}};customElements.define("mdn-play-console",MDNPlayConsole)},48116:function(e,t,r){r.d(t,{Z:()=>a});var o=r(14703),s=r(8081),n=r.n(s),i=r(23645),l=r.n(i)()(n());l.push([e.id,':host{background-color:var(--color-background-secondary);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--font-size-small);margin:0;overflow:auto;width:100%}ul{list-style:none;margin:0;padding:0}li{padding:0 .5em}li:before{content:"> "}code{font-family:var(--font-family-code);tab-size:4}',""]);let a=(0,o.iv)([l.toString()])}};
+//# sourceMappingURL=1048.24d67c3ed51f92e5.js.map

package/out/static/client/1048.24d67c3ed51f92e5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1048.24d67c3ed51f92e5.js","sources":["webpack://@mdn/fred/./components/play-console/utils.js","webpack://@mdn/fred/./components/play-console/element.js","webpack://@mdn/fred/./components/play-console/element.css"],"sourcesContent":["// Copied from https://github.com/mdn/bob/blob/9da42cd641d7f2a9796bf3406e74cad411ce9438/editor/js/editor-libs/console-utils.ts\n/**\n * Formats arrays:\n * - quotes around strings in arrays\n * - square brackets around arrays\n * - adds commas appropriately (with spacing)\n * - identifies empty slots\n * designed to be used recursively\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatArray(input) {\n  let output = \"\";\n  for (let i = 0, l = input.length; i < l; i++) {\n    if (typeof input[i] === \"string\") {\n      output += '\"' + input[i] + '\"';\n    } else if (Array.isArray(input[i])) {\n      output += \"Array [\";\n      output += formatArray(input[i]);\n      output += \"]\";\n    } else if (Object.prototype.hasOwnProperty.call(input, i)) {\n      output += formatOutput(input[i]);\n    } else {\n      let emptyCount = 1;\n      while (i + 1 < l && !Object.prototype.hasOwnProperty.call(input, i + 1)) {\n        emptyCount++;\n        i++;\n      }\n      output +=\n        emptyCount === 1 ? \"<1 empty slot>\" : `<${emptyCount} empty slots>`;\n    }\n\n    if (i < input.length - 1) {\n      output += \", \";\n    }\n  }\n  return output;\n}\n\n/**\n * Formats objects:\n * ArrayBuffer, DataView, SharedArrayBuffer,\n * Int8Array, Int16Array, Int32Array,\n * Uint8Array, Uint16Array, Uint32Array,\n * Uint8ClampedArray, Float32Array, Float64Array\n * Symbol\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatObject(input) {\n  const bufferDataViewRegExp = /^(ArrayBuffer|SharedArrayBuffer|DataView)$/;\n  const complexArrayRegExp =\n    /^(Int8Array|Int16Array|Int32Array|Uint8Array|Uint16Array|Uint32Array|Uint8ClampedArray|Float32Array|Float64Array|BigInt64Array|BigUint64Array)$/;\n\n  const objectName = input.constructor ? input.constructor.name : input;\n\n  if (objectName === \"String\") {\n    // String object\n    return `String { \"${input.valueOf()}\" }`;\n  }\n\n  if (input === JSON) {\n    // console.log(JSON) is output as \"JSON {}\" in browser console\n    return `JSON {}`;\n  }\n\n  if (objectName.match && bufferDataViewRegExp.test(objectName)) {\n    return objectName + \" {}\";\n  }\n\n  if (objectName.match && complexArrayRegExp.test(objectName)) {\n    const arrayLength = input.length;\n\n    return arrayLength > 0\n      ? objectName + \" [\" + formatArray(input) + \"]\"\n      : objectName + \" []\";\n  }\n\n  if (objectName === \"Symbol\" && input !== undefined) {\n    return input.toString();\n  }\n\n  if (objectName === \"Object\") {\n    if (input?._MDNPlaySerializedObject) {\n      return input._MDNPlaySerializedObject;\n    }\n    let formattedChild = \"\";\n    let start = true;\n    for (const key in input) {\n      if (Object.prototype.hasOwnProperty.call(input, key)) {\n        if (start) {\n          start = false;\n        } else {\n          formattedChild = formattedChild + \", \";\n        }\n        formattedChild = formattedChild + key + \": \" + formatOutput(input[key]);\n      }\n    }\n    return objectName + \" { \" + formattedChild + \" }\";\n  }\n\n  // Special object created with `OrdinaryObjectCreate(null)` returned by, for\n  // example, named capture groups in https://mzl.la/2RERfQL\n  // @see https://github.com/mdn/bob/issues/574#issuecomment-858213621\n  if (!input.constructor && !input.prototype) {\n    let formattedChild = \"\";\n    let start = true;\n    for (const key in input) {\n      if (start) {\n        start = false;\n      } else {\n        formattedChild = formattedChild + \", \";\n      }\n      formattedChild = formattedChild + key + \": \" + formatOutput(input[key]);\n    }\n    return \"Object { \" + formattedChild + \" }\";\n  }\n\n  return input;\n}\n\n/**\n * Formats output to indicate its type:\n * - quotes around strings\n * - single quotes around strings containing double quotes\n * - square brackets around arrays\n * (also copes with arrays of arrays)\n * does NOT detect Int32Array etc\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatOutput(input) {\n  if (input === undefined || input === null || typeof input === \"boolean\") {\n    return String(input);\n  } else if (typeof input === \"number\") {\n    // Negative zero\n    if (Object.is(input, -0)) {\n      return \"-0\";\n    }\n    return String(input);\n  } else if (typeof input === \"bigint\") {\n    return String(input) + \"n\";\n  } else if (typeof input === \"string\") {\n    // string literal\n    return input.includes('\"') ? \"'\" + input + \"'\" : '\"' + input + '\"';\n  } else if (Array.isArray(input)) {\n    // check the contents of the array\n    return \"Array [\" + formatArray(input) + \"]\";\n  } else {\n    return formatObject(input);\n  }\n}\n","import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\nimport { formatOutput } from \"./utils.js\";\n\n/** @import { VConsole } from \"./types.js\" */\n\n/** @implements {Partial<Console>} */\nclass VirtualConsole {\n  #host;\n\n  /** @param {MDNPlayConsole} host  */\n  constructor(host) {\n    this.#host = host;\n  }\n\n  clear() {\n    this.#host._messages = [];\n  }\n\n  /** @param {...any} args */\n  debug(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  error(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  info(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  log(...args) {\n    if (args.length > 1 && typeof args[0] === \"string\") {\n      // https://developer.mozilla.org/en-US/docs/Web/API/console#using_string_substitutions\n      // TODO: add unit testing of this\n      args[0] = args[0].replaceAll(\n        /%(?:\\.([0-9]+))?(.)/g,\n        (match, formatArg, format) => {\n          switch (format) {\n            case \"o\":\n            case \"O\": {\n              const O = args.splice(1, 1)[0];\n              return formatOutput(O);\n            }\n            case \"d\":\n            case \"i\": {\n              const i = args.splice(1, 1)[0];\n              return Math.trunc(i).toFixed(0).padStart(formatArg, \"0\");\n            }\n            case \"s\": {\n              const s = args.splice(1, 1)[0];\n              return s.toString();\n            }\n            case \"f\": {\n              const f = args.splice(1, 1)[0];\n              return (typeof f === \"number\" ? f : Number.parseFloat(f)).toFixed(\n                formatArg ?? 6,\n              );\n            }\n            case \"c\":\n              // TODO: Not implemented yet, so just remove the argument\n              args.splice(1, 1);\n              return \"\";\n            case \"%\":\n              return \"%\";\n            default:\n              return match;\n          }\n        },\n      );\n    }\n    this.#host._messages = [\n      ...this.#host._messages,\n      args.map((x) => formatOutput(x)).join(\" \"),\n    ];\n  }\n\n  /** @param {...any} args */\n  warn(...args) {\n    return this.log(...args);\n  }\n}\n\nexport class MDNPlayConsole extends LitElement {\n  static properties = {\n    _messages: { state: true },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    this.vconsole = new VirtualConsole(this);\n    /** @type {string[]} */\n    this._messages = [];\n  }\n\n  /** @param {CustomEvent<VConsole>} e */\n  onConsole({ detail }) {\n    if (detail.prop in this.vconsole) {\n      const prop = /** @type {keyof typeof this.vconsole} */ (detail.prop);\n      detail.args ? this.vconsole[prop](...detail.args) : this.vconsole[prop]();\n    } else {\n      this.vconsole.warn(\n        \"[Playground] Unsupported console message (see browser console)\",\n      );\n    }\n  }\n\n  render() {\n    return html`\n      <ul aria-live=\"polite\">\n        ${this._messages.map(\n          (message) => html`<li><code>${message}</code></li>`,\n        )}\n      </ul>\n    `;\n  }\n\n  updated() {\n    this.scrollTo({ top: this.scrollHeight });\n  }\n}\n\ncustomElements.define(\"mdn-play-console\", MDNPlayConsole);\n","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-secondary);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--font-size-small);margin:0;overflow:auto;width:100%}ul{list-style:none;margin:0;padding:0}li{padding:0 .5em}li:before{content:\"> \"}code{font-family:var(--font-family-code);tab-size:4}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["Array","Object","String","JSON","VirtualConsole","Math","Number","MDNPlayConsole","s","customElements"],"mappings":"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"}

package/out/static/client/189.f78a95e3dff66c47.js

@@ -0,0 +1,3 @@
+/*! For license information please see 189.f78a95e3dff66c47.js.LICENSE.txt */
+export const __webpack_ids__=["189"];export const __webpack_modules__={13566:function(e,t,r){r.d(t,{o:()=>n});var s=r(32529);let n=e=>e??s.Ld},75030:function(e,t,r){r.d(t,{U:()=>_});var s=r(32529),n=r(50990),o=r(30542);let _=(0,n.XM)(class extends n.Xe{constructor(){super(...arguments),this.key=s.Ld}render(e,t){return this.key=e,t}update(e,[t,r]){return t!==this.key&&((0,o.hl)(e),this.key=t),r}})}};
+//# sourceMappingURL=189.f78a95e3dff66c47.js.map

package/out/static/client/189.f78a95e3dff66c47.js.LICENSE.txt

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */

package/out/static/client/189.f78a95e3dff66c47.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"189.f78a95e3dff66c47.js","sources":["webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js","webpack://@mdn/fred/./node_modules/lit-html/directives/keyed.js"],"sourcesContent":["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","import{nothing as r}from\"../lit-html.js\";import{directive as t,Directive as e}from\"../directive.js\";import{setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const i=t(class extends e{constructor(){super(...arguments),this.key=r}render(r,t){return this.key=r,t}update(r,[t,e]){return t!==this.key&&(s(r),this.key=t),e}});export{i as keyed};\n//# sourceMappingURL=keyed.js.map\n"],"names":["arguments","t"],"mappings":";6HAKG,IAAM,EAAE,GAAG,GAAG,IAAC,8ECAf,IAAM,EAAE,SAAE,cAAc,IAAC,CAAC,aAAa,CAAC,KAAK,IAAIA,WAAW,IAAI,CAAC,GAAG,CAAC,IAAC,CAAC,OAAO,CAAC,CAACC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,EAAEA,CAAC,CAAC,OAAO,CAAC,CAAC,CAACA,EAAE,EAAE,CAAC,CAAC,OAAOA,IAAI,IAAI,CAAC,GAAG,EAAG,UAAE,GAAG,IAAI,CAAC,GAAG,CAACA,CAAAA,EAAG,CAAC,CAAC"}

package/out/static/client/2656.e0735268c1fcfc46.js

@@ -0,0 +1,121 @@
+export const __webpack_ids__=["2656"];export const __webpack_modules__={38202:function(e,t,r){e.exports=r.p+"chevron-right.a81fc439dd5e4839.svg"},85667:function(e,t,r){e.exports=r.p+"triangle-alert.cff4c57ccef57da3.svg"},97877:function(e,t,r){r.r(t),r.d(t,{MDNInteractiveExample:()=>MDNInteractiveExample,InteractiveExampleBase:()=>InteractiveExampleBase});var o=r(14703),a=r(51968),i=r(61619),s=r(66178),l=r(20779),c=r(86492),d=r(13566),n=r(69535),p=r(74580),h=r(99425);function u(e){let t=document.createElement("div");e=e.replaceAll(/(\/\*)[\s\S]+(\*\/)/g,"");let r=/^-(?:webkit|moz|ms|o)-/,o=t.style,a=e.split(";").map(e=>e.trim()).filter(e=>e.length>0);o.cssText="";let i=new Set,s=new Set;for(let e of a){let t=o.cssText;o.cssText+=e+";";let a=o.cssText!==t,l=r.test(e),c=function(e){let t=r.exec(e),o=null===t?"":t[0];return(null===o?e:e.slice(o.length)).split(/[\s:]/)[0]??""}(e);a&&l?i.add(c):a||l||s.add(c)}if(s.size>0){for(let e of i)s.delete(e);if(s.size>0)return!1}return!0}r(4406),r(18103);let m=e=>class extends(0,n.q)(e){static properties={__choiceSelected:{state:!0},__choiceUnsupported:{state:!0},__choiceUpdated:{state:!0}};constructor(...e){super(),this.__choiceSelected=-1,this.__choiceUnsupported=[],this.__choiceUpdated=!1}#e({target:e}){e instanceof p.MDNPlayEditor&&e.focus()}#t({target:e}){e instanceof p.MDNPlayEditor&&(this.#r(e),this.#o(e))}#a({target:e}){e instanceof p.MDNPlayEditor&&(this.#r(e),this.__choiceSelected===this.#i(e)&&this.#o(e),this.__choiceUpdated=!0)}#s(){this.__choiceSelected=-1,this.__choiceUpdated=!1;let e=[...this.shadowRoot?.querySelectorAll("mdn-play-editor")||[]];for(let[t,r]of[...e].entries())r.value=this._choices?.at(t)??"";this.__choiceUnsupported=this._choices?.map(e=>!u(e||""))||[];let t=e[0];t&&this.#o(t)}async #o(e){let t=this.#i(e);await this._runner.value?.postMessage({typ:"choice",code:e.value}),this.__choiceSelected=t}#r(e){let t=this.#i(e);this.__choiceUnsupported=this.__choiceUnsupported.map((r,o)=>t===o?!u(e.value):r)}#i(e){return Number.parseInt(e.dataset.index??"-1",10)}#l(){let e=(0,h.t)();return(0,o.dy)`
+        <div class="template-choices" aria-labelledby=${e}>
+          <header>
+            <h4 id=${e}>${(0,c.decode)(this.name)}</h4>
+            <mdn-button
+              id="reset"
+              @click=${this._reset}
+              variant="secondary"
+              .disabled=${!this.__choiceUpdated}
+              >${this.l10n`Reset`}</mdn-button
+            >
+          </header>
+          <ul
+            class="choice-wrapper"
+            @click=${this.#e}
+            @focus=${this.#t}
+            @update=${this.#a}
+            aria-label=${this.l10n`Value select`}
+          >
+            ${this._choices?.map((e,t)=>(0,o.dy)`
+                <li
+                  class=${["choice",...t===this.__choiceSelected?["selected"]:[],...this.__choiceUnsupported[t]?["unsupported"]:[]].join(" ")}
+                >
+                  <mdn-play-editor
+                    data-index=${t}
+                    language="css"
+                    minimal="true"
+                    .delay=${100}
+                    .value=${e?.trim()}
+                    aria-label=${(0,d.o)(this.__choiceUnsupported[t]?this.l10n`The current value is not supported by your browser.`:void 0)}
+                  ></mdn-play-editor>
+                </li>
+              `)}
+          </ul>
+          <div class="output-wrapper">
+            <mdn-play-controller ${(0,a.i)(this._controller)} run-on-start>
+              <mdn-play-runner
+                ${(0,a.i)(this._runner)}
+                defaults="ix-choice"
+              ></mdn-play-runner>
+            </mdn-play-controller>
+          </div>
+        </div>
+      `}_reset(){"choices"===this._template?this.#s():super._reset()}_initialCode(){let e=super._initialCode();return"choices"===this._template&&(e["js-hidden"]=`setChoice(${JSON.stringify(this._choices?.[0])})`),e}render(){return"choices"===this._template?this.#l():super.render()}firstUpdated(){super.firstUpdated(),"choices"===this._template&&this.#s()}};r(4976),r(49e3),r(89948),r(17739);let g=e=>class extends(0,n.q)(e){#l(){let e=(0,h.t)();return(0,o.dy)`
+        <mdn-play-controller ${(0,a.i)(this._controller)}>
+          <div class="template-console" aria-labelledby=${e}>
+            <header>
+              <h4 id=${e}>${(0,c.decode)(this.name)}</h4>
+            </header>
+            ${1===this._languages.length?(0,o.dy)`<mdn-play-editor
+                  id="editor"
+                  language=${(0,d.o)(this._languages[0])}
+                ></mdn-play-editor>`:(0,o.dy)`<mdn-ix-tab-wrapper>
+                  ${this._languages.map(e=>(0,o.dy)`
+                      <mdn-ix-tab id=${e}
+                        >${this._langName(e)}</mdn-ix-tab
+                      >
+                      <mdn-ix-tab-panel id=${`${e}-panel`}>
+                        <mdn-play-editor language=${e}></mdn-play-editor>
+                      </mdn-ix-tab-panel>
+                    `)}
+                </mdn-ix-tab-wrapper>`}
+            <div class="buttons">
+              <mdn-button
+                id="execute"
+                @click=${this._run}
+                variant="secondary"
+                title=${this.l10n`Run example, and show console output`}
+                >${this.l10n`Run`}</mdn-button
+              >
+              <mdn-button
+                id="reset"
+                @click=${this._reset}
+                variant="secondary"
+                title=${this.l10n`Reset example, and clear console output`}
+                >${this.l10n`Reset`}</mdn-button
+              >
+            </div>
+            <mdn-play-console
+              id="console"
+              title=${this.l10n`Console output`}
+            ></mdn-play-console>
+            <mdn-play-runner
+              defaults=${(0,d.o)(this._languages.includes("wat")?"ix-wat":void 0)}
+            ></mdn-play-runner>
+          </div>
+        </mdn-play-controller>
+      `}render(){return"console"===this._template?this.#l():super.render()}},b=e=>class extends(0,n.q)(e){#l(){let e=(0,h.t)();return(0,o.dy)`
+        <mdn-play-controller
+          ${(0,a.i)(this._controller)}
+          run-on-start
+          run-on-change
+        >
+          <div class="template-tabbed" aria-labelledby=${e}>
+            <header>
+              <h4 id=${e}>${(0,c.decode)(this.name)}</h4>
+              <mdn-button id="reset" @click=${this._reset} variant="secondary"
+                >${this.l10n`Reset`}</mdn-button
+              >
+            </header>
+            <mdn-ix-tab-wrapper>
+              ${this._languages.map(e=>(0,o.dy)`
+                  <mdn-ix-tab id=${e}>${this._langName(e)}</mdn-ix-tab>
+                  <mdn-ix-tab-panel id=${`${e}-panel`}>
+                    <mdn-play-editor language=${e}></mdn-play-editor>
+                  </mdn-ix-tab-panel>
+                `)}
+            </mdn-ix-tab-wrapper>
+            <div class="output-wrapper">
+              <h4>${this.l10n`Output`}</h4>
+              <mdn-play-runner
+                ${(0,a.i)(this._runner)}
+                sandbox="allow-top-navigation-by-user-activation"
+                defaults="ix-tabbed"
+              ></mdn-play-runner>
+            </div>
+          </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.oi{static ssr=!1;static properties={name:{type:String}};static styles=l.Z;constructor(){super(),this.name="",this._languages=[],this._code={}}_controller=(0,a.V)();_runner=(0,a.V)();_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.z)("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)},61619:function(e,t,r){r.d(t,{z:()=>a});var o=r(26362);function a(e,{type:t,label:r}){o.Z.recordElementClick({id:e,type:t,label:r})}},20779:function(e,t,r){r.d(t,{Z:()=>g});var o=r(14703),a=r(8081),i=r.n(a),s=r(23645),l=r.n(s),c=r(61667),d=r.n(c),n=new r.U(r(38202)),p=new r.U(r(85667)),h=l()(i()),u=d()(n),m=d()(p);h.push([e.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(${u});mask-image:url(${u});-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(${m});mask-image:url(${m});-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}}`,""]);let g=(0,o.iv)([h.toString()])}};
+//# sourceMappingURL=2656.e0735268c1fcfc46.js.map

package/out/static/client/2656.e0735268c1fcfc46.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"2656.e0735268c1fcfc46.js","sources":["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","webpack://@mdn/fred/./components/interactive-example/element.css"],"sourcesContent":["/**\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","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"],"names":["document","Set","e","Number","JSON","InteractiveExampleBase","String","Object","HTMLElement","MDNInteractiveExample","customElements","t"],"mappings":"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"}

package/out/static/client/3580.52409bfd6e468f5b.js

@@ -0,0 +1,70 @@
+export const __webpack_ids__=["3580"];export const __webpack_modules__={61485:function(e,a,t){t.r(a),t.d(a,{MDNPlacementTop:()=>MDNPlacementTop});var o=t(14703),n=t(51968),c=t(68688);t(83294),t(43028);var r=t(35281),l=t(90381);let p=(0,o.dy)`<div class="top-placement empty"></div>`;let MDNPlacementTop=class MDNPlacementTop extends(0,r.P)(o.oi){static styles=l.Z;renderInitial(){return p}renderFallback(){return(0,o.dy)`
+      <div class="fallback">
+        <p class="fallback__copy">
+          Learn front-end development with high quality, interactive courses
+          from
+          <a
+            href="https://scrimba.com/learn/frontend?via=mdn"
+            target="_blank"
+            rel="noreferrer"
+            data-glean="pong: pong-&gt;click fallback-scrimba"
+          >
+            Scrimba
+          </a>
+        </p>
+      </div>
+    `}renderComplete(e){if("noads"===e.status)return o.Ld;let a=e?.hpTop||e?.top;if(!a)return p;let{status:t,click:r,view:l,copy:i,image:d,imageFormat:s,alt:m,cta:g,colors:h,version:k}=a;if("success"!==t)return p;this._viewedUrl||(this._viewedUrl=l,this._version=k);let{textColor:v,backgroundColor:b,ctaTextColor:u,ctaBackgroundColor:f,textColorDark:y,backgroundColorDark:x,ctaTextColorDark:_,ctaBackgroundColorDark:w}=h||{},$=Object.fromEntries([["--place-top-background-light",b],["--place-top-color-light",v],["--place-top-cta-background-light",f],["--place-top-cta-color-light",u],["--place-top-background-dark",x||b],["--place-top-color-dark",y||v],["--place-top-cta-background-dark",w||f],["--place-top-cta-color-dark",_||f]].filter(([e,a])=>!!a));return"leaderboard"===s?(0,o.dy)`<div
+          ${(0,n.i)(this._placementRef)}
+          class="top-placement-leaderboard"
+          style=${(0,c.V)($)}
+        >
+          <section class="placement-container">
+            <div class="placement-inner">
+              <a
+                class="placement-link"
+                data-glean="pong: pong-&gt;click top-banner"
+                href=${this.clickLink(r,k)}
+                target="_blank"
+                rel="sponsored noreferrer"
+                ><div class="placement-content">
+                  <img
+                    src=${this.imgLink(d)}
+                    aria-hidden=${!m}
+                    alt=${m||""}
+                    height="90"
+                  />
+                </div>
+              </a>
+            </div>
+            <mdn-placement-note></mdn-placement-note>
+            <mdn-placement-no></mdn-placement-no>
+          </section>
+        </div>`:(0,o.dy)`<div
+          ${(0,n.i)(this._placementRef)}
+          class="top-placement"
+          style=${(0,c.V)($)}
+        >
+          <section class="placement-container">
+            <div class="placement-inner">
+              <a
+                class="placement-link"
+                data-glean="pong: pong-&gt;click top-banner"
+                href=${this.clickLink(r,k)}
+                target="_blank"
+                rel="sponsored noreferrer"
+                ><div class="placement-content">
+                  <img
+                    src=${this.imgLink(d)}
+                    aria-hidden=${!m}
+                    alt=${m||""}
+                    height="50"
+                  /><span>${i}</span>
+                </div>
+                <span class="placement-cta">${g}</span></a
+              >
+              <mdn-placement-note></mdn-placement-note>
+            </div>
+            <mdn-placement-no></mdn-placement-no>
+          </section>
+        </div>`}};customElements.define("mdn-placement-top",MDNPlacementTop)},90381:function(e,a,t){t.d(a,{Z:()=>p});var o=t(14703),n=t(8081),c=t.n(n),r=t(23645),l=t.n(r)()(c());l.push([e.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)}',""]);let p=(0,o.iv)([l.toString()])}};
+//# sourceMappingURL=3580.52409bfd6e468f5b.js.map

package/out/static/client/3580.52409bfd6e468f5b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3580.52409bfd6e468f5b.js","sources":["webpack://@mdn/fred/./components/placement-top/element.js","webpack://@mdn/fred/./components/placement-top/element.css"],"sourcesContent":["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","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"],"names":["MDNPlacementTop","b","Object","customElements"],"mappings":"mOAgBA,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,sFClKvC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,qzNAAszN,GAAG,EAEl2N,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/out/static/client/3769.6b039eb8dc7d7830.js

@@ -0,0 +1,57 @@
+export const __webpack_ids__=["3769"];export const __webpack_modules__={19958:function(e,r,t){e.exports=t.p+"languages.dcba936080e5be86.svg"},36403:function(e,r,t){t.r(r),t.d(r,{MDNLanguageSwitcher:()=>MDNLanguageSwitcher});var n=t(35470),o=t(14703),a=t(69535);let i=(0,o.YP)`<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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>`;var l=t(43894),s=t(94722),c=t(21090);t(18399),t(32013);let MDNLanguageSwitcher=class MDNLanguageSwitcher extends(0,a.q)(o.oi){static styles=c.Z;static properties={locale:{type:String},native:{type:String},translations:{type:Array},url:{type:String},notFound:{type:Boolean,attribute:"not-found"},_preferredLocale:{state:!0}};constructor(){super(),this.translations=[],this.native="",this.locale="en-US",this.url="/",this.notFound=!1,this._preferredLocale=void 0}_notFoundFallback=new n.iQ(this,{args:()=>[this.notFound],task:async([e])=>{if(e)return await (0,l.Y)(location.pathname)}});firstUpdated(){this._preferredLocale=(0,s.aj)(),location.search&&(this.url+=location.search)}get _isLocalePreferred(){return this._preferredLocale==this.locale}_togglePreferredLocale(){this.notFound||(this._isLocalePreferred?((0,s.Oq)(),this._preferredLocale=void 0):((0,s.Yc)(this.locale),this._preferredLocale=this.locale))}render(){let{translations:e,native:r,locale:t,url:n,notFound:a}=this;return 0===e.length?o.Ld:(0,o.dy)`<div class="language-switcher">
+      <mdn-dropdown>
+        <button
+          slot="button"
+          class="language-switcher__button"
+          type="button"
+          aria-labelledby="current-locale"
+        >
+          <span id="current-locale">${r??t}</span>
+        </button>
+        <div
+          slot="dropdown"
+          class="language-switcher__dropdown"
+          id="language-switcher__dropdown"
+        >
+          <div class="language_switcher__remember">
+            <mdn-switch
+              @toggle=${this._togglePreferredLocale}
+              ?checked=${this._isLocalePreferred}
+              >${this.l10n`Remember language`}</mdn-switch
+            >
+            <mdn-button
+              variant="plain"
+              .icon=${i}
+              icon-only
+              href="https://github.com/orgs/mdn/discussions/739"
+              target="_blank"
+              title=${this.l10n`Enable this setting to always switch to the current language when available. (Click to learn more.)`}
+              >${this.l10n`Learn more`}</mdn-button
+            >
+          </div>
+          <ul class="language-switcher__list">
+            ${a?this._notFoundFallback.render({initial:()=>this._renderCurrentLocale(),pending:()=>this._renderCurrentLocale(),error:()=>this._renderCurrentLocale(),complete:e=>e?.other_translations?this._renderDropdownItems(e.other_translations,t,e.mdn_url,a):this._renderCurrentLocale()}):this._renderDropdownItems(e,t,n)}
+          </ul>
+        </div>
+      </mdn-dropdown>
+    </div>`}_renderDropdownItems(e,r,t,n=!1){return e.sort((e,r)=>e.locale.localeCompare(r.locale)).map(e=>(0,o.dy)`
+          <li>
+            <a
+              class="language-switcher__option"
+              ?data-current=${r===e.locale}
+              @click=${s.Oq}
+              href=${t.replace(`/${n?"en-US":r}/`,`/${e.locale}/`)}
+              >${e.native}</a
+            >
+          </li>
+        `)}_renderCurrentLocale(){return(0,o.dy)`
+      <li>
+        <a
+          class="language-switcher__option"
+          ?data-current=${!0}
+          href=${this.url}
+          >${this.native}</a
+        >
+      </li>
+    `}};customElements.define("mdn-language-switcher",MDNLanguageSwitcher)},21090:function(e,r,t){t.d(r,{Z:()=>_});var n=t(14703),o=t(8081),a=t.n(o),i=t(23645),l=t.n(i),s=t(176),c=t(61667),d=t.n(c),g=new t.U(t(19958)),u=l()(a());u.i(s.Z);var h=d()(g);u.push([e.id,`.language-switcher{position:relative}.language-switcher__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.language-switcher__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media screen and (width <= 480px){.language-switcher__button>span{display:none}}.language-switcher__button:before{background-color:currentcolor;content:"";height:1.25rem;-webkit-mask-image:url(${h});mask-image:url(${h});-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.language-switcher__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;width:max-content;z-index:1}.language_switcher__remember{border-bottom:1px solid var(--color-border-primary);display:flex;font-size:var(--font-size-small);place-items:center;width:100%}.language_switcher__remember mdn-switch{padding:.25rem}:is(.language_switcher__remember mdn-switch):hover{background-color:var(--color-background-secondary)}.language-switcher__list{background-color:var(--color-background-primary);list-style:none;margin:0;padding:0;width:100%}.language-switcher__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;display:flex;font:inherit;margin:0;padding:.25rem;-webkit-text-decoration:none;text-decoration:none;width:100%}.language-switcher__option:hover,.language-switcher__option[data-current]{background-color:var(--color-background-secondary)}`,""]);let _=(0,n.iv)([u.toString()])}};
+//# sourceMappingURL=3769.6b039eb8dc7d7830.js.map

package/out/static/client/3769.6b039eb8dc7d7830.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3769.6b039eb8dc7d7830.js","sources":["webpack://@mdn/fred/./components/icon/info.svg","webpack://@mdn/fred/./components/language-switcher/element.js","webpack://@mdn/fred/./components/language-switcher/element.css"],"sourcesContent":["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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></svg>`;","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport infoIcon from \"../icon/info.svg?lit\";\nimport { getEnglishDoc } from \"../not-found/utils.js\";\nimport {\n  getPreferredLocale,\n  resetPreferredLocale,\n  setPreferredLocale,\n} from \"../preferred-locale/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../dropdown/element.js\";\nimport \"../switch/element.js\";\n\nexport class MDNLanguageSwitcher extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    locale: { type: String },\n    native: { type: String },\n    translations: { type: Array },\n    url: { type: String },\n    notFound: { type: Boolean, attribute: \"not-found\" },\n    _preferredLocale: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {import(\"@rari\").Translation[]} */\n    this.translations = [];\n    this.native = \"\";\n    this.locale = \"en-US\";\n    this.url = \"/\";\n    this.notFound = false;\n    /** @type {string|undefined} */\n    this._preferredLocale = undefined;\n  }\n\n  _notFoundFallback = new Task(this, {\n    args: () => [this.notFound],\n    task: async ([notFound]) => {\n      if (notFound) {\n        return await getEnglishDoc(location.pathname);\n      }\n      return;\n    },\n  });\n\n  firstUpdated() {\n    this._preferredLocale = getPreferredLocale();\n    if (location.search) {\n      this.url += location.search;\n    }\n  }\n\n  get _isLocalePreferred() {\n    return this._preferredLocale == this.locale;\n  }\n\n  _togglePreferredLocale() {\n    if (this.notFound) return;\n    if (this._isLocalePreferred) {\n      resetPreferredLocale();\n      this._preferredLocale = undefined;\n    } else {\n      setPreferredLocale(this.locale);\n      this._preferredLocale = this.locale;\n    }\n  }\n\n  render() {\n    const { translations, native, locale, url, notFound } = this;\n\n    if (translations.length === 0) {\n      return nothing;\n    }\n\n    return html`<div class=\"language-switcher\">\n      <mdn-dropdown>\n        <button\n          slot=\"button\"\n          class=\"language-switcher__button\"\n          type=\"button\"\n          aria-labelledby=\"current-locale\"\n        >\n          <span id=\"current-locale\">${native ?? locale}</span>\n        </button>\n        <div\n          slot=\"dropdown\"\n          class=\"language-switcher__dropdown\"\n          id=\"language-switcher__dropdown\"\n        >\n          <div class=\"language_switcher__remember\">\n            <mdn-switch\n              @toggle=${this._togglePreferredLocale}\n              ?checked=${this._isLocalePreferred}\n              >${this.l10n`Remember language`}</mdn-switch\n            >\n            <mdn-button\n              variant=\"plain\"\n              .icon=${infoIcon}\n              icon-only\n              href=\"https://github.com/orgs/mdn/discussions/739\"\n              target=\"_blank\"\n              title=${this\n                .l10n`Enable this setting to always switch to the current language when available. (Click to learn more.)`}\n              >${this.l10n`Learn more`}</mdn-button\n            >\n          </div>\n          <ul class=\"language-switcher__list\">\n            ${notFound\n              ? this._notFoundFallback.render({\n                  initial: () => this._renderCurrentLocale(),\n                  pending: () => this._renderCurrentLocale(),\n                  error: () => this._renderCurrentLocale(),\n                  complete: (doc) =>\n                    doc?.other_translations\n                      ? this._renderDropdownItems(\n                          doc.other_translations,\n                          locale,\n                          doc.mdn_url,\n                          notFound,\n                        )\n                      : this._renderCurrentLocale(),\n                })\n              : this._renderDropdownItems(translations, locale, url)}\n          </ul>\n        </div>\n      </mdn-dropdown>\n    </div>`;\n  }\n\n  /**\n   * @param {import(\"@rari\").Translation[]} translations\n   * @param {string} locale\n   * @param {string} url\n   * @param {boolean} notFound\n   */\n  _renderDropdownItems(translations, locale, url, notFound = false) {\n    return translations\n      .sort((a, b) => a.locale.localeCompare(b.locale))\n      .map(\n        (translation) => html`\n          <li>\n            <a\n              class=\"language-switcher__option\"\n              ?data-current=${locale === translation.locale}\n              @click=${resetPreferredLocale}\n              href=${url.replace(\n                `/${notFound ? \"en-US\" : locale}/`,\n                `/${translation.locale}/`,\n              )}\n              >${translation.native}</a\n            >\n          </li>\n        `,\n      );\n  }\n\n  _renderCurrentLocale() {\n    return html`\n      <li>\n        <a\n          class=\"language-switcher__option\"\n          ?data-current=${true}\n          href=${this.url}\n          >${this.native}</a\n        >\n      </li>\n    `;\n  }\n}\n\ncustomElements.define(\"mdn-language-switcher\", MDNLanguageSwitcher);\n","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_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/languages.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\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, `.language-switcher{position:relative}.language-switcher__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.language-switcher__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media screen and (width <= 480px){.language-switcher__button>span{display:none}}.language-switcher__button:before{background-color:currentcolor;content:\"\";height:1.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:1.25rem}.language-switcher__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;width:max-content;z-index:1}.language_switcher__remember{border-bottom:1px solid var(--color-border-primary);display:flex;font-size:var(--font-size-small);place-items:center;width:100%}.language_switcher__remember mdn-switch{padding:.25rem}:is(.language_switcher__remember mdn-switch):hover{background-color:var(--color-background-secondary)}.language-switcher__list{background-color:var(--color-background-primary);list-style:none;margin:0;padding:0;width:100%}.language-switcher__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;display:flex;font:inherit;margin:0;padding:.25rem;-webkit-text-decoration:none;text-decoration:none;width:100%}.language-switcher__option:hover,.language-switcher__option[data-current]{background-color:var(--color-background-secondary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNLanguageSwitcher","String","Array","Boolean","location","s","i","n","customElements"],"mappings":"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"}

package/out/static/client/4045.03e574b6385f66d0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"4045.03e574b6385f66d0.js","sources":["webpack://@mdn/fred/./components/observatory-rescan-button/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js","webpack://@mdn/fred/./components/observatory-rescan-button/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNObservatoryRescanButton extends L10nMixin(LitElement) {\n  static styles = styles;\n  static properties = {\n    from: { type: Object }, // Date object\n    duration: { type: Number },\n    _remainingTime: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {Date} */\n    this.from = new Date();\n    /** @type {number} */\n    this.duration = 60;\n    /** @type {number} */\n    this._remainingTime = 0;\n    /** @type {NodeJS.Timeout | null} */\n    this._interval = null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._remainingTime = this._calculateRemainingTime();\n    this._interval = setInterval(() => {\n      this._remainingTime = this._calculateRemainingTime();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._interval) {\n      clearInterval(this._interval);\n      this._interval = null;\n    }\n  }\n\n  _calculateRemainingTime() {\n    const endTime = this.from.getTime() + this.duration * 1000;\n    return Math.max(0, endTime - Date.now());\n  }\n\n  /**\n   *\n   * @param {number} progressPercent\n   */\n  _icon(progressPercent) {\n    return html`<span\n      class=\"progress\"\n      style=\"  display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: conic-gradient(light-dark(var(--color-gray-40), var(--color-gray-60)) 0grad, ${progressPercent}%, rgba(0,0,0,0) ${progressPercent}% 100%)\"\n    ></span>`;\n  }\n\n  render() {\n    const isExpired = this._remainingTime <= 0;\n    const remainingSecs = Math.floor(this._remainingTime / 1000) + 1;\n    const progressPercent = (remainingSecs * 100) / 60;\n\n    return isExpired\n      ? html`<mdn-button>${this.l10n`Rescan`}</mdn-button>`\n      : html` <mdn-button disabled .icon=${this._icon(progressPercent)}\n          >${this.l10n`Wait a minute to rescan`}</mdn-button\n        >`;\n  }\n}\n\ncustomElements.define(\n  \"mdn-observatory-rescan-button\",\n  MDNObservatoryRescanButton,\n);\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","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_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, ``, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNObservatoryRescanButton","Object","Number","Date","setInterval","clearInterval","Math","customElements"],"mappings":";0NAOO,IAAMA,2BAAN,MAAMA,kCAAmC,QAAU,IAAU,EAClE,OAAO,OAAS,GAAM,AAAC,AACvB,QAAO,WAAa,CAClB,KAAM,CAAE,KAAMC,MAAO,EACrB,SAAU,CAAE,KAAMC,MAAO,EACzB,eAAgB,CAAE,MAAO,EAAK,CAChC,CAAE,AAEF,cAAc,CACZ,KAAK,GAEL,IAAI,CAAC,IAAI,CAAG,IAAIC,KAEhB,IAAI,CAAC,QAAQ,CAAG,GAEhB,IAAI,CAAC,cAAc,CAAG,EAEtB,IAAI,CAAC,SAAS,CAAG,IACnB,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,cAAc,CAAG,IAAI,CAAC,uBAAuB,GAClD,IAAI,CAAC,SAAS,CAAGC,YAAY,KAC3B,IAAI,CAAC,cAAc,CAAG,IAAI,CAAC,uBAAuB,EACpD,EAAG,IACL,CAEA,sBAAuB,CACrB,KAAK,CAAC,uBACF,IAAI,CAAC,SAAS,GAChBC,cAAc,IAAI,CAAC,SAAS,EAC5B,IAAI,CAAC,SAAS,CAAG,KAErB,CAEA,yBAA0B,CAExB,OAAOC,KAAK,GAAG,CAAC,EAAG,AADH,IAAI,CAAC,IAAI,CAAC,OAAO,GAAK,AAAgB,IAAhB,IAAI,CAAC,QAAQ,CACtBH,KAAK,GAAG,GACvC,CAMA,MAAM,CAAe,CAAE,CACrB,MAAO,QAAI,CAAC;;kLAEkK,EAAE,EAAgB,iBAAiB,EAAE,EAAgB;YAC3N,CAAC,AACX,CAEA,QAAS,CACP,IAAM,EAAY,IAAI,CAAC,cAAc,EAAI,EACnC,EAAgBG,KAAK,KAAK,CAAC,IAAI,CAAC,cAAc,CAAG,KAAQ,EAG/D,OAAO,EACH,QAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,CACnD,QAAI,CAAC,4BAA4B,EAAE,IAAI,CAAC,KAAK,CAJzB,AAAiB,IAAhB,EAAuB,IAImB;WAC5D,EAAE,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;SACvC,CAAC,AACR,CACF,EAEAC,eAAe,MAAM,CACnB,gCACAP,mFCrEC,IAAM,EAAE,GAAG,GAAG,IAAC,wGCAd,EAA0B,IAA4B,KAC1D,EAAwB,CAAC,CAAC,GAAiC,EAE3D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,GAAI,GAAG,EAEhD,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG"}

package/out/static/client/4765.f157fb35f472491f.js

@@ -0,0 +1,25 @@
+/*! For license information please see 4765.f157fb35f472491f.js.LICENSE.txt */
+export const __webpack_ids__=["4765"];export const __webpack_modules__={72620:function(e,t,i){i.r(t),i.d(t,{MDNLiveSampleResult:()=>MDNLiveSampleResult});var n=i(14703),s=i(68688),l=i(69535),r=i(96685);i(18103),i(50272);let MDNLiveSampleResult=class MDNLiveSampleResult extends(0,l.q)(n.oi){static styles=r.Z;static properties={liveId:{attribute:"live-id"},code:{type:Object},allowed:{},sandbox:{},srcPrefix:{attribute:"src-prefix"},height:{},breakoutLink:{state:!0}};constructor(){super(),this.liveId=void 0,this.code=void 0,this.allow=void 0,this.sandbox=void 0,this.srcPrefix=void 0,this.height=void 0,this.breakoutLink=void 0}_openFullscreen(e=!1){this._runnerSrc?e||this._fullscreenReplace?location.replace(this._runnerSrc):location.href=this._runnerSrc:(this._fullscreenPending=!0,e&&(this._fullscreenReplace=!0))}_fullscreenClick(e){this.liveId&&e.target instanceof HTMLAnchorElement&&e.target.hash===`#livesample_fullscreen=${this.liveId}`&&(e.preventDefault(),this._openFullscreen())}_runnerSrcUpdated({detail:e}){this._runnerSrc=e,this._fullscreenPending&&this._openFullscreen();let t=new URL("/en-US/play",location.href);t.search=new URL(this._runnerSrc).search,this.srcPrefix&&t.searchParams.append("srcPrefix",this.srcPrefix),this.breakoutLink=t.href}connectedCallback(){super.connectedCallback(),this._fullscreenClick=this._fullscreenClick.bind(this),document.addEventListener("click",this._fullscreenClick),location.hash===`#livesample_fullscreen=${this.liveId}`&&this._openFullscreen()}render(){return(0,n.dy)`
+      <div class="code-example">
+        <div class="example-header">
+          ${this.breakoutLink?(0,n.dy)`<mdn-button
+                variant="secondary"
+                href=${this.breakoutLink}
+                target="_blank"
+                rel="opener"
+                aria-label=${this.l10n("example-play-button-title")}
+                title=${this.l10n("example-play-button-title")}
+                >${this.l10n("example-play-button-label")}</mdn-button
+              >`:n.Ld}
+        </div>
+        <mdn-play-runner
+          @mdn-play-runner-src=${this._runnerSrcUpdated}
+          .code=${this.code}
+          .allow=${this.allow}
+          .sandbox=${this.sandbox}
+          .srcPrefix=${this.srcPrefix}
+          style=${(0,s.V)({height:this.height?`${this.height}${/[0-9]$/.test(this.height)?"px":""}`:void 0})}
+        ></mdn-play-runner>
+      </div>
+    `}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._fullscreenClick)}};customElements.define("mdn-live-sample-result",MDNLiveSampleResult)},13566:function(e,t,i){i.d(t,{o:()=>s});var n=i(32529);let s=e=>e??n.Ld},75030:function(e,t,i){i.d(t,{U:()=>r});var n=i(32529),s=i(50990),l=i(30542);let r=(0,s.XM)(class extends s.Xe{constructor(){super(...arguments),this.key=n.Ld}render(e,t){return this.key=e,t}update(e,[t,i]){return t!==this.key&&((0,l.hl)(e),this.key=t),i}})},96685:function(e,t,i){i.d(t,{Z:()=>o});var n=i(14703),s=i(8081),l=i.n(s),r=i(23645),a=i.n(r),c=i(176),d=i(86152),h=a()(l());h.i(c.Z),h.i(d.Z),h.push([e.id,".code-example .example-header{justify-content:end;padding-right:.5rem}@media print{.example-header,mdn-button{display:none!important}}",""]);let o=(0,n.iv)([h.toString()])}};
+//# sourceMappingURL=4765.f157fb35f472491f.js.map

package/out/static/client/4765.f157fb35f472491f.js.LICENSE.txt

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */