@mdn/fred 0.0.4 → 0.0.5

package/.prettierignore

@@ -0,0 +1 @@
+CHANGELOG.md

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.0.4"
+  ".": "0.0.5"
 }

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.0.5](https://github.com/mdn/fred/compare/v0.0.4...v0.0.5) (2025-07-01)
+
+
+### Bug Fixes
+
+* **homepage-hero:** avoid non-link underline ([#287](https://github.com/mdn/fred/issues/287)) ([919f789](https://github.com/mdn/fred/commit/919f789b89e1afdb3610a509aa2e70c665616704))
+* **placement:** add focus-visible to sidebar ([#280](https://github.com/mdn/fred/issues/280)) ([7381c00](https://github.com/mdn/fred/commit/7381c00b1fb9ca769d902da8bd7c76f1f6b33d76))
+
+
+### Enhancements
+
+* **search-modal:** update blur, mark, links ([#309](https://github.com/mdn/fred/issues/309)) ([8ce49b3](https://github.com/mdn/fred/commit/8ce49b3b4f508ce0ba735e4c9d0b3f4155234b3c))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump the dev group with 2 updates ([#307](https://github.com/mdn/fred/issues/307)) ([48f89f3](https://github.com/mdn/fred/commit/48f89f3b1410bf7cb8d18d73a00cad6c396a012a))
+* **search-modal:** add styles ([#304](https://github.com/mdn/fred/issues/304)) ([4e08eff](https://github.com/mdn/fred/commit/4e08effaf9a8080cea33c0b61ce44f509facee64))
+
 ## [0.0.4](https://github.com/mdn/fred/compare/v0.0.3...v0.0.4) (2025-06-30)
 
 

package/components/color/global.css

@@ -16,9 +16,11 @@
 :root {
   --color-white: hsl(0deg 0% 100%);
   --color-white-alpha-25: hsl(0deg 0% 100% / 25%);
+  --color-white-alpha-75: hsl(0deg 0% 100% / 75%);
 
   --color-black: hsl(0deg 0% 0%);
   --color-black-alpha-25: hsl(0deg 0% 0% / 25%);
+  --color-black-alpha-75: hsl(0deg 0% 0% / 75%);
 }
 
 /* Gray */

package/components/homepage-hero/server.js

@@ -11,7 +11,6 @@ export class HomepageHero extends ServerComponent {
       <h1>
         ${context.l10n.raw({
           id: "homepage-hero-title",
-          elements: { developers: { tag: "u" } },
         })}
       </h1>
       <p>

package/components/placement-sidebar/element.css

@@ -35,9 +35,16 @@
     border: 1px solid var(--color-border-primary);
     border-radius: var(--border-radius);
 
+    &:has(> .placement-link:focus-visible) {
+      outline: auto;
+    }
+
     .placement-link {
+      display: block;
+
       width: 100%;
       height: 100%;
+
       padding: 0;
 
       > img {

package/components/reference-layout/server.css

@@ -59,6 +59,8 @@
 
     max-height: calc(100vh - var(--sticky-header-height));
 
+    padding-left: 2px;
+
     overflow-y: auto;
   }
 

package/components/search-modal/element.css

@@ -5,11 +5,138 @@
 }
 
 dialog {
-  width: 50vw;
-  max-height: 90vh;
-  margin: 5vh auto;
+  padding: 0;
+
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.5rem;
+
+  /* Desktop menu */
+  @media (width > 1006px) {
+    width: calc(var(--layout-content-max) + 1rem);
+    max-height: calc(100% - var(--sticky-header-height) - 2rem);
+    margin: calc(var(--sticky-header-height) + 1rem) auto 1rem;
+  }
+
+  /* Mobile menu */
+  @media (width <= 1006px) {
+    width: 100%;
+    max-height: calc(100% - 2rem);
+    margin: 1rem auto;
+  }
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &::backdrop {
+    background-color: light-dark(
+      var(--color-white-alpha-75),
+      var(--color-black-alpha-75)
+    );
+    backdrop-filter: blur(3px);
+  }
+}
+
+progress {
+  width: calc(100% - 2rem);
+  margin: 0 auto 0.5rem;
+}
+
+form {
+  display: grid;
+
+  grid-template-columns: min-content 1fr;
+
+  gap: 0.5rem;
+  place-items: center;
+
+  padding: 1rem;
+
+  font-size: var(--font-size-large);
+
+  &::before {
+    width: 1em;
+    height: 1em;
+
+    content: "";
+
+    background-color: var(--color-border-secondary);
+
+    mask-image: url("../icon/search.svg");
+    mask-size: contain;
+  }
+}
+
+input {
+  width: 100%;
+
+  padding: 0;
+  margin: 0;
+
+  font-size: inherit;
+
+  outline: none;
+
+  background-color: transparent;
+  border: none;
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+
+  overflow: auto;
+
+  overscroll-behavior: contain;
+
+  &:has(li) {
+    border-top: 1px solid var(--color-border-primary);
+  }
 }
 
 li[data-selected] {
-  background: yellow;
+  background: var(--color-background-blue);
+}
+
+li {
+  list-style-type: none;
+
+  &:not([data-selected]):hover {
+    background-color: var(--color-background-secondary);
+  }
+}
+
+li > * {
+  width: 100%;
+  padding: 0.5rem 1.5rem;
+}
+
+a {
+  display: grid;
+  color: var(--color-link-normal);
+  text-decoration: none;
+
+  &:visited {
+    color: var(--color-link-visited);
+  }
+}
+
+.title {
+  font-size: var(--font-size-large);
+}
+
+.slug {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+}
+
+mark {
+  color: var(--color-text-primary);
+  background-color: light-dark(var(--color-yellow-80), var(--color-yellow-20));
 }

package/components/search-modal/element.js

@@ -64,27 +64,46 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
 
   /** @param {KeyboardEvent} event */
   _keydown(event) {
-    const results = (this._queryIndex.value?.length || 0) + 1;
     switch (event.key) {
       case "ArrowUp": {
         event.preventDefault();
-        const value = (this._selected - 1) % results;
-        this._selected = value < 0 ? results + value : value;
+        this._select(this._selected - 1);
         break;
       }
       case "ArrowDown":
         event.preventDefault();
-        this._selected = (this._selected + 1) % results;
+        this._select(this._selected + 1);
         break;
       default:
         return;
     }
   }
 
+  /** @returns {HTMLElement|null} */
+  _getSelectedItem() {
+    return this.shadowRoot?.querySelector("[data-selected] a") ?? null;
+  }
+
+  /** @param {number} index */
+  _select(index) {
+    const results = (this._queryIndex.value?.length || 0) + 1;
+    const value = index % results;
+    this._selected = value < 0 ? results + index : value;
+    setTimeout(() => {
+      const item = this._getSelectedItem();
+      if (item instanceof HTMLElement) {
+        item.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    }, 0);
+  }
+
   /** @param {SubmitEvent} event */
   _submit(event) {
     event.preventDefault();
-    const item = this.shadowRoot?.querySelector("[data-selected] a");
+    const item = this._getSelectedItem();
     if (item instanceof HTMLElement) {
       item.click();
     }
@@ -157,6 +176,12 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
     document.removeEventListener("keydown", this._globalKeydown);
   }
 
+  _renderLoadingSearchIndex() {
+    return html`<progress
+      aria-label=${this.l10n`Loading search index…`}
+    ></progress>`;
+  }
+
   render() {
     const siteSearchIndex = this._queryIndex.value?.length || 0;
     return html`
@@ -167,24 +192,32 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
             .value=${this._query}
             autofocus
             @input=${this._input}
+            placeholder=${this.l10n`Search`}
+            aria-label=${this.l10n`Search`}
           />
         </form>
+        ${this._queryIndex.render({
+          initial: this._renderLoadingSearchIndex.bind(this),
+          pending: this._renderLoadingSearchIndex.bind(this),
+        })}
         <ul>
           ${this._queryIndex.render({
-            initial: () => html`<progress></progress>`,
-            pending: () => html`<progress></progress>`,
             complete: (results) =>
               results?.map(
                 ({ title, url }, i) => html`
                   <li ?data-selected=${this._selected === i} data-result=${i}>
-                    <a href=${url}>${HighlightMatch(title, this._query)}</a>
-                    <small>
-                      ${url
-                        .split("/")
-                        .slice(1)
-                        .filter((p) => !["docs", this.locale].includes(p))
-                        .join(" / ")}
-                    </small>
+                    <a href=${url}
+                      ><span class="title"
+                        >${HighlightMatch(title, this._query)}</span
+                      >
+                      <span class="slug"
+                        >${url
+                          .split("/")
+                          .slice(1)
+                          .filter((p) => !["docs", this.locale].includes(p))
+                          .join(" / ")}</span
+                      >
+                    </a>
                   </li>
                 `,
               ),
@@ -196,15 +229,17 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
               >
                 <a
                   href=${`/${this.locale}/search?${new URLSearchParams({ q: this._query })}`}
-                  >${this.l10n.raw({
-                    id: "search-modal-site-search",
-                    args: {
-                      query: this._query,
-                    },
-                    elements: {
-                      query: { tag: "code" },
-                    },
-                  })}</a
+                  ><span class="title"
+                    >${this.l10n.raw({
+                      id: "search-modal-site-search",
+                      args: {
+                        query: this._query,
+                      },
+                      elements: {
+                        query: { tag: "code" },
+                      },
+                    })}</span
+                  ></a
                 >
               </li>`
             : nothing}
@@ -215,7 +250,7 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
 
   updated() {
     if (this._shiftFocus) {
-      const selected = this.shadowRoot?.querySelector("[data-selected] a");
+      const selected = this._getSelectedItem();
       if (selected instanceof HTMLElement) {
         selected.focus();
       }

package/dist/client/1739.1435a6d3f1a2dd88.js

@@ -0,0 +1,8 @@
+export const __webpack_ids__=["1739"];export const __webpack_modules__={73594:function(e,a,o){o.r(a),o.d(a,{MDNHomepageSearch:()=>MDNHomepageSearch});var r=o(14703),t=o(69535),n=o(39187),s=o(8036);let MDNHomepageSearch=class MDNHomepageSearch extends(0,t.q)(r.oi){static styles=s.Z;_showModal(){let e=document.querySelector("#search");e instanceof n.MDNSearchModal?e.showModal():console.error("MDNSearchModal not found!")}render(){return(0,r.dy)`<button
+      class="mdn-homepage-search"
+      title=${this.l10n`Search the site`}
+      @click=${this._showModal}
+    >
+      ${this.l10n`Search`}
+    </button>`}};customElements.define("mdn-homepage-search",MDNHomepageSearch)},8036:function(e,a,o){o.d(a,{Z:()=>p});var r=o(14703),t=o(8081),n=o.n(t),s=o(23645),c=o.n(s),i=o(61667),l=o.n(i),d=new o.U(o(99454)),m=c()(n()),h=l()(d);m.push([e.id,`.mdn-homepage-search{border-color:var(--color-border-primary);border-radius:2em;border-style:solid;display:flex;font-size:var(--font-size-large);gap:.5ch;justify-content:center;margin:0 auto;padding:1em}.mdn-homepage-search:after{background-color:var(--color-text-primary);content:"";display:inline-block;flex-shrink:0;height:1.1em;-webkit-mask-image:url(${h});mask-image:url(${h});-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:1.1em}button{cursor:pointer}`,""]);let p=(0,r.iv)([m.toString()])}};
+//# sourceMappingURL=1739.1435a6d3f1a2dd88.js.map

package/dist/client/1739.1435a6d3f1a2dd88.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1739.1435a6d3f1a2dd88.js","sources":["webpack://@mdn/fred/./components/homepage-search/element.js","webpack://@mdn/fred/./components/homepage-search/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { MDNSearchModal } from \"../search-modal/element.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNHomepageSearch extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  _showModal() {\n    const search = document.querySelector(\"#search\");\n    if (search instanceof MDNSearchModal) {\n      search.showModal();\n    } else {\n      console.error(\"MDNSearchModal not found!\");\n    }\n  }\n\n  render() {\n    return html`<button\n      class=\"mdn-homepage-search\"\n      title=${this.l10n`Search the site`}\n      @click=${this._showModal}\n    >\n      ${this.l10n`Search`}\n    </button>`;\n  }\n}\ncustomElements.define(\"mdn-homepage-search\", MDNHomepageSearch);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/search.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, `.mdn-homepage-search{border-color:var(--color-border-primary);border-radius:2em;border-style:solid;display:flex;font-size:var(--font-size-large);gap:.5ch;justify-content:center;margin:0 auto;padding:1em}.mdn-homepage-search:after{background-color:var(--color-text-primary);content:\"\";display:inline-block;flex-shrink:0;height:1.1em;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:1.1em}button{cursor:pointer}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNHomepageSearch","s","document","console","customElements"],"mappings":"qMAOO,IAAMA,kBAAN,MAAMA,yBAA0B,QAAU,IAAU,EACzD,OAAO,OAASC,EAAA,CAAM,AAAC,AAEvB,aAAa,CACX,IAAM,EAASC,SAAS,aAAa,CAAC,UAClC,cAAkB,gBAAc,CAClC,EAAO,SAAS,GAEhBC,QAAQ,KAAK,CAAC,4BAElB,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;YAEJ,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aAC5B,EAAE,IAAI,CAAC,UAAU,CAAC;;MAEzB,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACb,CAAC,AACZ,CACF,EACAC,eAAe,MAAM,CAAC,sBAAuBJ,kB,kHCxBzC,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,mWAAmW,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,oIAAoI,CAAC,CAAE,GAAG,EAElnB,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/2776.435ecffa5f77c7eb.js

@@ -0,0 +1,43 @@
+export const __webpack_ids__=["2776"];export const __webpack_modules__={61667:function(e){e.exports=function(e,t){return(t||(t={}),e&&(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]|(%20)/.test(e)||t.needQuotes))?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e}},99454:function(e,t,r){e.exports=r.p+"search.5dd31cbeea7d1af9.svg"},39187:function(e,t,r){r.r(t),r.d(t,{MDNSearchModal:()=>MDNSearchModal,splitQuery:()=>s});var o=r(35470),a=r(14703),i=r(69535),l=r(1613);let MDNSearchModal=class MDNSearchModal extends(0,i.q)(a.oi){static styles=l.Z;static properties={_index:{state:!0},_query:{state:!0},_selected:{state:!0},_shiftFocus:{state:!0}};constructor(){super(),this._index=void 0,this._query="",this._selected=0,this._shiftFocus=!1}async _loadIndex(){this._index||(this._index=this._fetchIndex())}async _fetchIndex(){let e=await fetch(`/${this.locale}/search-index.json`),t=await e.json();return{flex:t.map(({title:e,url:t},r)=>({index:r,title:e.toLowerCase(),slugTail:t.split("/").pop()?.toLowerCase()||""})),items:t}}showModal(){this._loadIndex(),this.shadowRoot?.querySelector("dialog")?.showModal(),this.shadowRoot?.querySelector("input")?.select()}_input({target:e}){e instanceof HTMLInputElement&&(this._query=e.value)}_keydown(e){switch(e.key){case"ArrowUp":e.preventDefault(),this._select(this._selected-1);break;case"ArrowDown":e.preventDefault(),this._select(this._selected+1);break;default:return}}_getSelectedItem(){return this.shadowRoot?.querySelector("[data-selected] a")??null}_select(e){let t=(this._queryIndex.value?.length||0)+1,r=e%t;this._selected=r<0?t+e:r,setTimeout(()=>{let e=this._getSelectedItem();e instanceof HTMLElement&&e.scrollIntoView({behavior:"smooth",block:"nearest"})},0)}_submit(e){e.preventDefault();let t=this._getSelectedItem();t instanceof HTMLElement&&t.click()}_focus({target:e}){if(e instanceof HTMLElement){let t=e.closest("[data-result]");if(t instanceof HTMLElement){let e=Number.parseInt(t.dataset.result||"NaN",10);Number.isNaN(e)||(this._selected=e,this._shiftFocus=!0)}else this._shiftFocus=!1}}_globalKeydown(e){let t=e.composedPath()?.[0]||e.target;if(t instanceof HTMLElement&&(["TEXTAREA","INPUT"].includes(t.tagName)||t.isContentEditable))return;let r=globalThis.getSelection()?.toString(),o=e.key,a=e.ctrlKey||e.metaKey,i="k"===o&&a&&!e.shiftKey;("/"===o&&!a||i)&&(e.preventDefault(),this.showModal(),r&&(this._query=r))}_queryIndex=new o.iQ(this,{args:()=>[this._index,this._query],task:async([e,t])=>{if(e&&t){var r=t,o=await e;let a=r.toLowerCase().trim(),i=s(r);return o.flex.filter(({title:e})=>i.every(t=>e.includes(t))).map(({index:e,title:t,slugTail:r})=>[Number([t,r].includes(a)),e]).sort(([e],[t])=>t-e).map(([e,t])=>t).slice(0,10).map(e=>e&&(o.items||[])[e]).filter(Boolean)}}});connectedCallback(){super.connectedCallback(),this._globalKeydown=this._globalKeydown.bind(this),document.addEventListener("keydown",this._globalKeydown),this._loadIndex=this._loadIndex.bind(this),this.renderRoot.addEventListener("mouseover",this._loadIndex)}disconnectedCallback(){super.disconnectedCallback(),this.renderRoot.removeEventListener("mouseover",this._loadIndex),document.removeEventListener("keydown",this._globalKeydown)}_renderLoadingSearchIndex(){return(0,a.dy)`<progress
+      aria-label=${this.l10n`Loading search index…`}
+    ></progress>`}render(){let e=this._queryIndex.value?.length||0;return(0,a.dy)`
+      <dialog @keydown=${this._keydown} @focusin=${this._focus} closedby="any">
+        <form @submit=${this._submit}>
+          <input
+            type="text"
+            .value=${this._query}
+            autofocus
+            @input=${this._input}
+            placeholder=${this.l10n`Search`}
+            aria-label=${this.l10n`Search`}
+          />
+        </form>
+        ${this._queryIndex.render({initial:this._renderLoadingSearchIndex.bind(this),pending:this._renderLoadingSearchIndex.bind(this)})}
+        <ul>
+          ${this._queryIndex.render({complete:e=>e?.map(({title:e,url:t},r)=>(0,a.dy)`
+                  <li ?data-selected=${this._selected===r} data-result=${r}>
+                    <a href=${t}
+                      ><span class="title"
+                        >${(function(e,t){let r=s(t),o=r.map(e=>e.replaceAll(/[.*+?^${}()|[\]\\]/g,String.raw`\$&`)).map(e=>`(${e})`).join("|");return e.split(RegExp(o,"gi")).filter(Boolean).map(e=>r.includes(e.toLowerCase())?(0,a.dy)`<mark>${e}</mark>`:e)})(e,this._query)}</span
+                      >
+                      <span class="slug"
+                        >${t.split("/").slice(1).filter(e=>!["docs",this.locale].includes(e)).join(" / ")}</span
+                      >
+                    </a>
+                  </li>
+                `)})}
+          ${this._query?(0,a.dy)`<li
+                ?data-selected=${this._selected===e}
+                data-result=${e}
+              >
+                <a
+                  href=${`/${this.locale}/search?${new URLSearchParams({q:this._query})}`}
+                  ><span class="title"
+                    >${this.l10n.raw({id:"search-modal-site-search",args:{query:this._query},elements:{query:{tag:"code"}}})}</span
+                  ></a
+                >
+              </li>`:a.Ld}
+        </ul>
+      </dialog>
+    `}updated(){if(this._shiftFocus){let e=this._getSelectedItem();e instanceof HTMLElement&&e.focus()}}};function s(e){return(e=e.trim().toLowerCase()).startsWith(".")||e.endsWith(".")?e.split(/[ ,]+/):e.split(/[ ,.]+/)}customElements.define("mdn-search-modal",MDNSearchModal)},1613:function(e,t,r){r.d(t,{Z:()=>g});var o=r(14703),a=r(8081),i=r.n(a),l=r(23645),s=r.n(l),n=r(61667),d=r.n(n),c=new r.U(r(99454)),h=s()(i()),u=d()(c);h.push([e.id,`*,:after,:before{box-sizing:border-box}dialog{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:.5rem;padding:0}@media (min-width:1006.02px){dialog{margin:calc(var(--sticky-header-height) + 1rem) auto 1rem;max-height:calc(100% - var(--sticky-header-height) - 2rem);width:calc(var(--layout-content-max) + 1rem)}}@media (max-width:1006px){dialog{margin:1rem auto;max-height:calc(100% - 2rem);width:100%}}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-black-alpha-75);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--csstools-light-dark-toggle--1,var(--color-white-alpha-75))}@supports (color:light-dark(red,red)){dialog::backdrop{background-color:light-dark(var(--color-white-alpha-75),var(--color-black-alpha-75))}}progress{margin:0 auto .5rem;width:calc(100% - 2rem)}form{display:grid;font-size:var(--font-size-large);gap:.5rem;grid-template-columns:min-content 1fr;padding:1rem;place-items:center}form:before{background-color:var(--color-border-secondary);content:"";height:1em;-webkit-mask-image:url(${u});mask-image:url(${u});-webkit-mask-size:contain;mask-size:contain;width:1em}input{background-color:initial;border:none;font-size:inherit;margin:0;outline:none;padding:0;width:100%}input::placeholder{color:var(--color-text-secondary)}ul{margin:0;overflow:auto;overscroll-behavior:contain;padding:0}ul:has(li){border-top:1px solid var(--color-border-primary)}li[data-selected]{background:var(--color-background-blue)}li{list-style-type:none}li:not([data-selected]):hover{background-color:var(--color-background-secondary)}li>*{padding:.5rem 1.5rem;width:100%}a{color:var(--color-link-normal);display:grid;-webkit-text-decoration:none;text-decoration:none}a:visited{color:var(--color-link-visited)}.title{font-size:var(--font-size-large)}.slug{color:var(--color-text-secondary);font-size:var(--font-size-small)}mark{color:var(--color-text-primary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-yellow-20);background-color:var(--csstools-light-dark-toggle--0,var(--color-yellow-80))}@supports (color:light-dark(red,red)){mark{background-color:light-dark(var(--color-yellow-80),var(--color-yellow-20))}}`,""]);let g=(0,o.iv)([h.toString()])}};
+//# sourceMappingURL=2776.435ecffa5f77c7eb.js.map

package/dist/client/2776.435ecffa5f77c7eb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"2776.435ecffa5f77c7eb.js","sources":["webpack://@mdn/fred/./node_modules/css-loader/dist/runtime/getUrl.js","webpack://@mdn/fred/./components/search-modal/element.js","webpack://@mdn/fred/./components/search-modal/element.css"],"sourcesContent":["\"use strict\";\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNSearchModal extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    _index: { state: true },\n    _query: { state: true },\n    _selected: { state: true },\n    _shiftFocus: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {Promise<import(\"./types.js\").SearchIndex> | undefined} */\n    this._index = undefined;\n    this._query = \"\";\n    this._selected = 0;\n    this._shiftFocus = false;\n  }\n\n  async _loadIndex() {\n    if (this._index) {\n      return;\n    }\n\n    this._index = this._fetchIndex();\n  }\n\n  async _fetchIndex() {\n    const res = await fetch(`/${this.locale}/search-index.json`);\n    /** @type {import(\"./types.js\").SearchIndexItem[]} */\n    const items = await res.json();\n    /** @type {import(\"./types.js\").SearchIndexFlexItem[]} */\n    const flex = items.map(({ title, url }, index) => ({\n      index,\n      title: title.toLowerCase(),\n      slugTail: url.split(\"/\").pop()?.toLowerCase() || \"\",\n    }));\n\n    return {\n      flex,\n      items,\n    };\n  }\n\n  showModal() {\n    this._loadIndex();\n    this.shadowRoot?.querySelector(\"dialog\")?.showModal();\n    this.shadowRoot?.querySelector(\"input\")?.select();\n  }\n\n  /** @param {InputEvent} event */\n  _input({ target }) {\n    if (target instanceof HTMLInputElement) {\n      this._query = target.value;\n    }\n  }\n\n  /** @param {KeyboardEvent} event */\n  _keydown(event) {\n    switch (event.key) {\n      case \"ArrowUp\": {\n        event.preventDefault();\n        this._select(this._selected - 1);\n        break;\n      }\n      case \"ArrowDown\":\n        event.preventDefault();\n        this._select(this._selected + 1);\n        break;\n      default:\n        return;\n    }\n  }\n\n  /** @returns {HTMLElement|null} */\n  _getSelectedItem() {\n    return this.shadowRoot?.querySelector(\"[data-selected] a\") ?? null;\n  }\n\n  /** @param {number} index */\n  _select(index) {\n    const results = (this._queryIndex.value?.length || 0) + 1;\n    const value = index % results;\n    this._selected = value < 0 ? results + index : value;\n    setTimeout(() => {\n      const item = this._getSelectedItem();\n      if (item instanceof HTMLElement) {\n        item.scrollIntoView({\n          behavior: \"smooth\",\n          block: \"nearest\",\n        });\n      }\n    }, 0);\n  }\n\n  /** @param {SubmitEvent} event */\n  _submit(event) {\n    event.preventDefault();\n    const item = this._getSelectedItem();\n    if (item instanceof HTMLElement) {\n      item.click();\n    }\n  }\n\n  /** @param {FocusEvent} event */\n  _focus({ target }) {\n    if (target instanceof HTMLElement) {\n      const focused = target.closest(\"[data-result]\");\n      if (focused instanceof HTMLElement) {\n        const index = Number.parseInt(focused.dataset.result || \"NaN\", 10);\n        if (!Number.isNaN(index)) {\n          this._selected = index;\n          this._shiftFocus = true;\n        }\n      } else {\n        this._shiftFocus = false;\n      }\n    }\n  }\n\n  /** @param {KeyboardEvent} event */\n  _globalKeydown(event) {\n    const target = event.composedPath()?.[0] || event.target;\n    const isTextField =\n      target instanceof HTMLElement &&\n      ([\"TEXTAREA\", \"INPUT\"].includes(target.tagName) ||\n        target.isContentEditable);\n\n    if (isTextField) {\n      return;\n    }\n\n    const selection = globalThis.getSelection()?.toString();\n    const keyPressed = event.key;\n    const ctrlOrMetaPressed = event.ctrlKey || event.metaKey;\n    const isSlash = keyPressed === \"/\" && !ctrlOrMetaPressed;\n    const isCtrlK = keyPressed === \"k\" && ctrlOrMetaPressed && !event.shiftKey;\n\n    if (isSlash || isCtrlK) {\n      event.preventDefault();\n      this.showModal();\n      if (selection) {\n        this._query = selection;\n      }\n    }\n  }\n\n  _queryIndex = new Task(this, {\n    args: () => [this._index, this._query],\n    task: async ([index, query]) => {\n      if (!index || !query) {\n        return;\n      }\n      return quickSearch(query, await index);\n    },\n  });\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._globalKeydown = this._globalKeydown.bind(this);\n    document.addEventListener(\"keydown\", this._globalKeydown);\n    this._loadIndex = this._loadIndex.bind(this);\n    this.renderRoot.addEventListener(\"mouseover\", this._loadIndex);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.renderRoot.removeEventListener(\"mouseover\", this._loadIndex);\n    document.removeEventListener(\"keydown\", this._globalKeydown);\n  }\n\n  _renderLoadingSearchIndex() {\n    return html`<progress\n      aria-label=${this.l10n`Loading search index…`}\n    ></progress>`;\n  }\n\n  render() {\n    const siteSearchIndex = this._queryIndex.value?.length || 0;\n    return html`\n      <dialog @keydown=${this._keydown} @focusin=${this._focus} closedby=\"any\">\n        <form @submit=${this._submit}>\n          <input\n            type=\"text\"\n            .value=${this._query}\n            autofocus\n            @input=${this._input}\n            placeholder=${this.l10n`Search`}\n            aria-label=${this.l10n`Search`}\n          />\n        </form>\n        ${this._queryIndex.render({\n          initial: this._renderLoadingSearchIndex.bind(this),\n          pending: this._renderLoadingSearchIndex.bind(this),\n        })}\n        <ul>\n          ${this._queryIndex.render({\n            complete: (results) =>\n              results?.map(\n                ({ title, url }, i) => html`\n                  <li ?data-selected=${this._selected === i} data-result=${i}>\n                    <a href=${url}\n                      ><span class=\"title\"\n                        >${HighlightMatch(title, this._query)}</span\n                      >\n                      <span class=\"slug\"\n                        >${url\n                          .split(\"/\")\n                          .slice(1)\n                          .filter((p) => ![\"docs\", this.locale].includes(p))\n                          .join(\" / \")}</span\n                      >\n                    </a>\n                  </li>\n                `,\n              ),\n          })}\n          ${this._query\n            ? html`<li\n                ?data-selected=${this._selected === siteSearchIndex}\n                data-result=${siteSearchIndex}\n              >\n                <a\n                  href=${`/${this.locale}/search?${new URLSearchParams({ q: this._query })}`}\n                  ><span class=\"title\"\n                    >${this.l10n.raw({\n                      id: \"search-modal-site-search\",\n                      args: {\n                        query: this._query,\n                      },\n                      elements: {\n                        query: { tag: \"code\" },\n                      },\n                    })}</span\n                  ></a\n                >\n              </li>`\n            : nothing}\n        </ul>\n      </dialog>\n    `;\n  }\n\n  updated() {\n    if (this._shiftFocus) {\n      const selected = this._getSelectedItem();\n      if (selected instanceof HTMLElement) {\n        selected.focus();\n      }\n    }\n  }\n}\n\ncustomElements.define(\"mdn-search-modal\", MDNSearchModal);\n\n/**\n * @param {string} input\n * @param {import(\"./types.js\").SearchIndex} index\n * @returns {import(\"./types.js\").SearchResultItem[]}\n */\nfunction quickSearch(input, index) {\n  const inputValueLC = input.toLowerCase().trim();\n  const q = splitQuery(input);\n  const indexResults = index.flex\n    .filter(({ title }) => q.every((q) => title.includes(q)))\n    .map(({ index, title, slugTail }) => {\n      const exact = Number([title, slugTail].includes(inputValueLC));\n      return /** @type {const} */ ([exact, index]);\n    })\n    .sort(([aExact], [bExact]) => bExact - aExact) // Boost exact matches.\n    .map(([_, i]) => i)\n    .slice(0, 10);\n\n  return indexResults.map((i) => i && (index.items || [])[i]).filter(Boolean);\n}\n\n/**\n * Used by quicksearch and sidebar filters.\n * @param {string} term\n * @returns {string[]}\n */\nexport function splitQuery(term) {\n  term = term.trim().toLowerCase();\n  return term.startsWith(\".\") || term.endsWith(\".\")\n    ? // Dot is probably meaningful.\n      term.split(/[ ,]+/)\n    : // Dot is probably just a word separator.\n      term.split(/[ ,.]+/);\n}\n\n/**\n * @param {string} title\n * @param {string} query\n */\nfunction HighlightMatch(title, query) {\n  // Split on highlight term and include term into parts, ignore case.\n  const words = splitQuery(query);\n  // $& means the whole matched string\n  const regexWords = words.map((s) =>\n    s.replaceAll(/[.*+?^${}()|[\\]\\\\]/g, String.raw`\\$&`),\n  );\n  const regex = regexWords.map((word) => `(${word})`).join(\"|\");\n  const parts = title.split(new RegExp(regex, \"gi\"));\n  return parts\n    .filter(Boolean)\n    .map((part) =>\n      words.includes(part.toLowerCase()) ? html`<mark>${part}</mark>` : part,\n    );\n}\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/search.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, `*,:after,:before{box-sizing:border-box}dialog{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:.5rem;padding:0}@media (min-width:1006.02px){dialog{margin:calc(var(--sticky-header-height) + 1rem) auto 1rem;max-height:calc(100% - var(--sticky-header-height) - 2rem);width:calc(var(--layout-content-max) + 1rem)}}@media (max-width:1006px){dialog{margin:1rem auto;max-height:calc(100% - 2rem);width:100%}}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-black-alpha-75);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--csstools-light-dark-toggle--1,var(--color-white-alpha-75))}@supports (color:light-dark(red,red)){dialog::backdrop{background-color:light-dark(var(--color-white-alpha-75),var(--color-black-alpha-75))}}progress{margin:0 auto .5rem;width:calc(100% - 2rem)}form{display:grid;font-size:var(--font-size-large);gap:.5rem;grid-template-columns:min-content 1fr;padding:1rem;place-items:center}form:before{background-color:var(--color-border-secondary);content:\"\";height:1em;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:contain;mask-size:contain;width:1em}input{background-color:initial;border:none;font-size:inherit;margin:0;outline:none;padding:0;width:100%}input::placeholder{color:var(--color-text-secondary)}ul{margin:0;overflow:auto;overscroll-behavior:contain;padding:0}ul:has(li){border-top:1px solid var(--color-border-primary)}li[data-selected]{background:var(--color-background-blue)}li{list-style-type:none}li:not([data-selected]):hover{background-color:var(--color-background-secondary)}li>*{padding:.5rem 1.5rem;width:100%}a{color:var(--color-link-normal);display:grid;-webkit-text-decoration:none;text-decoration:none}a:visited{color:var(--color-link-visited)}.title{font-size:var(--font-size-large)}.slug{color:var(--color-text-secondary);font-size:var(--font-size-small)}mark{color:var(--color-text-primary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-yellow-20);background-color:var(--csstools-light-dark-toggle--0,var(--color-yellow-80))}@supports (color:light-dark(red,red)){mark{background-color:light-dark(var(--color-yellow-80),var(--color-yellow-20))}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["String","MDNSearchModal","fetch","HTMLInputElement","e","setTimeout","HTMLElement","Number","t","globalThis","i","s","Boolean","document","RegExp","URLSearchParams","customElements"],"mappings":"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"}

package/dist/client/{8483.0c0da6fab68fab50.js → 8483.651683d5e2cbae52.js}

@@ -28,5 +28,5 @@ export const __webpack_ids__=["8483"];export const __webpack_modules__={61667:fu
         <mdn-placement-note></mdn-placement-note>
       </div>
       <mdn-placement-no></mdn-placement-no>
-    </section>`}};customElements.define("mdn-placement-sidebar",MDNPlacementSidebar)},64686:function(e,t,i){i.d(t,{Z:()=>g});var a=i(14703),n=i(8081),r=i.n(n),o=i(23645),l=i.n(o),s=i(61667),c=i.n(s),d=new i.U(i(73981)),m=l()(r()),p=c()(d);m.push([e.id,`.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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,var(--side-color-light))}}:is(.sidebar-placement .placement-container) .placement-link{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:600;margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:"";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${p});mask-image:url(${p});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (min-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 g=(0,a.iv)([m.toString()])}};
-//# sourceMappingURL=8483.0c0da6fab68fab50.js.map
+    </section>`}};customElements.define("mdn-placement-sidebar",MDNPlacementSidebar)},64686:function(e,t,i){i.d(t,{Z:()=>g});var a=i(14703),n=i(8081),r=i.n(n),o=i(23645),l=i.n(o),s=i(61667),c=i.n(s),d=new i.U(i(73981)),m=l()(r()),p=c()(d);m.push([e.id,`.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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,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:600;margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:"";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${p});mask-image:url(${p});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (min-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 g=(0,a.iv)([m.toString()])}};
+//# sourceMappingURL=8483.651683d5e2cbae52.js.map

package/dist/client/{8483.0c0da6fab68fab50.js.map → 8483.651683d5e2cbae52.js.map}

@@ -1 +1 @@
-{"version":3,"file":"8483.0c0da6fab68fab50.js","sources":["webpack://@mdn/fred/./node_modules/css-loader/dist/runtime/getUrl.js","webpack://@mdn/fred/./components/placement-sidebar/element.js","webpack://@mdn/fred/./components/placement-sidebar/element.css"],"sourcesContent":["\"use strict\";\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementSidebar extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    horizontal: { type: Boolean },\n  };\n\n  constructor() {\n    super();\n    this.horizontal = false;\n  }\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const { side: data } = placementContext;\n    if (!data) {\n      return nothing;\n    }\n    const {\n      status,\n      click,\n      view,\n      copy,\n      image,\n      alt,\n      cta,\n      colors,\n      version,\n      heading,\n    } = data;\n    if (status !== \"success\") {\n      return nothing;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const { textColor, backgroundColor, textColorDark, backgroundColorDark } =\n      colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--side-background-light\", backgroundColor],\n        [\"--side-color-light\", textColor],\n        [\"--side-background-dark\", backgroundColorDark || backgroundColor],\n        [\"--side-color-dark\", textColorDark || textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return html`<section\n      class=${`sidebar-placement ${this.horizontal ? \"horizontal\" : \"\"}`}\n    >\n      <div\n        ${ref(this._placementRef)}\n        class=\"placement-container\"\n        style=${styleMap(styles)}\n      >\n        <a\n          class=\"placement-link\"\n          data-glean=\"pong: pong-&gt;click side\"\n          href=${this.clickLink(click, version)}\n          target=\"_blank\"\n          rel=\"sponsored noreferrer\"\n          ><img\n            src=${this.imgLink(image)}\n            aria-hidden=${!alt}\n            alt=${alt || \"\"}\n            width=\"125px\"\n            height=\"125px\"\n          />\n          <div class=\"placement-content\">\n            <strong class=\"placement-heading\">${heading}</strong>\n            <span class=\"placement-copy\">${copy}</span>\n            <span class=\"placement-cta external\">${cta}</span>\n          </div>\n        </a>\n        <mdn-placement-note></mdn-placement-note>\n      </div>\n      <mdn-placement-no></mdn-placement-no>\n    </section>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-sidebar\", MDNPlacementSidebar);\n","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{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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,var(--side-color-light))}}:is(.sidebar-placement .placement-container) .placement-link{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:600;margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:\"\";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (min-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"],"names":["String","MDNPlacementSidebar","Boolean","h","b","Object","customElements"],"mappings":"0FAEA,EAAO,OAAO,CAAG,SAAU,CAAG,CAAE,CAAO,SACjC,AAAC,GACH,GAAU,CAAC,GAER,IAGL,EAAMA,OAAO,EAAI,UAAU,CAAG,EAAI,OAAO,CAAG,GAGxC,eAAe,IAAI,CAAC,IACtB,GAAM,EAAI,KAAK,CAAC,EAAG,GAAE,EAEnB,EAAQ,IAAI,EACd,IAAO,EAAQ,IAAI,AAAD,EAKhB,oBAAoB,IAAI,CAAC,IAAQ,EAAQ,UAAU,GAC9C,IAAK,MAAM,CAAC,EAAI,OAAO,CAAC,KAAM,OAAO,OAAO,CAAC,MAAO,OAAQ,KAE9D,CACT,C,+OCVO,IAAMC,oBAAN,MAAMA,2BAA4B,QAAe,IAAU,EAChE,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,WAAY,CAAE,KAAMC,OAAQ,CAC9B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,UAAU,CAAG,EACpB,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,KAAM,CAAI,CAAE,CAAG,EACvB,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CACJ,QAAM,CACN,OAAK,CACL,MAAI,CACJ,MAAI,CACJ,OAAK,CACL,KAAG,CACH,KAAG,CACH,QAAM,CACN,SAAO,CACPC,QAAAA,CAAO,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,CAAEC,gBAAAA,CAAe,CAAE,eAAa,CAAE,qBAAmB,CAAE,CACtE,GAAU,CAAC,EACP,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,0BAA2BD,EAAgB,CAC5C,CAAC,qBAAsB,EAAU,CACjC,CAAC,yBAA0B,GAAuBA,EAAgB,CAClE,CAAC,oBAAqB,GAAiB,EAAU,CAClD,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;YACJ,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAG,aAAe,GAAG,CAAC,CAAC;;;QAGjE,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;cAEpB,EAAE,QAAS,GAAQ;;;;;eAKlB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;gBAIhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;8CAKkB,EAAED,EAAQ;yCACf,EAAE,EAAK;iDACC,EAAE,EAAI;;;;;;cAMzC,CAAC,AACb,CACF,EAEAG,eAAe,MAAM,CAAC,wBAAyBL,oB,mHChG3C,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,ynGAAynG,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,qrBAAqrB,CAAC,CAAE,GAAG,EAEz7H,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}
+{"version":3,"file":"8483.651683d5e2cbae52.js","sources":["webpack://@mdn/fred/./node_modules/css-loader/dist/runtime/getUrl.js","webpack://@mdn/fred/./components/placement-sidebar/element.js","webpack://@mdn/fred/./components/placement-sidebar/element.css"],"sourcesContent":["\"use strict\";\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementSidebar extends PlacementMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    horizontal: { type: Boolean },\n  };\n\n  constructor() {\n    super();\n    this.horizontal = false;\n  }\n\n  /**\n   *\n   * @param {Placements.PlacementContextData} placementContext\n   * @returns\n   */\n  renderComplete(placementContext) {\n    const { side: data } = placementContext;\n    if (!data) {\n      return nothing;\n    }\n    const {\n      status,\n      click,\n      view,\n      copy,\n      image,\n      alt,\n      cta,\n      colors,\n      version,\n      heading,\n    } = data;\n    if (status !== \"success\") {\n      return nothing;\n    }\n    if (!this._viewedUrl) {\n      this._viewedUrl = view;\n      this._version = version;\n    }\n    const { textColor, backgroundColor, textColorDark, backgroundColorDark } =\n      colors || {};\n    const styles = Object.fromEntries(\n      [\n        [\"--side-background-light\", backgroundColor],\n        [\"--side-color-light\", textColor],\n        [\"--side-background-dark\", backgroundColorDark || backgroundColor],\n        [\"--side-color-dark\", textColorDark || textColor],\n      ].filter(([_, v]) => Boolean(v)),\n    );\n\n    return html`<section\n      class=${`sidebar-placement ${this.horizontal ? \"horizontal\" : \"\"}`}\n    >\n      <div\n        ${ref(this._placementRef)}\n        class=\"placement-container\"\n        style=${styleMap(styles)}\n      >\n        <a\n          class=\"placement-link\"\n          data-glean=\"pong: pong-&gt;click side\"\n          href=${this.clickLink(click, version)}\n          target=\"_blank\"\n          rel=\"sponsored noreferrer\"\n          ><img\n            src=${this.imgLink(image)}\n            aria-hidden=${!alt}\n            alt=${alt || \"\"}\n            width=\"125px\"\n            height=\"125px\"\n          />\n          <div class=\"placement-content\">\n            <strong class=\"placement-heading\">${heading}</strong>\n            <span class=\"placement-copy\">${copy}</span>\n            <span class=\"placement-cta external\">${cta}</span>\n          </div>\n        </a>\n        <mdn-placement-note></mdn-placement-note>\n      </div>\n      <mdn-placement-no></mdn-placement-no>\n    </section>`;\n  }\n}\n\ncustomElements.define(\"mdn-placement-sidebar\", MDNPlacementSidebar);\n","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{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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,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--0:var(--csstools-color-scheme--light) var(--side-background-dark);--side-background:var(--csstools-light-dark-toggle--0,var(--side-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--side-color-dark);--side-color:var(--csstools-light-dark-toggle--1,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:600;margin:.5rem auto 1rem 1rem;padding:.5em 1em;transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{transition:all .3s ease-in-out}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):hover{--color:var(--side-background);background-color:var(--side-color)}:is(:is(:is(:is(.sidebar-placement .placement-container) .placement-link)>.placement-content) .placement-cta):after{background-color:var(--color);content:\"\";display:inline-flex;height:.625rem;margin-left:.25rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:.625rem}.sidebar-placement mdn-placement-note{position:absolute;right:0;top:0}@media (min-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"],"names":["String","MDNPlacementSidebar","Boolean","h","b","Object","customElements"],"mappings":"0FAEA,EAAO,OAAO,CAAG,SAAU,CAAG,CAAE,CAAO,SACjC,AAAC,GACH,GAAU,CAAC,GAER,IAGL,EAAMA,OAAO,EAAI,UAAU,CAAG,EAAI,OAAO,CAAG,GAGxC,eAAe,IAAI,CAAC,IACtB,GAAM,EAAI,KAAK,CAAC,EAAG,GAAE,EAEnB,EAAQ,IAAI,EACd,IAAO,EAAQ,IAAI,AAAD,EAKhB,oBAAoB,IAAI,CAAC,IAAQ,EAAQ,UAAU,GAC9C,IAAK,MAAM,CAAC,EAAI,OAAO,CAAC,KAAM,OAAO,OAAO,CAAC,MAAO,OAAQ,KAE9D,CACT,C,+OCVO,IAAMC,oBAAN,MAAMA,2BAA4B,QAAe,IAAU,EAChE,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,WAAY,CAAE,KAAMC,OAAQ,CAC9B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,UAAU,CAAG,EACpB,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,KAAM,CAAI,CAAE,CAAG,EACvB,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CACJ,QAAM,CACN,OAAK,CACL,MAAI,CACJ,MAAI,CACJ,OAAK,CACL,KAAG,CACH,KAAG,CACH,QAAM,CACN,SAAO,CACPC,QAAAA,CAAO,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,CAAEC,gBAAAA,CAAe,CAAE,eAAa,CAAE,qBAAmB,CAAE,CACtE,GAAU,CAAC,EACP,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,0BAA2BD,EAAgB,CAC5C,CAAC,qBAAsB,EAAU,CACjC,CAAC,yBAA0B,GAAuBA,EAAgB,CAClE,CAAC,oBAAqB,GAAiB,EAAU,CAClD,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;YACJ,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAG,aAAe,GAAG,CAAC,CAAC;;;QAGjE,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;cAEpB,EAAE,QAAS,GAAQ;;;;;eAKlB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;gBAIhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;8CAKkB,EAAED,EAAQ;yCACf,EAAE,EAAK;iDACC,EAAE,EAAI;;;;;;cAMzC,CAAC,AACb,CACF,EAEAG,eAAe,MAAM,CAAC,wBAAyBL,oB,mHChG3C,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,quGAAquG,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,qrBAAqrB,CAAC,CAAE,GAAG,EAEriI,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/{9565.5e45ab3e0d622510.js → 9565.faafbc9f4c1268c1.js}

@@ -12,7 +12,7 @@ baseline-supported-in = Supported in { $browsers }
 baseline-unsupported-in = Not widely supported in { $browsers }
 baseline-supported-and-unsupported-in = Supported in { $supported }, but not widely supported in { $unsupported }
 
-homepage-hero-title = Resources for <u data-l10n-name="developers">Developers</u>,<br> by Developers
+homepage-hero-title = Resources for Developers,<br> by Developers
 homepage-hero-description = Documenting <a data-l10n-name="css">CSS</a>, <a data-l10n-name="html">HTML</a>, and <a data-l10n-name="js">JavaScript</a>, since 2005.
 
 not-found-title = Page not found
@@ -154,4 +154,4 @@ obs-mdn = Das HTTP Observatory bietet wirksame Sicherheitseinblicke auf Grundlag
 `,"zh-CN":`blog-toc-title = 在本文中
 `,"zh-TW":`blog-toc-title = 在本文中
 `},l=["i","strong","br","em"],c=["title","aria-label"];let Fluent=class Fluent{constructor(e="en-US",t=[]){this.locale=e,this.usBundle=Fluent.constructBundle(new o.Yk(e),[r]),t.length>0&&(this.bundle=Fluent.constructBundle(new o.Yk(e),[r,...t]))}static constructBundle(e,t=[]){for(let n of t){let t=e.addResource(new o.WZ(n),{allowOverrides:!0});t.length>0&&console.error(t)}return e}get(e,t,n,o){let a=this.getMessage(e,t,n);if(a)return Fluent.sanitize(a,o)}static sanitize(e,t={}){let n={};for(let e of Object.values(t))n[e.tag]=[...Object.keys(e).filter(e=>"tag"!==e),...c];let o=[...Object.values(t).map(e=>e.tag),...l],r=!0,s=a(e,{allowedAttributes:n,allowedTags:o,allowedSchemes:["http","https","mailto"],filter(e){let n=e.attrs["data-l10n-name"];if(n)for(let[o,a]of Object.entries(t[n]||{}))e.attrs[o]=a;return!!(l.includes(e.tag)||n&&Object.keys(t).includes(n)&&t[n]?.tag===e.tag)&&(r=!1,!0)}},!0);return r?s:(0,i.A)(s)}getMessage(e,t,n={},o=this.bundle,a=!1){let i,r=o?o.getMessage(e):void 0;if("qa"===this.locale)return`[${e}${t?`.${t}`:""}]`;if(!r){if(a)return;return this.getMessage(e,t,n,this.usBundle,!0)}if(t){if(!(i=r.attributes[t])){if(a)return;return this.getMessage(e,t,n,this.usBundle,!0)}}else r.value&&(i=r.value);if(!i||!o)return"";let s=[],l=o?.formatPattern(i,n,s);return s.length>0&&console.error(s),l}};let d=new Map;function u(e){if(e){if(!d.has(e)){let t=s[e],n=new Fluent(e,t?[t]:void 0);d.set(e,n)}return d.get(e)}}let p=e=>class extends e{constructor(...e){super(...e);let t=function(){let e=globalThis.__MDNServerContext?.getStore(),t=globalThis.__MDNClientContext;return e||t}();this.locale=t.locale,this.l10n=function(e){function t(t,n){if("string"==typeof t){let n=u(e)?.get(t),o=`[${t}]`,a=e=>{let t=e[0];return n||t||o};return a.toString=()=>"string"==typeof n&&n||o,a}return t[0]||""}return t.raw=function({id:t,attr:n,args:o,elements:a}){let i=u(e);return i?i.get(t,n,o,a):`[${t}]`},t}(this.locale)}}}};
-//# sourceMappingURL=9565.5e45ab3e0d622510.js.map
+//# sourceMappingURL=9565.faafbc9f4c1268c1.js.map