@mdn/fred 0.0.1

package/dist/client/5166.fdfeeb11249c7266.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5166.fdfeeb11249c7266.js","sources":["webpack://@mdn/fred/./node_modules/css-loader/dist/runtime/getUrl.js","webpack://@mdn/fred/./components/icon/contrast.svg","webpack://@mdn/fred/./components/icon/moon.svg","webpack://@mdn/fred/./components/icon/sun.svg","webpack://@mdn/fred/./components/color-theme/element.js","webpack://@mdn/fred/./components/color-theme/element.css"],"sourcesContent":["\"use strict\";\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 18a6 6 0 0 0 0-12z\"/></svg>`;","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9\"/></svg>`;","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"/></svg>`;","import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport osDefault from \"../icon/contrast.svg?lit\";\nimport dark from \"../icon/moon.svg?lit\";\nimport light from \"../icon/sun.svg?lit\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../dropdown/element.js\";\n\nexport class MDNColorTheme extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    _mode: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {import(\"./types.js\").ColorScheme} */\n    this._mode = \"light dark\";\n  }\n\n  /** @param {MouseEvent} event */\n  _setMode({ target }) {\n    if (target instanceof HTMLElement) {\n      const mode = target.dataset.mode;\n      if (mode === \"light dark\" || mode === \"light\" || mode === \"dark\") {\n        this._mode = mode;\n        try {\n          localStorage.setItem(\"theme\", mode);\n        } catch (error) {\n          console.warn(\"Unable to write theme to localStorage\", error);\n        }\n        const dropdown = this.shadowRoot?.querySelector(\"mdn-dropdown\");\n        if (dropdown) {\n          dropdown.open = false;\n        }\n      }\n    }\n  }\n\n  get _icon() {\n    switch (this._mode) {\n      case \"light\": {\n        return light;\n      }\n      case \"dark\": {\n        return dark;\n      }\n      default: {\n        return osDefault;\n      }\n    }\n  }\n\n  /**\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  willUpdate(changedProperties) {\n    if (changedProperties.has(\"_mode\") && globalThis.document) {\n      document.documentElement.style.colorScheme = this._mode;\n      document.documentElement.dataset.theme = this._mode;\n      this.dispatchEvent(\n        new CustomEvent(\"mdn-color-theme-update\", {\n          bubbles: true,\n          composed: true,\n          detail: this._mode,\n        }),\n      );\n    }\n  }\n\n  render() {\n    return html`<div class=\"color-theme\">\n      <mdn-dropdown>\n        <button\n          slot=\"button\"\n          class=\"color-theme__button\"\n          data-mode=${this._mode}\n          type=\"button\"\n          aria-label=${this.l10n`Switch color theme`}\n        >\n          <span>${this.l10n`Theme`}</span>\n        </button>\n        <div\n          slot=\"dropdown\"\n          class=\"color-theme__dropdown\"\n          id=\"color-theme__dropdown\"\n        >\n          <ul class=\"color-theme__list\">\n            <li>\n              <button\n                class=\"color-theme__option\"\n                data-mode=\"light dark\"\n                type=\"button\"\n                @click=${this._setMode}\n              >\n                ${this.l10n(\"theme-default\")`OS default`}\n              </button>\n            </li>\n            <li>\n              <button\n                class=\"color-theme__option\"\n                data-mode=\"light\"\n                type=\"button\"\n                @click=${this._setMode}\n              >\n                ${this.l10n`Light`}\n              </button>\n            </li>\n            <li>\n              <button\n                class=\"color-theme__option\"\n                data-mode=\"dark\"\n                type=\"button\"\n                @click=${this._setMode}\n              >\n                ${this.l10n`Dark`}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </mdn-dropdown>\n    </div>`;\n  }\n\n  firstUpdated() {\n    // we have to do this here and immediately cause a re-render\n    // as doing so in connectedCallback causes a hydration error:\n    // https://github.com/lit/lit/issues/1434\n\n    // this logic is also reflected in \"/entry.inline.js\"\n\n    let mode;\n    try {\n      mode = localStorage.getItem(\"theme\");\n    } catch (error) {\n      console.warn(\"Unable to read theme from localStorage\", error);\n    }\n    if (mode === \"light dark\" || mode === \"light\" || mode === \"dark\") {\n      this._mode = mode;\n    }\n  }\n}\n\ncustomElements.define(\"mdn-color-theme\", MDNColorTheme);\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/contrast.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/sun.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_2___ = new URL(\"../icon/moon.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___);\nvar ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.color-theme{--color-theme-light-dark:url(${___CSS_LOADER_URL_REPLACEMENT_0___});--color-theme-light:url(${___CSS_LOADER_URL_REPLACEMENT_1___});--color-theme-dark:url(${___CSS_LOADER_URL_REPLACEMENT_2___});position:relative}.color-theme__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}.color-theme__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media (max-width:769px){.color-theme__button>span{display:none}}.color-theme__button:before{background-color:currentcolor;content:\"\";height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.color-theme__button[data-mode=\"light dark\"]:before{-webkit-mask-image:var(--color-theme-light-dark);mask-image:var(--color-theme-light-dark)}.color-theme__button[data-mode=light]:before{-webkit-mask-image:var(--color-theme-light);mask-image:var(--color-theme-light)}.color-theme__button[data-mode=dark]:before{-webkit-mask-image:var(--color-theme-dark);mask-image:var(--color-theme-dark)}.color-theme__dropdown{border:1px solid var(--color-border-primary);padding:.75rem;position:absolute;right:0;z-index:1}.color-theme__dropdown,.color-theme__list{background-color:var(--color-background-primary);margin:0;width:max-content}.color-theme__list{list-style:none;padding:0}.color-theme__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:.25rem;width:100%}.color-theme__option:hover{background-color:var(--color-background-secondary)}.color-theme__option:before{background-color:currentcolor;content:\"\";height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.color-theme__option[data-mode=\"light dark\"]:before{-webkit-mask-image:var(--color-theme-light-dark);mask-image:var(--color-theme-light-dark)}.color-theme__option[data-mode=light]:before{-webkit-mask-image:var(--color-theme-light);mask-image:var(--color-theme-light)}.color-theme__option[data-mode=dark]:before{-webkit-mask-image:var(--color-theme-dark);mask-image:var(--color-theme-dark)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["o","String","MDNColorTheme","HTMLElement","localStorage","e","console","globalThis","document","CustomEvent","customElements","_"],"mappings":"0FAEA,EAAO,OAAO,CAAG,SAAU,CAAG,CAAEA,CAAO,SACjC,AAACA,GACHA,CAAAA,EAAU,CAAC,GAER,IAGL,EAAMC,OAAO,EAAI,UAAU,CAAG,EAAI,OAAO,CAAG,GAGxC,eAAe,IAAI,CAAC,IACtB,GAAM,EAAI,KAAK,CAAC,EAAG,GAAE,EAEnBD,EAAQ,IAAI,EACd,IAAOA,EAAQ,IAAI,AAAD,EAKhB,oBAAoB,IAAI,CAAC,IAAQA,EAAQ,UAAU,GAC9C,IAAK,MAAM,CAAC,EAAI,OAAO,CAAC,KAAM,OAAO,OAAO,CAAC,MAAO,OAAQ,KAE9D,CACT,C,wSCzB2B,MAAe,QAAG,CAAC,6PAA6P,CAAC,CCAjR,EAAe,QAAG,CAAC,wOAAwO,CAAC,CCA5P,EAAe,QAAG,CAAC,wVAAwV,CAAC,C,wBCYhY,IAAME,cAAN,MAAMA,qBAAsB,QAAU,IAAU,EACrD,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,MAAO,CAAE,MAAO,EAAK,CACvB,CAAE,AAEF,cAAc,CACZ,KAAK,GAEL,IAAI,CAAC,KAAK,CAAG,YACf,CAGA,SAAS,CAAE,QAAM,CAAE,CAAE,CACnB,GAAI,aAAkBC,YAAa,CACjC,IAAM,EAAO,EAAO,OAAO,CAAC,IAAI,CAChC,GAAI,AAAS,eAAT,GAAyB,AAAS,UAAT,GAAoB,AAAS,SAAT,EAAiB,CAChE,IAAI,CAAC,KAAK,CAAG,EACb,GAAI,CACFC,aAAa,OAAO,CAAC,QAAS,EAChC,CAAE,MAAOC,EAAO,CACdC,QAAQ,IAAI,CAAC,wCAAyCD,EACxD,CACA,IAAM,EAAW,IAAI,CAAC,UAAU,EAAE,cAAc,eAC5C,IACF,GAAS,IAAI,CAAG,EAAI,CAExB,CACF,CACF,CAEA,IAAI,OAAQ,CACV,OAAQ,IAAI,CAAC,KAAK,EAChB,IAAK,QACH,OAAO,CAET,KAAK,OACH,OAAO,CAET,SACE,OAAO,CAEX,CACF,CAKA,WAAW,CAAiB,CAAE,CACxB,EAAkB,GAAG,CAAC,UAAYE,WAAW,QAAQ,GACvDC,SAAS,eAAe,CAAC,KAAK,CAAC,WAAW,CAAG,IAAI,CAAC,KAAK,CACvDA,SAAS,eAAe,CAAC,OAAO,CAAC,KAAK,CAAG,IAAI,CAAC,KAAK,CACnD,IAAI,CAAC,aAAa,CAChB,IAAIC,YAAY,yBAA0B,CACxC,QAAS,GACT,SAAU,GACV,OAAQ,IAAI,CAAC,KAAK,AACpB,IAGN,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;;;;oBAKI,EAAE,IAAI,CAAC,KAAK,CAAC;;qBAEZ,EAAE,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;;gBAErC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;;;;;;;;;;uBAaZ,EAAE,IAAI,CAAC,QAAQ,CAAC;;gBAEvB,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;;;;;;;;uBAQlC,EAAE,IAAI,CAAC,QAAQ,CAAC;;gBAEvB,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;;;;;uBAQZ,EAAE,IAAI,CAAC,QAAQ,CAAC;;gBAEvB,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;;UAMxB,CAAC,AACT,CAEA,cAAe,CAOb,IAAI,EACJ,GAAI,CACF,EAAOL,aAAa,OAAO,CAAC,QAC9B,CAAE,MAAOC,EAAO,CACdC,QAAQ,IAAI,CAAC,yCAA0CD,EACzD,CACI,CAAS,eAAT,GAAyB,AAAS,UAAT,GAAoB,AAAS,SAAT,CAAc,GAC7D,KAAI,CAAC,KAAK,CAAG,CAAG,CAEpB,CACF,EAEAK,eAAe,MAAM,CAAC,kBAAmBR,c,mHC/IrC,EAAgC,kBAChC,EAAgC,kBAChC,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GACrE,EAAqC,IAAgC,GACrES,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,0CAA0C,EAAE,EAAmC,0BAA0B,EAAE,EAAmC,yBAAyB,EAAEA,EAAmC,o8DAAo8D,CAAC,CAAE,GAAG,EAEhsE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/5293.26a213d7faf99924.js

@@ -0,0 +1,4 @@
+export const __webpack_ids__=["5293"];export const __webpack_modules__={74580:function(e,t,i){i.r(t),i.d(t,{MDNPlayEditor:()=>MDNPlayEditor});var s=i(83582),n=i(129),a=i(81517),r=i(59155),o=i(93167),l=i(14339),d=i(73015),u=i(51651),h=i(59348),c=i(6742),m=i(11518),p=i(98001),f=i(14703),_=i(62637),v=i(58455);let MDNPlayEditor=class MDNPlayEditor extends f.oi{static properties={language:{type:String},minimal:{type:Boolean},value:{attribute:!1},delay:{type:Number}};static styles=v.Z;_editor;_updateTimer=-1;constructor(){super(),this.theme=new _.u(this),this.language="",this.minimal=!1,this._value="",this.delay=1e3}set value(e){if(this._value=e,this._editor){let t=h.yy.create({doc:e,extensions:this._extensions()});this._editor.setState(t)}this.dispatchEvent(new Event("update",{bubbles:!0,composed:!0}))}get value(){return this._editor?this._editor.state.doc.toString():this._value}focus(){this._editor?.focus()}_extensions(){let e=(()=>{switch(this.language){case"js":return[(0,o.eJ)()];case"html":return[(0,r.dy)()];case"css":return[(0,a.iv)()];case"wat":return[(0,l.p)()];default:return[]}})();return[p.w9,(0,d.n$)(),(0,s.vQ)(),...this.minimal?[]:[(0,m.Eu)(),(0,d.nY)(),(0,s.ys)(),(0,m.ZO)(),m.$f.of([...s.GA,...n.wQ,...s.B1,...u.Fv,n.oc]),m.tk.lineWrapping],..."dark"===this.theme.value?[c.vk]:[],...e,m.tk.focusChangeEffect.of((e,t)=>(this.dispatchEvent(new Event(t?"focus":"blur",{bubbles:!0,composed:!0})),null)),m.tk.updateListener.of(e=>{e.docChanged&&(-1!==this._updateTimer&&clearTimeout(this._updateTimer),this._updateTimer=globalThis?.setTimeout(()=>{this._updateTimer=-1,this.dispatchEvent(new Event("update",{bubbles:!0,composed:!0}))},this.delay))})]}async format(){let e=await i.e("7293").then(i.bind(i,87169)),t=(()=>{switch(this.language){case"js":return{parser:"babel",plugins:[i.e("9551").then(i.bind(i,15982)),i.e("7378").then(i.bind(i,62274))]};case"html":return{parser:"html",plugins:[i.e("1060").then(i.bind(i,98150)),i.e("9291").then(i.bind(i,84640)),i.e("9551").then(i.bind(i,15982)),i.e("7378").then(i.bind(i,62274))]};case"css":return{parser:"css",plugins:[i.e("9291").then(i.bind(i,84640))]};default:return}})();if(t){let i=await Promise.all(t.plugins),s=this.value,n=await e.format(s,{parser:t.parser,plugins:i});this.value===s&&s!==n&&(this.value=n)}}willUpdate(e){(e.has("language")||e.has("ThemeController.value"))&&this._editor?.dispatch({effects:h.Py.reconfigure.of(this._extensions())})}render(){return(0,f.dy)`<div
+      class=${this.minimal?"editor minimal":"editor"}
+    ></div>`}firstUpdated(){let e=h.yy.create({doc:this._value,extensions:this._extensions()});this._editor=new m.tk({state:e,parent:this.renderRoot.querySelector("div")||void 0})}};customElements.define("mdn-play-editor",MDNPlayEditor)},58455:function(e,t,i){i.d(t,{Z:()=>l});var s=i(14703),n=i(8081),a=i.n(n),r=i(23645),o=i.n(r)()(a());o.push([e.id,":host{display:block;font-size:.875rem}.editor{height:100%}.editor.minimal{display:flex;flex-direction:column;justify-content:center}.editor.minimal .cm-content{align-self:center;min-height:auto}.editor.minimal .cm-focused{outline:none}.editor.minimal .cm-line{padding:0 12px}.editor .cm-editor{height:100%;width:100%}:is(.editor .cm-editor) *{font-family:var(--font-family-code)!important}",""]);let l=(0,s.iv)([o.toString()])}};
+//# sourceMappingURL=5293.26a213d7faf99924.js.map

package/dist/client/5293.26a213d7faf99924.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5293.26a213d7faf99924.js","sources":["webpack://@mdn/fred/./components/play-editor/element.js","webpack://@mdn/fred/./components/play-editor/element.css"],"sourcesContent":["import {\n  autocompletion,\n  closeBrackets,\n  closeBracketsKeymap,\n  completionKeymap,\n} from \"@codemirror/autocomplete\";\nimport { defaultKeymap, indentWithTab } from \"@codemirror/commands\";\nimport { css as langCSS } from \"@codemirror/lang-css\";\nimport { html as langHTML } from \"@codemirror/lang-html\";\nimport { javascript as langJS } from \"@codemirror/lang-javascript\";\nimport { wast as langWat } from \"@codemirror/lang-wast\";\nimport { bracketMatching, indentOnInput } from \"@codemirror/language\";\nimport { lintKeymap } from \"@codemirror/lint\";\nimport { EditorState, StateEffect } from \"@codemirror/state\";\nimport { oneDark } from \"@codemirror/theme-one-dark\";\nimport { highlightActiveLine, keymap, lineNumbers } from \"@codemirror/view\";\nimport { EditorView, minimalSetup } from \"codemirror\";\n\nimport { LitElement, html } from \"lit\";\n\nimport { ThemeController } from \"../color-theme/controller.js\";\n\nimport styles from \"./element.css?lit\";\n\n/** @import { PropertyValues } from \"lit\" */\n\nexport class MDNPlayEditor extends LitElement {\n  static properties = {\n    language: { type: String },\n    minimal: { type: Boolean },\n    value: { attribute: false },\n    delay: { type: Number },\n  };\n\n  static styles = styles;\n\n  /** @type {EditorView | undefined} */\n  _editor;\n\n  /** @type {NodeJS.Timeout | number} */\n  _updateTimer = -1;\n\n  constructor() {\n    super();\n    this.theme = new ThemeController(this);\n    this.language = \"\";\n    this.minimal = false;\n    this._value = \"\";\n    this.delay = 1000;\n  }\n\n  /** @param {string} value */\n  set value(value) {\n    this._value = value;\n    if (this._editor) {\n      let state = EditorState.create({\n        doc: value,\n        extensions: this._extensions(),\n      });\n      this._editor.setState(state);\n    }\n    this.dispatchEvent(new Event(\"update\", { bubbles: true, composed: true }));\n  }\n\n  get value() {\n    return this._editor ? this._editor.state.doc.toString() : this._value;\n  }\n\n  focus() {\n    this._editor?.focus();\n  }\n\n  _extensions() {\n    const language = (() => {\n      switch (this.language) {\n        case \"js\":\n          return [langJS()];\n        case \"html\":\n          return [langHTML()];\n        case \"css\":\n          return [langCSS()];\n        case \"wat\":\n          return [langWat()];\n        default:\n          return [];\n      }\n    })();\n\n    return [\n      minimalSetup,\n      bracketMatching(),\n      closeBrackets(),\n      ...(this.minimal\n        ? []\n        : [\n            lineNumbers(),\n            indentOnInput(),\n            autocompletion(),\n            highlightActiveLine(),\n            keymap.of([\n              ...closeBracketsKeymap,\n              ...defaultKeymap,\n              ...completionKeymap,\n              ...lintKeymap,\n              indentWithTab,\n            ]),\n            EditorView.lineWrapping,\n          ]),\n      ...(this.theme.value === \"dark\" ? [oneDark] : []),\n      ...language,\n      EditorView.focusChangeEffect.of((_, focusing) => {\n        this.dispatchEvent(\n          new Event(focusing ? \"focus\" : \"blur\", {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n        return null;\n      }),\n      EditorView.updateListener.of((update) => {\n        if (update.docChanged) {\n          if (this._updateTimer !== -1) {\n            clearTimeout(this._updateTimer);\n          }\n          this._updateTimer = globalThis?.setTimeout(() => {\n            this._updateTimer = -1;\n            this.dispatchEvent(\n              new Event(\"update\", { bubbles: true, composed: true }),\n            );\n          }, this.delay);\n        }\n      }),\n    ];\n  }\n\n  async format() {\n    const prettier = await import(\"prettier/standalone\");\n    const config = (() => {\n      switch (this.language) {\n        case \"js\":\n          return {\n            parser: \"babel\",\n            plugins: [\n              import(\"prettier/plugins/babel\"),\n              import(\"prettier/plugins/estree\"),\n            ],\n          };\n        case \"html\":\n          return {\n            parser: \"html\",\n            plugins: [\n              import(\"prettier/plugins/html\"),\n              import(\"prettier/plugins/postcss\"),\n              import(\"prettier/plugins/babel\"),\n              import(\"prettier/plugins/estree\"),\n            ],\n          };\n        case \"css\":\n          return {\n            parser: \"css\",\n            plugins: [import(\"prettier/plugins/postcss\")],\n          };\n        default:\n          return;\n      }\n    })();\n    if (config) {\n      const plugins = await Promise.all(config.plugins);\n      const unformatted = this.value;\n      const formatted = await prettier.format(unformatted, {\n        parser: config.parser,\n        plugins: /** @type {import(\"prettier\").Plugin[]} */ (plugins),\n      });\n      if (this.value === unformatted && unformatted !== formatted) {\n        this.value = formatted;\n      }\n    }\n  }\n\n  /** @param {PropertyValues} changedProperties */\n  willUpdate(changedProperties) {\n    if (\n      changedProperties.has(\"language\") ||\n      changedProperties.has(\"ThemeController.value\")\n    ) {\n      this._editor?.dispatch({\n        effects: StateEffect.reconfigure.of(this._extensions()),\n      });\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${this.minimal ? \"editor minimal\" : \"editor\"}\n    ></div>`;\n  }\n\n  firstUpdated() {\n    let startState = EditorState.create({\n      doc: this._value,\n      extensions: this._extensions(),\n    });\n    this._editor = new EditorView({\n      state: startState,\n      parent: this.renderRoot.querySelector(\"div\") || undefined,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-play-editor\", MDNPlayEditor);\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{display:block;font-size:.875rem}.editor{height:100%}.editor.minimal{display:flex;flex-direction:column;justify-content:center}.editor.minimal .cm-content{align-self:center;min-height:auto}.editor.minimal .cm-focused{outline:none}.editor.minimal .cm-line{padding:0 12px}.editor .cm-editor{height:100%;width:100%}:is(.editor .cm-editor) *{font-family:var(--font-family-code)!important}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNPlayEditor","String","Boolean","Number","Event","l","clearTimeout","globalThis","i","Promise","customElements"],"mappings":"oTA0BO,IAAMA,cAAN,MAAMA,sBAAsB,IAAU,CAC3C,OAAO,WAAa,CAClB,SAAU,CAAE,KAAMC,MAAO,EACzB,QAAS,CAAE,KAAMC,OAAQ,EACzB,MAAO,CAAE,UAAW,EAAM,EAC1B,MAAO,CAAE,KAAMC,MAAO,CACxB,CAAE,AAEF,QAAO,OAAS,GAAM,AAAC,AAGvB,QAAQ,AAGR,cAAe,EAAG,AAElB,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,IAAI,GAAe,CAAC,IAAI,EACrC,IAAI,CAAC,QAAQ,CAAG,GAChB,IAAI,CAAC,OAAO,CAAG,GACf,IAAI,CAAC,MAAM,CAAG,GACd,IAAI,CAAC,KAAK,CAAG,GACf,CAGA,IAAI,MAAM,CAAK,CAAE,CAEf,GADA,IAAI,CAAC,MAAM,CAAG,EACV,IAAI,CAAC,OAAO,CAAE,CAChB,IAAI,EAAQ,WAAkB,CAAC,CAC7B,IAAK,EACL,WAAY,IAAI,CAAC,WAAW,EAC9B,GACA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EACxB,CACA,IAAI,CAAC,aAAa,CAAC,IAAIC,MAAM,SAAU,CAAE,QAAS,GAAM,SAAU,EAAK,GACzE,CAEA,IAAI,OAAQ,CACV,OAAO,IAAI,CAAC,OAAO,CAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,GAAK,IAAI,CAAC,MAAM,AACvE,CAEA,OAAQ,CACN,IAAI,CAAC,OAAO,EAAE,OAChB,CAEA,aAAc,CACZ,IAAM,EAAW,AAAC,MAChB,OAAQ,IAAI,CAAC,QAAQ,EACnB,IAAK,KACH,MAAO,CAAC,WAAS,AACnB,KAAK,OACH,MAAO,CAAC,WAAW,AACrB,KAAK,MACH,MAAO,CAAC,WAAU,AACpB,KAAK,MACH,MAAO,CAAC,GAAAC,EAAA,KAAU,AACpB,SACE,MAAO,EAAE,AACb,CACF,KAEA,MAAO,CACL,IAAY,CACZ,WACA,cACI,IAAI,CAAC,OAAO,CACZ,EAAE,CACF,CACE,WACA,WACA,WACA,WACA,OAAS,CAAC,IACL,IAAmB,IACnB,IAAa,IACb,IAAgB,IAChB,IAAU,CACb,IAAa,CACd,EACD,iBAAuB,CACxB,IACD,AAAqB,SAArB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAc,CAAC,IAAO,CAAC,CAAG,EAAE,IAC7C,EACH,yBAA+B,CAAC,CAAC,EAAG,KAClC,IAAI,CAAC,aAAa,CAChB,IAAID,MAAM,EAAW,QAAU,OAAQ,CACrC,QAAS,GACT,SAAU,EACZ,IAEK,OAET,sBAA4B,CAAC,AAAC,IACxB,EAAO,UAAU,GACf,AAAsB,KAAtB,IAAI,CAAC,YAAY,EACnBE,aAAa,IAAI,CAAC,YAAY,EAEhC,IAAI,CAAC,YAAY,CAAGC,YAAY,WAAW,KACzC,IAAI,CAAC,YAAY,CAAG,GACpB,IAAI,CAAC,aAAa,CAChB,IAAIH,MAAM,SAAU,CAAE,QAAS,GAAM,SAAU,EAAK,GAExD,EAAG,IAAI,CAAC,KAAK,EAEjB,GACD,AACH,CAEA,MAAM,QAAS,CACb,IAAM,EAAW,MAAMI,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACjB,EAAS,AAAC,MACd,OAAQ,IAAI,CAAC,QAAQ,EACnB,IAAK,KACH,MAAO,CACL,OAAQ,QACR,QAAS,CACPA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACAA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACD,AACH,CACF,KAAK,OACH,MAAO,CACL,OAAQ,OACR,QAAS,CACPA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACAA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACAA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACAA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QACD,AACH,CACF,KAAK,MACH,MAAO,CACL,OAAQ,MACR,QAAS,CAACA,EAAA,eAAAA,EAAA,KAAAA,EAAA,QAAmC,AAC/C,CACF,SACE,MACJ,CACF,KACA,GAAI,EAAQ,CACV,IAAM,EAAU,MAAMC,QAAQ,GAAG,CAAC,EAAO,OAAO,EAC1C,EAAc,IAAI,CAAC,KAAK,CACxB,EAAY,MAAM,EAAS,MAAM,CAAC,EAAa,CACnD,OAAQ,EAAO,MAAM,CACrB,QAAqD,CACvD,EACI,KAAI,CAAC,KAAK,GAAK,GAAe,IAAgB,GAChD,KAAI,CAAC,KAAK,CAAG,CAAQ,CAEzB,CACF,CAGA,WAAW,CAAiB,CAAE,CAE1B,GAAkB,GAAG,CAAC,aACtB,EAAkB,GAAG,CAAC,wBAAuB,GAE7C,IAAI,CAAC,OAAO,EAAE,SAAS,CACrB,QAAS,mBAA0B,CAAC,IAAI,CAAC,WAAW,GACtD,EAEJ,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;YACJ,EAAE,IAAI,CAAC,OAAO,CAAG,iBAAmB,SAAS;WAC9C,CAAC,AACV,CAEA,cAAe,CACb,IAAI,EAAa,WAAkB,CAAC,CAClC,IAAK,IAAI,CAAC,MAAM,CAChB,WAAY,IAAI,CAAC,WAAW,EAC9B,EACA,KAAI,CAAC,OAAO,CAAG,IAAI,IAAU,CAAC,CAC5B,MAAO,EACP,OAAQ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAU,MAClD,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,kBAAmBV,c,sFC7MrC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,wYAAyY,GAAG,EAErb,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/533.518751bfb02cbcee.js

@@ -0,0 +1,47 @@
+export const __webpack_ids__=["533"];export const __webpack_modules__={20082:function(e,i,t){t.r(i),t.d(i,{MDNContributorList:()=>MDNContributorList});var r=t(14703),s=t(25408);let MDNContributorList=class MDNContributorList extends r.oi{static ssr=!1;static properties={_contributors:{state:!0}};static styles=s.Z;constructor(){super(),this._contributors=[]}_onChildrenChanged(){let e=this.querySelector("ul"),i=[];if(e){let t=[...e.querySelectorAll("li")];for(let e=0;e<8;e++){let r=function(e){let i=Math.floor(Math.random()*e.length);return e.splice(i,1)[0]}(t);if(!r)break;let[s,o,a]=[...r.childNodes].map(e=>e?.textContent?.trim()||void 0);if(!s||!o){e--;continue}i.push({name:s,github:o,org:a})}this._contributors=i}}connectedCallback(){super.connectedCallback(),this._onChildrenChanged(),new MutationObserver(()=>this._onChildrenChanged()).observe(this,{subtree:!0,childList:!0,characterData:!0})}render(){return(0,r.dy)`<div class="wrap">
+      <div class="inner">
+        <ul>
+          <svg>
+            <defs>
+              <mask id="hide-half">
+                <rect
+                  x="0%"
+                  y="0%"
+                  width="100%"
+                  height="100%"
+                  fill="#fff"
+                  stroke="#fff"
+                />
+              </mask>
+            </defs>
+            <ellipse
+              rx="100%"
+              ry="50%"
+              cx="100%"
+              cy="50%"
+              mask="url(#hide-half)"
+            />
+            <ellipse
+              rx="50%"
+              ry="25%"
+              cx="100%"
+              cy="50%"
+              mask="url(#hide-half)"
+            />
+          </svg>
+          ${this._contributors.map(({name:e,github:i,org:t})=>{let s=`https://avatars.githubusercontent.com/${i?.split("/").slice(-1)}`;return(0,r.dy)`<li>
+              <a href=${i} target="_blank" rel="nofollow noreferrer">
+                <img
+                  src="${s}?size=80"
+                  srcset="${s}?size=160 2x"
+                  loading="lazy"
+                  referrerpolicy="no-referrer"
+                />
+                ${e}
+              </a>
+              <span class="org">${t}</span>
+            </li>`})}
+        </ul>
+      </div>
+    </div>`}};customElements.define("mdn-contributor-list",MDNContributorList)},25408:function(e,i,t){t.d(i,{Z:()=>l});var r=t(14703),s=t(8081),o=t.n(s),a=t(23645),n=t.n(a)()(o());n.push([e.id,"*{box-sizing:border-box}.wrap{--img-size:3.75em;--li-size:calc(var(--img-size)*2.5)}ul{--circle-border-size:0.375em;align-content:start;display:grid;gap:2rem 1rem;grid-template-columns:repeat(auto-fit,minmax(var(--li-size),1fr));justify-items:center;margin:0;padding:0}@media (max-width:769px){ul{display:flex;margin-top:2rem;overflow-x:auto}}a,li{align-items:center;display:flex;flex-direction:column;flex-shrink:0;text-align:center}li{color:var(--community-text-primary);width:var(--li-size)}img{background:var(--community-circle-img-border);border:var(--circle-border-size) var(--community-circle-img-border) solid;border-radius:50%;flex-shrink:0;height:var(--img-size);width:var(--img-size)}a{color:unset;font-weight:500}svg{display:none}@supports (offset-path:ellipse(100% 50% at 100% 50%)){@media (min-width:769.02px){.wrap{container-type:size;height:100%;width:100%}.inner{font-size:min(1rem,3.5cqmin);padding:calc(var(--img-size)/2) calc(var(--li-size)/2)}ul{aspect-ratio:1/2;margin-left:auto;max-height:var(--community-circle-height);min-height:0;min-width:0;position:relative}svg,ul{display:block}svg{height:100%;overflow:visible;position:absolute;width:100%;fill:none;stroke:var(--community-circle-img-border);stroke-width:var(--circle-border-size)}li{animation:community-circle .1ms forwards;offset-anchor:center calc(var(--img-size)*.5);offset-distance:var(--offset-distance);offset-path:ellipse(100% 50% at 100% 50%);offset-rotate:0deg}li:nth-of-type(n+6){--img-size:5em;offset-path:ellipse(50% 25% at 100% 50%)}@keyframes community-circle{0%{offset-distance:calc(var(--offset-distance) - .1%)}}li:first-of-type{--offset-distance:75%}li:nth-of-type(2){--offset-distance:62.5%}li:nth-of-type(3){--offset-distance:50%}li:nth-of-type(4){--offset-distance:37.5%}li:nth-of-type(5){--offset-distance:25%}li:nth-of-type(6){--offset-distance:75%}li:nth-of-type(7){--offset-distance:50%}li:nth-of-type(8){--offset-distance:25%}.org{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}}}",""]);let l=(0,r.iv)([n.toString()])}};
+//# sourceMappingURL=533.518751bfb02cbcee.js.map

package/dist/client/533.518751bfb02cbcee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"533.518751bfb02cbcee.js","sources":["webpack://@mdn/fred/./components/contributor-list/element.js","webpack://@mdn/fred/./components/contributor-list/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\n\n/** @import { ContributorData } from \"./types.d.ts\" */\n\nexport class MDNContributorList extends LitElement {\n  static ssr = false;\n\n  static properties = {\n    _contributors: { state: true },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    /** @type {ContributorData[]} */\n    this._contributors = [];\n  }\n\n  _onChildrenChanged() {\n    const contributorList = this.querySelector(\"ul\");\n    /** @type {ContributorData[]} */\n    const randomContributors = [];\n    if (contributorList) {\n      const contributors = [...contributorList.querySelectorAll(\"li\")];\n      for (let index = 0; index < 8; index++) {\n        const contributor = popRandom(contributors);\n        if (!contributor) {\n          break;\n        }\n        const [name, github, org] = [...contributor.childNodes].map(\n          (node) => node?.textContent?.trim() || undefined,\n        );\n        if (!name || !github) {\n          index--;\n          continue;\n        }\n        randomContributors.push({\n          name,\n          github,\n          org,\n        });\n      }\n      this._contributors = randomContributors;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._onChildrenChanged();\n    new MutationObserver(() => this._onChildrenChanged()).observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  render() {\n    return html`<div class=\"wrap\">\n      <div class=\"inner\">\n        <ul>\n          <svg>\n            <defs>\n              <mask id=\"hide-half\">\n                <rect\n                  x=\"0%\"\n                  y=\"0%\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  fill=\"#fff\"\n                  stroke=\"#fff\"\n                />\n              </mask>\n            </defs>\n            <ellipse\n              rx=\"100%\"\n              ry=\"50%\"\n              cx=\"100%\"\n              cy=\"50%\"\n              mask=\"url(#hide-half)\"\n            />\n            <ellipse\n              rx=\"50%\"\n              ry=\"25%\"\n              cx=\"100%\"\n              cy=\"50%\"\n              mask=\"url(#hide-half)\"\n            />\n          </svg>\n          ${this._contributors.map(({ name, github, org }) => {\n            const imgSrc = `https://avatars.githubusercontent.com/${github\n              ?.split(\"/\")\n              .slice(-1)}`;\n            return html`<li>\n              <a href=${github} target=\"_blank\" rel=\"nofollow noreferrer\">\n                <img\n                  src=\"${imgSrc}?size=80\"\n                  srcset=\"${imgSrc}?size=160 2x\"\n                  loading=\"lazy\"\n                  referrerpolicy=\"no-referrer\"\n                />\n                ${name}\n              </a>\n              <span class=\"org\">${org}</span>\n            </li>`;\n          })}\n        </ul>\n      </div>\n    </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-contributor-list\", MDNContributorList);\n\n/**\n * @template T\n * @param {Array<T>} array\n */\nfunction popRandom(array) {\n  const i = Math.floor(Math.random() * array.length);\n  // mutate the array:\n  return array.splice(i, 1)[0];\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\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*{box-sizing:border-box}.wrap{--img-size:3.75em;--li-size:calc(var(--img-size)*2.5)}ul{--circle-border-size:0.375em;align-content:start;display:grid;gap:2rem 1rem;grid-template-columns:repeat(auto-fit,minmax(var(--li-size),1fr));justify-items:center;margin:0;padding:0}@media (max-width:769px){ul{display:flex;margin-top:2rem;overflow-x:auto}}a,li{align-items:center;display:flex;flex-direction:column;flex-shrink:0;text-align:center}li{color:var(--community-text-primary);width:var(--li-size)}img{background:var(--community-circle-img-border);border:var(--circle-border-size) var(--community-circle-img-border) solid;border-radius:50%;flex-shrink:0;height:var(--img-size);width:var(--img-size)}a{color:unset;font-weight:500}svg{display:none}@supports (offset-path:ellipse(100% 50% at 100% 50%)){@media (min-width:769.02px){.wrap{container-type:size;height:100%;width:100%}.inner{font-size:min(1rem,3.5cqmin);padding:calc(var(--img-size)/2) calc(var(--li-size)/2)}ul{aspect-ratio:1/2;margin-left:auto;max-height:var(--community-circle-height);min-height:0;min-width:0;position:relative}svg,ul{display:block}svg{height:100%;overflow:visible;position:absolute;width:100%;fill:none;stroke:var(--community-circle-img-border);stroke-width:var(--circle-border-size)}li{animation:community-circle .1ms forwards;offset-anchor:center calc(var(--img-size)*.5);offset-distance:var(--offset-distance);offset-path:ellipse(100% 50% at 100% 50%);offset-rotate:0deg}li:nth-of-type(n+6){--img-size:5em;offset-path:ellipse(50% 25% at 100% 50%)}@keyframes community-circle{0%{offset-distance:calc(var(--offset-distance) - .1%)}}li:first-of-type{--offset-distance:75%}li:nth-of-type(2){--offset-distance:62.5%}li:nth-of-type(3){--offset-distance:50%}li:nth-of-type(4){--offset-distance:37.5%}li:nth-of-type(5){--offset-distance:25%}li:nth-of-type(6){--offset-distance:75%}li:nth-of-type(7){--offset-distance:50%}li:nth-of-type(8){--offset-distance:25%}.org{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNContributorList","s","i","Math","MutationObserver","customElements"],"mappings":"iLAMO,IAAMA,mBAAN,MAAMA,2BAA2B,IAAU,CAChD,OAAO,IAAM,EAAM,AAEnB,QAAO,WAAa,CAClB,cAAe,CAAE,MAAO,EAAK,CAC/B,CAAE,AAEF,QAAO,OAASC,EAAA,CAAM,AAAC,AAEvB,cAAc,CACZ,KAAK,GAEL,IAAI,CAAC,aAAa,CAAG,EAAE,AACzB,CAEA,oBAAqB,CACnB,IAAM,EAAkB,IAAI,CAAC,aAAa,CAAC,MAErC,EAAqB,EAAE,CAC7B,GAAI,EAAiB,CACnB,IAAM,EAAe,IAAI,EAAgB,gBAAgB,CAAC,MAAM,CAChE,IAAK,IAAI,EAAQ,EAAG,EAAQ,EAAG,IAAS,CACtC,IAAM,EAAc,AA4F5B,SAAmB,CAAK,EACtB,IAAMC,EAAIC,KAAK,KAAK,CAACA,KAAK,MAAM,GAAK,EAAM,MAAM,EAEjD,OAAO,EAAM,MAAM,CAACD,EAAG,EAAE,CAAC,EAAE,AAC9B,EAhGsC,GAC9B,GAAI,CAAC,EACH,MAEF,GAAM,CAAC,EAAM,EAAQ,EAAI,CAAG,IAAI,EAAY,UAAU,CAAC,CAAC,GAAG,CACzD,AAAC,GAAS,GAAM,aAAa,QAAU,QAEzC,GAAI,CAAC,GAAQ,CAAC,EAAQ,CACpB,IACA,QACF,CACA,EAAmB,IAAI,CAAC,CACtB,OACA,SACA,KACF,EACF,CACA,IAAI,CAAC,aAAa,CAAG,CACvB,CACF,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,kBAAkB,GACvB,IAAIE,iBAAiB,IAAM,IAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAE,CAClE,QAAS,GACT,UAAW,GACX,cAAe,EACjB,EACF,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BN,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAE,MAAI,CAAE,QAAM,CAAE,KAAG,CAAE,IAC7C,IAAM,EAAS,CAAC,sCAAsC,EAAE,GACpD,MAAM,KACP,MAAM,IAAI,CAAC,CACd,MAAO,QAAI,CAAC;sBACF,EAAE,EAAO;;uBAER,EAAE,EAAO;0BACN,EAAE,EAAO;;;;gBAInB,EAAE,EAAK;;gCAES,EAAE,EAAI;iBACrB,CAAC,AACR,GAAG;;;UAGH,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,uBAAwBL,mB,sFC9G1C,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,w/DAAy/D,GAAG,EAEriE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/5401.6b191cac148d7b1e.js

@@ -0,0 +1,2 @@
+export const __webpack_ids__=["5401"];export const __webpack_modules__={66176:function(e,r,o){o.d(r,{DQ:()=>t,Xu:()=>c,_v:()=>s});let s="https://observatory-api.mdn.mozilla.net",c=[{grade:"A+",scoreText:"100+",score:100,stars:!0},{grade:"A",scoreText:"90",score:90,stars:!0},{grade:"A-",scoreText:"85",score:85,stars:!0},{grade:"B+",scoreText:"80",score:80},{grade:"B",scoreText:"70",score:70},{grade:"B-",scoreText:"65",score:65},{grade:"C+",scoreText:"60",score:60},{grade:"C",scoreText:"50",score:50},{grade:"C-",scoreText:"45",score:45},{grade:"D+",scoreText:"40",score:40},{grade:"D",scoreText:"30",score:30},{grade:"D-",scoreText:"25",score:25},{grade:"F",scoreText:"0",score:0}],t=["content-security-policy","cookies","cross-origin-resource-sharing","redirection","referrer-policy","strict-transport-security","subresource-integrity","x-content-type-options","x-frame-options","cross-origin-resource-policy"]}};
+//# sourceMappingURL=5401.6b191cac148d7b1e.js.map

package/dist/client/5401.6b191cac148d7b1e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5401.6b191cac148d7b1e.js","sources":["webpack://@mdn/fred/./components/observatory/constants.js"],"sourcesContent":["export const OBSERVATORY_API_URL = \"https://observatory-api.mdn.mozilla.net\";\n\n/**\n * Scoring table for Observatory grades\n * @type {Array<{grade: string, scoreText: string, score: number, stars?: boolean}>}\n */\nconst SCORING_TABLE = [\n  { grade: \"A+\", scoreText: \"100+\", score: 100, stars: true },\n  { grade: \"A\", scoreText: \"90\", score: 90, stars: true },\n  { grade: \"A-\", scoreText: \"85\", score: 85, stars: true },\n  { grade: \"B+\", scoreText: \"80\", score: 80 },\n  { grade: \"B\", scoreText: \"70\", score: 70 },\n  { grade: \"B-\", scoreText: \"65\", score: 65 },\n  { grade: \"C+\", scoreText: \"60\", score: 60 },\n  { grade: \"C\", scoreText: \"50\", score: 50 },\n  { grade: \"C-\", scoreText: \"45\", score: 45 },\n  { grade: \"D+\", scoreText: \"40\", score: 40 },\n  { grade: \"D\", scoreText: \"30\", score: 30 },\n  { grade: \"D-\", scoreText: \"25\", score: 25 },\n  { grade: \"F\", scoreText: \"0\", score: 0 },\n];\n\n/**\n * Maintain consistent test order.\n * @type {string[]}\n */\nconst TEST_NAMES_IN_ORDER = [\n  \"content-security-policy\",\n  \"cookies\",\n  \"cross-origin-resource-sharing\",\n  \"redirection\",\n  \"referrer-policy\",\n  \"strict-transport-security\",\n  \"subresource-integrity\",\n  \"x-content-type-options\",\n  \"x-frame-options\",\n  \"cross-origin-resource-policy\",\n];\n\n// Export the constants\nexport { SCORING_TABLE, TEST_NAMES_IN_ORDER };\n"],"names":[],"mappings":"kIAAO,IAAM,EAAsB,0CAM7B,EAAgB,CACpB,CAAE,MAAO,KAAM,UAAW,OAAQ,MAAO,IAAK,MAAO,EAAK,EAC1D,CAAE,MAAO,IAAK,UAAW,KAAM,MAAO,GAAI,MAAO,EAAK,EACtD,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,GAAI,MAAO,EAAK,EACvD,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,EAAG,EAC1C,CAAE,MAAO,IAAK,UAAW,KAAM,MAAO,EAAG,EACzC,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,EAAG,EAC1C,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,EAAG,EAC1C,CAAE,MAAO,IAAK,UAAW,KAAM,MAAO,EAAG,EACzC,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,EAAG,EAC1C,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,EAAG,EAC1C,CAAE,MAAO,IAAK,UAAW,KAAM,MAAO,EAAG,EACzC,CAAE,MAAO,KAAM,UAAW,KAAM,MAAO,EAAG,EAC1C,CAAE,MAAO,IAAK,UAAW,IAAK,MAAO,CAAE,EACxC,CAMK,EAAsB,CAC1B,0BACA,UACA,gCACA,cACA,kBACA,4BACA,wBACA,yBACA,kBACA,+BACD,A"}

package/dist/client/5531.3f07c9b4290520c7.js

@@ -0,0 +1,387 @@
+export const __webpack_ids__=["5531"];export const __webpack_modules__={80478:function(t,e,a){a.r(e),a.d(e,{MDNObservatoryResults:()=>MDNObservatoryResults});var s=a(35470),r=a(14703),o=a(66176),i=a(57964),l=a(28110);let n=(0,r.YP)`<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 22 22"><path fill="#DFD172" d="m18 0-1.26 2.75L14 4l2.74 1.26L18 8l1.25-2.74L22 4l-2.75-1.25M8 3 5.5 8.5 0 11l5.5 2.5L8 19l2.5-5.5L16 11l-5.5-2.5M18 14l-1.26 2.74L14 18l2.74 1.25L18 22l1.25-2.75L22 18l-2.75-1.26"/></svg>`,d=(0,r.YP)`<svg width="22" height="22" class="arrow" viewBox="0 0 22 22"><path d="M12.124 1.733a1 1 0 0 1 1.673 0l8.811 13.423a1 1 0 0 1-.835 1.548l-17.614.007a1 1 0 0 1-.837-1.548Z"/></svg>`;a(90811);let c=["unsafeInline","unsafeEval","unsafeObjects","unsafeInlineStyle","insecureSchemeActive","insecureSchemePassive","antiClickjacking","defaultNone","insecureBaseUri","insecureFormAction","strictDynamic"],b=new Set(["insecureBaseUri","insecureFormAction","insecureSchemeActive","insecureSchemePassive","unsafeEval","unsafeInline","unsafeInlineStyle","unsafeObjects"]);a(55072),a(42678),a(93305),a(32570);let MDNObservatoryResults=class MDNObservatoryResults extends r.oi{static styles=i.Z;constructor(){super(),this.host=null,this.selectedTab=0,this._usePostInApi=!1}static properties={host:{type:String},selectedTab:{state:!0,type:Number},_usePostInApi:{state:!0,type:Boolean}};_apiTask=new s.iQ(this,{args:()=>[this.host],task:async([t],{signal:e})=>{if(!t)throw Error("No host provided");try{let a=await fetch(`${o._v}/api/v2/analyze?host=${encodeURIComponent(t)}`,{signal:e,method:this._usePostInApi?"POST":"GET"});if(!a.ok){let t=`${a.status}: ${a.statusText}`;try{let e=await a.json();e.error&&(t=e.message)}catch{}throw Error(t)}return await a.json()}catch(t){throw Error("Observatory API request for scan data failed",{cause:t})}}});connectedCallback(){super.connectedCallback(),this._updateSelectedTab=this._updateSelectedTab.bind(this),this.selectedTab=this._getSelectedTab(),globalThis.addEventListener("hashchange",this._updateSelectedTab)}disconnectedCallback(){super.disconnectedCallback(),globalThis.removeEventListener("hashchange",this._updateSelectedTab)}firstUpdated(){let t=new URLSearchParams(globalThis.location.search);this.host=t.get("host")}_updateSelectedTab(){this.selectedTab=this._getSelectedTab()}_getSelectedTab(){let t=["scoring","csp","cookies","headers","history","benchmark"].indexOf(globalThis.location.hash.replace("#",""));return -1===t?0:t}async _rescan(t){t.preventDefault(),this.host&&(this._usePostInApi=!0,this._apiTask.run())}_handleTabSelect(t,e){this.selectedTab=t,globalThis.history.replaceState("","",globalThis.location.pathname+globalThis.location.search+"#"+e)}render(){return this.host?this._apiTask.render({pending:()=>(0,r.dy)` <label class="visually-hidden" for="progress-bar">
+            Rescanning ${this.host} </label
+          ><mdn-progress-bar id="progress-bar"></mdn-progress-bar>`,complete:t=>(0,r.dy)`
+        <section class="summary">
+          ${(function({result:t,host:e,rescan:a}){return(0,r.dy)`
+    <h2 class="summary">
+      Scan summary:
+      <span class="host">${(0,l.Ju)(e,t)}</span>
+    </h2>
+    <section class="scan-result">
+      <section class="grade-trend">
+        <div class="overall">
+          <button
+            popovertarget="grade-popover"
+            aria-label="show info tooltip"
+            class="info-tooltip"
+            tabindex="0"
+          >
+            <div
+              class=${`grade grade-${t.scan.grade?.[0]?.toLowerCase()}`}
+            >
+              ${(0,l.x8)(t.scan.grade)}
+            </div>
+            ${function(t){let e=o.Xu.map(e=>(0,r.dy)`
+      <tr class=${t.scan.grade===e.grade?"current":""}>
+        <td>${(0,l.x8)(e.grade)}</td>
+        <td>
+          ${e.scoreText}
+          ${t.scan.grade===e.grade&&e.stars?n:""}
+        </td>
+      </tr>
+    `);return(0,r.dy)`
+    <span
+      popover
+      id="grade-popover"
+      aria-describedby="grade-table"
+      class="tooltip-popup"
+    >
+      ${d}
+      <table class="grade-tooltip" id="grades-table" role="tooltip">
+        <thead>
+          <tr>
+            <th>Grade</th>
+            <th>Score</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${e}
+        </tbody>
+      </table>
+    </span>
+  `}(t)}
+          </button>
+        </div>
+        ${function({result:t}){switch(function(t){let[e,a]=t.history.length>0?[t.history.at(-2)?.score,t.history.at(-2)?.grade]:[void 0,void 0],s=t.scan.score,r=t.scan.grade;return"number"==typeof s&&"number"==typeof e&&r!==a&&s!==e?e<s?"up":"down":"none"}(t)){case"up":return(0,r.dy)`
+        <div class="trend">
+          <span class="arrow-up" aria-hidden="true"> ↗︎ </span>
+          since last scan
+        </div>
+      `;case"down":return(0,r.dy)`
+        <div class="trend">
+          <span class="arrow-down" aria-hidden="true"> ↘︎ </span>
+          since last scan
+        </div>
+      `;default:return r.Ld}}({result:t})}
+      </section>
+      <section class="data">
+        <div>
+          <a href="/en-US/observatory/docs/tests_and_scoring" target="_blank">
+            <span class="label">Score</span></a
+          >: ${t.scan.score}&thinsp;/&thinsp;100
+        </div>
+        <div>
+          <a href="#history"> <span class="label">Scan Time</span></a
+          >:
+          <mdn-observatory-human-duration
+            .date=${new Date(t.scan.scanned_at)}
+          ></mdn-observatory-human-duration>
+        </div>
+        <a href="/en-US/observatory/docs/tests_and_scoring" target="_blank">
+          <span class="label">Tests Passed</span></a
+        >: ${t.scan.tests_passed}&thinsp;/&thinsp;
+        ${t.scan.tests_quantity}
+      </section>
+      <section class="actions">
+        <mdn-observatory-rescan-button
+          .from=${new Date(t.scan.scanned_at)}
+          .duration=${60}
+          @click=${a}
+        ></mdn-observatory-rescan-button>
+        <div class="scan-another">
+          <a href="/en-US/observatory"> Scan another website </a>
+        </div>
+      </section>
+    </section>
+  `})({result:t,host:this.host||"",rescan:this._rescan})}
+        </section>
+        <section class="results">
+          ${(function({result:t,selectedTab:e=0,onTabSelect:a}){let s=[{label:"Scoring",key:"scoring",element:(0,r.dy)`${function({result:t}){let e=90>=(t.scan.score||0)&&Object.entries(t.tests).find(([t,e])=>e.score_modifier>0);if(0===Object.keys(t.tests).length)return(0,r.dy)`No tests found.`;let a=o.DQ.map(e=>{let a=t.tests[e];return a?(0,r.dy)`
+      <tr>
+        <td data-header="Test">
+          <a
+            href=${a.link}
+            target="_blank"
+            rel="noreferrer"
+            class=${a.link.startsWith("/")?"":"external"}
+          >
+            ${a.title}
+          </a>
+        </td>
+        ${null===a.pass?(0,r.dy)`<td data-header="Score">-</td>`:(0,r.dy)` <td class="score" data-header="Score">
+              <span>
+                <span class="obs-score-value">
+                  ${function({overallScore:t,scoreModifier:e}){let a=t>=90,s=(0,l.x8)(`${e>0?`+${e}`:e}`);return(0,r.dy)`
+    <span class=${!a&&e>0?"not-counted":""}>
+      ${!a&&e>0?(0,r.dy)`0<sup><a href="#bonus-points-explanation">*</a></sup>`:s}
+    </span>
+  `}({overallScore:t.scan.score||0,scoreModifier:a.score_modifier})}
+                </span>
+                ${(0,l.nq)({pass:a.pass})}
+              </span>
+            </td>`}
+        <td data-header="Reason" .innerHTML=${a.score_description}></td>
+        <td
+          data-header="Advice"
+          .innerHTML=${a.recommendation||'<p class="obs-none">None</p>'}
+        ></td>
+      </tr>
+    `:null});return(0,r.dy)`
+    <table class="tests">
+      <thead>
+        <tr>
+          <th>Test</th>
+          <th>Score</th>
+          <th>Reason</th>
+          <th>Recommendation</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${a}
+      </tbody>
+    </table>
+    ${e?(0,r.dy)` <section class="footnote" id="bonus-points-explanation">
+          <sup>*</sup> Normally awards bonus points, however, in this case they
+          are not included in the overall score (
+          <a href="/en-US/observatory/docs/tests_and_scoring" target="_blank">
+            find out why
+          </a>
+          ).
+        </section>`:null}
+  `}({result:t})}`},{label:"CSP analysis",key:"csp",element:(0,r.dy)`${function({result:t}){let e=t.tests["content-security-policy"]?.policy,a=t.tests["content-security-policy"]?.pass||!1;if(!e)return t.tests["content-security-policy"]?.result==="csp-not-implemented-but-reporting-enabled"?(0,r.dy)`
+        <table class="csp">
+          <tbody>
+            <tr>
+              <td>
+                <p>
+                  <code>Content-Security-Policy-Report-Only</code> header
+                  detected. Implement an enforced policy; see
+                  <a href="/en-US/docs/Web/HTTP/CSP" target="_blank">
+                    MDN's Content Security Policy (CSP) documentation </a
+                  >.
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      `:(0,r.dy)`
+      <table class="csp">
+        <tbody>
+          <tr>
+            <td>
+              <p>No CSP headers detected</p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `;let s=c.map(t=>{if(!e[t])return null;let a=e[t];return(0,r.dy)`
+      <tr>
+        <td data-header="Test" .innerHTML=${a.description}></td>
+        <td data-header="Pass">
+          ${(0,l.nq)({pass:b.has(t)?!a.pass:a.pass})}
+        </td>
+        <td data-header="Info" .innerHTML=${a.info}></td>
+      </tr>
+    `});return(0,r.dy)`
+    <div class="detail-header">
+      <p class="arrow">${(0,l.nq)({pass:a})}</p>
+      <div
+        class="detail-header-content"
+        .innerHTML=${t.tests["content-security-policy"]?.score_description??'<p class="obs-none">None</p>'}
+      ></div>
+    </div>
+
+    <table class="csp">
+      <thead>
+        <tr>
+          <th>Test</th>
+          <th>Result</th>
+          <th>Info</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${s}
+      </tbody>
+    </table>
+  `}({result:t})}`},{label:"Cookies",key:"cookies",element:(0,r.dy)`${function({result:t}){let e=t.tests.cookies?.data,a=t.tests.cookies?.pass;if(!e||0===Object.keys(e).length)return(0,r.dy)`
+      <table class="cookies">
+        <tbody>
+          <tr>
+            <td>No cookies detected</td>
+          </tr>
+        </tbody>
+      </table>
+    `;let s=Object.entries(e).map(([t,e])=>(0,r.dy)`
+      <tr>
+        <td data-header="Name" class="cookie-name">${t}</td>
+        <td data-header="Expires">
+          ${e.expires?(0,l.EK)({expires:e.expires}):"Session"}
+        </td>
+        <td data-header="Path">
+          <code>${e.path}</code>
+        </td>
+        <td data-header="Secure">${(0,l.nq)({pass:e.secure})}</td>
+        <td data-header="HttpOnly">${(0,l.nq)({pass:e.httponly})}</td>
+        <td data-header="SameSite">
+          ${e.samesite?(0,r.dy)`<code>${(0,l.M2)(e.samesite)}</code>`:"-"}
+        </td>
+        <td data-header="Prefixed">${(0,l.Tv)({cookieName:t})}</td>
+      </tr>
+    `);return(0,r.dy)`
+    <div class="detail-header">
+      <p class="arrow">
+        ${(0,l.nq)({pass:void 0===a?null:a})}
+      </p>
+      <div
+        class="detail-header-content"
+        .innerHTML=${t.tests.cookies?.score_description??'<p class="obs-none">None</p>'}
+      ></div>
+    </div>
+    <table class="cookies">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#expires"
+              >Expires</a
+            >
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#path"
+              >Path</a
+            >
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#secure"
+              >Secure</a
+            >
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#httponly"
+              >HttpOnly</a
+            >
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#samesite"
+              >SameSite</a
+            >
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name"
+              >Prefix</a
+            >
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        ${s}
+      </tbody>
+    </table>
+  `}({result:t})}`},{label:"Raw server headers",key:"headers",element:(0,r.dy)`${function({result:t}){if(!t.scan.response_headers)return(0,r.dy)`
+      <table class="headers">
+        <tbody>
+          <tr>
+            <td>No headers detected</td>
+          </tr>
+        </tbody>
+      </table>
+    `;let e=Object.entries(t.scan.response_headers).map(([t,e])=>(0,r.dy)`
+      <tr>
+        <td data-header="Header">
+          <mdn-observatory-header-link header=${t}>
+            ${(0,l.bU)(t)}
+          </mdn-observatory-header-link>
+        </td>
+        <td data-header="Value">${e}</td>
+      </tr>
+    `);return(0,r.dy)`
+    <table class="headers">
+      <thead>
+        <tr>
+          <th>Header</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${e}
+      </tbody>
+    </table>
+  `}({result:t})}`},{label:"Scan history",key:"history",element:(0,r.dy)`${function({result:t}){if(0===t.history.length)return r.Ld;let e=[...t.history].reverse().map(({scanned_at:t,score:e,grade:a})=>(0,r.dy)`
+      <tr>
+        <td data-header="Date">${(0,l.o0)(new Date(t))}</td>
+        <td data-header="Score">${e}</td>
+        <td data-header="Grade">${(0,l.x8)(a)}</td>
+      </tr>
+    `);return(0,r.dy)`
+    <h2>Changes in score over time</h2>
+    <table class="history">
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Score</th>
+          <th>Grade</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${e}
+      </tbody>
+    </table>
+  `}({result:t})}`},{label:"Benchmark comparison",key:"benchmark",element:(0,r.dy)`${function({result:t}){return(0,r.dy)`
+    <h2>Performance trends from the past year</h2>
+    <mdn-observatory-comparison-table
+      .result=${t}
+    ></mdn-observatory-comparison-table>
+    <p>
+      Refer to this graph to assess the website's current status. By following
+      the recommendations provided and rescanning, you can expect an improvement
+      in the website's grade.
+    </p>
+  `}({result:t})}`}].map((t,s)=>(0,r.dy)`
+      <li id="tabs-${s}" class="tabs-list-item">
+        <input
+          class="visually-hidden"
+          id="tab-${s}"
+          name="selected"
+          type="radio"
+          role="tab"
+          .checked=${s===e}
+          aria-controls="tab-container-${s}"
+          @change=${()=>a(s,t.key)}
+        />
+        <label for="tab-${s}" id="tab-label-${s}">${t.label}</label>
+        <section
+          class="tab-content"
+          role="tabpanel"
+          aria-labelledby="tab-label-${s}"
+          id="tab-container-${s}"
+        >
+          <div class="scroll-container">${t.element}</div>
+        </section>
+      </li>
+    `);return(0,r.dy)`
+    <section class="scan-results">
+      <h2 class="result" id="scan-results-header">Scan results</h2>
+      <ol
+        class="tabs-list"
+        role="tablist"
+        aria-labelledby="scan-results-header"
+      >
+        ${s}
+      </ol>
+    </section>
+  `})({result:t,selectedTab:this.selectedTab,onTabSelect:(t,e)=>this._handleTabSelect(t,e)})}
+        </section>
+      </div>`,error:t=>(0,r.dy)`<div class="error">${t}</div>`}):r.Ld}};customElements.define("mdn-observatory-results",MDNObservatoryResults)},57964:function(t,e,a){a.d(e,{Z:()=>b});var s=a(14703),r=a(8081),o=a.n(r),i=a(23645),l=a.n(i),n=a(62249),d=a(56718),c=l()(o());c.i(n.Z),c.i(d.Z),c.push([t.id,'.scan-result{background-color:var(--color-background-primary);border-radius:var(--border-radius);column-gap:var(--spacing);display:grid;grid-template-areas:"grade data actions";grid-template-columns:auto 3fr 1fr;justify-content:space-between;margin-bottom:3rem;max-width:var(--max-width);padding:var(--spacing)}@media (max-width:1200px){.scan-result{align-items:flex-start;grid-template-areas:"grade data actions";grid-template-columns:auto 1fr auto;justify-content:space-between;row-gap:calc(var(--spacing)/2)}}@media (max-width:992px){.scan-result{grid-template-areas:"grade data   " ".     actions";grid-template-columns:min-content 1fr}}:host{line-height:var(--font-line-content)}.trend{margin-top:1rem}.arrow-down{color:var(--observatory-arrow-down-color)}.arrow-up{color:var(--observatory-arrow-up-color)}h2{font-size:1.375rem;font-weight:600;margin-bottom:1rem;margin-top:1.5rem}h2:before{background-color:var(--color-text-primary);content:"";display:inline-block;-webkit-mask-position:left;mask-position:left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}h2 .host{font-weight:400}h2.summary:before{height:1.4rem;-webkit-mask-image:var(--summary-icon);mask-image:var(--summary-icon);width:2rem}h2.result:before{height:1.2rem;-webkit-mask-image:var(--results-icon);mask-image:var(--results-icon);width:2rem}code{font-weight:600}.grade-trend{grid-area:grade;justify-self:start}.data{grid-area:data}.actions{grid-area:actions}mdn-observatory-rescan-button{min-width:30rem}.info-tooltip{background:none;border:none;cursor:pointer;display:inline-block;position:relative}.scan-another{font-size:var(--font-size-small);font-weight:400;margin-top:1.2rem}.label{font-weight:600}a{color:var(--color-text-primary);-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--color-text-secondary)}.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:1.7rem;font-weight:600;height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.tooltip-popup{--tooltip-offset:-6.3rem;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle--0,#b3b3b3);--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle--1,#fff);--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle--2,#1b1b1b);background-color:var(--color-bg-tooltip);border-radius:var(--border-radius);border-width:0;color:var(--color-tooltip);inset:unset;line-height:var(--font-line-content);margin-top:.5rem;max-width:min(100vw,20rem);overflow:visible;padding:1.5rem;position:relative;text-align:center;transform:translateX(var(--tooltip-offset));width:max-content;z-index:1}@supports (color:light-dark(red,red)){.tooltip-popup{--color-tooltip:light-dark(#b3b3b3,#696969);--color-tooltip-highlight:light-dark(#fff,#1b1b1b);--color-bg-tooltip:light-dark(#1b1b1b,#fff)}}@supports not (color:light-dark(tan,tan)){.tooltip-popup *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle--0,#b3b3b3);--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle--1,#fff);--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle--2,#1b1b1b)}}.tooltip-popup .arrow{margin-left:-1rem;margin-top:-2rem;padding:0;position:absolute;fill:var(--color-bg-tooltip)}.tooltip-popup table{border:0;border-collapse:collapse;white-space:nowrap;width:10rem}:is(.tooltip-popup table) tr{color:var(--color-tooltip);font-size:.875rem}.current:is(:is(.tooltip-popup table) tr){color:var(--color-tooltip-highlight)}:is(.tooltip-popup table) td,:is(.tooltip-popup table) th{background-color:unset;border:0;font-weight:var(--font-body);text-align:left;width:50%}:is(.tooltip-popup table) th{font-size:1rem;padding:0 0 .75rem}:is(.tooltip-popup table) td{padding:0}:is(:is(.tooltip-popup table) td) svg{vertical-align:-.3rem}.scroll-container{margin-bottom:1.5rem;margin-top:.8rem;overflow-x:auto;overscroll-behavior-x:none}.detail-header{display:flex;gap:.5rem;padding:0 1.5rem 0 0}.detail-header .arrow{color:var(--color-text-secondary)}.detail-header .detail-header-title{font-weight:600;padding-right:.2rem}.detail-header p{margin:1rem 0}:is(.obs-pass-icon svg.pass) path{fill:var(--observatory-pass-icon-bg)}:is(.obs-pass-icon svg.pass) circle{fill:var(--observatory-pass-icon-color)}:is(.obs-pass-icon svg.fail) path{fill:var(--observatory-fail-icon-bg)}:is(.obs-pass-icon svg.fail) circle{fill:var(--observatory-fail-icon-color)}.footnote{font-size:var(--type-smaller-font-size);margin-top:1rem}.scan-results table{background:var(--observatory-table-bg);border:none;border-collapse:collapse;min-width:calc(992px - 14rem);width:100%}:is(.scan-results table) th{background:var(--observatory-table-header-bg);color:var(--color-text-secondary);font-weight:500;vertical-align:top}:is(:is(.scan-results table) th) tr{background-color:unset}:is(.scan-results table) tr:nth-child(2n){background-color:var(--observatory-table-bg-alternate)}:is(.scan-results table) td{overflow-wrap:anywhere;padding:.5rem 1.5rem;vertical-align:top}.cookie-name:is(:is(.scan-results table) td):first-child{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score:is(:is(.scan-results table) td)>span{display:flex;flex-direction:row;justify-content:space-between}:is(.scan-results table) a{color:var(--color-text-primary);-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--color-text-secondary)}:is(:is(.scan-results table) a):active,:is(:is(.scan-results table) a):hover{-webkit-text-decoration:none;text-decoration:none}:is(.scan-results table) span.not-counted{color:var(--color-text-secondary)}:is(:is(.scan-results table) span.not-counted) a{-webkit-text-decoration:none;text-decoration:none}:is(.tests:is(.scan-results table) th,.tests:is(.scan-results table) td):first-of-type{width:25%}.tests:is(.scan-results table) td.score{white-space:nowrap}:is(.csp:is(.scan-results table) th,.csp:is(.scan-results table) td):first-of-type{width:45%}:is(.headers:is(.scan-results table) th,.headers:is(.scan-results table) td):first-of-type{width:30%}:is(.cookies:is(.scan-results table) th,.cookies:is(.scan-results table) td):nth-of-type(n+3){text-align:center}:is(.scan-results table) td,:is(.scan-results table) th{border:none;padding:1.5rem}:is(:is(.scan-results table) th,:is(.scan-results table) td) :first-child{margin-top:0}:is(:is(.scan-results table) th,:is(.scan-results table) td) :last-child{margin-bottom:0}:is(.scan-results table) .icon{height:1.3rem;width:1.3rem}@media (max-width:426px){:is(:is(:is(.scan-results table) td) .iso-date) code{font-size:x-small}}@media (max-width:992px){.scan-results table{min-width:0}:is(.scan-results table) thead{display:none}:is(.scan-results table) tbody{display:block}:is(.scan-results table) tr{display:grid;grid-template-columns:max-content auto}:is(.scan-results table) tr:nth-of-type(odd){background:var(--observatory-table-header-bg)}:is(.scan-results table) td{column-gap:2em;display:grid;grid-auto-flow:column;grid-column:span 2;grid-template-columns:subgrid}:is(:is(.scan-results table) td) .humanized-duration{display:none}:is(.scan-results table) td:before{content:attr(data-header);display:inline;font-weight:600}:is(.tests:is(.scan-results table),.csp:is(.scan-results table),.headers:is(.scan-results table),.cookies:is(.scan-results table)) td:first-of-type{width:auto}:is(.scan-results table) td:not(:last-of-type){padding-bottom:0}:is(.scan-results table) td:nth-of-type(n+2){padding-top:.75rem}.cookies:is(.scan-results table) td:nth-of-type(n+3){text-align:left}:is(.scan-results table) td.score{display:grid}:is(:is(.scan-results table) td.score)>span{display:block}:is(:is(.scan-results table) td.score) .obs-pass-icon{display:inline-block;height:1.5em;vertical-align:top}}ol.tabs-list{column-gap:3rem;display:grid;grid-template-areas:"tab-0 tab-1 tab-2 tab-3 tab-4 tab-5 ." "hr    hr    hr    hr    hr    hr    hr " "mod   mod   mod   mod   mod   mod   mod";grid-template-columns:repeat(6,max-content) 1fr;margin:0;overflow-x:auto;overscroll-behavior-x:none;padding:0}@media (max-width:992px){ol.tabs-list{column-gap:1.75rem;grid-template-columns:repeat(6,max-content) auto}}ol.tabs-list:before{border:none;border-top:1px solid var(--color-border-primary);content:"";grid-area:hr;margin:0;width:100%}ol.tabs-list input[type=radio]:not(:checked)~.tab-content{display:none}ol.tabs-list li.tabs-list-item{display:contents}:is(ol.tabs-list li.tabs-list-item)>input:checked+label{border-bottom:2px solid var(--observatory-accent);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label:hover{border-bottom:2px solid var(--observatory-accent-light);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:checked:focus-visible+label{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label{color:var(--color-text-secondary);opacity:.775}:is(ol.tabs-list li.tabs-list-item)>label{cursor:pointer;height:2.2rem;width:max-content}#tabs-0:is(ol.tabs-list li.tabs-list-item)>input,#tabs-0:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-0}#tabs-1:is(ol.tabs-list li.tabs-list-item)>input,#tabs-1:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-1}#tabs-2:is(ol.tabs-list li.tabs-list-item)>input,#tabs-2:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-2}#tabs-3:is(ol.tabs-list li.tabs-list-item)>input,#tabs-3:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-3}#tabs-4:is(ol.tabs-list li.tabs-list-item)>input,#tabs-4:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-4}#tabs-5:is(ol.tabs-list li.tabs-list-item)>input,#tabs-5:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-5}:is(ol.tabs-list li.tabs-list-item)>section.tab-content{grid-area:mod;left:0;margin:0;position:sticky}@media (max-width:992px){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:calc(100vw - 15rem)}}@media (max-width:769px){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:calc(100vw - 2rem)}}',""]);let b=(0,s.iv)([c.toString()])}};
+//# sourceMappingURL=5531.3f07c9b4290520c7.js.map