@mdn/fred 2.5.0 → 2.6.0

package/out/static/client/{2173.c74593faf7e14cbc.js → 2173.a662dd40657c8426.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){t.d(a,{A:()=>p});var i=t(97825),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;-webkit-mask-image:url(${g});mask-image:url(${g});-webkit-mask-size:cover;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()])},22300(e,a,t){e.exports=t.p+"external-link.4f3a2dc8e402cae5.svg"},57468(e,a,t){t.r(a),t.d(a,{MDNPlacementSidebar:()=>MDNPlacementSidebar});var i=t(97825),r=t(52258),n=t(5350);t(47764),t(13755);var o=t(30776),l=t(85239);let MDNPlacementSidebar=class MDNPlacementSidebar extends(0,o.N)(i.WF){static styles=l.A;static properties={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:v,backgroundColorDark:f}=p||{},y=Object.fromEntries([["--side-background-light",u],["--side-color-light",b],["--side-background-dark",f||u],["--side-color-dark",v||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){t.d(a,{A:()=>p});var i=t(97825),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;-webkit-mask-image:url(${g});mask-image:url(${g});-webkit-mask-size:cover;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()])},22300(e,a,t){e.exports=t.p+"external-link.4f3a2dc8e402cae5.svg"},57468(e,a,t){t.r(a),t.d(a,{MDNPlacementSidebar:()=>MDNPlacementSidebar});var i=t(97825),r=t(52258),n=t(5350);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 properties={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:v,backgroundColorDark:f}=p||{},y=Object.fromEntries([["--side-background-light",u],["--side-color-light",b],["--side-background-dark",f||u],["--side-color-dark",v||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"];expor
           </div>
           <mdn-placement-no></mdn-placement-no>
         </section>`}};customElements.define("mdn-placement-sidebar",MDNPlacementSidebar)}};
-//# sourceMappingURL=2173.c74593faf7e14cbc.js.map
+//# sourceMappingURL=2173.a662dd40657c8426.js.map

package/out/static/client/{2173.c74593faf7e14cbc.js.map → 2173.a662dd40657c8426.js.map}

@@ -1 +1 @@
-{"version":3,"file":"2173.c74593faf7e14cbc.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;-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 (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 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      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":"qNAKI,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,u5KAAu5K,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,orBAAorB,CAAC,CAAE,GAAG,EAEttM,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,4NCIhD,IAAMA,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,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,oB"}
+{"version":3,"file":"2173.a662dd40657c8426.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;-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 (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 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      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":"qNAKI,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,u5KAAu5K,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,orBAAorB,CAAC,CAAE,GAAG,EAEttM,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,4NCIhD,IAAMA,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,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,oB"}

package/out/static/client/{2868.b09544148fff25a1.js → 2868.03299f12d5927ed2.js}

@@ -1,5 +1,5 @@
 export const __rspack_esm_id="2868";export const __rspack_esm_ids=["2868"];export const __webpack_modules__={16720(t,e,o){o.d(e,{A:()=>r});var n=o(97825),s=o(31601),l=o.n(s),i=o(76314),d=o.n(i)()(l());d.push([t.id,":host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}",""]);let r=(0,n.AH)([d.toString()])},58623(t,e,o){o.r(e),o.d(e,{MDNDropdown:()=>MDNDropdown});var n=o(97825),s=o(81519),l=o(16720);let MDNDropdown=class MDNDropdown extends n.WF{static styles=l.A;static properties={open:{type:Boolean},loaded:{type:Boolean,reflect:!0}};constructor(){super(),this.open=!1,this.loaded=!1}get _buttonSlotElements(){return this._slotElements("button")}get _dropdownSlotElements(){return this._slotElements("dropdown")}_slotElements(t){let e=this.shadowRoot?.querySelector(`slot[name="${t}"]`);return e instanceof HTMLSlotElement?e.assignedElements():[]}_globalClick(t){t.composedPath().includes(this)||(this.open=!1)}_globalKeyDown(t){this.open&&"Escape"===t.key&&this._toggleDropDown()}_toggleDropDown(){this.open=!this.open}_setAriaAttributes(){let t=this._dropdownSlotElements.find(t=>t.id)?.id;for(let e of(t||(t=(0,s.O)("uid_"),this._dropdownSlotElements[0]?.setAttribute("id",t)),this._buttonSlotElements))e.setAttribute("aria-expanded",this.open.toString()),t&&e.setAttribute("aria-controls",t)}connectedCallback(){super.connectedCallback(),this._globalClick=this._globalClick.bind(this),document.addEventListener("click",this._globalClick),this._globalKeyDown=this._globalKeyDown.bind(this),document.addEventListener("keydown",this._globalKeyDown)}render(){return(0,n.qy)`
       <slot name="button" @click=${this._toggleDropDown}></slot>
       <slot name="dropdown" ?hidden=${!this.open&&this.loaded}></slot>
-    `}updated(){this._setAriaAttributes()}firstUpdated(){this.loaded=!0}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._globalClick),document.removeEventListener("keydown",this._globalKeyDown)}};customElements.define("mdn-dropdown",MDNDropdown)}};
-//# sourceMappingURL=2868.b09544148fff25a1.js.map
+    `}updated(t){this._setAriaAttributes(),t.has("open")&&void 0!==t.get("open")&&this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}firstUpdated(){this.loaded=!0}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._globalClick),document.removeEventListener("keydown",this._globalKeyDown)}};customElements.define("mdn-dropdown",MDNDropdown)}};
+//# sourceMappingURL=2868.03299f12d5927ed2.js.map

package/out/static/client/{2868.b09544148fff25a1.js.map → 2868.03299f12d5927ed2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"2868.b09544148fff25a1.js","sources":["webpack://@mdn/fred/./components/dropdown/element.css","webpack://@mdn/fred/./components/dropdown/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{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html } from \"lit\";\n\nimport { randomIdString } from \"../utils/index.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * This element has two slots, which should take a single element each.\n * The element in the `dropdown` slot is hidden by default,\n * and shown when the element in the `button` slot is clicked.\n * The element in the `dropdown` slot is also hidden when the user clicks\n * outside the `mdn-dropdown` element. Automatically sets `aria-` attributes.\n *\n * @element mdn-dropdown\n *\n * @attr {boolean} open - Whether the dropdown is open or not.\n *\n * @slot button - The element used to toggle the dropdown.\n * @slot dropdown - The element to be shown/hidden in the dropdown.\n */\nexport class MDNDropdown extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    open: { type: Boolean },\n    loaded: { type: Boolean, reflect: true },\n  };\n\n  constructor() {\n    super();\n    this.open = false;\n    this.loaded = false;\n  }\n\n  get _buttonSlotElements() {\n    return this._slotElements(\"button\");\n  }\n\n  get _dropdownSlotElements() {\n    return this._slotElements(\"dropdown\");\n  }\n\n  /** @param {string} name  */\n  _slotElements(name) {\n    const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`);\n    if (slot instanceof HTMLSlotElement) {\n      return slot.assignedElements();\n    }\n    return [];\n  }\n\n  /** @param {MouseEvent} event */\n  _globalClick(event) {\n    if (!event.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  /** @param {KeyboardEvent} event */\n  _globalKeyDown(event) {\n    if (this.open && event.key === \"Escape\") {\n      this._toggleDropDown();\n    }\n  }\n\n  _toggleDropDown() {\n    this.open = !this.open;\n  }\n\n  _setAriaAttributes() {\n    let id = this._dropdownSlotElements.find((element) => element.id)?.id;\n    if (!id) {\n      id = randomIdString(\"uid_\");\n      this._dropdownSlotElements[0]?.setAttribute(\"id\", id);\n    }\n    for (const element of this._buttonSlotElements) {\n      element.setAttribute(\"aria-expanded\", this.open.toString());\n      if (id) {\n        element.setAttribute(\"aria-controls\", id);\n      }\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._globalClick = this._globalClick.bind(this);\n    document.addEventListener(\"click\", this._globalClick);\n    this._globalKeyDown = this._globalKeyDown.bind(this);\n    document.addEventListener(\"keydown\", this._globalKeyDown);\n  }\n\n  render() {\n    return html`\n      <slot name=\"button\" @click=${this._toggleDropDown}></slot>\n      <slot name=\"dropdown\" ?hidden=${!this.open && this.loaded}></slot>\n    `;\n  }\n\n  updated() {\n    this._setAriaAttributes();\n  }\n\n  firstUpdated() {\n    this.loaded = true;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._globalClick);\n    document.removeEventListener(\"keydown\", this._globalKeyDown);\n  }\n}\n\ncustomElements.define(\"mdn-dropdown\", MDNDropdown);\n"],"names":["MDNDropdown","Boolean","HTMLSlotElement","e","document","customElements"],"mappings":"yLAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,+FAAgG,GAAG,EAE5I,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,gGCYhD,IAAMA,YAAN,MAAMA,oBAAoB,IAAU,CACzC,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,KAAM,CAAE,KAAMC,OAAQ,EACtB,OAAQ,CAAE,KAAMA,QAAS,QAAS,EAAK,CACzC,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,IAAI,CAAG,GACZ,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,IAAI,qBAAsB,CACxB,OAAO,IAAI,CAAC,aAAa,CAAC,SAC5B,CAEA,IAAI,uBAAwB,CAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,WAC5B,CAGA,cAAc,CAAI,CAAE,CAClB,IAAM,EAAO,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,WAAW,EAAE,EAAK,EAAE,CAAC,SAClE,AAAI,aAAgBC,gBACX,EAAK,gBAAgB,GAEvB,EAAE,AACX,CAGA,aAAa,CAAK,CAAE,CACd,AAAC,EAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,GACrC,KAAI,CAAC,IAAI,CAAG,EAAI,CAEpB,CAGA,eAAe,CAAK,CAAE,CAChB,IAAI,CAAC,IAAI,EAAI,AAAc,WAAd,EAAM,GAAG,EACxB,IAAI,CAAC,eAAe,EAExB,CAEA,iBAAkB,CAChB,IAAI,CAAC,IAAI,CAAG,CAAC,IAAI,CAAC,IAAI,AACxB,CAEA,oBAAqB,CACnB,IAAI,EAAK,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,AAAC,GAAY,EAAQ,EAAE,GAAG,GAKnE,IAAK,IAAMC,KAJN,IACH,EAAK,QAAe,QACpB,IAAI,CAAC,qBAAqB,CAAC,EAAE,EAAE,aAAa,KAAM,IAE9B,IAAI,CAAC,mBAAmB,EAC5CA,EAAQ,YAAY,CAAC,gBAAiB,IAAI,CAAC,IAAI,CAAC,QAAQ,IACpD,GACFA,EAAQ,YAAY,CAAC,gBAAiB,EAG5C,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,YAAY,CAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAC/CC,SAAS,gBAAgB,CAAC,QAAS,IAAI,CAAC,YAAY,EACpD,IAAI,CAAC,cAAc,CAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EACnDA,SAAS,gBAAgB,CAAC,UAAW,IAAI,CAAC,cAAc,CAC1D,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;iCACiB,EAAE,IAAI,CAAC,eAAe,CAAC;oCACpB,EAAE,CAAC,IAAI,CAAC,IAAI,EAAI,IAAI,CAAC,MAAM,CAAC;IAC5D,CAAC,AACH,CAEA,SAAU,CACR,IAAI,CAAC,kBAAkB,EACzB,CAEA,cAAe,CACb,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,sBAAuB,CACrB,KAAK,CAAC,uBACNA,SAAS,mBAAmB,CAAC,QAAS,IAAI,CAAC,YAAY,EACvDA,SAAS,mBAAmB,CAAC,UAAW,IAAI,CAAC,cAAc,CAC7D,CACF,EAEAC,eAAe,MAAM,CAAC,eAAgBL,Y"}
+{"version":3,"file":"2868.03299f12d5927ed2.js","sources":["webpack://@mdn/fred/./components/dropdown/element.css","webpack://@mdn/fred/./components/dropdown/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{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html } from \"lit\";\n\nimport { randomIdString } from \"../utils/index.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * This element has two slots, which should take a single element each.\n * The element in the `dropdown` slot is hidden by default,\n * and shown when the element in the `button` slot is clicked.\n * The element in the `dropdown` slot is also hidden when the user clicks\n * outside the `mdn-dropdown` element. Automatically sets `aria-` attributes.\n *\n * @element mdn-dropdown\n *\n * @attr {boolean} open - Whether the dropdown is open or not.\n *\n * @slot button - The element used to toggle the dropdown.\n * @slot dropdown - The element to be shown/hidden in the dropdown.\n */\nexport class MDNDropdown extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    open: { type: Boolean },\n    loaded: { type: Boolean, reflect: true },\n  };\n\n  constructor() {\n    super();\n    this.open = false;\n    this.loaded = false;\n  }\n\n  get _buttonSlotElements() {\n    return this._slotElements(\"button\");\n  }\n\n  get _dropdownSlotElements() {\n    return this._slotElements(\"dropdown\");\n  }\n\n  /** @param {string} name  */\n  _slotElements(name) {\n    const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`);\n    if (slot instanceof HTMLSlotElement) {\n      return slot.assignedElements();\n    }\n    return [];\n  }\n\n  /** @param {MouseEvent} event */\n  _globalClick(event) {\n    if (!event.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  /** @param {KeyboardEvent} event */\n  _globalKeyDown(event) {\n    if (this.open && event.key === \"Escape\") {\n      this._toggleDropDown();\n    }\n  }\n\n  _toggleDropDown() {\n    this.open = !this.open;\n  }\n\n  _setAriaAttributes() {\n    let id = this._dropdownSlotElements.find((element) => element.id)?.id;\n    if (!id) {\n      id = randomIdString(\"uid_\");\n      this._dropdownSlotElements[0]?.setAttribute(\"id\", id);\n    }\n    for (const element of this._buttonSlotElements) {\n      element.setAttribute(\"aria-expanded\", this.open.toString());\n      if (id) {\n        element.setAttribute(\"aria-controls\", id);\n      }\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._globalClick = this._globalClick.bind(this);\n    document.addEventListener(\"click\", this._globalClick);\n    this._globalKeyDown = this._globalKeyDown.bind(this);\n    document.addEventListener(\"keydown\", this._globalKeyDown);\n  }\n\n  render() {\n    return html`\n      <slot name=\"button\" @click=${this._toggleDropDown}></slot>\n      <slot name=\"dropdown\" ?hidden=${!this.open && this.loaded}></slot>\n    `;\n  }\n\n  /**\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  updated(changedProperties) {\n    this._setAriaAttributes();\n    if (\n      changedProperties.has(\"open\") &&\n      changedProperties.get(\"open\") !== undefined\n    ) {\n      this.dispatchEvent(\n        new Event(\"toggle\", { bubbles: true, composed: true }),\n      );\n    }\n  }\n\n  firstUpdated() {\n    this.loaded = true;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._globalClick);\n    document.removeEventListener(\"keydown\", this._globalKeyDown);\n  }\n}\n\ncustomElements.define(\"mdn-dropdown\", MDNDropdown);\n"],"names":["MDNDropdown","Boolean","HTMLSlotElement","e","document","Event","customElements"],"mappings":"yLAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,+FAAgG,GAAG,EAE5I,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,gGCYhD,IAAMA,YAAN,MAAMA,oBAAoB,IAAU,CACzC,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,KAAM,CAAE,KAAMC,OAAQ,EACtB,OAAQ,CAAE,KAAMA,QAAS,QAAS,EAAK,CACzC,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,IAAI,CAAG,GACZ,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,IAAI,qBAAsB,CACxB,OAAO,IAAI,CAAC,aAAa,CAAC,SAC5B,CAEA,IAAI,uBAAwB,CAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,WAC5B,CAGA,cAAc,CAAI,CAAE,CAClB,IAAM,EAAO,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,WAAW,EAAE,EAAK,EAAE,CAAC,SAClE,AAAI,aAAgBC,gBACX,EAAK,gBAAgB,GAEvB,EAAE,AACX,CAGA,aAAa,CAAK,CAAE,CACd,AAAC,EAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,GACrC,KAAI,CAAC,IAAI,CAAG,EAAI,CAEpB,CAGA,eAAe,CAAK,CAAE,CAChB,IAAI,CAAC,IAAI,EAAI,AAAc,WAAd,EAAM,GAAG,EACxB,IAAI,CAAC,eAAe,EAExB,CAEA,iBAAkB,CAChB,IAAI,CAAC,IAAI,CAAG,CAAC,IAAI,CAAC,IAAI,AACxB,CAEA,oBAAqB,CACnB,IAAI,EAAK,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,AAAC,GAAY,EAAQ,EAAE,GAAG,GAKnE,IAAK,IAAMC,KAJN,IACH,EAAK,QAAe,QACpB,IAAI,CAAC,qBAAqB,CAAC,EAAE,EAAE,aAAa,KAAM,IAE9B,IAAI,CAAC,mBAAmB,EAC5CA,EAAQ,YAAY,CAAC,gBAAiB,IAAI,CAAC,IAAI,CAAC,QAAQ,IACpD,GACFA,EAAQ,YAAY,CAAC,gBAAiB,EAG5C,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,YAAY,CAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAC/CC,SAAS,gBAAgB,CAAC,QAAS,IAAI,CAAC,YAAY,EACpD,IAAI,CAAC,cAAc,CAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EACnDA,SAAS,gBAAgB,CAAC,UAAW,IAAI,CAAC,cAAc,CAC1D,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;iCACiB,EAAE,IAAI,CAAC,eAAe,CAAC;oCACpB,EAAE,CAAC,IAAI,CAAC,IAAI,EAAI,IAAI,CAAC,MAAM,CAAC;IAC5D,CAAC,AACH,CAKA,QAAQ,CAAiB,CAAE,CACzB,IAAI,CAAC,kBAAkB,GAErB,EAAkB,GAAG,CAAC,SACtB,AAAkC,SAAlC,EAAkB,GAAG,CAAC,SAEtB,IAAI,CAAC,aAAa,CAChB,IAAIC,MAAM,SAAU,CAAE,QAAS,GAAM,SAAU,EAAK,GAG1D,CAEA,cAAe,CACb,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,sBAAuB,CACrB,KAAK,CAAC,uBACND,SAAS,mBAAmB,CAAC,QAAS,IAAI,CAAC,YAAY,EACvDA,SAAS,mBAAmB,CAAC,UAAW,IAAI,CAAC,cAAc,CAC7D,CACF,EAEAE,eAAe,MAAM,CAAC,eAAgBN,Y"}

package/out/static/client/{291.91650ffed3a60424.js → 291.c90e43b3c10a9a1f.js}

@@ -1,12 +1,12 @@
-/*! For license information please see 291.91650ffed3a60424.js.LICENSE.txt */
-export const __rspack_esm_id="291";export const __rspack_esm_ids=["291"];export const __webpack_modules__={13852(e,t,n){n.d(t,{A:()=>c});var r=n(97825),o=n(31601),a=n.n(o),i=n(76314),s=n.n(i),l=n(39807),d=s()(a());d.i(l.A),d.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}:is(.wrapper section) .playground__runner-menu{align-self:flex-end;padding:.5rem 0}@media (width <= 992px){:is(.wrapper section) .playground__runner-menu{align-self:center}}.playground__runner-console:is(.wrapper section){grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{border:var(--border);border-radius:.25rem;flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border:var(--border);border-radius:.25rem}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):not(:last-child){margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}',""]);let c=(0,r.AH)([d.toString()])},39807(e,t,n){n.d(t,{A:()=>s});var r=n(31601),o=n.n(r),a=n(76314),i=n.n(a)()(o());i.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}",""]);let s=i.toString()},70242(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(97825);n(17398);var o=n(70693),a=n(99502);let MDNLoginButton=class MDNLoginButton extends(0,o.J)(r.WF){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(a.vQ,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.qy)`<mdn-button href=${this._loginUrl}
+/*! For license information please see 291.c90e43b3c10a9a1f.js.LICENSE.txt */
+export const __rspack_esm_id="291";export const __rspack_esm_ids=["291"];export const __webpack_modules__={13852(e,t,n){n.d(t,{A:()=>c});var r=n(97825),a=n(31601),o=n.n(a),i=n(76314),s=n.n(i),l=n(39807),d=s()(o());d.i(l.A),d.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}:is(.wrapper section) .playground__runner-menu{align-self:flex-end;padding:.5rem 0}@media (width <= 992px){:is(.wrapper section) .playground__runner-menu{align-self:center}}.playground__runner-console:is(.wrapper section){grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{border:var(--border);border-radius:.25rem;flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border:var(--border);border-radius:.25rem}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):not(:last-child){margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}',""]);let c=(0,r.AH)([d.toString()])},39807(e,t,n){n.d(t,{A:()=>s});var r=n(31601),a=n.n(r),o=n(76314),i=n.n(o)()(a());i.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}",""]);let s=i.toString()},70242(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(97825);n(17398);var a=n(70693),o=n(99502);let MDNLoginButton=class MDNLoginButton extends(0,a.J)(r.WF){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(o.vQ,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.qy)`<mdn-button href=${this._loginUrl} data-glean-id="login_button"
       >${this.l10n("login-button-login")`Login`}</mdn-button
-    >`}};customElements.define("mdn-login-button",MDNLoginButton)},14652(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(31011),o=n(97825),a=n(52258),i=n(70693),s=n(23727);let l=(0,o.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>`;var d=n(45742),c=n(13852),p=n(72250);n(23731),n(17398),n(63386),n(63657),n(71787),n(14903),n(70242);let u="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,i.J)(o.WF){static styles=c.A;static properties={_gistID:{state:!0}};constructor(){super(),this._permalink="",this._autoRun=!0,this._gistId=void 0}_controller=(0,a._)();_shareModal=(0,a._)();_reportModal=(0,a._)();_user=new r.YZ(this,{task:async()=>await (0,d.L)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),this._autoRun||(this._autoRun=!0,e.runOnChange=!0,this._storeSession()))}_share(){this._shareModal.value?.showModal()}_clear(){let e=this._controller.value;if(confirm(this.l10n("playground-do-you-really-want-to-clear-ever")`Do you really want to clear everything?`)&&e){e.clear(),this._autoRun=!0,this._storeSession(),this.requestUpdate();let t=new URL(location.href);t.search="",history.replaceState(void 0,"",t)}}_reset(){let e=this._controller.value;confirm(this.l10n("playground-do-you-really-want-to-revert-you")`Do you really want to revert your changes?`)&&e&&(e.reset(),this._storeSession(),this.requestUpdate())}async _copyMarkdown(){let e=this._controller.value;if(e){let t=Object.entries(e.code).map(([e,t])=>t&&`\`\`\`${e}
+    >`}};customElements.define("mdn-login-button",MDNLoginButton)},14652(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(31011),a=n(97825),o=n(52258),i=n(70693),s=n(23727);let l=(0,a.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>`;var d=n(45742),c=n(13852),p=n(72250);n(23731),n(17398),n(63386),n(63657),n(71787),n(14903),n(70242);let u="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,i.J)(a.WF){static styles=c.A;static properties={_gistID:{state:!0}};constructor(){super(),this._permalink="",this._autoRun=!0,this._gistId=void 0}_controller=(0,o._)();_shareModal=(0,o._)();_reportModal=(0,o._)();_user=new r.YZ(this,{task:async()=>await (0,d.L)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),this._autoRun||(this._autoRun=!0,e.runOnChange=!0,this._storeSession()))}_share(){this._shareModal.value?.showModal()}_clear(){let e=this._controller.value;if(confirm(this.l10n("playground-do-you-really-want-to-clear-ever")`Do you really want to clear everything?`)&&e){e.clear(),this._autoRun=!0,this._storeSession(),this.requestUpdate();let t=new URL(location.href);t.search="",history.replaceState(void 0,"",t)}}_reset(){let e=this._controller.value;confirm(this.l10n("playground-do-you-really-want-to-revert-you")`Do you really want to revert your changes?`)&&e&&(e.reset(),this._storeSession(),this.requestUpdate())}async _copyMarkdown(){let e=this._controller.value;if(e){let t=Object.entries(e.code).map(([e,t])=>t&&`\`\`\`${e}
 ${t}
-\`\`\``).filter(Boolean).join("\n\n");await navigator.clipboard.writeText(t)}}async _copyDataUrl(){let e=this._controller.value;if(e){let{css:t,html:n,js:r}=e.code,o="<!doctype html><body>";t&&(o+=`<style>${t}</style>`),n&&(o+=n),r&&(o+=`<script>${r}</script>`),o+="</body>",o=o.replaceAll(/([^\S ]|%)+/g,e=>encodeURIComponent(e)),await navigator.clipboard.writeText(`data:text/html;charset=utf-8,${o}`)}}async _createPermalink(){let e=this._controller.value;if(e){let t=await fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e.code)}),{id:n}=await t.json(),r=new URL(location.href);r.search=new URLSearchParams({id:n}).toString(),e.initialCode=e.code,this._permalink=r.toString(),history.replaceState(void 0,"",r),this.requestUpdate()}}async _copyPermalink(){this._permalink&&await navigator.clipboard.writeText(this._permalink)}_storeSession(){let e=this._controller.value;if(e){let{srcPrefix:t,initialCode:n,code:r}=e,o={srcPrefix:t,initialCode:n,code:r,autoRun:this._autoRun};sessionStorage.setItem(u,JSON.stringify(o))}}_loadSession(){let{srcPrefix:e,initialCode:t,code:n,autoRun:r}=h(JSON.parse(sessionStorage.getItem(u)||"{}")),o=this._controller.value;o&&(!1===r&&(this._autoRun=!1,o.runOnStart=!1,o.runOnChange=!1),o.srcPrefix=e,o.initialCode=t,o.code=n,this.requestUpdate())}async _loadFromUrl(){let e=this._controller.value;if(e){let t=new URLSearchParams(location.search),n=t.get("id"),r=t.get("state"),o=t.get("srcPrefix");n&&(this._gistId=n);let{srcPrefix:a,code:i}=await (n?this._sessionFromApi(n):r?this._sessionFromState(r):void 0)||{},s=o||a;if(void 0!==s&&void 0!==i&&(e.srcPrefix!==s||!m(e.initialCode,i))){try{if(!opener?.location?.origin||opener?.location?.origin!==location.origin)throw Error("origin doesn't match")}catch{this._autoRun=!1,e.runOnStart=!1,e.runOnChange=!1}e.srcPrefix=s,e.initialCode=i,e.code=i,this._storeSession()}this.requestUpdate()}}async _sessionFromApi(e){let t=await fetch(`/api/v1/play/${encodeURIComponent(e)}`);if(!t.ok)return void console.error(t.statusText);let n=new URL(location.href);return n.search=new URLSearchParams({id:e}).toString(),this._permalink=n.toString(),(0,s.w)("playground: load-shared"),h(await t.json())}async _sessionFromState(e){let{state:t}=await (0,p.p)(e);return h(JSON.parse(t||"{}"))}_editorUpdate(){this._storeSession(),this.requestUpdate()}_reportOpen(){this._reportModal.value?.showModal()}_reportCancel(){this._reportModal.value?.close()}async _reportSubmit(){await fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:this._gistId,reason:this._reportModal.value?.querySelector("textarea")?.value})}),this._reportModal.value?.close()}connectedCallback(){super.connectedCallback(),this._user.run()}render(){let{code:e,initialCode:t}=this._controller.value??{},n=Object.values(e??{}).some(Boolean),r=Object.values(t??{}).some(Boolean),i=r&&!m(e,t);return(0,o.qy)`
+\`\`\``).filter(Boolean).join("\n\n");await navigator.clipboard.writeText(t)}}async _copyDataUrl(){let e=this._controller.value;if(e){let{css:t,html:n,js:r}=e.code,a="<!doctype html><body>";t&&(a+=`<style>${t}</style>`),n&&(a+=n),r&&(a+=`<script>${r}</script>`),a+="</body>",a=a.replaceAll(/([^\S ]|%)+/g,e=>encodeURIComponent(e)),await navigator.clipboard.writeText(`data:text/html;charset=utf-8,${a}`)}}async _createPermalink(){let e=this._controller.value;if(e){let t=await fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e.code)}),{id:n}=await t.json(),r=new URL(location.href);r.search=new URLSearchParams({id:n}).toString(),e.initialCode=e.code,this._permalink=r.toString(),history.replaceState(void 0,"",r),this.requestUpdate()}}async _copyPermalink(){this._permalink&&await navigator.clipboard.writeText(this._permalink)}_storeSession(){let e=this._controller.value;if(e){let{srcPrefix:t,initialCode:n,code:r}=e,a={srcPrefix:t,initialCode:n,code:r,autoRun:this._autoRun};sessionStorage.setItem(u,JSON.stringify(a))}}_loadSession(){let{srcPrefix:e,initialCode:t,code:n,autoRun:r}=h(JSON.parse(sessionStorage.getItem(u)||"{}")),a=this._controller.value;a&&(!1===r&&(this._autoRun=!1,a.runOnStart=!1,a.runOnChange=!1),a.srcPrefix=e,a.initialCode=t,a.code=n,this.requestUpdate())}async _loadFromUrl(){let e=this._controller.value;if(e){let t=new URLSearchParams(location.search),n=t.get("id"),r=t.get("state"),a=t.get("srcPrefix");n&&(this._gistId=n);let{srcPrefix:o,code:i}=await (n?this._sessionFromApi(n):r?this._sessionFromState(r):void 0)||{},s=a||o;if(void 0!==s&&void 0!==i&&(e.srcPrefix!==s||!m(e.initialCode,i))){try{if(!opener?.location?.origin||opener?.location?.origin!==location.origin)throw Error("origin doesn't match")}catch{this._autoRun=!1,e.runOnStart=!1,e.runOnChange=!1}e.srcPrefix=s,e.initialCode=i,e.code=i,this._storeSession()}this.requestUpdate()}}async _sessionFromApi(e){let t=await fetch(`/api/v1/play/${encodeURIComponent(e)}`);if(!t.ok)return void console.error(t.statusText);let n=new URL(location.href);return n.search=new URLSearchParams({id:e}).toString(),this._permalink=n.toString(),(0,s.w)("playground: load-shared"),h(await t.json())}async _sessionFromState(e){let{state:t}=await (0,p.p)(e);return h(JSON.parse(t||"{}"))}_editorUpdate(){this._storeSession(),this.requestUpdate()}_reportOpen(){this._reportModal.value?.showModal()}_reportCancel(){this._reportModal.value?.close()}async _reportSubmit(){await fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:this._gistId,reason:this._reportModal.value?.querySelector("textarea")?.value})}),this._reportModal.value?.close()}connectedCallback(){super.connectedCallback(),this._user.run()}render(){let{code:e,initialCode:t}=this._controller.value??{},n=Object.values(e??{}).some(Boolean),r=Object.values(t??{}).some(Boolean),i=r&&!m(e,t);return(0,a.qy)`
       <div class="wrapper">
         <mdn-play-controller
-          ${(0,a.K)(this._controller)}
+          ${(0,o.K)(this._controller)}
           run-on-start
           run-on-change
         >
@@ -31,6 +31,7 @@ ${t}
                   @click=${this._share}
                   ?disabled=${!n}
                   data-id="share"
+                  data-glean-id="playground: share-click"
                   >${this.l10n("playground-share")`Share`}</mdn-button
                 >
                 <mdn-button
@@ -40,12 +41,13 @@ ${t}
                   data-id="clear"
                   >${this.l10n("playground-clear")`Clear`}</mdn-button
                 >
-                ${r?(0,o.qy)`<mdn-button
+                ${r?(0,a.qy)`<mdn-button
                       variant="secondary"
                       @click=${this._reset}
                       ?disabled=${!i}
+                      data-glean-id="playground: reset-click"
                       >${this.l10n("playground-reset")`Reset`}</mdn-button
-                    >`:o.s6}
+                    >`:a.s6}
               </menu>
             </aside>
             <details open>
@@ -71,17 +73,18 @@ ${t}
             </details>
           </section>
           <section class="playground__runner-console">
-            ${this._gistId?(0,o.qy)`<aside class="playground__runner-menu">
+            ${this._gistId?(0,a.qy)`<aside class="playground__runner-menu">
                   <menu>
                     <mdn-button
                       @click=${this._reportOpen}
                       variant="secondary"
                       .icon=${l}
+                      data-glean-id="playground: flag-click"
                     >
                       ${this.l10n("playground-seeing-something-inappropriate")`Seeing something inappropriate?`}
                     </mdn-button>
                   </menu>
-                </aside>`:o.s6}
+                </aside>`:a.s6}
             <mdn-play-runner></mdn-play-runner>
             <div class="playground__console">
               <div>${this.l10n("playground-console")`Console`}</div>
@@ -90,7 +93,7 @@ ${t}
           </section>
         </mdn-play-controller>
       </div>
-      <mdn-modal ${(0,a.K)(this._shareModal)} class="share">
+      <mdn-modal ${(0,o.K)(this._shareModal)} class="share">
         <section>
           <h2>${this.l10n("playground-share-markdown")`Share Markdown`}</h2>
           <mdn-button
@@ -113,7 +116,11 @@ ${t}
           <h2>
             ${this.l10n("playground-share-your-code-via-permalink")`Share your code via Permalink`}
           </h2>
-          ${this._user.render({initial:()=>(0,o.qy)`<mdn-login-button></mdn-login-button>`,pending:()=>(0,o.qy)`<mdn-login-button></mdn-login-button>`,complete:e=>e.isAuthenticated?this._permalink&&!i?(0,o.qy)`
+          ${this._user.render({initial:()=>(0,a.qy)`<mdn-login-button
+                data-glean-id="playground: banner-login"
+              ></mdn-login-button>`,pending:()=>(0,a.qy)`<mdn-login-button
+                data-glean-id="playground: banner-login"
+              ></mdn-login-button>`,complete:e=>e.isAuthenticated?this._permalink&&!i?(0,a.qy)`
                       <input .value=${this._permalink} />
                       <mdn-button
                         variant="secondary"
@@ -121,12 +128,16 @@ ${t}
                         data-glean-id="playground: share-permalink"
                         >${this.l10n("playground-copy-to-clipboard")`Copy to clipboard`}</mdn-button
                       >
-                    `:(0,o.qy)`<mdn-button @click=${this._createPermalink}
+                    `:(0,a.qy)`<mdn-button
+                      @click=${this._createPermalink}
+                      data-glean-id="playground: share-permalink"
                       >${this.l10n("playground-create-link")`Create link`}</mdn-button
-                    >`:(0,o.qy)`<mdn-login-button></mdn-login-button>`})}
+                    >`:(0,a.qy)`<mdn-login-button
+                    data-glean-id="playground: banner-login"
+                  ></mdn-login-button>`})}
         </section>
       </mdn-modal>
-      <mdn-modal ${(0,a.K)(this._reportModal)} class="report">
+      <mdn-modal ${(0,o.K)(this._reportModal)} class="report">
         <section>
           <p>
             ${this.l10n("playground-report-this-malicious-or-inappro")`Report this malicious or inappropriate shared playground.`}
@@ -145,5 +156,5 @@ ${t}
           >
         </section>
       </mdn-modal>
-    `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function h(e){return"html"in e?{srcPrefix:e.src||"",code:{html:e.html,css:e.css,js:e.js}}:"srcPrefix"in e?e:{srcPrefix:"",code:{}}}function m(e,t){return void 0===e||void 0===t?e===t:Object.keys(e).length===Object.keys(t).length&&Object.entries(e).every(([e,n])=>t[e]===n)}customElements.define("mdn-playground",MDNPlayground)},19713(e,t,n){n.d(t,{D:()=>i});var r=n(36752),o=n(7804),a=n(18504);let i=(0,o.u$)(class extends o.WL{constructor(){super(...arguments),this.key=r.s6}render(e,t){return this.key=e,t}update(e,[t,n]){return t!==this.key&&((0,a.mY)(e),this.key=t),n}})}};
-//# sourceMappingURL=291.91650ffed3a60424.js.map
+    `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function h(e){return"html"in e?{srcPrefix:e.src||"",code:{html:e.html,css:e.css,js:e.js}}:"srcPrefix"in e?e:{srcPrefix:"",code:{}}}function m(e,t){return void 0===e||void 0===t?e===t:Object.keys(e).length===Object.keys(t).length&&Object.entries(e).every(([e,n])=>t[e]===n)}customElements.define("mdn-playground",MDNPlayground)},19713(e,t,n){n.d(t,{D:()=>i});var r=n(36752),a=n(7804),o=n(18504);let i=(0,a.u$)(class extends a.WL{constructor(){super(...arguments),this.key=r.s6}render(e,t){return this.key=e,t}update(e,[t,n]){return t!==this.key&&((0,o.mY)(e),this.key=t),n}})}};
+//# sourceMappingURL=291.c90e43b3c10a9a1f.js.map

package/out/static/client/291.c90e43b3c10a9a1f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"291.c90e43b3c10a9a1f.js","sources":["webpack://@mdn/fred/./components/playground/element.css","webpack://@mdn/fred/./components/global/global.css?1b68","webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./components/icon/triangle-alert.svg","webpack://@mdn/fred/./components/playground/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/keyed.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\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{display:grid;gap:1rem;grid-template-areas:\"left runner\";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}:is(.wrapper section) .playground__runner-menu{align-self:flex-end;padding:.5rem 0}@media (width <= 992px){:is(.wrapper section) .playground__runner-menu{align-self:center}}.playground__runner-console:is(.wrapper section){grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{border:var(--border);border-radius:.25rem;flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border:var(--border);border-radius:.25rem}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):not(:last-child){margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}`, \"\"]);\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}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { FXA_SIGNIN_URL } from \"../env/index.js\";\n\nexport class MDNLoginButton extends L10nMixin(LitElement) {\n  static ssr = false;\n\n  get _loginUrl() {\n    const next = location.href.replace(location.origin, \"\");\n    // TODO: deal with local login\n    const loginUrl = new URL(FXA_SIGNIN_URL, location.origin);\n    loginUrl.search = new URLSearchParams({ next }).toString();\n    return loginUrl.toString();\n  }\n\n  render() {\n    return html`<mdn-button href=${this._loginUrl} data-glean-id=\"login_button\"\n      >${this.l10n(\"login-button-login\")`Login`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01\"/></svg>`;","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { gleanClick } from \"../../utils/glean.js\";\nimport warningIcon from \"../icon/triangle-alert.svg?lit\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\nimport { decompressFromBase64 } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../button/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../modal/element.js\";\nimport \"../login-button/element.js\";\n\n/**\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNModal } from \"../modal/element.js\";\n * @import { Ref } from \"lit/directives/ref.js\";\n */\n\nconst SESSION_KEY = \"playground-session-code\";\n\nexport class MDNPlayground extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    _gistID: { state: true },\n  };\n\n  constructor() {\n    super();\n    this._permalink = \"\";\n    this._autoRun = true;\n    /** @type {string | undefined} */\n    this._gistId = undefined;\n  }\n\n  /** @type {Ref<MDNPlayController>} */\n  _controller = createRef();\n  /** @type {Ref<MDNModal>} */\n  _shareModal = createRef();\n  /** @type {Ref<MDNModal>} */\n  _reportModal = createRef();\n\n  _user = new Task(this, {\n    task: async () => {\n      return await globalUser();\n    },\n  });\n\n  _format() {\n    this._controller.value?.format();\n  }\n\n  _run() {\n    const controller = this._controller.value;\n    if (controller) {\n      controller.run();\n      if (!this._autoRun) {\n        this._autoRun = true;\n        controller.runOnChange = true;\n        this._storeSession();\n      }\n    }\n  }\n\n  _share() {\n    this._shareModal.value?.showModal();\n  }\n\n  _clear() {\n    const controller = this._controller.value;\n    if (\n      confirm(\n        this.l10n(\n          \"playground-do-you-really-want-to-clear-ever\",\n        )`Do you really want to clear everything?`,\n      ) &&\n      controller\n    ) {\n      controller.clear();\n      this._autoRun = true;\n      this._storeSession();\n      this.requestUpdate();\n      const urlWithoutSearch = new URL(location.href);\n      urlWithoutSearch.search = \"\";\n      history.replaceState(undefined, \"\", urlWithoutSearch);\n    }\n  }\n\n  _reset() {\n    const controller = this._controller.value;\n    if (\n      confirm(\n        this.l10n(\n          \"playground-do-you-really-want-to-revert-you\",\n        )`Do you really want to revert your changes?`,\n      ) &&\n      controller\n    ) {\n      controller.reset();\n      this._storeSession();\n      this.requestUpdate();\n    }\n  }\n\n  async _copyMarkdown() {\n    const controller = this._controller.value;\n    if (controller) {\n      const markdown = Object.entries(controller.code)\n        .map(\n          ([lang, code]) =>\n            code &&\n            `${\"```\"}${lang}\n${code}\n${\"```\"}`,\n        )\n        .filter(Boolean)\n        .join(\"\\n\\n\");\n      await navigator.clipboard.writeText(markdown);\n    }\n  }\n\n  async _copyDataUrl() {\n    const controller = this._controller.value;\n    if (controller) {\n      const { css, html, js } = controller.code;\n      let code = `<!doctype html><body>`;\n      if (css) code += `<style>${css}</style>`;\n      if (html) code += html;\n      if (js) code += `<script>${js}</script>`;\n      code += `</body>`;\n      // encode non-space whitespace and percent\n      code = code.replaceAll(/([^\\S ]|%)+/g, (str) => encodeURIComponent(str));\n      await navigator.clipboard.writeText(\n        `data:text/html;charset=utf-8,${code}`,\n      );\n    }\n  }\n\n  async _createPermalink() {\n    const controller = this._controller.value;\n    if (controller) {\n      const res = await fetch(\"/api/v1/play/\", {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(controller.code),\n      });\n      const { id } = await res.json();\n      const permalink = new URL(location.href);\n      permalink.search = new URLSearchParams({ id }).toString();\n\n      controller.initialCode = controller.code;\n      this._permalink = permalink.toString();\n      history.replaceState(undefined, \"\", permalink);\n      this.requestUpdate();\n    }\n  }\n\n  async _copyPermalink() {\n    if (this._permalink) {\n      await navigator.clipboard.writeText(this._permalink);\n    }\n  }\n\n  _storeSession() {\n    const controller = this._controller.value;\n    if (controller) {\n      const { srcPrefix, initialCode, code } = controller;\n      /** @type {import(\"./types.js\").PlaygroundSession} */\n      const session = {\n        srcPrefix,\n        initialCode,\n        code,\n        autoRun: this._autoRun,\n      };\n      sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));\n    }\n  }\n\n  _loadSession() {\n    const { srcPrefix, initialCode, code, autoRun } = stateToSession(\n      JSON.parse(sessionStorage.getItem(SESSION_KEY) || \"{}\"),\n    );\n    const controller = this._controller.value;\n    if (controller) {\n      if (autoRun === false) {\n        this._autoRun = false;\n        controller.runOnStart = false;\n        controller.runOnChange = false;\n      }\n      controller.srcPrefix = srcPrefix;\n      controller.initialCode = initialCode;\n      controller.code = code;\n      this.requestUpdate();\n    }\n  }\n\n  async _loadFromUrl() {\n    const controller = this._controller.value;\n    if (controller) {\n      const params = new URLSearchParams(location.search);\n      const idParam = params.get(\"id\");\n      const stateParam = params.get(\"state\");\n      const srcPrefixParam = params.get(\"srcPrefix\");\n\n      if (idParam) {\n        this._gistId = idParam;\n      }\n\n      const { srcPrefix: srcPrefixState, code } =\n        (await (idParam\n          ? this._sessionFromApi(idParam)\n          : stateParam\n            ? this._sessionFromState(stateParam)\n            : undefined)) || {};\n\n      const srcPrefix = srcPrefixParam || srcPrefixState;\n\n      if (\n        srcPrefix !== undefined &&\n        code !== undefined &&\n        (controller.srcPrefix !== srcPrefix ||\n          !compareCode(controller.initialCode, code))\n      ) {\n        try {\n          if (\n            !opener?.location?.origin ||\n            opener?.location?.origin !== location.origin\n          ) {\n            throw new Error(\"origin doesn't match\");\n          }\n        } catch {\n          this._autoRun = false;\n          controller.runOnStart = false;\n          controller.runOnChange = false;\n        }\n        controller.srcPrefix = srcPrefix;\n        controller.initialCode = code;\n        controller.code = code;\n        this._storeSession();\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /** @param {string} id */\n  async _sessionFromApi(id) {\n    const response = await fetch(`/api/v1/play/${encodeURIComponent(id)}`);\n    if (!response.ok) {\n      console.error(response.statusText);\n      return;\n    }\n\n    const permalink = new URL(location.href);\n    permalink.search = new URLSearchParams({ id }).toString();\n    this._permalink = permalink.toString();\n\n    gleanClick(\"playground: load-shared\");\n    const code = await response.json();\n    return stateToSession(code);\n  }\n\n  /** @param {string} stateParam */\n  async _sessionFromState(stateParam) {\n    const { state } = await decompressFromBase64(stateParam);\n    return stateToSession(JSON.parse(state || \"{}\"));\n  }\n\n  _editorUpdate() {\n    this._storeSession();\n    this.requestUpdate();\n  }\n\n  _reportOpen() {\n    this._reportModal.value?.showModal();\n  }\n\n  _reportCancel() {\n    this._reportModal.value?.close();\n  }\n\n  async _reportSubmit() {\n    await fetch(\"/api/v1/play/flag\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n      body: JSON.stringify({\n        id: this._gistId,\n        reason: this._reportModal.value?.querySelector(\"textarea\")?.value,\n      }),\n    });\n    this._reportModal.value?.close();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._user.run();\n  }\n\n  render() {\n    const { code, initialCode } = this._controller.value ?? {};\n    const hasCode = Object.values(code ?? {}).some(Boolean);\n    const hasInitialCode = Object.values(initialCode ?? {}).some(Boolean);\n    const isResettable = hasInitialCode && !compareCode(code, initialCode);\n\n    return html`\n      <div class=\"wrapper\">\n        <mdn-play-controller\n          ${ref(this._controller)}\n          run-on-start\n          run-on-change\n        >\n          <section>\n            <aside>\n              <h1>${this.l10n(\"playground-playground\")`Playground`}</h1>\n              <menu>\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._format}\n                  ?disabled=${!hasCode}\n                  >${this.l10n(\"playground-format\")`Format`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._run}\n                  ?disabled=${!hasCode}\n                  >${this.l10n(\"playground-run\")`Run`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._share}\n                  ?disabled=${!hasCode}\n                  data-id=\"share\"\n                  data-glean-id=\"playground: share-click\"\n                  >${this.l10n(\"playground-share\")`Share`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._clear}\n                  ?disabled=${!(hasCode || isResettable)}\n                  data-id=\"clear\"\n                  >${this.l10n(\"playground-clear\")`Clear`}</mdn-button\n                >\n                ${hasInitialCode\n                  ? html`<mdn-button\n                      variant=\"secondary\"\n                      @click=${this._reset}\n                      ?disabled=${!isResettable}\n                      data-glean-id=\"playground: reset-click\"\n                      >${this.l10n(\"playground-reset\")`Reset`}</mdn-button\n                    >`\n                  : nothing}\n              </menu>\n            </aside>\n            <details open>\n              <summary>HTML</summary>\n              <mdn-play-editor\n                language=\"html\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n            <details open>\n              <summary>CSS</summary>\n              <mdn-play-editor\n                language=\"css\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n            <details open>\n              <summary>JAVASCRIPT</summary>\n              <mdn-play-editor\n                language=\"js\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n          </section>\n          <section class=\"playground__runner-console\">\n            ${this._gistId\n              ? html`<aside class=\"playground__runner-menu\">\n                  <menu>\n                    <mdn-button\n                      @click=${this._reportOpen}\n                      variant=\"secondary\"\n                      .icon=${warningIcon}\n                      data-glean-id=\"playground: flag-click\"\n                    >\n                      ${this.l10n(\n                        \"playground-seeing-something-inappropriate\",\n                      )`Seeing something inappropriate?`}\n                    </mdn-button>\n                  </menu>\n                </aside>`\n              : nothing}\n            <mdn-play-runner></mdn-play-runner>\n            <div class=\"playground__console\">\n              <div>${this.l10n(\"playground-console\")`Console`}</div>\n              <mdn-play-console></mdn-play-console>\n            </div>\n          </section>\n        </mdn-play-controller>\n      </div>\n      <mdn-modal ${ref(this._shareModal)} class=\"share\">\n        <section>\n          <h2>${this.l10n(\"playground-share-markdown\")`Share Markdown`}</h2>\n          <mdn-button\n            variant=\"secondary\"\n            @click=${this._copyMarkdown}\n            data-glean-id=\"playground: share-markdown\"\n            >${this.l10n(\n              \"playground-copy-markdown-to-clipboard\",\n            )`Copy markdown to clipboard`}</mdn-button\n          >\n        </section>\n        <section>\n          <h2>${this.l10n(\"playground-share-data-url\")`Share Data URL`}</h2>\n          <mdn-button\n            variant=\"secondary\"\n            @click=${this._copyDataUrl}\n            data-glean-id=\"playground: share-data-url\"\n            >${this.l10n(\n              \"playground-copy-data-url-to-clipboard\",\n            )`Copy data URL to clipboard`}</mdn-button\n          >\n        </section>\n        <section>\n          <h2>\n            ${this.l10n(\n              \"playground-share-your-code-via-permalink\",\n            )`Share your code via Permalink`}\n          </h2>\n          ${this._user.render({\n            initial: () =>\n              html`<mdn-login-button\n                data-glean-id=\"playground: banner-login\"\n              ></mdn-login-button>`,\n            pending: () =>\n              html`<mdn-login-button\n                data-glean-id=\"playground: banner-login\"\n              ></mdn-login-button>`,\n            complete: (user) =>\n              user.isAuthenticated\n                ? this._permalink && !isResettable\n                  ? html`\n                      <input .value=${this._permalink} />\n                      <mdn-button\n                        variant=\"secondary\"\n                        @click=${this._copyPermalink}\n                        data-glean-id=\"playground: share-permalink\"\n                        >${this.l10n(\n                          \"playground-copy-to-clipboard\",\n                        )`Copy to clipboard`}</mdn-button\n                      >\n                    `\n                  : html`<mdn-button\n                      @click=${this._createPermalink}\n                      data-glean-id=\"playground: share-permalink\"\n                      >${this.l10n(\n                        \"playground-create-link\",\n                      )`Create link`}</mdn-button\n                    >`\n                : html`<mdn-login-button\n                    data-glean-id=\"playground: banner-login\"\n                  ></mdn-login-button>`,\n          })}\n        </section>\n      </mdn-modal>\n      <mdn-modal ${ref(this._reportModal)} class=\"report\">\n        <section>\n          <p>\n            ${this.l10n(\n              \"playground-report-this-malicious-or-inappro\",\n            )`Report this malicious or inappropriate shared playground.`}\n          </p>\n          <label>\n            ${this.l10n(\n              \"playground-can-you-please-share-some-detail\",\n            )`Can you please share some details on what's wrong with this content:`}\n            <textarea></textarea>\n          </label>\n        </section>\n        <section>\n          <mdn-button variant=\"secondary\" @click=${this._reportCancel}\n            >${this.l10n(\"playground-cancel\")`Cancel`}</mdn-button\n          >\n          <mdn-button @click=${this._reportSubmit}\n            >${this.l10n(\"playground-report\")`Report`}</mdn-button\n          >\n        </section>\n      </mdn-modal>\n    `;\n  }\n\n  firstUpdated() {\n    this._loadSession();\n    this._loadFromUrl();\n  }\n}\n\ncustomElements.define(\"mdn-playground\", MDNPlayground);\n\n/**\n * @param {import(\"./types.js\").PlaygroundStateParam | import(\"./types.js\").PlaygroundSession | {}} stateOrSession\n * @returns {import(\"./types.js\").PlaygroundSession}\n */\nfunction stateToSession(stateOrSession) {\n  if (\"html\" in stateOrSession) {\n    return {\n      srcPrefix: stateOrSession.src || \"\",\n      code: {\n        html: stateOrSession.html,\n        css: stateOrSession.css,\n        js: stateOrSession.js,\n      },\n    };\n  }\n  if (\"srcPrefix\" in stateOrSession) {\n    return stateOrSession;\n  }\n  return {\n    srcPrefix: \"\",\n    code: {},\n  };\n}\n\n/**\n * @param {Record<string, string>} [a]\n * @param {Record<string, string>} [b]\n * @returns {boolean}\n */\nfunction compareCode(a, b) {\n  return a === undefined || b === undefined\n    ? a === b\n    : Object.keys(a).length === Object.keys(b).length &&\n        Object.entries(a).every(([k, v]) => b[k] === v);\n}\n","import{nothing as r}from\"../lit-html.js\";import{directive as t,Directive as e}from\"../directive.js\";import{setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const i=t(class extends e{constructor(){super(...arguments),this.key=r}render(r,t){return this.key=r,t}update(r,[t,e]){return t!==this.key&&(s(r),this.key=t),e}});export{i as keyed};\n//# sourceMappingURL=keyed.js.map\n"],"names":["MDNLoginButton","location","URL","URLSearchParams","customElements","MDNPlayground","confirm","history","Object","Boolean","navigator","encodeURIComponent","fetch","JSON","sessionStorage","s","opener","Error","console","i","arguments","r","t"],"mappings":"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"}