@mdn/fred 0.1.0 → 0.2.0

package/dist/client/4036.4aa9a690073ccbac.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"4036.4aa9a690073ccbac.js","sources":["webpack://@mdn/fred/./components/live-sample-result/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js","webpack://@mdn/fred/./components/live-sample-result/element.css"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\";\n\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../play-runner/element.js\";\nimport \"../button/element.js\";\n\nexport class MDNLiveSampleResult extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    liveId: { attribute: \"live-id\" },\n    code: { type: Object },\n    allowed: {},\n    sandbox: {},\n    srcPrefix: { attribute: \"src-prefix\" },\n    height: {},\n    breakoutLink: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {string | undefined} */\n    this.liveId = undefined;\n    /** @type {Record<string, string> | undefined} */\n    this.code = undefined;\n    /** @type {string | undefined} */\n    this.allow = undefined;\n    /** @type {string | undefined} */\n    this.sandbox = undefined;\n    /** @type {string | undefined} */\n    this.srcPrefix = undefined;\n    /** @type {string | undefined} */\n    this.height = undefined;\n    /** @type {string | undefined} */\n    this.breakoutLink = undefined;\n  }\n\n  _openFullscreen(replace = false) {\n    if (this._runnerSrc) {\n      if (replace || this._fullscreenReplace) {\n        location.replace(this._runnerSrc);\n      } else {\n        location.href = this._runnerSrc;\n      }\n    } else {\n      this._fullscreenPending = true;\n      if (replace) {\n        this._fullscreenReplace = true;\n      }\n    }\n  }\n\n  /** @param {MouseEvent} event */\n  _fullscreenClick(event) {\n    if (\n      this.liveId &&\n      event.target instanceof HTMLAnchorElement &&\n      event.target.hash === `#livesample_fullscreen=${this.liveId}`\n    ) {\n      event.preventDefault();\n      this._openFullscreen();\n    }\n  }\n\n  /** @param {CustomEvent<string>} event */\n  _runnerSrcUpdated({ detail }) {\n    this._runnerSrc = detail;\n    if (this._fullscreenPending) {\n      this._openFullscreen();\n    }\n    const playUrl = new URL(\"/en-US/play\", location.href);\n    playUrl.search = new URL(this._runnerSrc).search;\n    if (this.srcPrefix)\n      playUrl.searchParams.append(\"srcPrefix\", this.srcPrefix);\n    this.breakoutLink = playUrl.href;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._fullscreenClick = this._fullscreenClick.bind(this);\n    document.addEventListener(\"click\", this._fullscreenClick);\n    if (location.hash === `#livesample_fullscreen=${this.liveId}`) {\n      this._openFullscreen();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"code-example\">\n        <div class=\"example-header\">\n          ${this.breakoutLink\n            ? html`<mdn-button\n                variant=\"secondary\"\n                href=${this.breakoutLink}\n                target=\"_blank\"\n                rel=\"opener\"\n                >${this.l10n`Play`}</mdn-button\n              >`\n            : nothing}\n        </div>\n        <mdn-play-runner\n          @mdn-play-runner-src=${this._runnerSrcUpdated}\n          .code=${this.code}\n          .allow=${this.allow}\n          .sandbox=${this.sandbox}\n          .srcPrefix=${this.srcPrefix}\n          style=${styleMap({\n            height: this.height\n              ? `${this.height}${/[0-9]$/.test(this.height) ? \"px\" : \"\"}`\n              : undefined,\n          })}\n        ></mdn-play-runner>\n      </div>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._fullscreenClick);\n  }\n}\n\ncustomElements.define(\"mdn-live-sample-result\", MDNLiveSampleResult);\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]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../code-example/common.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___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.code-example .example-header{justify-content:end;padding-right:.5rem}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNLiveSampleResult","Object","location","e","HTMLAnchorElement","URL","document","customElements"],"mappings":"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"}

package/dist/client/4045.ec4c143648ab2280.js

@@ -0,0 +1,8 @@
+/*! For license information please see 4045.ec4c143648ab2280.js.LICENSE.txt */
+export const __webpack_ids__=["4045"];export const __webpack_modules__={90811:function(t,e,n){n.r(e),n.d(e,{MDNObservatoryRescanButton:()=>MDNObservatoryRescanButton});var i=n(14703);n(50272);var a=n(69535),r=n(29892);let MDNObservatoryRescanButton=class MDNObservatoryRescanButton extends(0,a.q)(i.oi){static styles=r.Z;static properties={from:{type:Object},duration:{type:Number},_remainingTime:{state:!0}};constructor(){super(),this.from=new Date,this.duration=60,this._remainingTime=0,this._interval=null}connectedCallback(){super.connectedCallback(),this._remainingTime=this._calculateRemainingTime(),this._interval=setInterval(()=>{this._remainingTime=this._calculateRemainingTime()},1e3)}disconnectedCallback(){super.disconnectedCallback(),this._interval&&(clearInterval(this._interval),this._interval=null)}_calculateRemainingTime(){return Math.max(0,this.from.getTime()+1e3*this.duration-Date.now())}_icon(t){return(0,i.dy)`<span
+      class="progress"
+      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, ${t}%, rgba(0,0,0,0) ${t}% 100%)"
+    ></span>`}render(){let t=this._remainingTime<=0,e=Math.floor(this._remainingTime/1e3)+1;return t?(0,i.dy)`<mdn-button>${this.l10n`Rescan`}</mdn-button>`:(0,i.dy)` <mdn-button disabled .icon=${this._icon(100*e/60)}
+          >${this.l10n`Wait a minute to rescan`}</mdn-button
+        >`}};customElements.define("mdn-observatory-rescan-button",MDNObservatoryRescanButton)},13566:function(t,e,n){n.d(e,{o:()=>a});var i=n(32529);let a=t=>t??i.Ld},29892:function(t,e,n){n.d(e,{Z:()=>d});var i=n(14703),a=n(8081),r=n.n(a),s=n(23645),o=n.n(s),c=n(54681),l=o()(r());l.i(c.Z),l.push([t.id,"",""]);let d=(0,i.iv)([l.toString()])}};
+//# sourceMappingURL=4045.ec4c143648ab2280.js.map

package/dist/client/4045.ec4c143648ab2280.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"4045.ec4c143648ab2280.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.Timer | 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]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../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,0GCAd,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/dist/client/4531.5f4701b319065b2b.js

@@ -0,0 +1,34 @@
+/*! For license information please see 4531.5f4701b319065b2b.js.LICENSE.txt */
+export const __webpack_ids__=["4531"];export const __webpack_modules__={54681:function(r,o,t){t.d(o,{Z:()=>n});var e=t(8081),a=t.n(e),i=t(23645),s=t.n(i)()(a());s.push([r.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let n=s.toString()},62249:function(r,o,t){t.d(o,{Z:()=>n});var e=t(8081),a=t.n(e),i=t(23645),s=t.n(i)()(a());s.push([r.id,".visually-hidden{border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}",""]);let n=s.toString()},14793:function(r,o,t){t.r(o),t.d(o,{MDNObservatoryForm:()=>MDNObservatoryForm});var e=t(14703),a=t(51968);t(42678),t(50272);var i=t(81008);let s={TypeError:"Observatory is currently down."};let MDNObservatoryForm=class MDNObservatoryForm extends e.oi{static styles=i.Z;static properties={_queryRunning:{type:Boolean,state:!0},_hostname:{type:String,state:!0},_errorMessage:{type:String,state:!0}};constructor(){super(),this._queryRunning=!1,this._hostname="",this._errorMessage=""}inputRef=(0,a.V)();firstUpdated(){this.inputRef.value?.focus()}async _handleSubmit(r){r.preventDefault(),this._errorMessage="";let o=this.inputRef.value;if(!o?.value.trim()){this._errorMessage="Please enter a valid hostname";return}let t=o.value.trim();try{let r=new URL(t);this._hostname=r.hostname.trim()||t}catch{this._hostname=t}this._queryRunning=!0;try{let r=`https://observatory-api.mdn.mozilla.net/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`,o=await fetch(r,{method:"POST"});if(!o.ok){let r=await o.json();throw Error(`Request failed: ${r.message}`)}globalThis.location.href=`/en-US/observatory/analyze?host=${encodeURIComponent(this._hostname)}`}catch(r){this._errorMessage=`${s[r.name]||"message"in r?r.message:r}`}finally{this._queryRunning=!1}}render(){return this._queryRunning?(0,e.dy)`
+          <label class="visually-hidden" for="progress-bar">
+            Scanning ${this._hostname} </label
+          ><mdn-progress-bar id="progress-bar"></mdn-progress-bar>
+        `:(0,e.dy)`
+          <form @submit=${this._handleSubmit} class="observatory-form">
+            <div class="observatory-form__input-group">
+              <label htmlFor="host" class="visually-hidden">
+                Domain name or URL
+              </label>
+              <input
+                class="input observatory-form__input"
+                placeholder="Scan a website for free (e.g. mdn.dev)"
+                type="text"
+                name="host"
+                id="host"
+                .value=${this._hostname}
+                autofocus
+                ${(0,a.i)(this.inputRef)}
+              />
+              <button
+                class="button observatory-form__submit"
+                type="submit"
+                ?disabled=${this._queryRunning}
+                data-variant="primary"
+              >
+                Scan
+              </button>
+            </div>
+          </form>
+          ${this._errorMessage?(0,e.dy)`<div class="error">${this._errorMessage}</div>`:e.Ld}
+        `}};customElements.define("mdn-observatory-form",MDNObservatoryForm)},13566:function(r,o,t){t.d(o,{o:()=>a});var e=t(32529);let a=r=>r??e.Ld},81008:function(r,o,t){t.d(o,{Z:()=>u});var e=t(14703),a=t(8081),i=t.n(a),s=t(23645),n=t.n(s),l=t(54681),d=t(56718),m=t(62249),p=n()(i());p.i(l.Z),p.i(d.Z),p.i(m.Z),p.push([r.id,':host{font:400 var(--base-font-size) var(--font-body);--border-radius:0.3rem}.observatory-form__input-group{display:flex;height:3rem}.observatory-form__input-group :focus-visible{outline:1px solid var(--observatory-accent);outline-offset:-1px;outline-width:1px}.observatory-form__input-group ::placeholder{color:var(--color-text-secondary);opacity:.8}.observatory-form__input-group .observatory-form__input{flex-grow:1;font:inherit;padding:0 .75rem;width:100%;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle--0,var(--color-gray-90));border:1px solid var(--color-border-primary);border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}@supports (color:light-dark(red,red)){.observatory-form__input-group .observatory-form__input{background-color:light-dark(var(--color-gray-90),var(--color-gray-05))}}:is(.observatory-form__input-group .observatory-form__input)::placeholder{overflow-x:hidden;text-overflow:ellipsis}.observatory-form__input-group .observatory-form__submit{border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:var(--font-size-normal);font-weight:var(--font-weight-bold);height:unset;padding:0 2rem}.error{color:var(--form-invalid-color);margin-top:.5rem}.error:before{background-color:var(--form-invalid-color);content:"";display:inline-block;height:1.15rem;margin-bottom:.25rem;margin-right:.5rem;-webkit-mask-image:var(--alert-circle-img);mask-image:var(--alert-circle-img);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}',""]);let u=(0,e.iv)([p.toString()])}};
+//# sourceMappingURL=4531.5f4701b319065b2b.js.map

package/dist/client/4531.5f4701b319065b2b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"4531.5f4701b319065b2b.js","sources":["webpack://@mdn/fred/./components/global/global.css?272a","webpack://@mdn/fred/./components/visually-hidden/global.css?9b14","webpack://@mdn/fred/./components/observatory-form/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js","webpack://@mdn/fred/./components/observatory-form/element.css"],"sourcesContent":["// 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, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\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, `.visually-hidden{border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport \"../progress-bar/element.js\";\nimport \"../button/element.js\";\n\nimport styles from \"./element.css?lit\";\n\nconst ERROR_MAP = {\n  TypeError: \"Observatory is currently down.\", // `fetch()` errors catch-all\n};\n\nexport class MDNObservatoryForm extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    _queryRunning: { type: Boolean, state: true },\n    _hostname: { type: String, state: true },\n    _errorMessage: { type: String, state: true },\n  };\n\n  constructor() {\n    super();\n    this._queryRunning = false;\n    this._hostname = \"\";\n    this._errorMessage = \"\";\n  }\n  /** @type {import(\"@lit\").Ref<HTMLInputElement>}  */\n  inputRef = createRef();\n\n  firstUpdated() {\n    this.inputRef.value?.focus();\n  }\n\n  /**\n   * @param {Event} event\n   */\n  async _handleSubmit(event) {\n    event.preventDefault();\n    this._errorMessage = \"\";\n    const input = this.inputRef.value;\n    if (!input?.value.trim()) {\n      this._errorMessage = \"Please enter a valid hostname\";\n      return;\n    }\n\n    const host = input.value.trim();\n    try {\n      // tolerate url-style host values and pick out the hostname part\n      const url = new URL(host);\n      this._hostname = url.hostname.trim() || host;\n    } catch {\n      this._hostname = host;\n    }\n    this._queryRunning = true;\n    try {\n      const apiUrl = `https://observatory-api.mdn.mozilla.net/api/v2/analyze?host=${encodeURIComponent(\n        this._hostname,\n      )}`;\n      const response = await fetch(apiUrl, { method: \"POST\" });\n      if (!response.ok) {\n        const json = await response.json();\n        throw new Error(`Request failed: ${json.message}`);\n      }\n      globalThis.location.href = `/en-US/observatory/analyze?host=${encodeURIComponent(\n        this._hostname,\n      )}`;\n    } catch (error) {\n      // @ts-expect-error\n      this._errorMessage = `${ERROR_MAP[error.name] || \"message\" in error ? error[\"message\"] : error}`;\n    } finally {\n      this._queryRunning = false;\n    }\n  }\n\n  render() {\n    return this._queryRunning\n      ? html`\n          <label class=\"visually-hidden\" for=\"progress-bar\">\n            Scanning ${this._hostname} </label\n          ><mdn-progress-bar id=\"progress-bar\"></mdn-progress-bar>\n        `\n      : html`\n          <form @submit=${this._handleSubmit} class=\"observatory-form\">\n            <div class=\"observatory-form__input-group\">\n              <label htmlFor=\"host\" class=\"visually-hidden\">\n                Domain name or URL\n              </label>\n              <input\n                class=\"input observatory-form__input\"\n                placeholder=\"Scan a website for free (e.g. mdn.dev)\"\n                type=\"text\"\n                name=\"host\"\n                id=\"host\"\n                .value=${this._hostname}\n                autofocus\n                ${ref(this.inputRef)}\n              />\n              <button\n                class=\"button observatory-form__submit\"\n                type=\"submit\"\n                ?disabled=${this._queryRunning}\n                data-variant=\"primary\"\n              >\n                Scan\n              </button>\n            </div>\n          </form>\n          ${this._errorMessage\n            ? html`<div class=\"error\">${this._errorMessage}</div>`\n            : nothing}\n        `;\n  }\n}\n\ncustomElements.define(\"mdn-observatory-form\", MDNObservatoryForm);\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]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../button/server.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_2___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../visually-hidden/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___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{font:400 var(--base-font-size) var(--font-body);--border-radius:0.3rem}.observatory-form__input-group{display:flex;height:3rem}.observatory-form__input-group :focus-visible{outline:1px solid var(--observatory-accent);outline-offset:-1px;outline-width:1px}.observatory-form__input-group ::placeholder{color:var(--color-text-secondary);opacity:.8}.observatory-form__input-group .observatory-form__input{flex-grow:1;font:inherit;padding:0 .75rem;width:100%;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle--0,var(--color-gray-90));border:1px solid var(--color-border-primary);border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}@supports (color:light-dark(red,red)){.observatory-form__input-group .observatory-form__input{background-color:light-dark(var(--color-gray-90),var(--color-gray-05))}}:is(.observatory-form__input-group .observatory-form__input)::placeholder{overflow-x:hidden;text-overflow:ellipsis}.observatory-form__input-group .observatory-form__submit{border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:var(--font-size-normal);font-weight:var(--font-weight-bold);height:unset;padding:0 2rem}.error{color:var(--form-invalid-color);margin-top:.5rem}.error:before{background-color:var(--form-invalid-color);content:\"\";display:inline-block;height:1.15rem;margin-bottom:.25rem;margin-right:.5rem;-webkit-mask-image:var(--alert-circle-img);mask-image:var(--alert-circle-img);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNObservatoryForm","Boolean","String","URL","encodeURIComponent","fetch","Error","globalThis","customElements"],"mappings":";iJAGI,EAA0B,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,0MAA2M,GAAG,EAEvP,MAAe,EAAwB,QAAQ,6ECJ3C,EAA0B,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,iRAAkR,GAAG,EAE9T,MAAe,EAAwB,QAAQ,+ICA/C,IAAM,EAAY,CAChB,UAAW,gCACb,EAEO,IAAMA,mBAAN,MAAMA,2BAA2B,IAAU,CAChD,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,cAAe,CAAE,KAAMC,QAAS,MAAO,EAAK,EAC5C,UAAW,CAAE,KAAMC,OAAQ,MAAO,EAAK,EACvC,cAAe,CAAE,KAAMA,OAAQ,MAAO,EAAK,CAC7C,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,aAAa,CAAG,GACrB,IAAI,CAAC,SAAS,CAAG,GACjB,IAAI,CAAC,aAAa,CAAG,EACvB,CAEA,SAAW,SAAY,AAEvB,eAAe,CACb,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,OACvB,CAKA,MAAM,cAAc,CAAK,CAAE,CACzB,EAAM,cAAc,GACpB,IAAI,CAAC,aAAa,CAAG,GACrB,IAAM,EAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CACjC,GAAI,CAAC,GAAO,MAAM,OAAQ,CACxB,IAAI,CAAC,aAAa,CAAG,gCACrB,MACF,CAEA,IAAM,EAAO,EAAM,KAAK,CAAC,IAAI,GAC7B,GAAI,CAEF,IAAM,EAAM,IAAIC,IAAI,EACpB,KAAI,CAAC,SAAS,CAAG,EAAI,QAAQ,CAAC,IAAI,IAAM,CAC1C,CAAE,KAAM,CACN,IAAI,CAAC,SAAS,CAAG,CACnB,CACA,IAAI,CAAC,aAAa,CAAG,GACrB,GAAI,CACF,IAAM,EAAS,CAAC,4DAA4D,EAAEC,mBAC5E,IAAI,CAAC,SAAS,EACd,CAAC,CACG,EAAW,MAAMC,MAAM,EAAQ,CAAE,OAAQ,MAAO,GACtD,GAAI,CAAC,EAAS,EAAE,CAAE,CAChB,IAAM,EAAO,MAAM,EAAS,IAAI,EAChC,OAAM,AAAIC,MAAM,CAAC,gBAAgB,EAAE,EAAK,OAAO,CAAC,CAAC,CACnD,CACAC,WAAW,QAAQ,CAAC,IAAI,CAAG,CAAC,gCAAgC,EAAEH,mBAC5D,IAAI,CAAC,SAAS,EACd,CAAC,AACL,CAAE,MAAO,EAAO,CAEd,IAAI,CAAC,aAAa,CAAG,CAAC,EAAE,CAAS,CAAC,EAAM,IAAI,CAAC,EAAI,YAAa,EAAQ,EAAM,OAAU,CAAG,EAAM,CAAC,AAClG,QAAU,CACR,IAAI,CAAC,aAAa,CAAG,EACvB,CACF,CAEA,QAAS,CACP,OAAO,IAAI,CAAC,aAAa,CACrB,QAAI,CAAC;;qBAEQ,EAAE,IAAI,CAAC,SAAS,CAAC;;QAE9B,CAAC,CACD,QAAI,CAAC;wBACW,EAAE,IAAI,CAAC,aAAa,CAAC;;;;;;;;;;;uBAWtB,EAAE,IAAI,CAAC,SAAS,CAAC;;gBAExB,EAAE,QAAI,IAAI,CAAC,QAAQ,EAAE;;;;;0BAKX,EAAE,IAAI,CAAC,aAAa,CAAC;;;;;;;UAOrC,EAAE,IAAI,CAAC,aAAa,CAChB,QAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CACpD,IAAO,CAAC;QACd,CAAC,AACP,CACF,EAEAI,eAAe,MAAM,CAAC,uBAAwBR,2EC7G3C,IAAM,EAAE,GAAG,GAAG,IAAC,gICEd,EAA0B,IAA4B,KAC1D,EAAwB,CAAC,CAAC,GAAiC,EAC3D,EAAwB,CAAC,CAAC,GAAiC,EAC3D,EAAwB,CAAC,CAAC,GAAiC,EAE3D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,kvDAAmvD,GAAG,EAE/xD,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG"}

package/dist/client/{476.0de6391161b814ad.js → 476.67faa1bd02f2479c.js}

@@ -1,4 +1,4 @@
-export const __webpack_ids__=["476"];export const __webpack_modules__={32013:function(i,t,e){e.r(t),e.d(t,{MDNSwitch:()=>MDNSwitch});var c=e(14703),s=e(71437);let MDNSwitch=class MDNSwitch extends c.oi{static styles=s.Z;static properties={label:{type:String},checked:{type:Boolean,reflect:!0},disabled:{type:Boolean}};constructor(){super(),this.label="",this.checked=!1,this.disabled=!1}_toggle(){this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}render(){return(0,c.dy)` <label class="switch">
+export const __webpack_ids__=["476"];export const __webpack_modules__={32013:function(i,t,e){e.r(t),e.d(t,{MDNSwitch:()=>MDNSwitch});var s=e(14703),c=e(71437);let MDNSwitch=class MDNSwitch extends s.oi{static styles=c.Z;static properties={label:{type:String},checked:{type:Boolean,reflect:!0},disabled:{type:Boolean}};constructor(){super(),this.label="",this.checked=!1,this.disabled=!1}_toggle(){this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}render(){return(0,s.dy)` <label class="switch">
       <input
         class="switch__input"
         type="checkbox"
@@ -7,5 +7,5 @@ export const __webpack_ids__=["476"];export const __webpack_modules__={32013:fun
         @change=${this._toggle}
       ></input>
       <slot></slot>
-    </label>`}};customElements.define("mdn-switch",MDNSwitch)},71437:function(i,t,e){e.d(t,{Z:()=>r});var c=e(14703),s=e(8081),a=e.n(s),o=e(23645),n=e.n(o)()(a());n.push([i.id,'@property --switch-position{syntax:"<percentage>";inherits:false;initial-value:0}.switch{cursor:pointer;display:flex;gap:.5em;place-items:center}.switch__input{--switch-size:1.25em;appearance:none;background-color:var(--color-text-secondary);background-image:radial-gradient(circle at calc(var(--switch-size)/2),var(--color-background-primary) calc((var(--switch-size)/2)*.8),#0000 calc((var(--switch-size)/2)*.8 + 1px));background-position:var(--switch-position) 0;background-repeat:no-repeat;background-size:var(--switch-size);border-radius:calc(infinity*1px);display:inline-block;height:var(--switch-size);margin:0;transition:--switch-position .2s;width:calc(var(--switch-size)*1.6)}.switch__input:checked{--switch-position:100%;background-color:var(--color-link-normal)}.switch__input:focus-visible{outline:2px solid var(--color-link-normal);outline-offset:2px}.switch__input:active:not(:disabled){filter:brightness(1.2)}.switch__input:disabled{opacity:.7}',""]);let r=(0,c.iv)([n.toString()])}};
-//# sourceMappingURL=476.0de6391161b814ad.js.map
+    </label>`}};customElements.define("mdn-switch",MDNSwitch)},71437:function(i,t,e){e.d(t,{Z:()=>n});var s=e(14703),c=e(8081),a=e.n(c),o=e(23645),r=e.n(o)()(a());r.push([i.id,'@property --switch-position{syntax:"<percentage>";inherits:false;initial-value:0}.switch{cursor:pointer;display:flex;gap:.5em;place-items:center}.switch__input{--switch-size:1.25em;appearance:none;background-color:var(--color-text-secondary);background-image:radial-gradient(circle at calc(var(--switch-size)/2),var(--color-background-primary) calc((var(--switch-size)/2)*.8),#0000 calc((var(--switch-size)/2)*.8 + 1px));background-position:var(--switch-position) 0;background-repeat:no-repeat;background-size:var(--switch-size);border-radius:var(--radius-full);display:inline-block;height:var(--switch-size);margin:0;transition:--switch-position .2s;width:calc(var(--switch-size)*1.6)}.switch__input:checked{--switch-position:100%;background-color:var(--color-link-normal)}.switch__input:focus-visible{outline:2px solid var(--color-link-normal);outline-offset:2px}.switch__input:active:not(:disabled){filter:brightness(1.2)}.switch__input:disabled{opacity:.7}',""]);let n=(0,s.iv)([r.toString()])}};
+//# sourceMappingURL=476.67faa1bd02f2479c.js.map

package/dist/client/{476.0de6391161b814ad.js.map → 476.67faa1bd02f2479c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"476.0de6391161b814ad.js","sources":["webpack://@mdn/fred/./components/switch/element.js","webpack://@mdn/fred/./components/switch/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNSwitch extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    label: { type: String },\n    checked: { type: Boolean, reflect: true },\n    disabled: { type: Boolean },\n  };\n\n  constructor() {\n    super();\n    this.label = \"\";\n    this.checked = false;\n    this.disabled = false;\n  }\n\n  _toggle() {\n    this.dispatchEvent(new Event(\"toggle\", { bubbles: true, composed: true }));\n  }\n\n  render() {\n    return html` <label class=\"switch\">\n      <input\n        class=\"switch__input\"\n        type=\"checkbox\"\n        ?checked=${this.checked}\n        ?disabled=${this.disabled}\n        @change=${this._toggle}\n      ></input>\n      <slot></slot>\n    </label>`;\n  }\n}\n\ncustomElements.define(\"mdn-switch\", MDNSwitch);\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, `@property --switch-position{syntax:\"<percentage>\";inherits:false;initial-value:0}.switch{cursor:pointer;display:flex;gap:.5em;place-items:center}.switch__input{--switch-size:1.25em;appearance:none;background-color:var(--color-text-secondary);background-image:radial-gradient(circle at calc(var(--switch-size)/2),var(--color-background-primary) calc((var(--switch-size)/2)*.8),#0000 calc((var(--switch-size)/2)*.8 + 1px));background-position:var(--switch-position) 0;background-repeat:no-repeat;background-size:var(--switch-size);border-radius:calc(infinity*1px);display:inline-block;height:var(--switch-size);margin:0;transition:--switch-position .2s;width:calc(var(--switch-size)*1.6)}.switch__input:checked{--switch-position:100%;background-color:var(--color-link-normal)}.switch__input:focus-visible{outline:2px solid var(--color-link-normal);outline-offset:2px}.switch__input:active:not(:disabled){filter:brightness(1.2)}.switch__input:disabled{opacity:.7}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNSwitch","s","String","Boolean","Event","customElements","c"],"mappings":"+JAIO,IAAMA,UAAN,MAAMA,kBAAkB,IAAU,CACvC,OAAO,OAASC,EAAA,CAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,MAAO,CAAE,KAAMC,MAAO,EACtB,QAAS,CAAE,KAAMC,QAAS,QAAS,EAAK,EACxC,SAAU,CAAE,KAAMA,OAAQ,CAC5B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,OAAO,CAAG,GACf,IAAI,CAAC,QAAQ,CAAG,EAClB,CAEA,SAAU,CACR,IAAI,CAAC,aAAa,CAAC,IAAIC,MAAM,SAAU,CAAE,QAAS,GAAM,SAAU,EAAK,GACzE,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;;;iBAIC,EAAE,IAAI,CAAC,OAAO,CAAC;kBACd,EAAE,IAAI,CAAC,QAAQ,CAAC;gBAClB,EAAE,IAAI,CAAC,OAAO,CAAC;;;YAGnB,CAAC,AACX,CACF,EAEAC,eAAe,MAAM,CAAC,aAAcL,U,sFClChC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,m8BAAo8B,GAAG,EAEh/B,MAAe,GAAAM,EAAA,IAAI,CAAC,EAAwB,QAAQ,GAAG,C"}
+{"version":3,"file":"476.67faa1bd02f2479c.js","sources":["webpack://@mdn/fred/./components/switch/element.js","webpack://@mdn/fred/./components/switch/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNSwitch extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    label: { type: String },\n    checked: { type: Boolean, reflect: true },\n    disabled: { type: Boolean },\n  };\n\n  constructor() {\n    super();\n    this.label = \"\";\n    this.checked = false;\n    this.disabled = false;\n  }\n\n  _toggle() {\n    this.dispatchEvent(new Event(\"toggle\", { bubbles: true, composed: true }));\n  }\n\n  render() {\n    return html` <label class=\"switch\">\n      <input\n        class=\"switch__input\"\n        type=\"checkbox\"\n        ?checked=${this.checked}\n        ?disabled=${this.disabled}\n        @change=${this._toggle}\n      ></input>\n      <slot></slot>\n    </label>`;\n  }\n}\n\ncustomElements.define(\"mdn-switch\", MDNSwitch);\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, `@property --switch-position{syntax:\"<percentage>\";inherits:false;initial-value:0}.switch{cursor:pointer;display:flex;gap:.5em;place-items:center}.switch__input{--switch-size:1.25em;appearance:none;background-color:var(--color-text-secondary);background-image:radial-gradient(circle at calc(var(--switch-size)/2),var(--color-background-primary) calc((var(--switch-size)/2)*.8),#0000 calc((var(--switch-size)/2)*.8 + 1px));background-position:var(--switch-position) 0;background-repeat:no-repeat;background-size:var(--switch-size);border-radius:var(--radius-full);display:inline-block;height:var(--switch-size);margin:0;transition:--switch-position .2s;width:calc(var(--switch-size)*1.6)}.switch__input:checked{--switch-position:100%;background-color:var(--color-link-normal)}.switch__input:focus-visible{outline:2px solid var(--color-link-normal);outline-offset:2px}.switch__input:active:not(:disabled){filter:brightness(1.2)}.switch__input:disabled{opacity:.7}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNSwitch","String","Boolean","Event","customElements"],"mappings":"+JAIO,IAAMA,UAAN,MAAMA,kBAAkB,IAAU,CACvC,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,MAAO,CAAE,KAAMC,MAAO,EACtB,QAAS,CAAE,KAAMC,QAAS,QAAS,EAAK,EACxC,SAAU,CAAE,KAAMA,OAAQ,CAC5B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,OAAO,CAAG,GACf,IAAI,CAAC,QAAQ,CAAG,EAClB,CAEA,SAAU,CACR,IAAI,CAAC,aAAa,CAAC,IAAIC,MAAM,SAAU,CAAE,QAAS,GAAM,SAAU,EAAK,GACzE,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;;;iBAIC,EAAE,IAAI,CAAC,OAAO,CAAC;kBACd,EAAE,IAAI,CAAC,QAAQ,CAAC;gBAClB,EAAE,IAAI,CAAC,OAAO,CAAC;;;YAGnB,CAAC,AACX,CACF,EAEAC,eAAe,MAAM,CAAC,aAAcJ,U,sFClChC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,m8BAAo8B,GAAG,EAEh/B,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/{4849.4da5f274175b7cc7.js → 4849.2d0d91db57dc6419.js}

@@ -21,5 +21,5 @@ export const __webpack_ids__=["4849"];export const __webpack_modules__={68543:fu
         </a>
         <mdn-placement-note></mdn-placement-note>
       </section>
-    </div>`}};customElements.define("mdn-placement-bottom",MDNPlacementBottom)},49104:function(t,o,e){e.d(o,{Z:()=>m});var a=e(14703),r=e(8081),l=e.n(r),n=e(23645),c=e.n(n)()(l());c.push([t.id,'.bottom-placement{--bottom-background-light:var(--color-background-primary);--bottom-color-light:var(--color-text-primary);--bottom-background-dark:var(--color-background-primary);--bottom-color-dark:var(--color-text-primary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light));background-color:var(--bottom-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.bottom-placement{--bottom-background:light-dark(var(--bottom-background-light),var(--bottom-background-dark));--bottom-color:light-dark(var(--bottom-color-light),var(--bottom-color-dark))}}@supports not (color:light-dark(tan,tan)){.bottom-placement *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light))}}.bottom-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:"nope pong note" "nope pong no";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (max-width:1441px){.bottom-placement .placement-container{grid-template-areas:"pong note" "pong no";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (max-width:769px){.bottom-placement .placement-container{grid-template-areas:"pong" "note";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.bottom-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.bottom-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.bottom-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}',""]);let m=(0,a.iv)([c.toString()])}};
-//# sourceMappingURL=4849.4da5f274175b7cc7.js.map
+    </div>`}};customElements.define("mdn-placement-bottom",MDNPlacementBottom)},49104:function(t,o,e){e.d(o,{Z:()=>m});var a=e(14703),r=e(8081),l=e.n(r),n=e(23645),c=e.n(n)()(l());c.push([t.id,'.bottom-placement{--bottom-background-light:var(--color-background-primary);--bottom-color-light:var(--color-text-primary);--bottom-background-dark:var(--color-background-primary);--bottom-color-dark:var(--color-text-primary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light));background-color:var(--bottom-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.bottom-placement{--bottom-background:light-dark(var(--bottom-background-light),var(--bottom-background-dark));--bottom-color:light-dark(var(--bottom-color-light),var(--bottom-color-dark))}}@supports not (color:light-dark(tan,tan)){.bottom-placement *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light))}}.bottom-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:"nope pong note" "nope pong no";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.bottom-placement .placement-container{grid-template-areas:"pong note" "pong no";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.bottom-placement .placement-container{grid-template-areas:"pong" "note";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.bottom-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.bottom-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.bottom-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}',""]);let m=(0,a.iv)([c.toString()])}};
+//# sourceMappingURL=4849.2d0d91db57dc6419.js.map

package/dist/client/{4849.4da5f274175b7cc7.js.map → 4849.2d0d91db57dc6419.js.map}

@@ -1 +1 @@
-{"version":3,"file":"4849.4da5f274175b7cc7.js","sources":["webpack://@mdn/fred/./components/placement-bottom/element.js","webpack://@mdn/fred/./components/placement-bottom/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 */\n\nexport class MDNPlacementBottom extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const data = placementContext?.hpFooter || placementContext?.bottom;\n    if (!data) {\n      return nothing;\n    }\n    const { status, click, view, image, alt, colors, version } = data;\n    if (status !== \"success\") {\n      return nothing;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const { backgroundColor, textColor } = colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--bottom-background\", backgroundColor],\n        [\"--bottom-color\", textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return html`<div\n      ${ref(this._placementRef)}\n      class=\"bottom-placement\"\n      style=${styleMap(styles)}\n    >\n      <section class=\"placement-container\">\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        >\n          <img\n            src=${this.imgLink(image)}\n            aria-hidden=${!alt}\n            alt=${alt || \"\"}\n            width=\"728\"\n            height=\"90\"\n          />\n        </a>\n        <mdn-placement-note></mdn-placement-note>\n      </section>\n    </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-bottom\", MDNPlacementBottom);\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, `.bottom-placement{--bottom-background-light:var(--color-background-primary);--bottom-color-light:var(--color-text-primary);--bottom-background-dark:var(--color-background-primary);--bottom-color-dark:var(--color-text-primary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light));background-color:var(--bottom-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.bottom-placement{--bottom-background:light-dark(var(--bottom-background-light),var(--bottom-background-dark));--bottom-color:light-dark(var(--bottom-color-light),var(--bottom-color-dark))}}@supports not (color:light-dark(tan,tan)){.bottom-placement *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light))}}.bottom-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:\"nope pong note\" \"nope pong no\";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (max-width:1441px){.bottom-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (max-width:769px){.bottom-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.bottom-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.bottom-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.bottom-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNPlacementBottom","Object","r","customElements"],"mappings":"yOAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,IAAM,EAAO,GAAkB,UAAY,GAAkB,OAC7D,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAO,IAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,iBAAe,CAAE,WAAS,CAAE,CAAG,GAAU,CAAC,EAC5C,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,sBAAuB,EAAgB,CACxC,CAAC,iBAAkB,EAAU,CAC9B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;MACV,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;;;;;;eAMhB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,uBAAwBH,mB,sFCnE1C,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,2mEAA4mE,GAAG,EAExpE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}
+{"version":3,"file":"4849.2d0d91db57dc6419.js","sources":["webpack://@mdn/fred/./components/placement-bottom/element.js","webpack://@mdn/fred/./components/placement-bottom/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 */\n\nexport class MDNPlacementBottom extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const data = placementContext?.hpFooter || placementContext?.bottom;\n    if (!data) {\n      return nothing;\n    }\n    const { status, click, view, image, alt, colors, version } = data;\n    if (status !== \"success\") {\n      return nothing;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const { backgroundColor, textColor } = colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--bottom-background\", backgroundColor],\n        [\"--bottom-color\", textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return html`<div\n      ${ref(this._placementRef)}\n      class=\"bottom-placement\"\n      style=${styleMap(styles)}\n    >\n      <section class=\"placement-container\">\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        >\n          <img\n            src=${this.imgLink(image)}\n            aria-hidden=${!alt}\n            alt=${alt || \"\"}\n            width=\"728\"\n            height=\"90\"\n          />\n        </a>\n        <mdn-placement-note></mdn-placement-note>\n      </section>\n    </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-bottom\", MDNPlacementBottom);\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, `.bottom-placement{--bottom-background-light:var(--color-background-primary);--bottom-color-light:var(--color-text-primary);--bottom-background-dark:var(--color-background-primary);--bottom-color-dark:var(--color-text-primary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light));background-color:var(--bottom-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.bottom-placement{--bottom-background:light-dark(var(--bottom-background-light),var(--bottom-background-dark));--bottom-color:light-dark(var(--bottom-color-light),var(--bottom-color-dark))}}@supports not (color:light-dark(tan,tan)){.bottom-placement *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle--0,var(--bottom-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle--1,var(--bottom-color-light))}}.bottom-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:\"nope pong note\" \"nope pong no\";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.bottom-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.bottom-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.bottom-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.bottom-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.bottom-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNPlacementBottom","Object","r","customElements"],"mappings":"yOAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,IAAM,EAAO,GAAkB,UAAY,GAAkB,OAC7D,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAO,IAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,iBAAe,CAAE,WAAS,CAAE,CAAG,GAAU,CAAC,EAC5C,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,sBAAuB,EAAgB,CACxC,CAAC,iBAAkB,EAAU,CAC9B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;MACV,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;;;;;;eAMhB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,uBAAwBH,mB,sFCnE1C,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,ymEAA0mE,GAAG,EAEtpE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/{5066.31235bae47282d5a.js → 5066.c3b69e4601465269.js}

@@ -1,6 +1,6 @@
-export const __webpack_ids__=["5066"];export const __webpack_modules__={62249:function(r,e,t){t.d(e,{Z:()=>i});var a=t(8081),o=t.n(a),s=t(23645),d=t.n(s)()(o());d.push([r.id,".visually-hidden{border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}",""]);let i=d.toString()},93305:function(r,e,t){t.r(e),t.d(e,{MDNObservatoryComparisonTable:()=>MDNObservatoryComparisonTable});var a=t(35470),o=t(14703),s=t(66176),d=t(28110),i=t(10337);let MDNObservatoryComparisonTable=class MDNObservatoryComparisonTable extends o.oi{static properties={result:{type:Object}};static styles=i.Z;constructor(){super(),this.result=null}_gradeDistributionTask=new a.iQ(this,{task:async()=>{try{let r=new URL(s._v+"/api/v2/grade_distribution"),e=await fetch(r);if(!e.ok){let r=`${e.status}: ${e.statusText}`;try{let t=await e.json();t.error&&(r=t.message)}catch{}throw Error(r)}return await e.json()}catch(r){throw console.log(r),Error("Observatory API request for comparison data failed")}},args:()=>[]});render(){return this.result?this._gradeDistributionTask.render({pending:()=>(0,o.dy)`<progress></progress>`,complete:r=>this.result?function({gradeDistribution:r,result:e}){let t=960/(r.length-1),a=100+t/2,s=function(r){let e=Math.max(...r.map(r=>r.count)),t=l(e,!1),a=l(t/7,!0),o=Math.ceil(Math.ceil(e/a)*a/a)+1,s=[];for(let r=0;r<o;r++)s.push(r*a);return s}(r),i=260/(s.length-1),n=Math.max(...s),g=r.map(r=>(0,o.dy)` <tr>
+export const __webpack_ids__=["5066"];export const __webpack_modules__={62249:function(r,e,t){t.d(e,{Z:()=>d});var a=t(8081),o=t.n(a),s=t(23645),i=t.n(s)()(o());i.push([r.id,".visually-hidden{border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}",""]);let d=i.toString()},93305:function(r,e,t){t.r(e),t.d(e,{MDNObservatoryComparisonTable:()=>MDNObservatoryComparisonTable});var a=t(35470),o=t(14703),s=t(66176),i=t(28110),d=t(10337);let MDNObservatoryComparisonTable=class MDNObservatoryComparisonTable extends o.oi{static properties={result:{type:Object}};static styles=d.Z;constructor(){super(),this.result=null}_gradeDistributionTask=new a.iQ(this,{task:async()=>{try{let r=new URL(s._v+"/api/v2/grade_distribution"),e=await fetch(r);if(!e.ok){let r=`${e.status}: ${e.statusText}`;try{let t=await e.json();t.error&&(r=t.message)}catch{}throw Error(r)}return await e.json()}catch(r){throw console.log(r),Error("Observatory API request for comparison data failed")}},args:()=>[]});render(){return this.result?this._gradeDistributionTask.render({pending:()=>(0,o.dy)`<progress></progress>`,complete:r=>this.result?function({gradeDistribution:r,result:e}){let t=960/(r.length-1),a=100+t/2,s=function(r){let e=Math.max(...r.map(r=>r.count)),t=l(e,!1),a=l(t/7,!0),o=Math.ceil(Math.ceil(e/a)*a/a)+1,s=[];for(let r=0;r<o;r++)s.push(r*a);return s}(r),d=260/(s.length-1),n=Math.max(...s),g=r.map(r=>(0,o.dy)` <tr>
         <th>
-          ${(0,d.x8)(r.grade)}
+          ${(0,i.x8)(r.grade)}
           ${r.grade===e.scan.grade?"(Current grade)":""}
         </th>
         <td>${r.count} sites</td>
@@ -42,19 +42,19 @@ export const __webpack_ids__=["5066"];export const __webpack_modules__={62249:fu
                 dy="1em"
                 class="${["x-labels",r.grade===e.scan.grade?`current grade-${r.grade[0]?.toLowerCase()}`:void 0].filter(Boolean).join(" ")}"
               >
-                ${(0,d.x8)(r.grade)}
+                ${(0,i.x8)(r.grade)}
               </text>
             </g>`)}
         </g>
         <g>
-          ${r.map((r,s)=>{let d=260*(r.count/n);return(0,o.YP)` <rect
+          ${r.map((r,s)=>{let i=260*(r.count/n);return(0,o.YP)` <rect
               class="bar grade-${r.grade.replace(/[+-]/,"").toLowerCase()} ${r.grade===e.scan.grade?"current-grade":""}"
               x="${a+s*t-30}"
-              y="${320-d-1}"
+              y="${320-i-1}"
               rx="4"
               ry="4"
               width="${60}"
-              height="${d}"
+              height="${i}"
             ></rect>`})}
         </g>
         <g
@@ -65,7 +65,7 @@ export const __webpack_ids__=["5066"];export const __webpack_modules__={62249:fu
         >
           ${s.map((r,e)=>(0,o.YP)` <g
               class="tick tick-y"
-              transform="translate(0, ${320-i*e})"
+              transform="translate(0, ${320-d*e})"
             >
               <line
                 stroke="currentColor"
@@ -98,5 +98,5 @@ export const __webpack_ids__=["5066"];export const __webpack_modules__={62249:fu
       </g>
     </svg>
   `}
-  `}({gradeDistribution:r,result:this.result}):o.Ld,error:r=>(0,o.dy)`<div class="error">${r}</div>`}):o.Ld}};function l(r,e){let t=Math.floor(Math.log10(r)),a=r/Math.pow(10,t);return(e?a<1.5?1:a<3?2:a<7?5:10:a<=1?1:a<=2?2:a<=5?5:10)*Math.pow(10,t)}customElements.define("mdn-observatory-comparison-table",MDNObservatoryComparisonTable)},10337:function(r,e,t){t.d(e,{Z:()=>g});var a=t(14703),o=t(8081),s=t.n(o),d=t(23645),i=t.n(d),l=t(62249),n=i()(s());n.i(l.Z),n.push([r.id,".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)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:1rem;font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle--0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:.85rem;font-weight:300;fill:var(--color-text-primary)}",""]);let g=(0,a.iv)([n.toString()])}};
-//# sourceMappingURL=5066.31235bae47282d5a.js.map
+  `}({gradeDistribution:r,result:this.result}):o.Ld,error:r=>(0,o.dy)`<div class="error">${r}</div>`}):o.Ld}};function l(r,e){let t=Math.floor(Math.log10(r)),a=r/Math.pow(10,t);return(e?a<1.5?1:a<3?2:a<7?5:10:a<=1?1:a<=2?2:a<=5?5:10)*Math.pow(10,t)}customElements.define("mdn-observatory-comparison-table",MDNObservatoryComparisonTable)},10337:function(r,e,t){t.d(e,{Z:()=>c});var a=t(14703),o=t(8081),s=t.n(o),i=t(23645),d=t.n(i),l=t(54681),n=t(62249),g=d()(s());g.i(l.Z),g.i(n.Z),g.push([r.id,".grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);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)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:var(--font-size-normal);font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle--0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);fill:var(--color-text-primary)}",""]);let c=(0,a.iv)([g.toString()])}};
+//# sourceMappingURL=5066.c3b69e4601465269.js.map

package/dist/client/{5066.31235bae47282d5a.js.map → 5066.c3b69e4601465269.js.map}

@@ -1 +1 @@
-{"version":3,"file":"5066.31235bae47282d5a.js","sources":["webpack://@mdn/fred/./components/visually-hidden/global.css?9b14","webpack://@mdn/fred/./components/observatory-comparison-table/element.js","webpack://@mdn/fred/./components/observatory-comparison-table/element.css"],"sourcesContent":["// 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, `.visually-hidden{border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing, svg } from \"lit\";\n\nimport { OBSERVATORY_API_URL } from \"../observatory/constants.js\";\nimport { formatMinus } from \"../observatory/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNObservatoryComparisonTable extends LitElement {\n  static properties = {\n    result: { type: Object },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    /** @type {import(\"@observatory\").Result | null} */\n    this.result = null;\n  }\n\n  _gradeDistributionTask = new Task(this, {\n    task: async () => {\n      try {\n        const url = new URL(OBSERVATORY_API_URL + \"/api/v2/grade_distribution\");\n        const res = await fetch(url);\n        if (!res.ok) {\n          let message = `${res.status}: ${res.statusText}`;\n          try {\n            const data = await res.json();\n            if (data.error) {\n              message = data.message;\n            }\n          } catch {\n            // Ignore.\n          }\n          throw new Error(message);\n        }\n        return await res.json();\n      } catch (error) {\n        console.log(error);\n        throw new Error(\"Observatory API request for comparison data failed\");\n      }\n    },\n    args: () => [],\n  });\n\n  render() {\n    if (!this.result) {\n      return nothing;\n    }\n    return this._gradeDistributionTask.render({\n      pending: () => html`<progress></progress>`,\n\n      complete: (gradeDistribution) => {\n        if (!this.result) {\n          return nothing;\n        }\n\n        return GradeSVG({ gradeDistribution, result: this.result });\n      },\n\n      error: (e) => html`<div class=\"error\">${e}</div>`,\n    });\n  }\n}\n\ncustomElements.define(\n  \"mdn-observatory-comparison-table\",\n  MDNObservatoryComparisonTable,\n);\n\n/**\n *\n * @param {{gradeDistribution: import(\"@observatory\").GradeDistribution[], result: import(\"@observatory\").Result}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nfunction GradeSVG({ gradeDistribution, result }) {\n  const width = 1200;\n  const height = 380;\n  const leftSpace = 100; // left edge to left edge of first bar\n  const rightSpace = 80; // right edge to tight edge of last bar\n  const bottomSpace = 60; // bottom edge to bottom edge of bars\n  const topSpace = 60; // top padding\n  const itemCount = gradeDistribution.length;\n  const barWidth = 60;\n\n  // The x-axis has the different grades from \"A+\" to \"D-\".\n  const xTickIncr =\n    (width - leftSpace - rightSpace - barWidth) / (itemCount - 1);\n  const xTickOffset = leftSpace + xTickIncr / 2;\n\n  // The y-axis has ticks according to the maximum value of all grades.\n  const yMarks = calculateTicks(gradeDistribution);\n  const yTickOffset = height - bottomSpace;\n  const yTickIncr = (height - bottomSpace - topSpace) / (yMarks.length - 1);\n  const yTickMax = Math.max(...yMarks);\n\n  const rows = gradeDistribution.map(\n    (item) =>\n      html` <tr>\n        <th>\n          ${formatMinus(item.grade)}\n          ${item.grade === result.scan.grade ? \"(Current grade)\" : \"\"}\n        </th>\n        <td>${item.count} sites</td>\n      </tr>`,\n  );\n\n  return html`\n    <table id=\"grade-svg-a11y-table\" class=\"visually-hidden\">\n      <caption>\n        Number of sites by grade\n      </caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">Grade</th>\n          <th scope=\"col\">Sites</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n    ${svg`\n    <svg\n      class=\"chart\"\n      viewBox=\"0 0 1200 380\"\n      aria-labelledby=\"grade-svg-title\"\n      aria-describedby=\"grade-svg-a11y-table\"\n    >\n      <title id=\"grade-svg-title\">Number of sites by grade</title>\n      <g class=\"axes-g\"> </g>\n        <g\n          class=\"x-axis\"\n          transform=\"translate(${xTickOffset}, ${height - bottomSpace})\"\n        >\n          ${gradeDistribution.map((item, index) => {\n            return svg` <g\n              class=\"tick tick-x\"\n              transform=\"${`translate(${index * xTickIncr}, 0)`}\"\n            >\n              <text\n                fill=\"currentColor\"\n                y=\"6\"\n                dy=\"1em\"\n                class=\"${[\n                  \"x-labels\",\n                  item.grade === result.scan.grade\n                    ? `current grade-${item.grade[0]?.toLowerCase()}`\n                    : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\"\n              >\n                ${formatMinus(item.grade)}\n              </text>\n            </g>`;\n          })}\n        </g>\n        <g>\n          ${gradeDistribution.map((item, index) => {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <rect\n              class=\"bar grade-${item.grade\n                .replace(/[+-]/, \"\")\n                .toLowerCase()} ${\n                item.grade === result.scan.grade ? \"current-grade\" : \"\"\n              }\"\n              x=\"${xTickOffset + index * xTickIncr - barWidth / 2}\"\n              y=\"${yTickOffset - barHeight - 1}\"\n              rx=\"4\"\n              ry=\"4\"\n              width=\"${barWidth}\"\n              height=\"${barHeight}\"\n            ></rect>`;\n          })}\n        </g>\n        <g\n          class=\"y-axis\"\n          fill=\"none\"\n          textAnchor=\"end\"\n          transform=\"translate(${leftSpace}, 0)\"\n        >\n          ${yMarks.map(\n            (item, index) => svg` <g\n              class=\"tick tick-y\"\n              transform=\"translate(0, ${yTickOffset - yTickIncr * index})\"\n            >\n              <line\n                stroke=\"currentColor\"\n                x2=\"${width - leftSpace - rightSpace + barWidth / 2}\"\n              ></line>\n              <text class=\"y-labels\" fill=\"currentColor\" x=\"-25\" dy=\"0.32em\">\n                ${item / 1000}k\n              </text>\n            </g>`,\n          )}\n        </g>\n      </g>\n      <g>\n        ${gradeDistribution.map((item, index) => {\n          if (item.grade === result.scan.grade) {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <g\n              key=\"you-are-here\"\n              class=\"you-are-here\"\n              transform=\"translate(${xTickOffset + index * xTickIncr}, ${\n                height - bottomSpace - barHeight - 50\n              })\"\n            >\n              <polyline\n                points=\"-60,0 60,0 60,36 7,36 0,48 -7,36 -60,36\"\n              ></polyline>\n              <text\n                x=\"0\"\n                y=\"0\"\n                text-anchor=\"middle\"\n                transform=\"translate(0, 24)\"\n              >\n                Current grade\n              </text>\n            </g>`;\n          } else {\n            return [];\n          }\n        })}\n      </g>\n    </svg>\n  `}\n  `;\n}\n\n/**\n * Calculate\n * @param {import(\"@observatory\").GradeDistribution[]} gradeDistribution\n * @returns {number[]}\n */\nfunction calculateTicks(gradeDistribution) {\n  const maxValue = Math.max(...gradeDistribution.map((item) => item.count));\n  const tickTargetCount = 7; // Target number of ticks between 5 and 10\n  const range = rangeForValue(maxValue, false); // Get a nice range\n  const tickInterval = rangeForValue(range / tickTargetCount, true); // Determine a nice tick interval\n  const niceMaxValue = Math.ceil(maxValue / tickInterval) * tickInterval; // Adjust max value to a nice number\n  const tickCount = Math.ceil(niceMaxValue / tickInterval) + 1; // Calculate the number of ticks\n\n  /** @type {number[]} */\n  const ticks = [];\n  for (let i = 0; i < tickCount; i++) {\n    ticks.push(i * tickInterval);\n  }\n  return ticks;\n}\n\n/**\n * This returns values to construct proper axis measurements in\n * diagrams. The returned value is 1|2|5 * 10^x.\n *\n * If `round` is `true`, the returned value can be also rounded down,\n * useful for calculating ticks on an axis.\n *\n * Examples:\n *\n * |range    |rounded=false|rounded=true|\n * |---------|-------------|------------|\n * |  1      |  1          |  1         |\n * |  2      |  2          |  2         |\n * |  3      |  5          |  5         |\n * |  4      |  5          |  5         |\n * |  5      |  5          |  5         |\n * |  6      |  10         |  5         |\n * |  7      |  10         |  10        |\n * |  8      |  10         |  10        |\n * |  9      |  10         |  10        |\n * |  10     |  10         |  10        |\n * |  34     |  50         |  50        |\n * |  450    |  500        |  500       |\n * |  560    |  1000       |  500       |\n * |  6780   |  10000      |  5000      |\n * |  10     |  10         |  10        |\n * |  100    |  100        |  100       |\n * |  1000   |  1000       |  1000      |\n * |  10000  |  10000      |  10000     |\n * @param {number} range The input value\n * @param {boolean} round If false, the returned value will always be greater than `range`, otherwise it can be rounded off\n * @returns {number} a number according to `1|2|5 * 10^x`, where x is derived from `range` to be in the same order of magnitude\n */\n\nfunction rangeForValue(range, round) {\n  const exponent = Math.floor(Math.log10(range));\n  const fraction = range / Math.pow(10, exponent);\n\n  /** @type {number} */\n  let niceFraction;\n  if (round) {\n    if (fraction < 1.5) {\n      niceFraction = 1;\n    } else if (fraction < 3) {\n      niceFraction = 2;\n    } else if (fraction < 7) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  } else {\n    if (fraction <= 1) {\n      niceFraction = 1;\n    } else if (fraction <= 2) {\n      niceFraction = 2;\n    } else if (fraction <= 5) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  }\n  return niceFraction * Math.pow(10, exponent);\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_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../visually-hidden/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, `.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)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:1rem;font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle--0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:.85rem;font-weight:300;fill:var(--color-text-primary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNObservatoryComparisonTable","Object","URL","fetch","Error","console","Math","Boolean","r","customElements"],"mappings":"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"}
+{"version":3,"file":"5066.c3b69e4601465269.js","sources":["webpack://@mdn/fred/./components/visually-hidden/global.css?9b14","webpack://@mdn/fred/./components/observatory-comparison-table/element.js","webpack://@mdn/fred/./components/observatory-comparison-table/element.css"],"sourcesContent":["// 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, `.visually-hidden{border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing, svg } from \"lit\";\n\nimport { OBSERVATORY_API_URL } from \"../observatory/constants.js\";\nimport { formatMinus } from \"../observatory/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNObservatoryComparisonTable extends LitElement {\n  static properties = {\n    result: { type: Object },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    /** @type {import(\"@observatory\").Result | null} */\n    this.result = null;\n  }\n\n  _gradeDistributionTask = new Task(this, {\n    task: async () => {\n      try {\n        const url = new URL(OBSERVATORY_API_URL + \"/api/v2/grade_distribution\");\n        const res = await fetch(url);\n        if (!res.ok) {\n          let message = `${res.status}: ${res.statusText}`;\n          try {\n            const data = await res.json();\n            if (data.error) {\n              message = data.message;\n            }\n          } catch {\n            // Ignore.\n          }\n          throw new Error(message);\n        }\n        return await res.json();\n      } catch (error) {\n        console.log(error);\n        throw new Error(\"Observatory API request for comparison data failed\");\n      }\n    },\n    args: () => [],\n  });\n\n  render() {\n    if (!this.result) {\n      return nothing;\n    }\n    return this._gradeDistributionTask.render({\n      pending: () => html`<progress></progress>`,\n\n      complete: (gradeDistribution) => {\n        if (!this.result) {\n          return nothing;\n        }\n\n        return GradeSVG({ gradeDistribution, result: this.result });\n      },\n\n      error: (e) => html`<div class=\"error\">${e}</div>`,\n    });\n  }\n}\n\ncustomElements.define(\n  \"mdn-observatory-comparison-table\",\n  MDNObservatoryComparisonTable,\n);\n\n/**\n *\n * @param {{gradeDistribution: import(\"@observatory\").GradeDistribution[], result: import(\"@observatory\").Result}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nfunction GradeSVG({ gradeDistribution, result }) {\n  const width = 1200;\n  const height = 380;\n  const leftSpace = 100; // left edge to left edge of first bar\n  const rightSpace = 80; // right edge to tight edge of last bar\n  const bottomSpace = 60; // bottom edge to bottom edge of bars\n  const topSpace = 60; // top padding\n  const itemCount = gradeDistribution.length;\n  const barWidth = 60;\n\n  // The x-axis has the different grades from \"A+\" to \"D-\".\n  const xTickIncr =\n    (width - leftSpace - rightSpace - barWidth) / (itemCount - 1);\n  const xTickOffset = leftSpace + xTickIncr / 2;\n\n  // The y-axis has ticks according to the maximum value of all grades.\n  const yMarks = calculateTicks(gradeDistribution);\n  const yTickOffset = height - bottomSpace;\n  const yTickIncr = (height - bottomSpace - topSpace) / (yMarks.length - 1);\n  const yTickMax = Math.max(...yMarks);\n\n  const rows = gradeDistribution.map(\n    (item) =>\n      html` <tr>\n        <th>\n          ${formatMinus(item.grade)}\n          ${item.grade === result.scan.grade ? \"(Current grade)\" : \"\"}\n        </th>\n        <td>${item.count} sites</td>\n      </tr>`,\n  );\n\n  return html`\n    <table id=\"grade-svg-a11y-table\" class=\"visually-hidden\">\n      <caption>\n        Number of sites by grade\n      </caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">Grade</th>\n          <th scope=\"col\">Sites</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n    ${svg`\n    <svg\n      class=\"chart\"\n      viewBox=\"0 0 1200 380\"\n      aria-labelledby=\"grade-svg-title\"\n      aria-describedby=\"grade-svg-a11y-table\"\n    >\n      <title id=\"grade-svg-title\">Number of sites by grade</title>\n      <g class=\"axes-g\"> </g>\n        <g\n          class=\"x-axis\"\n          transform=\"translate(${xTickOffset}, ${height - bottomSpace})\"\n        >\n          ${gradeDistribution.map((item, index) => {\n            return svg` <g\n              class=\"tick tick-x\"\n              transform=\"${`translate(${index * xTickIncr}, 0)`}\"\n            >\n              <text\n                fill=\"currentColor\"\n                y=\"6\"\n                dy=\"1em\"\n                class=\"${[\n                  \"x-labels\",\n                  item.grade === result.scan.grade\n                    ? `current grade-${item.grade[0]?.toLowerCase()}`\n                    : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\"\n              >\n                ${formatMinus(item.grade)}\n              </text>\n            </g>`;\n          })}\n        </g>\n        <g>\n          ${gradeDistribution.map((item, index) => {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <rect\n              class=\"bar grade-${item.grade\n                .replace(/[+-]/, \"\")\n                .toLowerCase()} ${\n                item.grade === result.scan.grade ? \"current-grade\" : \"\"\n              }\"\n              x=\"${xTickOffset + index * xTickIncr - barWidth / 2}\"\n              y=\"${yTickOffset - barHeight - 1}\"\n              rx=\"4\"\n              ry=\"4\"\n              width=\"${barWidth}\"\n              height=\"${barHeight}\"\n            ></rect>`;\n          })}\n        </g>\n        <g\n          class=\"y-axis\"\n          fill=\"none\"\n          textAnchor=\"end\"\n          transform=\"translate(${leftSpace}, 0)\"\n        >\n          ${yMarks.map(\n            (item, index) => svg` <g\n              class=\"tick tick-y\"\n              transform=\"translate(0, ${yTickOffset - yTickIncr * index})\"\n            >\n              <line\n                stroke=\"currentColor\"\n                x2=\"${width - leftSpace - rightSpace + barWidth / 2}\"\n              ></line>\n              <text class=\"y-labels\" fill=\"currentColor\" x=\"-25\" dy=\"0.32em\">\n                ${item / 1000}k\n              </text>\n            </g>`,\n          )}\n        </g>\n      </g>\n      <g>\n        ${gradeDistribution.map((item, index) => {\n          if (item.grade === result.scan.grade) {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <g\n              key=\"you-are-here\"\n              class=\"you-are-here\"\n              transform=\"translate(${xTickOffset + index * xTickIncr}, ${\n                height - bottomSpace - barHeight - 50\n              })\"\n            >\n              <polyline\n                points=\"-60,0 60,0 60,36 7,36 0,48 -7,36 -60,36\"\n              ></polyline>\n              <text\n                x=\"0\"\n                y=\"0\"\n                text-anchor=\"middle\"\n                transform=\"translate(0, 24)\"\n              >\n                Current grade\n              </text>\n            </g>`;\n          } else {\n            return [];\n          }\n        })}\n      </g>\n    </svg>\n  `}\n  `;\n}\n\n/**\n * Calculate\n * @param {import(\"@observatory\").GradeDistribution[]} gradeDistribution\n * @returns {number[]}\n */\nfunction calculateTicks(gradeDistribution) {\n  const maxValue = Math.max(...gradeDistribution.map((item) => item.count));\n  const tickTargetCount = 7; // Target number of ticks between 5 and 10\n  const range = rangeForValue(maxValue, false); // Get a nice range\n  const tickInterval = rangeForValue(range / tickTargetCount, true); // Determine a nice tick interval\n  const niceMaxValue = Math.ceil(maxValue / tickInterval) * tickInterval; // Adjust max value to a nice number\n  const tickCount = Math.ceil(niceMaxValue / tickInterval) + 1; // Calculate the number of ticks\n\n  /** @type {number[]} */\n  const ticks = [];\n  for (let i = 0; i < tickCount; i++) {\n    ticks.push(i * tickInterval);\n  }\n  return ticks;\n}\n\n/**\n * This returns values to construct proper axis measurements in\n * diagrams. The returned value is 1|2|5 * 10^x.\n *\n * If `round` is `true`, the returned value can be also rounded down,\n * useful for calculating ticks on an axis.\n *\n * Examples:\n *\n * |range    |rounded=false|rounded=true|\n * |---------|-------------|------------|\n * |  1      |  1          |  1         |\n * |  2      |  2          |  2         |\n * |  3      |  5          |  5         |\n * |  4      |  5          |  5         |\n * |  5      |  5          |  5         |\n * |  6      |  10         |  5         |\n * |  7      |  10         |  10        |\n * |  8      |  10         |  10        |\n * |  9      |  10         |  10        |\n * |  10     |  10         |  10        |\n * |  34     |  50         |  50        |\n * |  450    |  500        |  500       |\n * |  560    |  1000       |  500       |\n * |  6780   |  10000      |  5000      |\n * |  10     |  10         |  10        |\n * |  100    |  100        |  100       |\n * |  1000   |  1000       |  1000      |\n * |  10000  |  10000      |  10000     |\n * @param {number} range The input value\n * @param {boolean} round If false, the returned value will always be greater than `range`, otherwise it can be rounded off\n * @returns {number} a number according to `1|2|5 * 10^x`, where x is derived from `range` to be in the same order of magnitude\n */\n\nfunction rangeForValue(range, round) {\n  const exponent = Math.floor(Math.log10(range));\n  const fraction = range / Math.pow(10, exponent);\n\n  /** @type {number} */\n  let niceFraction;\n  if (round) {\n    if (fraction < 1.5) {\n      niceFraction = 1;\n    } else if (fraction < 3) {\n      niceFraction = 2;\n    } else if (fraction < 7) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  } else {\n    if (fraction <= 1) {\n      niceFraction = 1;\n    } else if (fraction <= 2) {\n      niceFraction = 2;\n    } else if (fraction <= 5) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  }\n  return niceFraction * Math.pow(10, exponent);\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_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../visually-hidden/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___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);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)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:var(--font-size-normal);font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle--0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);fill:var(--color-text-primary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNObservatoryComparisonTable","Object","URL","fetch","Error","console","Math","Boolean","r","customElements"],"mappings":"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"}

package/dist/client/{533.518751bfb02cbcee.js → 533.43be64a8c12d5411.js}

@@ -43,5 +43,5 @@ export const __webpack_ids__=["533"];export const __webpack_modules__={20082:fun
             </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
+    </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 (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 (769px < width){.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.43be64a8c12d5411.js.map

package/dist/client/{533.518751bfb02cbcee.js.map → 533.43be64a8c12d5411.js.map}

@@ -1 +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"}
+{"version":3,"file":"533.43be64a8c12d5411.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 (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 (769px < width){.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,k/DAAm/D,GAAG,EAE/hE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}