@mdn/fred 2.9.0 → 2.9.1

package/out/static/client/{1672.aef594997e95d362.js → 1672.d66704179bcd69ee.js}

@@ -1,4 +1,4 @@
-export const __rspack_esm_id=1672;export const __rspack_esm_ids=[1672];export const __webpack_modules__={69504(r,e,o){var t=o(22009),a=o(31601),s=o.n(a),i=o(76314),n=o.n(i),l=o(39807),d=o(33208),m=o(67168),u=n()(s());u.i(l.A),u.i(d.A),u.i(m.A),u.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-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-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;mask-image:var(--alert-circle-img);mask-position:center;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}',""]);let h=(0,t.AH)([u.toString()]);o.d(e,{},{A:h})},39807(r,e,o){var t=o(31601),a=o.n(t),s=o(76314),i=(o.n(s))()(a());i.push([r.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}",""]);let n=i.toString();o.d(e,{},{A:n})},17547(r,e,o){o.r(e);var t=o(22009),a=o(6616),s=o(23727),i=o(22207);o(20141),o(35268);var n=o(69504);let l={TypeError:"Observatory is currently down."};let MDNObservatoryForm=class MDNObservatoryForm extends t.WF{static styles=n.A;static get properties(){return{_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._)();firstUpdated(){this.inputRef.value?.focus()}async _handleSubmit(r){r.preventDefault(),this._errorMessage="";let e=this.inputRef.value;if(!e?.value.trim()){this._errorMessage="Please enter a valid hostname";return}let o=e.value.trim();try{let r=new URL(o),e=r.hostname.trim()||o;r.port&&(e+=":"+r.port),r.pathname&&"/"!==r.pathname&&(e+=r.pathname),this._hostname=e}catch{this._hostname=o}this._queryRunning=!0,(0,s.w)("observatory: scan");try{let r=new URL(i.Q+`/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`),e=await fetch(r,{method:"POST"});if(!e.ok){let r=await e.json();throw Error(`Request failed: ${r.message}`)}globalThis.location.href=`/en-US/observatory/analyze?host=${encodeURIComponent(this._hostname)}`}catch(r){this._errorMessage=`${l[r.name]||"message"in r?r.message:r}`,(0,s.w)(`observatory: error -> ${this._errorMessage}`)}finally{this._queryRunning=!1}}render(){return this._queryRunning?(0,t.qy)`
+export const __rspack_esm_id=1672;export const __rspack_esm_ids=[1672];export const __webpack_modules__={69504(r,e,o){var t=o(22009),a=o(31601),s=o.n(a),i=o(76314),n=o.n(i),l=o(39807),d=o(33208),m=o(67168),u=n()(s());u.i(l.A),u.i(d.A),u.i(m.A),u.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-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-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;mask-image:var(--alert-circle-img);mask-position:center;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}',""]);let h=(0,t.AH)([u.toString()]);o.d(e,{},{A:h})},39807(r,e,o){var t=o(31601),a=o.n(t),s=o(76314),i=(o.n(s))()(a());i.push([r.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}",""]);let n=i.toString();o.d(e,{},{A:n})},17547(r,e,o){o.r(e);var t=o(22009),a=o(6616),s=o(23727),i=o(22207);o(20141),o(35268);var n=o(69504);let l={TypeError:"Observatory is currently down."};let MDNObservatoryForm=class MDNObservatoryForm extends t.WF{static styles=n.A;static get properties(){return{_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._)();firstUpdated(){this.inputRef.value?.focus()}async _handleSubmit(r){r.preventDefault(),this._errorMessage="";let e=this.inputRef.value;if(!e?.value.trim()){this._errorMessage="Please enter a valid hostname";return}let o=e.value.trim();try{let r=new URL(o),e=r.hostname.trim()||o;r.port&&(e+=":"+r.port),r.pathname&&"/"!==r.pathname&&(e+=r.pathname),this._hostname=e}catch{this._hostname=o}this._queryRunning=!0,(0,s.w)("observatory: scan");try{let r=new URL(i.Q+`/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`),e=await fetch(r,{method:"POST"});if(!e.ok){let r=await e.json();throw Error(`Request failed: ${r.message}`)}globalThis.location.assign(`/en-US/observatory/analyze?host=${encodeURIComponent(this._hostname)}`)}catch(r){this._errorMessage=`${l[r.name]||"message"in r?r.message:r}`,(0,s.w)(`observatory: error -> ${this._errorMessage}`)}finally{this._queryRunning=!1}}render(){return this._queryRunning?(0,t.qy)`
           <label class="visually-hidden" for="progress-bar">
             Scanning ${this._hostname} </label
           ><mdn-progress-bar id="progress-bar"></mdn-progress-bar>
@@ -30,4 +30,4 @@ export const __rspack_esm_id=1672;export const __rspack_esm_ids=[1672];export co
           </form>
           ${this._errorMessage?(0,t.qy)`<div class="error">${this._errorMessage}</div>`:t.s6}
         `}};customElements.define("mdn-observatory-form",MDNObservatoryForm),o.d(e,{MDNObservatoryForm:()=>MDNObservatoryForm})}};
-//# sourceMappingURL=1672.aef594997e95d362.js.map
+//# sourceMappingURL=1672.d66704179bcd69ee.js.map

package/out/static/client/{1672.aef594997e95d362.js.map → 1672.d66704179bcd69ee.js.map}

@@ -1 +1 @@
-{"version":3,"file":"1672.aef594997e95d362.js","sources":["webpack://@mdn/fred/./components/observatory-form/element.css","webpack://@mdn/fred/./components/global/global.css?d300","webpack://@mdn/fred/./components/observatory-form/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../button/server.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_2___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../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-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-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;mask-image:var(--alert-circle-img);mask-position:center;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}`, \"\"]);\n// Exports\nexport default css([___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, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { OBSERVATORY_API_URL } from \"../env/index.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 get properties() {\n    return {\n      _queryRunning: { type: Boolean, state: true },\n      _hostname: { type: String, state: true },\n      _errorMessage: { type: String, state: true },\n    };\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      let fullHost = url.hostname.trim() || host;\n      if (url.port) {\n        fullHost += \":\" + url.port;\n      }\n      if (url.pathname && url.pathname !== \"/\") {\n        fullHost += url.pathname;\n      }\n      this._hostname = fullHost;\n    } catch {\n      this._hostname = host;\n    }\n    this._queryRunning = true;\n    gleanClick(\"observatory: scan\");\n    try {\n      const apiUrl = new URL(\n        OBSERVATORY_API_URL +\n          `/api/v2/analyze?host=${encodeURIComponent(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      gleanClick(`observatory: error -> ${this._errorMessage}`);\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 for=\"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          ${\n            this._errorMessage\n              ? html`<div class=\"error\">${this._errorMessage}</div>`\n              : nothing\n          }\n        `;\n  }\n}\n\ncustomElements.define(\"mdn-observatory-form\", MDNObservatoryForm);\n"],"names":["MDNObservatoryForm","Boolean","String","URL","encodeURIComponent","fetch","Error","globalThis","customElements"],"mappings":"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"}
+{"version":3,"file":"1672.d66704179bcd69ee.js","sources":["webpack://@mdn/fred/./components/observatory-form/element.css","webpack://@mdn/fred/./components/global/global.css?d300","webpack://@mdn/fred/./components/observatory-form/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../button/server.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_2___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../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-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-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;mask-image:var(--alert-circle-img);mask-position:center;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}`, \"\"]);\n// Exports\nexport default css([___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, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { OBSERVATORY_API_URL } from \"../env/index.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 get properties() {\n    return {\n      _queryRunning: { type: Boolean, state: true },\n      _hostname: { type: String, state: true },\n      _errorMessage: { type: String, state: true },\n    };\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      let fullHost = url.hostname.trim() || host;\n      if (url.port) {\n        fullHost += \":\" + url.port;\n      }\n      if (url.pathname && url.pathname !== \"/\") {\n        fullHost += url.pathname;\n      }\n      this._hostname = fullHost;\n    } catch {\n      this._hostname = host;\n    }\n    this._queryRunning = true;\n    gleanClick(\"observatory: scan\");\n    try {\n      const apiUrl = new URL(\n        OBSERVATORY_API_URL +\n          `/api/v2/analyze?host=${encodeURIComponent(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.assign(\n        `/en-US/observatory/analyze?host=${encodeURIComponent(this._hostname)}`,\n      );\n    } catch (error) {\n      // @ts-expect-error\n      this._errorMessage = `${ERROR_MAP[error.name] || \"message\" in error ? error[\"message\"] : error}`;\n      gleanClick(`observatory: error -> ${this._errorMessage}`);\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 for=\"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          ${\n            this._errorMessage\n              ? html`<div class=\"error\">${this._errorMessage}</div>`\n              : nothing\n          }\n        `;\n  }\n}\n\ncustomElements.define(\"mdn-observatory-form\", MDNObservatoryForm);\n"],"names":["MDNObservatoryForm","Boolean","String","URL","encodeURIComponent","fetch","Error","globalThis","customElements"],"mappings":"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"}

package/out/static/client/{169.71c8bb45e4bcc0b1.js → 169.ab4227448e206e0d.js}

@@ -1,4 +1,4 @@
-export const __rspack_esm_id=169;export const __rspack_esm_ids=[169];export const __webpack_modules__={27376(e,t,i){var r=i(22009),l=i(31601),s=i.n(l),n=i(76314),o=i.n(n),a=i(67168),h=i(39807),d=i(4417),c=i.n(d),u=new i.U(i(36956)),f=o()(s());f.i(a.A),f.i(h.A);var p=c()(u);f.push([e.id,`:host{align-items:center;display:grid;grid-template-areas:"icon input button";grid-template-columns:2.2rem 1fr min-content}.icon{background-color:var(--color-text-secondary);content:"";grid-area:icon;height:1.25rem;justify-self:center;margin-left:.4rem;mask-image:url(${p});mask-size:cover;width:1.25rem}.input{background-color:initial;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);grid-area:1/1/-1/-1;margin:0;padding:.3rem 4.2rem .3rem 2.2rem;width:100%}.input::placeholder{color:var(--color-text-secondary)}.input:focus{border-color:#0000}.counter{background-color:var(--color-background-yellow);border-radius:var(--radius-normal);font-size:var(--font-size-small);grid-area:input;justify-self:end;line-height:var(--font-line-ui);padding:.25rem;white-space:nowrap}.button{grid-area:button}.button::part(button){border-radius:50%}.button::part(button):hover{background-color:initial}:placeholder-shown~.button{visibility:hidden}`,""]);let g=(0,r.AH)([f.toString()]);i.d(t,{},{A:g})},39807(e,t,i){var r=i(31601),l=i.n(r),s=i(76314),n=(i.n(s))()(l());n.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}",""]);let o=n.toString();i.d(t,{},{A:o})},36956(e,t,i){e.exports=i.p+"filter.b77a4ccbfb57e2ef.svg"},50128(e,t,i){var r=i(22009),l=i(70693),s=i(23727),n=i(10336),o=i(27376);let SidebarFilterer=class SidebarFilterer{constructor(e){this.allHeadings=[...e.querySelectorAll("li strong")].filter(e=>e instanceof HTMLElement),this.allParents=[...e.querySelectorAll("details")];let t=[...e.querySelectorAll("a[href]")].filter(e=>e instanceof HTMLAnchorElement);this.items=t.map(e=>({haystack:(e.textContent||"").toLowerCase(),link:e,container:this.getContainerOf(e),heading:this.getHeadingOf(e),parents:this.getParentsOf(e)})),this.toc=e.querySelector(".reference-toc")||null}applyFilter(e){if(e)return this.toggleTOC(!1),this.showOnlyMatchingItems(e);this.toggleTOC(!0),this.showAllItems()}toggleTOC(e){this.toc&&this.toggleElement(this.toc,e)}toggleElement(e,t){e.style.display=t?"":"none"}showAllItems(){for(let{link:e}of this.items)this.resetLink(e);for(let e of this.allHeadings)this.resetHeading(e);for(let e of this.allParents)this.resetParent(e)}resetLink(e){this.resetHighlighting(e);let t=this.getContainerOf(e);this.toggleElement(t,!0)}getContainerOf(e){return e.closest("li")||e}resetHeading(e){let t=this.getContainerOf(e);this.toggleElement(t,!0)}resetParent(e){let t=this.getContainerOf(e);this.toggleElement(t,!0),e.dataset.wasOpen&&(e.open=JSON.parse(e.dataset.wasOpen),delete e.dataset.wasOpen)}resetHighlighting(e){let t=[...e.querySelectorAll("span.sidebar-filter-mark-container, mark")],i=new Set;for(let e of t){let t=e.parentElement;e.replaceWith(document.createTextNode(e.textContent||"")),t&&i.add(t)}for(let e of i)e.normalize()}showOnlyMatchingItems(e){for(let e of this.allHeadings)this.hideHeading(e);for(let e of this.allParents)this.collapseParent(e);let t=e.toLowerCase().split(/\s+/).filter(Boolean),i=0;for(let{haystack:e,link:r,container:l,heading:s,parents:n}of this.items){this.resetHighlighting(r);let o=t.every(t=>e.includes(t));if(this.toggleElement(l,o),o)for(let e of(i++,this.highlightMatches(r,t),s&&this.showHeading(s),n))this.expandParent(e)}return i}hideHeading(e){let t=this.getContainerOf(e);this.toggleElement(t,!1)}collapseParent(e){let t=this.getContainerOf(e);this.toggleElement(t,!1),e.dataset.wasOpen=e.dataset.wasOpen||String(e.open),e.open=!1}highlightMatches(e,t){for(let i of this.getTextNodesOf(e)){let e=i.textContent?.toLowerCase();if(!e)continue;let r=new Map;for(let i of t){let t=e.indexOf(i);-1!==t&&r.set(t,t+i.length)}let l=[...r.entries()].sort(([e,t],[i,r])=>e-i||t-r),s=this.replaceChildNode(i,"span");s.className="sidebar-filter-mark-container";let n=[...s.childNodes].find(e=>e instanceof Text);if(!n)continue;let o=n,a=0;for(let[e,t]of l){if(e<a)continue;let i=o.splitText(e-a),r=i.splitText(t-e);this.replaceChildNode(i,"mark"),o=r,a=t}}}getTextNodesOf(e){let t=[e],i=[];for(let e of t)for(let r of e.childNodes)r.nodeType===Node.TEXT_NODE?i.push(r):r.hasChildNodes&&r.hasChildNodes()&&t.push(r);return i}replaceChildNode(e,t){let i=e.textContent,r=document.createElement(t);return r.textContent=i||"",e.replaceWith(r),r}showHeading(e){let t=e&&this.getContainerOf(e);t&&this.toggleElement(t,!0)}getHeadingOf(e){return this.findFirstElementBefore(e,this.allHeadings)}findFirstElementBefore(e,t){return t.findLast(t=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING)}expandParent(e){let t=this.getContainerOf(e);this.toggleElement(t,!0),e.open=!0}getParentsOf(e){let t=[],i=e.parentElement?e.parentElement.closest("details"):null;for(;i;)t.push(i),i=i.parentElement?i.parentElement.closest("details"):null;return t}};i(35268);let MDNSidebarFilter=class MDNSidebarFilter extends(0,l.J)(r.WF){static styles=o.A;static get properties(){return{query:{type:String},matchCount:{state:!0,type:Number}}}constructor(){super(),this.query="",this.matchCount=void 0,this.hasTyped=!1,this._filterer=null,this._quicklinks=null,this._sidebarInnerNav=null}firstUpdated(){this._quicklinks=document.querySelector(".left-sidebar"),this._quicklinks&&(this._sidebarInnerNav=this._quicklinks.querySelector(".left-sidebar__content")||null)}_saveScrollPosition(){for(let e of[this._quicklinks,this._sidebarInnerNav])e&&void 0===e.dataset.lastScrollTop&&e.scrollTop>0&&(e.dataset.lastScrollTop=String(e.scrollTop),e.scrollTop=0)}_restoreScrollPosition(){for(let e of[this._quicklinks,this._sidebarInnerNav])e&&"string"==typeof e.dataset.lastScrollTop&&(e.scrollTop=Number(e.dataset.lastScrollTop),delete e.dataset.lastScrollTop)}updated(e){if(e.has("query")&&(this.query&&this.query.trim().length>0&&!this.hasTyped&&(this.hasTyped=!0,(0,s.w)("sidebar_filter_typed")),this._quicklinks)){if(!this._filterer){let e=this._quicklinks.querySelector(".left-sidebar__content");e instanceof HTMLElement&&(this._filterer=new SidebarFilterer(e))}let e=this.query.trim();if(e&&this._saveScrollPosition(),this._filterer){let t=this._filterer.applyFilter(e);this.matchCount=t}e||this._restoreScrollPosition()}}_onFocus(){(0,s.w)("sidebar_filter_focus")}_onInput(e){let t=e.target;this.query=t.value}_clearFilter(){this.query=""}render(){return(0,r.qy)`
+export const __rspack_esm_id=169;export const __rspack_esm_ids=[169];export const __webpack_modules__={27376(e,t,i){var r=i(22009),l=i(31601),s=i.n(l),n=i(76314),o=i.n(n),a=i(67168),h=i(39807),d=i(4417),c=i.n(d),u=new i.U(i(36956)),f=o()(s());f.i(a.A),f.i(h.A);var p=c()(u);f.push([e.id,`:host{align-items:center;display:grid;grid-template-areas:"icon input button";grid-template-columns:2.2rem 1fr min-content}.icon{background-color:var(--color-text-secondary);content:"";grid-area:icon;height:1.25rem;justify-self:center;margin-left:.4rem;mask-image:url(${p});mask-size:cover;width:1.25rem}.input{background-color:initial;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);grid-area:1/1/-1/-1;margin:0;padding:.3rem 4.2rem .3rem 2.2rem;width:100%}.input::placeholder{color:var(--color-text-secondary)}.input:focus{border-color:#0000}.counter{background-color:var(--color-background-yellow);border-radius:var(--radius-normal);font-size:var(--font-size-small);grid-area:input;justify-self:end;line-height:var(--font-line-ui);padding:.25rem;white-space:nowrap}.button{grid-area:button}.button::part(button){border-radius:50%}.button::part(button):hover{background-color:initial}:placeholder-shown~.button{visibility:hidden}`,""]);let g=(0,r.AH)([f.toString()]);i.d(t,{},{A:g})},39807(e,t,i){var r=i(31601),l=i.n(r),s=i(76314),n=(i.n(s))()(l());n.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}",""]);let o=n.toString();i.d(t,{},{A:o})},36956(e,t,i){e.exports=i.p+"filter.b77a4ccbfb57e2ef.svg"},50128(e,t,i){var r=i(22009),l=i(70693),s=i(23727),n=i(10336),o=i(27376);let SidebarFilterer=class SidebarFilterer{constructor(e){this.allHeadings=[...e.querySelectorAll("li strong")].filter(e=>e instanceof HTMLElement),this.allParents=[...e.querySelectorAll("details")];let t=[...e.querySelectorAll("a[href]")].filter(e=>e instanceof HTMLAnchorElement);this.items=t.map(e=>({haystack:(e.textContent||"").toLowerCase(),link:e,container:this.getContainerOf(e),heading:this.getHeadingOf(e),parents:this.getParentsOf(e)})),this.toc=e.querySelector(".reference-toc")||null}applyFilter(e){if(e)return this.toggleTOC(!1),this.showOnlyMatchingItems(e);this.toggleTOC(!0),this.showAllItems()}toggleTOC(e){this.toc&&this.toggleElement(this.toc,e)}toggleElement(e,t){e.style.display=t?"":"none"}showAllItems(){for(let{link:e}of this.items)this.resetLink(e);for(let e of this.allHeadings)this.resetHeading(e);for(let e of this.allParents)this.resetParent(e)}resetLink(e){this.resetHighlighting(e);let t=this.getContainerOf(e);this.toggleElement(t,!0)}getContainerOf(e){return e.closest("li")||e}resetHeading(e){let t=this.getContainerOf(e);this.toggleElement(t,!0)}resetParent(e){let t=this.getContainerOf(e);this.toggleElement(t,!0),e.dataset.wasOpen&&(e.open=JSON.parse(e.dataset.wasOpen),delete e.dataset.wasOpen)}resetHighlighting(e){let t=[...e.querySelectorAll("span.sidebar-filter-mark-container, mark")],i=new Set;for(let e of t){let t=e.parentElement;e.replaceWith(document.createTextNode(e.textContent||"")),t&&i.add(t)}for(let e of i)e.normalize()}showOnlyMatchingItems(e){for(let e of this.allHeadings)this.hideHeading(e);for(let e of this.allParents)this.collapseParent(e);let t=e.toLowerCase().split(/\s+/).filter(Boolean),i=0;for(let{haystack:e,link:r,container:l,heading:s,parents:n}of this.items){this.resetHighlighting(r);let o=t.every(t=>e.includes(t));if(this.toggleElement(l,o),o)for(let e of(i++,this.highlightMatches(r,t),s&&this.showHeading(s),n))this.expandParent(e)}return i}hideHeading(e){let t=this.getContainerOf(e);this.toggleElement(t,!1)}collapseParent(e){let t=this.getContainerOf(e);this.toggleElement(t,!1),e.dataset.wasOpen=e.dataset.wasOpen||String(e.open),e.open=!1}highlightMatches(e,t){for(let i of this.getTextNodesOf(e)){let e=i.textContent?.toLowerCase();if(!e)continue;let r=new Map;for(let i of t){let t=e.indexOf(i);-1!==t&&r.set(t,t+i.length)}let l=[...r].sort(([e,t],[i,r])=>e-i||t-r),s=this.replaceChildNode(i,"span");s.className="sidebar-filter-mark-container";let n=[...s.childNodes].find(e=>e instanceof Text);if(!n)continue;let o=n,a=0;for(let[e,t]of l){if(e<a)continue;let i=o.splitText(e-a),r=i.splitText(t-e);this.replaceChildNode(i,"mark"),o=r,a=t}}}getTextNodesOf(e){let t=[e],i=[];for(let e of t)for(let r of e.childNodes)r.nodeType===Node.TEXT_NODE?i.push(r):r.hasChildNodes&&r.hasChildNodes()&&t.push(r);return i}replaceChildNode(e,t){let i=e.textContent,r=document.createElement(t);return r.textContent=i||"",e.replaceWith(r),r}showHeading(e){let t=e&&this.getContainerOf(e);t&&this.toggleElement(t,!0)}getHeadingOf(e){return this.findFirstElementBefore(e,this.allHeadings)}findFirstElementBefore(e,t){return t.findLast(t=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING)}expandParent(e){let t=this.getContainerOf(e);this.toggleElement(t,!0),e.open=!0}getParentsOf(e){let t=[],i=e.parentElement?e.parentElement.closest("details"):null;for(;i;)t.push(i),i=i.parentElement?i.parentElement.closest("details"):null;return t}};i(35268);let MDNSidebarFilter=class MDNSidebarFilter extends(0,l.J)(r.WF){static styles=o.A;static get properties(){return{query:{type:String},matchCount:{state:!0,type:Number}}}constructor(){super(),this.query="",this.matchCount=void 0,this.hasTyped=!1,this._filterer=null,this._quicklinks=null,this._sidebarInnerNav=null}firstUpdated(){this._quicklinks=document.querySelector(".left-sidebar"),this._quicklinks&&(this._sidebarInnerNav=this._quicklinks.querySelector(".left-sidebar__content")||null)}_saveScrollPosition(){for(let e of[this._quicklinks,this._sidebarInnerNav])e&&void 0===e.dataset.lastScrollTop&&e.scrollTop>0&&(e.dataset.lastScrollTop=String(e.scrollTop),e.scrollTop=0)}_restoreScrollPosition(){for(let e of[this._quicklinks,this._sidebarInnerNav])e&&"string"==typeof e.dataset.lastScrollTop&&(e.scrollTop=Number(e.dataset.lastScrollTop),delete e.dataset.lastScrollTop)}updated(e){if(e.has("query")&&(this.query&&this.query.trim().length>0&&!this.hasTyped&&(this.hasTyped=!0,(0,s.w)("sidebar_filter_typed")),this._quicklinks)){if(!this._filterer){let e=this._quicklinks.querySelector(".left-sidebar__content");e instanceof HTMLElement&&(this._filterer=new SidebarFilterer(e))}let e=this.query.trim();if(e&&this._saveScrollPosition(),this._filterer){let t=this._filterer.applyFilter(e);this.matchCount=t}e||this._restoreScrollPosition()}}_onFocus(){(0,s.w)("sidebar_filter_focus")}_onInput(e){let t=e.target;this.query=t.value}_clearFilter(){this.query=""}render(){return(0,r.qy)`
       <label class="icon" for="input">
         <span class="visually-hidden"
           >${this.l10n("sidebar-filter-filter-sidebar")`Filter sidebar`}</span
@@ -24,4 +24,4 @@ export const __rspack_esm_id=169;export const __rspack_esm_ids=[169];export cons
         >${this.l10n("sidebar-filter-clear-filter-input")`Clear filter input`}</mdn-button
       >
     `}};customElements.define("mdn-sidebar-filter",MDNSidebarFilter)}};
-//# sourceMappingURL=169.71c8bb45e4bcc0b1.js.map
+//# sourceMappingURL=169.ab4227448e206e0d.js.map

package/out/static/client/169.ab4227448e206e0d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"169.ab4227448e206e0d.js","sources":["webpack://@mdn/fred/./components/sidebar-filter/element.css","webpack://@mdn/fred/./components/global/global.css?d300","webpack://@mdn/fred/./components/sidebar-filter/sidebar-filterer.js","webpack://@mdn/fred/./components/sidebar-filter/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../visually-hidden/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/filter.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{align-items:center;display:grid;grid-template-areas:\"icon input button\";grid-template-columns:2.2rem 1fr min-content}.icon{background-color:var(--color-text-secondary);content:\"\";grid-area:icon;height:1.25rem;justify-self:center;margin-left:.4rem;mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-size:cover;width:1.25rem}.input{background-color:initial;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);grid-area:1/1/-1/-1;margin:0;padding:.3rem 4.2rem .3rem 2.2rem;width:100%}.input::placeholder{color:var(--color-text-secondary)}.input:focus{border-color:#0000}.counter{background-color:var(--color-background-yellow);border-radius:var(--radius-normal);font-size:var(--font-size-small);grid-area:input;justify-self:end;line-height:var(--font-line-ui);padding:.25rem;white-space:nowrap}.button{grid-area:button}.button::part(button){border-radius:50%}.button::part(button):hover{background-color:initial}:placeholder-shown~.button{visibility:hidden}`, \"\"]);\n// Exports\nexport default css([___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, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}#content{scroll-margin-block-start:var(--sticky-header-height)}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","/**\n * Splits a search query into an array of lowercase terms.\n * @param {string} query The input search query.\n * @returns {string[]} The resulting array of query terms.\n */\nfunction splitQuery(query) {\n  return query.toLowerCase().split(/\\s+/).filter(Boolean);\n}\n\n/**\n * @typedef {object} Item\n * @property {string} haystack - The lowercased text for matching.\n * @property {HTMLAnchorElement} link - The anchor element.\n * @property {HTMLElement} container - The container (closest 'li' element).\n * @property {HTMLElement|undefined} heading - The heading element (if any).\n * @property {HTMLDetailsElement[]} parents - The parent details elements.\n */\n\n/**\n * A class to filter sidebar items based on search queries.\n */\nexport class SidebarFilterer {\n  /**\n   * @param {HTMLElement} root The root element to search within.\n   */\n  constructor(root) {\n    /**\n     * @type {HTMLElement[]}\n     */\n    this.allHeadings = [...root.querySelectorAll(\"li strong\")].filter(\n      (el) => el instanceof HTMLElement,\n    );\n\n    /**\n     * @type {HTMLDetailsElement[]}\n     */\n    this.allParents = [...root.querySelectorAll(\"details\")];\n\n    const links = [...root.querySelectorAll(\"a[href]\")].filter(\n      (a) => a instanceof HTMLAnchorElement,\n    );\n\n    /**\n     * @type {Item[]}\n     */\n    this.items = links.map((link) => ({\n      haystack: (link.textContent || \"\").toLowerCase(),\n      link,\n      container: this.getContainerOf(link),\n      heading: this.getHeadingOf(link),\n      parents: this.getParentsOf(link),\n    }));\n\n    /**\n     * @type {HTMLElement|null}\n     */\n    this.toc = root.querySelector(\".reference-toc\") || null;\n  }\n\n  /**\n   * Applies a filter to the sidebar items.\n   * @param {string} query The filter query.\n   * @returns {number|undefined} The number of matching items if a query is provided; otherwise undefined.\n   */\n  applyFilter(query) {\n    if (query) {\n      this.toggleTOC(false);\n      return this.showOnlyMatchingItems(query);\n    } else {\n      this.toggleTOC(true);\n      this.showAllItems();\n      return;\n    }\n  }\n\n  /**\n   * Toggles the TOC (table of contents) element's visibility.\n   * @private\n   * @param {boolean} show Whether to show the TOC.\n   */\n  toggleTOC(show) {\n    if (this.toc) {\n      this.toggleElement(this.toc, show);\n    }\n  }\n\n  /**\n   * Toggles the display style of an element.\n   * @private\n   * @param {HTMLElement} el The element to toggle.\n   * @param {boolean} show Whether to show (true) or hide (false) the element.\n   */\n  toggleElement(el, show) {\n    el.style.display = show ? \"\" : \"none\";\n  }\n\n  /**\n   * Resets and shows all sidebar items.\n   */\n  showAllItems() {\n    for (const { link } of this.items) this.resetLink(link);\n    for (const heading of this.allHeadings) this.resetHeading(heading);\n    for (const parent of this.allParents) this.resetParent(parent);\n  }\n\n  /**\n   * Resets a link by removing any highlighting and ensuring its container is visible.\n   * @private\n   * @param {HTMLAnchorElement} link The link to reset.\n   */\n  resetLink(link) {\n    this.resetHighlighting(link);\n    const container = this.getContainerOf(link);\n    this.toggleElement(container, true);\n  }\n\n  /**\n   * Returns the container element (the closest \"li\") for the provided element.\n   * @private\n   * @param {HTMLElement} el The element to find the container for.\n   * @returns {HTMLElement} The container element.\n   */\n  getContainerOf(el) {\n    return el.closest(\"li\") || el;\n  }\n\n  /**\n   * Resets a heading by ensuring its container is visible.\n   * @private\n   * @param {HTMLElement} heading The heading element to reset.\n   */\n  resetHeading(heading) {\n    const container = this.getContainerOf(heading);\n    this.toggleElement(container, true);\n  }\n\n  /**\n   * Resets a parent details element by showing its container and restoring its open state.\n   * @private\n   * @param {HTMLDetailsElement} parent The details element to reset.\n   */\n  resetParent(parent) {\n    const container = this.getContainerOf(parent);\n    this.toggleElement(container, true);\n    if (parent.dataset.wasOpen) {\n      parent.open = JSON.parse(parent.dataset.wasOpen);\n      delete parent.dataset.wasOpen;\n    }\n  }\n\n  /**\n   * Removes highlighting from the given link element.\n   * @private\n   * @param {HTMLAnchorElement} link The link element to reset.\n   */\n  resetHighlighting(link) {\n    const nodes = [\n      ...link.querySelectorAll(\"span.sidebar-filter-mark-container, mark\"),\n    ];\n    const parents = new Set();\n    for (const node of nodes) {\n      const parent = node.parentElement;\n      node.replaceWith(document.createTextNode(node.textContent || \"\"));\n      if (parent) {\n        parents.add(parent);\n      }\n    }\n    for (const parent of parents) parent.normalize();\n  }\n\n  /**\n   * Shows only the items that match the provided query.\n   * @param {string} query The search query.\n   * @returns {number} The count of matching items.\n   */\n  showOnlyMatchingItems(query) {\n    for (const heading of this.allHeadings) this.hideHeading(heading);\n    for (const parent of this.allParents) this.collapseParent(parent);\n\n    // Split the query into search terms.\n    const terms = splitQuery(query);\n    let matchCount = 0;\n\n    // Evaluate each item.\n    for (const { haystack, link, container, heading, parents } of this.items) {\n      this.resetHighlighting(link);\n      const isMatch = terms.every((needle) => haystack.includes(needle));\n\n      this.toggleElement(container, isMatch);\n\n      if (isMatch) {\n        matchCount++;\n        this.highlightMatches(link, terms);\n        if (heading) {\n          this.showHeading(heading);\n        }\n        for (const parent of parents) {\n          this.expandParent(parent);\n        }\n      }\n    }\n\n    return matchCount;\n  }\n\n  /**\n   * Hides a heading element by toggling its container.\n   * @private\n   * @param {HTMLElement} heading The heading element to hide.\n   */\n  hideHeading(heading) {\n    const container = this.getContainerOf(heading);\n    this.toggleElement(container, false);\n  }\n\n  /**\n   * Collapses a parent details element and hides its container.\n   * @private\n   * @param {HTMLDetailsElement} parent The details element to collapse.\n   */\n  collapseParent(parent) {\n    const container = this.getContainerOf(parent);\n    this.toggleElement(container, false);\n    parent.dataset.wasOpen = parent.dataset.wasOpen || String(parent.open);\n    parent.open = false;\n  }\n\n  /**\n   * Highlights matching terms within an element by wrapping them with a <mark> element.\n   * @private\n   * @param {HTMLElement} el The element to highlight.\n   * @param {string[]} terms The search terms.\n   */\n  highlightMatches(el, terms) {\n    const nodes = this.getTextNodesOf(el);\n\n    for (const node of nodes) {\n      const haystack = node.textContent?.toLowerCase();\n      if (!haystack) {\n        continue;\n      }\n\n      const ranges = new Map();\n      for (const needle of terms) {\n        const index = haystack.indexOf(needle);\n        if (index !== -1) {\n          ranges.set(index, index + needle.length);\n        }\n      }\n      const sortedRanges = [...ranges].sort(\n        ([x1, y1], [x2, y2]) => x1 - x2 || y1 - y2,\n      );\n\n      const span = this.replaceChildNode(node, \"span\");\n      span.className = \"sidebar-filter-mark-container\";\n\n      /** @type {Text|undefined} */\n      const initialRest = [...span.childNodes].find(\n        (node) => node instanceof Text,\n      );\n\n      if (!initialRest) {\n        continue;\n      }\n\n      /** @type {Text} */\n      let rest = initialRest;\n      let cursor = 0;\n\n      for (const [rangeBegin, rangeEnd] of sortedRanges) {\n        if (rangeBegin < cursor) {\n          // Ignore overlapping or conflicting ranges.\n          continue;\n        }\n\n        // Split the text node to isolate the matching segment.\n        const match = rest.splitText(rangeBegin - cursor);\n        const newRest = match.splitText(rangeEnd - rangeBegin);\n\n        // Replace the matching text node with a <mark> element.\n        this.replaceChildNode(match, \"mark\");\n\n        rest = newRest;\n        cursor = rangeEnd;\n      }\n    }\n  }\n\n  /**\n   * Recursively collects all text nodes under a given node.\n   * @private\n   * @param {Node} node The node to search within.\n   * @returns {Array<Node & Text>} An array of text nodes.\n   */\n  getTextNodesOf(node) {\n    const parents = [node];\n    /** @type {Array<Node & Text>} */\n    const nodes = [];\n\n    for (const parent of parents) {\n      for (const childNode of parent.childNodes) {\n        if (childNode.nodeType === Node.TEXT_NODE) {\n          // @ts-expect-error TypeScript doesn't understand that Node.TEXT_NODE implies Node & Text.\n          nodes.push(childNode);\n        } else if (childNode.hasChildNodes && childNode.hasChildNodes()) {\n          parents.push(childNode);\n        }\n      }\n    }\n    return nodes;\n  }\n\n  /**\n   * Replaces a child node with a new element of the specified tag.\n   * @private\n   * @param {ChildNode} node The node to be replaced.\n   * @param {string} tagName The tag name for the new element.\n   * @returns {HTMLElement} The newly created element.\n   */\n  replaceChildNode(node, tagName) {\n    const text = node.textContent;\n    const newNode = document.createElement(tagName);\n    newNode.textContent = text || \"\";\n    node.replaceWith(newNode);\n    return newNode;\n  }\n\n  /**\n   * Ensures that the container for the given heading is visible.\n   * @private\n   * @param {HTMLElement} heading The heading element to show.\n   */\n  showHeading(heading) {\n    const container = heading && this.getContainerOf(heading);\n    if (container) {\n      this.toggleElement(container, true);\n    }\n  }\n\n  /**\n   * Retrieves the first heading element (from allHeadings) that appears before the specified element.\n   * @private\n   * @param {HTMLElement} el The reference element.\n   * @returns {HTMLElement|undefined} The matching heading or undefined.\n   */\n  getHeadingOf(el) {\n    return this.findFirstElementBefore(el, this.allHeadings);\n  }\n\n  /**\n   * Finds the first element among candidates that occurs before the specified element in the document.\n   * @private\n   * @param {HTMLElement} el The reference element.\n   * @param {HTMLElement[]} candidates An array of candidate elements.\n   * @returns {HTMLElement|undefined} The found element or undefined if none found.\n   */\n  findFirstElementBefore(el, candidates) {\n    return candidates.findLast(\n      (candidate) =>\n        candidate.compareDocumentPosition(el) &\n        Node.DOCUMENT_POSITION_FOLLOWING,\n    );\n  }\n\n  /**\n   * Expands a parent details element and ensures its container is visible.\n   * @private\n   * @param {HTMLDetailsElement} parent The details element to expand.\n   */\n  expandParent(parent) {\n    const container = this.getContainerOf(parent);\n    this.toggleElement(container, true);\n    parent.open = true;\n  }\n\n  /**\n   * Retrieves all parent <details> elements for the given element.\n   * @private\n   * @param {HTMLElement} el The element for which to find parent details.\n   * @returns {HTMLDetailsElement[]} An array of parent <details> elements.\n   */\n  getParentsOf(el) {\n    const parents = [];\n    let parent = el.parentElement ? el.parentElement.closest(\"details\") : null;\n\n    while (parent) {\n      parents.push(parent);\n      parent = parent.parentElement\n        ? parent.parentElement.closest(\"details\")\n        : null;\n    }\n\n    return parents;\n  }\n}\n","/**\n * @file Sidebar filter Lit element.\n */\n\nimport { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { gleanClick } from \"../../utils/glean.js\";\nimport cancelIcon from \"../icon/cancel.svg?lit\";\n\nimport styles from \"./element.css?lit\";\nimport { SidebarFilterer } from \"./sidebar-filterer.js\";\n\nimport \"../button/element.js\";\n\nclass MDNSidebarFilter extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static get properties() {\n    return {\n      query: { type: String },\n      matchCount: { state: true, type: Number },\n    };\n  }\n\n  /**\n   * Creates an instance of SidebarFilterElement.\n   */\n  constructor() {\n    super();\n    /** @type {string} */\n    this.query = \"\";\n    /** @type {number|undefined} */\n    this.matchCount = undefined;\n    /** @type {boolean} */\n    this.hasTyped = false;\n    /**\n     * @type {SidebarFilterer|null}\n     */\n    this._filterer = null;\n    /**\n     * @type {HTMLElement|null}\n     */\n    this._quicklinks = null;\n    /**\n     * @type {HTMLElement|null}\n     */\n    this._sidebarInnerNav = null;\n  }\n\n  firstUpdated() {\n    this._quicklinks = document.querySelector(\".left-sidebar\");\n    if (this._quicklinks) {\n      this._sidebarInnerNav =\n        /** @type {HTMLElement|null} */ (\n          this._quicklinks.querySelector(\".left-sidebar__content\")\n        ) || null;\n    }\n  }\n\n  /**\n   * Saves the current scroll position from the specified elements and resets them.\n   * @private\n   */\n  _saveScrollPosition() {\n    const refs = [this._quicklinks, this._sidebarInnerNav];\n    for (const el of refs) {\n      if (el && el.dataset.lastScrollTop === undefined && el.scrollTop > 0) {\n        el.dataset.lastScrollTop = String(el.scrollTop);\n        el.scrollTop = 0;\n      }\n    }\n  }\n\n  /**\n   * Restores the scroll position of the previously saved elements.\n   * @private\n   */\n  _restoreScrollPosition() {\n    const refs = [this._quicklinks, this._sidebarInnerNav];\n    for (const el of refs) {\n      if (el && typeof el.dataset.lastScrollTop === \"string\") {\n        el.scrollTop = Number(el.dataset.lastScrollTop);\n        delete el.dataset.lastScrollTop;\n      }\n    }\n  }\n\n  /**\n   * Lit lifecycle method called after properties are updated.\n   * Triggers telemetry events and applies filtering logic when properties change.\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  updated(changedProperties) {\n    if (changedProperties.has(\"query\")) {\n      // Mark that the user has typed if the query is non-empty.\n      if (this.query && this.query.trim().length > 0 && !this.hasTyped) {\n        this.hasTyped = true;\n        gleanClick(\"sidebar_filter_typed\");\n      }\n\n      if (this._quicklinks) {\n        // Initialize the filterer if it has not yet been created.\n        if (!this._filterer) {\n          const root = this._quicklinks.querySelector(\".left-sidebar__content\");\n          if (root instanceof HTMLElement) {\n            this._filterer = new SidebarFilterer(root);\n          }\n        }\n        const trimmedQuery = this.query.trim();\n        if (trimmedQuery) {\n          this._saveScrollPosition();\n        }\n        if (this._filterer) {\n          const count = this._filterer.applyFilter(trimmedQuery);\n          this.matchCount = count;\n        }\n        if (!trimmedQuery) {\n          this._restoreScrollPosition();\n        }\n      }\n    }\n  }\n\n  /**\n   * Event handler for focus events on the text field.\n   * @private\n   */\n  _onFocus() {\n    gleanClick(\"sidebar_filter_focus\");\n  }\n\n  /**\n   * Event handler for input events on the text field.\n   * @param {Event} event The input event.\n   * @private\n   */\n  _onInput(event) {\n    const target = /** @type {HTMLInputElement} */ (event.target);\n    this.query = target.value;\n  }\n\n  /**\n   * Clears the filter input and resets the active state.\n   * @private\n   */\n  _clearFilter() {\n    this.query = \"\";\n  }\n\n  /**\n   * Renders the component template.\n   * @returns {import(\"@lit\").TemplateResult}\n   */\n  render() {\n    return html`\n      <label class=\"icon\" for=\"input\">\n        <span class=\"visually-hidden\"\n          >${this.l10n(\"sidebar-filter-filter-sidebar\")`Filter sidebar`}</span\n        >\n      </label>\n      <input\n        id=\"input\"\n        autocomplete=\"off\"\n        class=\"input\"\n        type=\"text\"\n        placeholder=${this.l10n(\"sidebar-filter-filter\")`Filter`}\n        .value=${this.query}\n        @focus=${this._onFocus}\n        @input=${this._onInput}\n      />\n      ${\n        this.matchCount === undefined\n          ? \"\"\n          : html` <span class=\"counter\"> ${this.matchCount} </span> `\n      }\n      <mdn-button\n        class=\"button\"\n        variant=\"plain\"\n        .icon=${cancelIcon}\n        icon-only\n        @click=${this._clearFilter}\n        >${this.l10n(\n          \"sidebar-filter-clear-filter-input\",\n        )`Clear filter input`}</mdn-button\n      >\n    `;\n  }\n}\n\ncustomElements.define(\"mdn-sidebar-filter\", MDNSidebarFilter);\n"],"names":["SidebarFilterer","e","HTMLElement","HTMLAnchorElement","JSON","Set","document","t","Boolean","String","r","Map","s","Text","Node","MDNSidebarFilter","Number","customElements"],"mappings":"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"}

package/out/static/client/{2173.a812d7b499aeb899.js → 2173.a1ead47e2d458f50.js}

@@ -1,4 +1,4 @@
-export const __rspack_esm_id=2173;export const __rspack_esm_ids=[2173];export const __webpack_modules__={85239(e,a,t){var i=t(22009),r=t(31601),n=t.n(r),o=t(76314),l=t.n(o),s=t(4417),c=t.n(s),d=new t.U(t(22300)),m=l()(n()),g=c()(d);m.push([e.id,`.sidebar-placement-skyscraper{display:grid;grid-template-areas:"pong pong" "note no";grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:fit-content;margin:1rem 0;max-width:12rem;min-height:37.5rem}.sidebar-placement-skyscraper .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light));grid-area:pong;height:37.5rem;margin:0;overflow:hidden;width:10rem}@supports (color:light-dark(red,red)){.sidebar-placement-skyscraper .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement-skyscraper .placement-container) *{--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light))}}:is(.sidebar-placement-skyscraper .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>.placement-content{align-items:center;color:var(--side-color);display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.sidebar-placement-skyscraper mdn-placement-note{grid-area:note;margin:0 auto 0 0}.sidebar-placement-skyscraper mdn-placement-no{grid-area:no;margin:0 0 0 auto}.sidebar-placement{display:flex;flex-direction:column;height:fit-content;margin:1rem 0;max-width:12rem;min-height:22rem}.sidebar-placement .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light));--border-radius:0.5rem;border:1px solid var(--color-border-primary);border-radius:var(--border-radius);margin:0;min-height:20rem;overflow:hidden;position:relative;width:11rem}@supports (color:light-dark(red,red)){.sidebar-placement .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement .placement-container) *{--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light))}}:is(.sidebar-placement .placement-container):has(>.placement-link:focus-visible){outline:auto}:is(.sidebar-placement .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content{background:linear-gradient(to top,var(--side-background) 9rem,#0000 12rem,#0000);border-radius:var(--border-radius);color:var(--side-color);display:flex;flex-direction:column;gap:.25rem;height:100%;justify-content:end;line-height:1.25;position:absolute;top:0;width:100%}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-heading{font-size:.8875rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-copy{font-size:.75rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta{--color:var(--side-color);--icon-primary:var(--color);background-color:#ffffff11;border:2px solid;border-radius:2rem;color:var(--color);font-size:.75rem;font-weight:var(--font-weight-bold);margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:"";display:inline-flex;height:.625rem;margin-left:.25rem;mask-image:url(${g});mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (width >= 31rem){.sidebar-placement.horizontal{align-self:flex-end;max-width:30rem;min-height:12rem}.sidebar-placement.horizontal .placement-container{height:10rem;min-height:0;width:25rem}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link)>img{height:100%;position:absolute;width:auto;z-index:1}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link) .placement-content{align-items:end;background:var(--side-background);flex-direction:column;height:100%;justify-content:end;left:0;padding-left:10rem;width:auto}}`,""]);let p=(0,i.AH)([m.toString()]);t.d(a,{},{A:p})},22300(e,a,t){e.exports=t.p+"external-link.4f3a2dc8e402cae5.svg"},57468(e,a,t){t.r(a);var i=t(22009),r=t(6616),n=t(84199);t(47764),t(13755);var o=t(51360),l=t(85239);let MDNPlacementSidebar=class MDNPlacementSidebar extends(0,o.N)(i.WF){static styles=l.A;static get properties(){return{horizontal:{type:Boolean}}}constructor(){super(),this.horizontal=!1}renderComplete(e){let{side:a}=e;if(!a)return i.s6;let{status:t,click:o,view:l,copy:s,image:c,imageFormat:d,alt:m,cta:g,colors:p,version:h,heading:k}=a;if("success"!==t)return i.s6;this._viewedUrl||(this._viewedUrl=l,this._version=h);let{textColor:b,backgroundColor:u,textColorDark:f,backgroundColorDark:v}=p||{},y=Object.fromEntries([["--side-background-light",u],["--side-color-light",b],["--side-background-dark",v||u],["--side-color-dark",f||b]].filter(([e,a])=>!!a)),w="side";return"skyscraper"===d?(0,i.qy)`<section class="sidebar-placement-skyscraper">
+export const __rspack_esm_id=2173;export const __rspack_esm_ids=[2173];export const __webpack_modules__={85239(e,a,t){var i=t(22009),r=t(31601),n=t.n(r),o=t(76314),l=t.n(o),s=t(4417),c=t.n(s),d=new t.U(t(22300)),m=l()(n()),g=c()(d);m.push([e.id,`.sidebar-placement-skyscraper{display:grid;grid-template-areas:"pong pong" "note no";grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:fit-content;margin:1rem 0;max-width:12rem;min-height:37.5rem}.sidebar-placement-skyscraper .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light));grid-area:pong;height:37.5rem;margin:0;overflow:hidden;width:10rem}@supports (color:light-dark(red,red)){.sidebar-placement-skyscraper .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement-skyscraper .placement-container) *{--csstools-light-dark-toggle-af7c934e-0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-0,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-1,var(--side-color-light))}}:is(.sidebar-placement-skyscraper .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement-skyscraper .placement-container) .placement-link)>.placement-content{align-items:center;color:var(--side-color);display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.sidebar-placement-skyscraper mdn-placement-note{grid-area:note;margin:0 auto 0 0}.sidebar-placement-skyscraper mdn-placement-no{grid-area:no;margin:0 0 0 auto}.sidebar-placement{display:flex;flex-direction:column;height:fit-content;margin:1rem 0;max-width:12rem;min-height:22rem}.sidebar-placement .placement-container{--side-background-light:#111;--side-color-light:#fff;--side-background-dark:#111;--side-color-dark:#fff;--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light));--border-radius:0.5rem;border:1px solid var(--color-border-primary);border-radius:var(--border-radius);margin:0;min-height:20rem;overflow:hidden;position:relative;width:11rem}@supports (color:light-dark(red,red)){.sidebar-placement .placement-container{--side-background:light-dark(var(--side-background-light),var(--side-background-dark));--side-color:light-dark(var(--side-color-light),var(--side-color-dark))}}@supports not (color:light-dark(tan,tan)){:is(.sidebar-placement .placement-container) *{--csstools-light-dark-toggle-af7c934e-2:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle-af7c934e-2,var(--side-background-light));--csstools-light-dark-toggle-af7c934e-3:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle-af7c934e-3,var(--side-color-light))}}:is(.sidebar-placement .placement-container):has(>.placement-link:focus-visible){outline:auto}:is(.sidebar-placement .placement-container) .placement-link{display:block;height:100%;padding:0;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>img{height:auto;width:100%}:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content{background:linear-gradient(to top,var(--side-background) 9rem,#0000 12rem,#0000);border-radius:var(--border-radius);color:var(--side-color);display:flex;flex-direction:column;gap:.25rem;height:100%;justify-content:end;line-height:1.25;position:absolute;top:0;width:100%}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-heading{font-size:.8875rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-copy{font-size:.75rem;padding:0 1rem}:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta{--color:var(--side-color);--icon-primary:var(--color);background-color:#ffffff11;border:2px solid;border-radius:2rem;color:var(--color);font-size:.75rem;font-weight:var(--font-weight-bold);margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:"";display:inline-flex;height:.625rem;margin-left:.25rem;mask-image:url(${g});mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (width >= 31rem){.sidebar-placement.horizontal{align-self:flex-end;max-width:30rem;min-height:12rem}.sidebar-placement.horizontal .placement-container{height:10rem;min-height:0;width:25rem}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link)>img{height:100%;position:absolute;width:auto;z-index:1}:is(:is(.sidebar-placement.horizontal .placement-container) .placement-link) .placement-content{align-items:end;background:var(--side-background);flex-direction:column;height:100%;justify-content:end;left:0;padding-left:10rem;width:auto}}`,""]);let p=(0,i.AH)([m.toString()]);t.d(a,{},{A:p})},22300(e,a,t){e.exports=t.p+"external-link.4f3a2dc8e402cae5.svg"},57468(e,a,t){t.r(a);var i=t(22009),r=t(6616),n=t(84199);t(47764),t(13755);var o=t(51360),l=t(85239);let MDNPlacementSidebar=class MDNPlacementSidebar extends(0,o.N)(i.WF){static styles=l.A;static get properties(){return{horizontal:{type:Boolean}}}constructor(){super(),this.horizontal=!1}renderComplete(e){let{side:a}=e;if(!a)return i.s6;let{status:t,click:o,view:l,copy:s,image:c,imageFormat:d,alt:m,cta:g,colors:p,version:h,heading:k}=a;if("success"!==t)return i.s6;this._viewedUrl||(this._viewedUrl=l,this._version=h);let{textColor:b,backgroundColor:u,textColorDark:f,backgroundColorDark:v}=p||{},y=Object.fromEntries([["--side-background-light",u],["--side-color-light",b],["--side-background-dark",v||u],["--side-color-dark",f||b]].filter(([e,a])=>a)),w="side";return"skyscraper"===d?(0,i.qy)`<section class="sidebar-placement-skyscraper">
           <div
             ${(0,r.K)(this._placementRef)}
             class="placement-container"
@@ -54,4 +54,4 @@ export const __rspack_esm_id=2173;export const __rspack_esm_ids=[2173];export co
           </div>
           <mdn-placement-no></mdn-placement-no>
         </section>`}};customElements.define("mdn-placement-sidebar",MDNPlacementSidebar),t.d(a,{MDNPlacementSidebar:()=>MDNPlacementSidebar})}};
-//# sourceMappingURL=2173.a812d7b499aeb899.js.map
+//# sourceMappingURL=2173.a1ead47e2d458f50.js.map

package/out/static/client/{2173.a812d7b499aeb899.js.map → 2173.a1ead47e2d458f50.js.map}

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

package/out/static/client/3818.8819a9d779da3429.js.map

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

package/out/static/client/{4060.b5edd2eca5be7d2b.js → 4060.687b98e9db2bc493.js}

@@ -1,4 +1,4 @@
-export const __rspack_esm_id=4060;export const __rspack_esm_ids=[4060];export const __webpack_modules__={85952(t,o,e){var a=e(22009),r=e(31601),l=e.n(r),c=e(76314),n=(e.n(c))()(l());n.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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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.AH)([n.toString()]);e.d(o,{},{A:m})},7895(t,o,e){e.r(o);var a=e(22009),r=e(6616),l=e(84199);e(47764),e(13755);var c=e(51360),n=e(85952);let MDNPlacementBottom=class MDNPlacementBottom extends(0,c.N)(a.WF){static styles=n.A;renderComplete(t){let o=t?.hpFooter||t?.bottom;if(!o)return a.s6;let{status:e,click:c,view:n,image:m,alt:i,colors:s,version:g}=o;if("success"!==e)return a.s6;this._viewedUrl||(this._viewedUrl=n,this._version=g);let{backgroundColor:d,textColor:p}=s||{},b=Object.fromEntries([["--bottom-background",d],["--bottom-color",p]].filter(([t,o])=>!!o)),h=t?.hpFooter?"hp-footer":"bottom-banner";return(0,a.qy)`<div
+export const __rspack_esm_id=4060;export const __rspack_esm_ids=[4060];export const __webpack_modules__={85952(t,o,e){var a=e(22009),r=e(31601),l=e.n(r),c=e(76314),n=(e.n(c))()(l());n.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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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.AH)([n.toString()]);e.d(o,{},{A:m})},7895(t,o,e){e.r(o);var a=e(22009),r=e(6616),l=e(84199);e(47764),e(13755);var c=e(51360),n=e(85952);let MDNPlacementBottom=class MDNPlacementBottom extends(0,c.N)(a.WF){static styles=n.A;renderComplete(t){let o=t?.hpFooter||t?.bottom;if(!o)return a.s6;let{status:e,click:c,view:n,image:m,alt:i,colors:s,version:g}=o;if("success"!==e)return a.s6;this._viewedUrl||(this._viewedUrl=n,this._version=g);let{backgroundColor:d,textColor:p}=s||{},b=Object.fromEntries([["--bottom-background",d],["--bottom-color",p]].filter(([t,o])=>o)),h=t?.hpFooter?"hp-footer":"bottom-banner";return(0,a.qy)`<div
       ${(0,r.K)(this._placementRef)}
       class="bottom-placement"
       style=${(0,l.W)(b)}
@@ -23,4 +23,4 @@ export const __rspack_esm_id=4060;export const __rspack_esm_ids=[4060];export co
         <mdn-placement-note></mdn-placement-note>
       </section>
     </div>`}};customElements.define("mdn-placement-bottom",MDNPlacementBottom),e.d(o,{MDNPlacementBottom:()=>MDNPlacementBottom})}};
-//# sourceMappingURL=4060.b5edd2eca5be7d2b.js.map
+//# sourceMappingURL=4060.687b98e9db2bc493.js.map

package/out/static/client/{4060.b5edd2eca5be7d2b.js.map → 4060.687b98e9db2bc493.js.map}

@@ -1 +1 @@
-{"version":3,"file":"4060.b5edd2eca5be7d2b.js","sources":["webpack://@mdn/fred/./components/placement-bottom/element.css","webpack://@mdn/fred/./components/placement-bottom/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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","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    const type = placementContext?.hpFooter ? \"hp-footer\" : \"bottom-banner\";\n\n    return html`<div\n      ${ref(this._placementRef)}\n      class=\"bottom-placement\"\n      style=${styleMap(styles)}\n      data-type=${type}\n    >\n      <section class=\"placement-container\">\n        <a\n          class=\"placement-link\"\n          data-glean-id=${`pong: pong->click ${type}`}\n          href=${this.clickLink(click, version)}\n          target=\"_blank\"\n          rel=\"sponsored\"\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"],"names":["MDNPlacementBottom","c","Object","r","customElements"],"mappings":"oKAII,EAA0B,C,UAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,yqEAA0qE,GAAG,EAEttE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,E,oHCOhD,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,CAAEC,MAAAA,CAAK,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,IAEzB,EAAO,GAAkB,SAAW,YAAc,gBAExD,MAAO,QAAI,CAAC;MACV,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;gBACf,EAAE,EAAK;;;;;wBAKC,EAAE,CAAC,kBAAkB,EAAE,EAAK,CAAC,CAAC;eACvC,EAAE,IAAI,CAAC,SAAS,CAACF,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAG,eAAe,MAAM,CAAC,uBAAwBJ,oB"}
+{"version":3,"file":"4060.687b98e9db2bc493.js","sources":["webpack://@mdn/fred/./components/placement-bottom/element.css","webpack://@mdn/fred/./components/placement-bottom/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-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","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]) => v),\n    );\n    const type = placementContext?.hpFooter ? \"hp-footer\" : \"bottom-banner\";\n\n    return html`<div\n      ${ref(this._placementRef)}\n      class=\"bottom-placement\"\n      style=${styleMap(styles)}\n      data-type=${type}\n    >\n      <section class=\"placement-container\">\n        <a\n          class=\"placement-link\"\n          data-glean-id=${`pong: pong->click ${type}`}\n          href=${this.clickLink(click, version)}\n          target=\"_blank\"\n          rel=\"sponsored\"\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"],"names":["MDNPlacementBottom","c","Object","r","customElements"],"mappings":"oKAII,EAA0B,C,UAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,yqEAA0qE,GAAG,EAEttE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,E,oHCOhD,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,CAAEC,MAAAA,CAAK,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,IAEjB,EAAO,GAAkB,SAAW,YAAc,gBAExD,MAAO,QAAI,CAAC;MACV,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;gBACf,EAAE,EAAK;;;;;wBAKC,EAAE,CAAC,kBAAkB,EAAE,EAAK,CAAC,CAAC;eACvC,EAAE,IAAI,CAAC,SAAS,CAACF,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAG,eAAe,MAAM,CAAC,uBAAwBJ,oB"}

package/out/static/client/4366.80589277ea3ce36d.js

@@ -0,0 +1,4 @@
+export const __rspack_esm_id=4366;export const __rspack_esm_ids=[4366];export const __webpack_modules__={11932(e,t,i){var s=i(22009),a=i(31601),r=i.n(a),n=i(76314),o=(i.n(n))()(r());o.push([e.id,"div{align-items:center;display:flex;height:100%;padding-inline:.5em}",""]);let l=(0,s.AH)([o.toString()]);i.d(t,{},{A:l})},14925(e,t,i){i.r(t);var s=i(22009),a=i(70693),r=i(11932);let MDNWriterReload=class MDNWriterReload extends(0,a.J)(s.WF){static ssr=!1;static styles=r.A;constructor(){super(),this._state="",this._comparisons=0}get _interval(){return Number(sessionStorage.getItem("writer-reload-interval")||1e3)}set _interval(e){sessionStorage.setItem("writer-reload-interval",e.toString()),this._reloading||this.requestUpdate()}connectedCallback(){super.connectedCallback(),this._pollForChanges()}render(){let e=this._interval/1e3;return(0,s.qy)`<div>
+      ${this.l10n.raw({id:"writer-reload-polling",args:{seconds:e}})}
+    </div>`}async _reloadIfChanged(){let e=new URL("index.json",new URL(location.pathname+"/",location.origin)),t=await fetch(e);if(t.ok){let e=await t.text();this._state?(this._comparisons++,this._state!==e?(this._comparisons<=1&&(this._interval*=2),location.reload(),this._reloading=!0):this._interval=this._interval<=2e3?1e3:this._interval/2):this._state=e}else console.error("Failed to fetch document",t.status,t.statusText)}async _pollForChanges(){for(;!this._reloading;)"visible"===document.visibilityState&&await this._reloadIfChanged(),await n(this._interval)}};async function n(e){return new Promise(t=>setTimeout(t,e))}customElements.define("mdn-writer-reload",MDNWriterReload),i.d(t,{default:()=>MDNWriterReload})}};
+//# sourceMappingURL=4366.80589277ea3ce36d.js.map

package/out/static/client/4366.80589277ea3ce36d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"4366.80589277ea3ce36d.js","sources":["webpack://@mdn/fred/./components/writer-reload/element.css","webpack://@mdn/fred/./components/writer-reload/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `div{align-items:center;display:flex;height:100%;padding-inline:.5em}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * Custom element which reloads the page when the document has changed.\n */\nexport default class MDNWriterReload extends L10nMixin(LitElement) {\n  static ssr = false;\n  static styles = styles;\n\n  constructor() {\n    super();\n    this._state = \"\";\n    this._comparisons = 0;\n  }\n\n  get _interval() {\n    return Number(sessionStorage.getItem(\"writer-reload-interval\") || 1000);\n  }\n\n  /** @param {number} interval  */\n  set _interval(interval) {\n    sessionStorage.setItem(\"writer-reload-interval\", interval.toString());\n    if (!this._reloading) {\n      this.requestUpdate();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._pollForChanges();\n  }\n\n  render() {\n    const seconds = this._interval / 1000;\n    return html`<div>\n      ${this.l10n.raw({\n        id: \"writer-reload-polling\",\n        args: { seconds },\n      })}\n    </div>`;\n  }\n\n  async _reloadIfChanged() {\n    const url = new URL(\n      \"index.json\",\n      new URL(location.pathname + \"/\", location.origin),\n    );\n    const res = await fetch(url);\n    if (res.ok) {\n      const state = await res.text();\n      // eslint-disable-next-line unicorn/no-negated-condition\n      if (!this._state) {\n        this._state = state;\n      } else {\n        this._comparisons++;\n        // eslint-disable-next-line unicorn/no-negated-condition\n        if (this._state !== state) {\n          if (this._comparisons <= 1) {\n            this._interval *= 2;\n          }\n          location.reload();\n          this._reloading = true;\n        } else {\n          this._interval = this._interval <= 2000 ? 1000 : this._interval / 2;\n        }\n      }\n    } else {\n      console.error(\"Failed to fetch document\", res.status, res.statusText);\n    }\n  }\n\n  async _pollForChanges() {\n    while (!this._reloading) {\n      if (document.visibilityState === \"visible\") {\n        await this._reloadIfChanged();\n      }\n      await timeout(this._interval);\n    }\n  }\n}\n\n/**\n * @param {number} ms\n */\nasync function timeout(ms) {\n  return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\ncustomElements.define(\"mdn-writer-reload\", MDNWriterReload);\n"],"names":["MDNWriterReload","Number","sessionStorage","URL","location","fetch","console","document","Promise","setTimeout","customElements"],"mappings":"oKAII,EAA0B,C,UAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,uEAAwE,GAAG,EAEpH,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,E,0ECCxC,IAAMA,gBAAN,MAAMA,uBAAwB,QAAU,IAAU,EAC/D,OAAO,IAAM,EAAM,AACnB,QAAO,OAAS,GAAM,AAAC,AAEvB,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,MAAM,CAAG,GACd,IAAI,CAAC,YAAY,CAAG,CACtB,CAEA,IAAI,WAAY,CACd,OAAOC,OAAOC,eAAe,OAAO,CAAC,2BAA6B,IACpE,CAGA,IAAI,UAAU,CAAQ,CAAE,CACtBA,eAAe,OAAO,CAAC,yBAA0B,EAAS,QAAQ,IAC9D,AAAC,IAAI,CAAC,UAAU,EAClB,IAAI,CAAC,aAAa,EAEtB,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,eAAe,EACtB,CAEA,QAAS,CACP,IAAM,EAAU,IAAI,CAAC,SAAS,CAAG,IACjC,MAAO,QAAI,CAAC;MACV,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAI,wBACJ,KAAM,CAAE,SAAQ,CAClB,GAAG;UACC,CAAC,AACT,CAEA,MAAM,kBAAmB,CACvB,IAAM,EAAM,IAAIC,IACd,aACA,IAAIA,IAAIC,SAAS,QAAQ,CAAG,IAAKA,SAAS,MAAM,GAE5C,EAAM,MAAMC,MAAM,GACxB,GAAI,EAAI,EAAE,CAAE,CACV,IAAM,EAAQ,MAAM,EAAI,IAAI,EAEvB,KAAI,CAAC,MAAM,EAGd,IAAI,CAAC,YAAY,GAEb,IAAI,CAAC,MAAM,GAAK,GACd,IAAI,CAAC,YAAY,EAAI,GACvB,KAAI,CAAC,SAAS,EAAI,GAEpBD,SAAS,MAAM,GACf,IAAI,CAAC,UAAU,CAAG,IAElB,IAAI,CAAC,SAAS,CAAG,IAAI,CAAC,SAAS,EAAI,IAAO,IAAO,IAAI,CAAC,SAAS,CAAG,GAXpE,IAAI,CAAC,MAAM,CAAG,CAclB,MACEE,QAAQ,KAAK,CAAC,2BAA4B,EAAI,MAAM,CAAE,EAAI,UAAU,CAExE,CAEA,MAAM,iBAAkB,CACtB,KAAO,CAAC,IAAI,CAAC,UAAU,EACjBC,AAA6B,YAA7BA,SAAS,eAAe,EAC1B,MAAM,IAAI,CAAC,gBAAgB,GAE7B,MAAM,EAAQ,IAAI,CAAC,SAAS,CAEhC,CACF,EAKA,eAAe,EAAQ,CAAE,EACvB,OAAO,IAAIC,QAAQ,AAAC,GAAYC,WAAW,EAAS,GACtD,CAEAC,eAAe,MAAM,CAAC,oBAAqBV,iB"}

package/out/static/client/{4759.5c1f42f6042d6457.js → 4759.f58bb90e314ae9c1.js}

@@ -1,4 +1,4 @@
-export const __rspack_esm_id=4759;export const __rspack_esm_ids=[4759];export const __webpack_modules__={43437(a,t,e){var n=e(22009),o=e(31601),r=e.n(o),i=e(76314),l=(e.n(i))()(r());l.push([a.id,'.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-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){.hp-main-placement .placement-container{grid-template-areas:"pong note" "pong no";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:"pong" "note";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}',""]);let c=(0,n.AH)([l.toString()]);e.d(t,{},{A:c})},44394(a,t,e){e.r(t);var n=e(22009),o=e(6616),r=e(84199);e(47764),e(13755);var i=e(51360),l=e(43437);let MDNPlacementHpMain=class MDNPlacementHpMain extends(0,i.N)(n.WF){static styles=l.A;renderComplete(a){let{hpMain:t}=a;if(!t)return n.s6;let{status:e,click:i,view:l,image:c,alt:p,colors:m,version:s}=t;if("success"!==e)return n.s6;this._viewedUrl||(this._viewedUrl=l,this._version=s);let{backgroundColor:d,textColor:g}=m||{},h=Object.fromEntries([["--hp-main-background",d],["--hp-main-color",g]].filter(([a,t])=>!!t)),k="hp-main";return(0,n.qy)`<div
+export const __rspack_esm_id=4759;export const __rspack_esm_ids=[4759];export const __webpack_modules__={43437(a,t,e){var n=e(22009),o=e(31601),r=e.n(o),i=e(76314),l=(e.n(i))()(r());l.push([a.id,'.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-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){.hp-main-placement .placement-container{grid-template-areas:"pong note" "pong no";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:"pong" "note";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}',""]);let c=(0,n.AH)([l.toString()]);e.d(t,{},{A:c})},44394(a,t,e){e.r(t);var n=e(22009),o=e(6616),r=e(84199);e(47764),e(13755);var i=e(51360),l=e(43437);let MDNPlacementHpMain=class MDNPlacementHpMain extends(0,i.N)(n.WF){static styles=l.A;renderComplete(a){let{hpMain:t}=a;if(!t)return n.s6;let{status:e,click:i,view:l,image:c,alt:p,colors:m,version:s}=t;if("success"!==e)return n.s6;this._viewedUrl||(this._viewedUrl=l,this._version=s);let{backgroundColor:d,textColor:g}=m||{},h=Object.fromEntries([["--hp-main-background",d],["--hp-main-color",g]].filter(([a,t])=>t)),k="hp-main";return(0,n.qy)`<div
       ${(0,o.K)(this._placementRef)}
       class="hp-main-placement"
       style=${(0,r.W)(h)}
@@ -23,4 +23,4 @@ export const __rspack_esm_id=4759;export const __rspack_esm_ids=[4759];export co
         <mdn-placement-note></mdn-placement-note>
       </section>
     </div>`}};customElements.define("mdn-placement-hp-main",MDNPlacementHpMain),e.d(t,{MDNPlacementHpMain:()=>MDNPlacementHpMain})}};
-//# sourceMappingURL=4759.5c1f42f6042d6457.js.map
+//# sourceMappingURL=4759.f58bb90e314ae9c1.js.map

package/out/static/client/{4759.5c1f42f6042d6457.js.map → 4759.f58bb90e314ae9c1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"4759.5c1f42f6042d6457.js","sources":["webpack://@mdn/fred/./components/placement-hp-main/element.css","webpack://@mdn/fred/./components/placement-hp-main/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-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){.hp-main-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementHpMain extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const { hpMain: data } = placementContext;\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        [\"--hp-main-background\", backgroundColor],\n        [\"--hp-main-color\", textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n    const type = \"hp-main\";\n\n    return html`<div\n      ${ref(this._placementRef)}\n      class=\"hp-main-placement\"\n      style=${styleMap(styles)}\n      data-type=${type}\n    >\n      <section class=\"placement-container\">\n        <a\n          class=\"placement-link\"\n          data-glean-id=${`pong: pong->click ${type}`}\n          href=${this.clickLink(click, version)}\n          target=\"_blank\"\n          rel=\"sponsored\"\n        >\n          <img\n            src=${this.imgLink(image)}\n            aria-hidden=${!alt}\n            alt=${alt || \"\"}\n            width=\"970\"\n            height=\"250\"\n          />\n        </a>\n        <mdn-placement-note></mdn-placement-note>\n      </section>\n    </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-hp-main\", MDNPlacementHpMain);\n"],"names":["MDNPlacementHpMain","n","Object","customElements"],"mappings":"oKAII,EAA0B,C,UAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,ysEAA0sE,GAAG,EAEtvE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,E,qHCOhD,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,OAAQ,CAAI,CAAE,CAAG,EACzB,GAAI,CAAC,EACH,OAAOC,EAAA,EAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAOA,EAAA,EAAO,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,uBAAwB,EAAgB,CACzC,CAAC,kBAAmB,EAAU,CAC/B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAEzB,EAAO,UAEb,MAAO,QAAI,CAAC;MACV,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;gBACf,EAAE,EAAK;;;;;wBAKC,EAAE,CAAC,kBAAkB,EAAE,EAAK,CAAC,CAAC;eACvC,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,wBAAyBH,oB"}
+{"version":3,"file":"4759.f58bb90e314ae9c1.js","sources":["webpack://@mdn/fred/./components/placement-hp-main/element.css","webpack://@mdn/fred/./components/placement-hp-main/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-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){.hp-main-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementHpMain extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const { hpMain: data } = placementContext;\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        [\"--hp-main-background\", backgroundColor],\n        [\"--hp-main-color\", textColor],\n      ].filter(([_, v]) => v),\n    );\n    const type = \"hp-main\";\n\n    return html`<div\n      ${ref(this._placementRef)}\n      class=\"hp-main-placement\"\n      style=${styleMap(styles)}\n      data-type=${type}\n    >\n      <section class=\"placement-container\">\n        <a\n          class=\"placement-link\"\n          data-glean-id=${`pong: pong->click ${type}`}\n          href=${this.clickLink(click, version)}\n          target=\"_blank\"\n          rel=\"sponsored\"\n        >\n          <img\n            src=${this.imgLink(image)}\n            aria-hidden=${!alt}\n            alt=${alt || \"\"}\n            width=\"970\"\n            height=\"250\"\n          />\n        </a>\n        <mdn-placement-note></mdn-placement-note>\n      </section>\n    </div>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-hp-main\", MDNPlacementHpMain);\n"],"names":["MDNPlacementHpMain","n","Object","customElements"],"mappings":"oKAII,EAA0B,C,UAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,ysEAA0sE,GAAG,EAEtvE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,E,qHCOhD,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,OAAQ,CAAI,CAAE,CAAG,EACzB,GAAI,CAAC,EACH,OAAOC,EAAA,EAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAOA,EAAA,EAAO,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,uBAAwB,EAAgB,CACzC,CAAC,kBAAmB,EAAU,CAC/B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,IAEjB,EAAO,UAEb,MAAO,QAAI,CAAC;MACV,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;gBACf,EAAE,EAAK;;;;;wBAKC,EAAE,CAAC,kBAAkB,EAAE,EAAK,CAAC,CAAC;eACvC,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,wBAAyBH,oB"}

package/out/static/client/{5196.a890e2f848933898.js → 5196.635f7f8d7984bead.js}

@@ -1,4 +1,4 @@
-export const __rspack_esm_id=5196;export const __rspack_esm_ids=[5196];export const __webpack_modules__={58621(e,t,s){var r=s(22009),i=s(31601),a=s.n(i),_=s(76314),n=s.n(_),o=s(2128),u=s(4417),h=s.n(u),c=new s.U(s(76903)),d=n()(a());d.i(o.A);var l=h()(c);d.push([e.id,`:host{display:block}.survey{background-color:var(--color-background-purple);border-radius:.5rem;display:grid;padding:1rem 1rem 1rem 5rem;row-gap:.75rem}header{align-items:center;display:flex;justify-content:space-between}header:before{background:url(${l});background-size:cover;content:"";height:49px;margin-left:calc(-53px - .5rem);margin-top:1rem;position:absolute;width:53px}p{margin:0}mdn-button::part(button):hover{background-color:initial;border:1px solid var(--color-text-purple)}mdn-button::part(icon){color:var(--color-text-purple)}summary{cursor:pointer}a,summary{color:var(--color-text-purple)}a:hover{-webkit-text-decoration:none;text-decoration:none}iframe{border:none;border-radius:.5rem;height:500px;overflow:hidden;width:100%}footer{font-size:var(--font-size-small);font-style:italic}`,""]);let v=(0,r.AH)([d.toString()]);s.d(t,{},{A:v})},76903(e,t,s){e.exports=s.p+"survey.f09bea45fd2aabc9.svg"},10423(e,t,s){s.r(t),s.d(t,{MDNSurvey:()=>MDNSurvey});var r=s(22009),i=s(12477),a=s(6616);s(35268);var _=s(70693),n=s(23727),o=s(10336),u=s(58621);let h=Object.freeze({BLOG_FEEDBACK_2023:"BLOG_FEEDBACK_2023",BROWSER_SURVEY_OCT_2022:"BROWSER_SURVEY_OCT_2022",CONTENT_DISCOVERY_2023:"CONTENT_DISCOVERY_2023",CSS_CASCADE_2022:"CSS_CASCADE_2022",DE_LOCALE_2024:"DE_LOCALE_2024",DE_LOCALE_2024_EVAL:"DE_LOCALE_2024_EVAL",FIREFOX_WEB_COMPAT_2023:"FIREFOX_WEB_COMPAT_2023",INTEROP_2023:"INTEROP_2023",IT_LOCALE_2025:"IT_LOCALE_2025",WEB_COMPONENTS_2023:"WEB_COMPONENTS_2023",DISCOVERABILITY_2023:"DISCOVERABILITY_2023",WEB_SECURITY_2023:"WEB_SECURITY_2023",DISCOVERABILITY_AUG_2023:"DISCOVERABILITY_AUG_2023",WEB_APP_AUGUST_2024:"WEB_APP_AUGUST_2024",HOMEPAGE_FEEDBACK_2024:"HOMEPAGE_FEEDBACK_2024",WEBDX_EDITING_2024:"WEBDX_EDITING_2024",HOUSE_SURVEY_2025:"HOUSE_SURVEY_2025",JS_PROPOSALS_2025:"JS_PROPOSALS_2025",FIRST_FRED_2025:"FIRST_FRED_2025",DEVELOPER_SURVEY_2025:"DEVELOPER_SURVEY_2025",BASELINE_A11Y_2026:"BASELINE_A11Y_2026",CANVAS_2026:"CANVAS_2026"}),c=[{key:h.CANVAS_2026,bucket:h.CANVAS_2026,show:e=>/^\/en-US\/docs\/Web\/API/.test(e),src:e=>{let t=new URL("https://survey.alchemer.com/s3/8586037/MDN-Canvas-API");return t.searchParams.set("referrer",e),t.toString()},teaser:"We’re running a survey to better understand use of the Canvas API.",question:"We’d love for you to take 2 minutes to share your feedback.",link:!0,rateFrom:0,rateTill:.1,start:Date.parse("2026-06-08"),end:Date.parse("2026-06-15")}];function d(e){let t,s=`survey.${e}`;try{t=JSON.parse(localStorage?.getItem(s)??"{}")}catch{t={}}return 0===Object.keys(t).length&&l(e,t={random:Math.random(),seen_at:null,dismissed_at:null,submitted_at:null,opened_at:null}),t}function l(e,t){let s=`survey.${e}`;try{localStorage?.setItem(s,JSON.stringify(t))}catch{}}let MDNSurvey=class MDNSurvey extends(0,_.J)(r.WF){static styles=u.A;static ssr=!1;constructor(){super(),this._survey=void 0,this._surveyState=void 0,this._isOpen=!1,this._force=!1,this._source=void 0,this._detailsRef=(0,a._)()}connectedCallback(){super.connectedCallback(),this.#e(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}#e(){this._survey=this.#r(),this._survey&&(this._surveyState=d(this._survey.bucket),this._source="function"==typeof this._survey.src?this._survey.src(location.pathname):this._survey.src,this.#i())}#r(){let e=new URLSearchParams(location.search).get("force_survey");return this._force=null!==e,c.find(t=>{if(this._force)return!e||t.key===e;if(!t.show(location.pathname))return!1;let s=Date.now();if(s<t.start||t.end<s)return!1;let r=d(t.bucket);return r.random>=t.rateFrom&&r.random<t.rateTill})}#i(){this._survey&&this._surveyState&&!this._surveyState.seen_at&&(this._surveyState={...this._surveyState,seen_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("seen"))}#_(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,dismissed_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("dismissed"),this.requestUpdate())}#n(){this.#o()}#u(){if(!this._survey||!this._surveyState||this._isOpen)return;let e=this._detailsRef.value;e&&e.open&&(this.#o(),this._isOpen=!0,this.requestUpdate())}#o(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,opened_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("opened"))}#h(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,submitted_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("submitted"),this.requestUpdate())}#a(e){this._survey&&(0,n.w)(`survey: ${e} ${this._survey.bucket}`)}#t(){this._messageListener=e=>{"https://survey.alchemer.com"===e.origin&&"submit"===e.data&&this.#h()},window.addEventListener("message",this._messageListener,!1)}#s(){this._messageListener&&window.removeEventListener("message",this._messageListener,!1)}render(){if(!this._survey||!this._surveyState||!this._force&&(this._surveyState.dismissed_at||this._surveyState?.submitted_at))return r.s6;let e=this.l10n("survey-hide-this-survey")`Hide this survey`;return(0,r.qy)`
+export const __rspack_esm_id=5196;export const __rspack_esm_ids=[5196];export const __webpack_modules__={58621(e,t,s){var r=s(22009),i=s(31601),a=s.n(i),_=s(76314),n=s.n(_),o=s(2128),u=s(4417),h=s.n(u),c=new s.U(s(76903)),d=n()(a());d.i(o.A);var l=h()(c);d.push([e.id,`:host{display:block}.survey{background-color:var(--color-background-purple);border-radius:.5rem;display:grid;padding:1rem 1rem 1rem 5rem;row-gap:.75rem}header{align-items:center;display:flex;justify-content:space-between}header:before{background:url(${l});background-size:cover;content:"";height:49px;margin-left:calc(-53px - .5rem);margin-top:1rem;position:absolute;width:53px}p{margin:0}mdn-button::part(button):hover{background-color:initial;border:1px solid var(--color-text-purple)}mdn-button::part(icon){color:var(--color-text-purple)}summary{cursor:pointer}a,summary{color:var(--color-text-purple)}a:hover{-webkit-text-decoration:none;text-decoration:none}iframe{border:none;border-radius:.5rem;height:500px;overflow:hidden;width:100%}footer{font-size:var(--font-size-small);font-style:italic}`,""]);let v=(0,r.AH)([d.toString()]);s.d(t,{},{A:v})},76903(e,t,s){e.exports=s.p+"survey.f09bea45fd2aabc9.svg"},10423(e,t,s){s.r(t),s.d(t,{MDNSurvey:()=>MDNSurvey});var r=s(22009),i=s(12477),a=s(6616);s(35268);var _=s(70693),n=s(23727),o=s(10336),u=s(58621);let h=Object.freeze({BLOG_FEEDBACK_2023:"BLOG_FEEDBACK_2023",BROWSER_SURVEY_OCT_2022:"BROWSER_SURVEY_OCT_2022",CONTENT_DISCOVERY_2023:"CONTENT_DISCOVERY_2023",CSS_CASCADE_2022:"CSS_CASCADE_2022",DE_LOCALE_2024:"DE_LOCALE_2024",DE_LOCALE_2024_EVAL:"DE_LOCALE_2024_EVAL",FIREFOX_WEB_COMPAT_2023:"FIREFOX_WEB_COMPAT_2023",INTEROP_2023:"INTEROP_2023",IT_LOCALE_2025:"IT_LOCALE_2025",WEB_COMPONENTS_2023:"WEB_COMPONENTS_2023",DISCOVERABILITY_2023:"DISCOVERABILITY_2023",WEB_SECURITY_2023:"WEB_SECURITY_2023",DISCOVERABILITY_AUG_2023:"DISCOVERABILITY_AUG_2023",WEB_APP_AUGUST_2024:"WEB_APP_AUGUST_2024",HOMEPAGE_FEEDBACK_2024:"HOMEPAGE_FEEDBACK_2024",WEBDX_EDITING_2024:"WEBDX_EDITING_2024",HOUSE_SURVEY_2025:"HOUSE_SURVEY_2025",JS_PROPOSALS_2025:"JS_PROPOSALS_2025",FIRST_FRED_2025:"FIRST_FRED_2025",DEVELOPER_SURVEY_2025:"DEVELOPER_SURVEY_2025",BASELINE_A11Y_2026:"BASELINE_A11Y_2026",CANVAS_2026:"CANVAS_2026"}),c=[{key:h.CANVAS_2026,bucket:h.CANVAS_2026,show:e=>/^\/en-US\/docs\/Web\/API/.test(e),src:e=>{let t=new URL("https://survey.alchemer.com/s3/8586037/MDN-Canvas-API");return t.searchParams.set("referrer",e),t.toString()},teaser:"We’re running a survey to better understand use of the Canvas API.",question:"We’d love for you to take 2 minutes to share your feedback.",link:!0,rateFrom:0,rateTill:.1,start:Date.parse("2026-06-08"),end:Date.parse("2026-06-15")}];function d(e){let t,s=`survey.${e}`;try{t=JSON.parse(localStorage?.getItem(s)??"{}")}catch{t={}}return 0===Object.keys(t).length&&l(e,t={random:Math.random(),seen_at:null,dismissed_at:null,submitted_at:null,opened_at:null}),t}function l(e,t){let s=`survey.${e}`;try{localStorage?.setItem(s,JSON.stringify(t))}catch{}}let MDNSurvey=class MDNSurvey extends(0,_.J)(r.WF){static styles=u.A;static ssr=!1;constructor(){super(),this._survey=void 0,this._surveyState=void 0,this._isOpen=!1,this._force=!1,this._source=void 0,this._detailsRef=(0,a._)()}connectedCallback(){super.connectedCallback(),this.#e(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}#e(){this._survey=this.#r(),this._survey&&(this._surveyState=d(this._survey.bucket),this._source="function"==typeof this._survey.src?this._survey.src(location.pathname):this._survey.src,this.#i())}#r(){let e=new URLSearchParams(location.search).get("force_survey");return this._force=null!==e,c.find(t=>{if(this._force)return!e||t.key===e;if(!t.show(location.pathname))return!1;let s=Date.now();if(s<t.start||t.end<s)return!1;let r=d(t.bucket);return r.random>=t.rateFrom&&r.random<t.rateTill})}#i(){this._survey&&this._surveyState&&!this._surveyState.seen_at&&(this._surveyState={...this._surveyState,seen_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("seen"))}#_(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,dismissed_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("dismissed"),this.requestUpdate())}#n(){this.#o()}#u(){if(!this._survey||!this._surveyState||this._isOpen)return;let e=this._detailsRef.value;e&&e.open&&(this.#o(),this._isOpen=!0,this.requestUpdate())}#o(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,opened_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("opened"))}#h(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,submitted_at:Date.now()},l(this._survey.bucket,this._surveyState),this.#a("submitted"),this.requestUpdate())}#a(e){this._survey&&(0,n.w)(`survey: ${e} ${this._survey.bucket}`)}#t(){this._messageListener=e=>{"https://survey.alchemer.com"===e.origin&&"submit"===e.data&&this.#h()},window.addEventListener("message",this._messageListener,{capture:!1})}#s(){this._messageListener&&window.removeEventListener("message",this._messageListener,!1)}render(){if(!this._survey||!this._surveyState||!this._force&&(this._surveyState.dismissed_at||this._surveyState?.submitted_at))return r.s6;let e=this.l10n("survey-hide-this-survey")`Hide this survey`;return(0,r.qy)`
       <div class="survey">
         <header>
           <p>${this._survey.teaser}</p>
@@ -30,4 +30,4 @@ export const __rspack_esm_id=5196;export const __rspack_esm_ids=[5196];export co
         ${this._survey.footnote?(0,r.qy)` <footer>(${this._survey.footnote})</footer> `:r.s6}
       </div>
     `}};customElements.define("mdn-survey",MDNSurvey)}};
-//# sourceMappingURL=5196.a890e2f848933898.js.map
+//# sourceMappingURL=5196.635f7f8d7984bead.js.map