// @license © 2019 Google LLC. Licensed under the Apache License, Version 2.0.
const e=document;let t={};try{t=localStorage}catch(e){}const i="prefers-color-scheme";const a="media";const s="light";const r="dark";const h="system";const o=`(${i}:${r})`;const l=`(${i}:${s})`;const n="link[rel=stylesheet]";const c="style";const d="remember";const p="legend";const b="toggle";const g="switch";const m="three-way";const u="appearance";const f="permanent";const k="mode";const y="colorschemechange";const $="permanentcolorscheme";const v="all";const L="not all";const T="dark-mode-toggle";const W="https://googlechromelabs.github.io/dark-mode-toggle/demo/";const w=(e,t,i=t)=>{Object.defineProperty(e,i,{enumerable:true,get(){const e=this.getAttribute(t);return e===null?"":e},set(e){this.setAttribute(t,e)}})};const x=(e,t,i=t)=>{Object.defineProperty(e,i,{enumerable:true,get(){return this.hasAttribute(t)},set(e){if(e){this.setAttribute(t,"")}else{this.removeAttribute(t)}}})};const R=e.createElement("template");R.innerHTML=`<style>*,::after,::before{box-sizing:border-box}:host{contain:content;display:block}:host([hidden]){display:none}form{background-color:var(--${T}-background-color,transparent);color:var(--${T}-color,inherit);padding:0}fieldset{border:none;margin:0;padding-block:.25rem;padding-inline:.25rem}legend{font:var(--${T}-legend-font,inherit);padding:0}input,label{cursor:pointer}label{white-space:nowrap}input{opacity:0;position:absolute;pointer-events:none}input:focus-visible+label{outline:#e59700 auto 2px;outline:-webkit-focus-ring-color auto 5px}label::before{content:"";display:inline-block;background-size:var(--${T}-icon-size,1rem);background-repeat:no-repeat;height:var(--${T}-icon-size,1rem);width:var(--${T}-icon-size,1rem);vertical-align:middle}label:not(:empty)::before{margin-inline-end:.5rem}[part=lightLabel]::before,[part=lightThreeWayLabel]::before{background-image:var(--${T}-light-icon, url("${W}sun.png"))}[part=darkLabel]::before,[part=darkThreeWayLabel]::before{filter:var(--${T}-icon-filter, none);background-image:var(--${T}-dark-icon, url("${W}moon.png"))}[part=systemThreeWayLabel]::before{background-image:var(--${T}-system-icon, url("${W}system.png"))}[part=toggleLabel]::before{background-image:var(--${T}-checkbox-icon,none)}[part=permanentLabel]::before{background-image:var(--${T}-remember-icon-unchecked, url("${W}unchecked.svg"))}[part$=ThreeWayLabel],[part=darkLabel],[part=lightLabel],[part=toggleLabel]{font:var(--${T}-label-font,inherit)}[part$=ThreeWayLabel]:empty,[part=darkLabel]:empty,[part=lightLabel]:empty,[part=toggleLabel]:empty{font-size:0;padding:0}[part=permanentLabel]{font:var(--${T}-remember-font,inherit)}input:checked+[part=permanentLabel]::before{background-image:var(--${T}-remember-icon-checked, url("${W}checked.svg"))}input:checked+[part$=ThreeWayLabel],input:checked+[part=darkLabel],input:checked+[part=lightLabel]{background-color:var(--${T}-active-mode-background-color,transparent)}input:checked+[part$=ThreeWayLabel]::before,input:checked+[part=darkLabel]::before,input:checked+[part=lightLabel]::before{background-color:var(--${T}-active-mode-background-color,transparent)}input:checked+[part=toggleLabel]::before,input[part=toggleCheckbox]:checked~[part=threeWayRadioWrapper] [part$=ThreeWayLabel]::before{filter:var(--${T}-icon-filter, none)}input:checked+[part=toggleLabel]~aside [part=permanentLabel]::before{filter:var(--${T}-remember-filter, invert(100%))}aside{visibility:hidden;margin-block-start:.15rem}[part=darkLabel]:focus-visible~aside,[part=lightLabel]:focus-visible~aside,[part=toggleLabel]:focus-visible~aside{visibility:visible;transition:visibility 0s}aside [part=permanentLabel]:empty{display:none}@media (hover:hover){aside{transition:visibility 3s}aside:hover{visibility:visible}[part=darkLabel]:hover~aside,[part=lightLabel]:hover~aside,[part=toggleLabel]:hover~aside{visibility:visible;transition:visibility 0s}}</style><form part=form><fieldset part=fieldset><legend part=legend></legend><input id=l part=lightRadio type=radio name=mode> <label for=l part=lightLabel></label> <input id=d part=darkRadio type=radio name=mode> <label for=d part=darkLabel></label> <input id=t part=toggleCheckbox type=checkbox> <label for=t part=toggleLabel></label> <span part=threeWayRadioWrapper><input id=3l part=lightThreeWayRadio type=radio name=three-way-mode> <label for=3l part=lightThreeWayLabel></label> <input id=3s part=systemThreeWayRadio type=radio name=three-way-mode> <label for=3s part=systemThreeWayLabel></label> <input id=3d part=darkThreeWayRadio type=radio name=three-way-mode> <label for=3d part=darkThreeWayLabel></label></span><aside part=aside><input id=p part=permanentCheckbox type=checkbox> <label for=p part=permanentLabel></label></aside></fieldset></form>`;export class DarkModeToggle extends HTMLElement{static get observedAttributes(){return[k,u,f,p,s,r,d]}constructor(){super();w(this,k);w(this,u);w(this,p);w(this,s);w(this,r);w(this,h);w(this,d);x(this,f);this.t=null;this.i=null;e.addEventListener(y,e=>{this.mode=e.detail.colorScheme;this.h();this.o();this.l()});e.addEventListener($,e=>{this.permanent=e.detail.permanent;this.p.checked=this.permanent;this.l()});this.m()}m(){const t=this.attachShadow({mode:"open"});t.append(R.content.cloneNode(true));this.t=e.querySelectorAll(`${n}[${a}*=${i}][${a}*="${r}"],\n       ${c}[${a}*=${i}][${a}*="${r}"]`);this.i=e.querySelectorAll(`${n}[${a}*=${i}][${a}*="${s}"], \n       ${c}[${a}*=${i}][${a}*="${s}"]`);this.u=t.querySelector("[part=lightRadio]");this.k=t.querySelector("[part=lightLabel]");this.$=t.querySelector("[part=darkRadio]");this.v=t.querySelector("[part=darkLabel]");this.L=t.querySelector("[part=toggleCheckbox]");this.T=t.querySelector("[part=toggleLabel]");this.W=t.querySelector("[part=lightThreeWayRadio]");this.R=t.querySelector("[part=lightThreeWayLabel]");this.C=t.querySelector("[part=systemThreeWayRadio]");this.M=t.querySelector("[part=systemThreeWayLabel]");this.S=t.querySelector("[part=darkThreeWayRadio]");this._=t.querySelector("[part=darkThreeWayLabel]");this.A=t.querySelector("legend");this.D=t.querySelector("aside");this.p=t.querySelector("[part=permanentCheckbox]");this.O=t.querySelector("[part=permanentLabel]")}connectedCallback(){const e=matchMedia(o).media!==L;if(e){matchMedia(o).addListener(({matches:e})=>{if(this.permanent){return}this.mode=e?r:s;this.j(y,{colorScheme:this.mode})})}let i=false;try{i=t.getItem(T)}catch(e){}if(i&&[r,s].includes(i)){this.mode=i;this.p.checked=true;this.permanent=true}else if(e){this.mode=matchMedia(l).matches?s:r}if(!this.mode){this.mode=s}if(this.permanent&&!i){try{t.setItem(T,this.mode)}catch(e){}}if(!this.appearance){this.appearance=b}this.P();this.h();this.o();this.l();[this.u,this.$].forEach(e=>{e.addEventListener("change",()=>{this.mode=this.u.checked?s:r;this.o();this.l();this.j(y,{colorScheme:this.mode})})});this.L.addEventListener("change",()=>{this.mode=this.L.checked?r:s;this.h();this.l();this.j(y,{colorScheme:this.mode})});this.W.addEventListener("change",()=>{this.mode=s;this.permanent=true;this.o();this.h();this.l();this.j(y,{colorScheme:this.mode});this.j($,{permanent:this.permanent})});this.S.addEventListener("change",()=>{this.mode=r;this.permanent=true;this.o();this.h();this.l();this.j(y,{colorScheme:this.mode});this.j($,{permanent:this.permanent})});this.C.addEventListener("change",()=>{this.mode=this.H();this.permanent=false;this.o();this.h();this.l();this.j(y,{colorScheme:this.mode});this.j($,{permanent:this.permanent})});this.p.addEventListener("change",()=>{this.permanent=this.p.checked;this.l();this.j($,{permanent:this.permanent})});this.q();this.j(y,{colorScheme:this.mode});this.j($,{permanent:this.permanent})}attributeChangedCallback(e,i,a){if(e===k){const e=[s,h,r];if(!e.includes(a)){throw new RangeError(`Allowed values are: "${e.join(`", "`)}".`)}if(matchMedia("(hover:none)").matches&&this.remember){this.B()}if(this.permanent){try{t.setItem(T,this.mode)}catch(e){}}this.h();this.o();this.l();this.q()}else if(e===u){const e=[b,g,m];if(!e.includes(a)){throw new RangeError(`Allowed values are: "${e.join(`", "`)}".`)}this.P()}else if(e===f){if(this.permanent){if(this.mode){try{t.setItem(T,this.mode)}catch(e){}}}else{try{t.removeItem(T)}catch(e){}}this.p.checked=this.permanent}else if(e===p){this.A.textContent=a}else if(e===d){this.O.textContent=a}else if(e===s){this.k.textContent=a;if(this.mode===s){this.T.textContent=a}}else if(e===r){this.v.textContent=a;if(this.mode===r){this.T.textContent=a}}}H(){return matchMedia(l).matches?s:r}j(e,t){this.dispatchEvent(new CustomEvent(e,{bubbles:true,composed:true,detail:t}))}P(){this.u.hidden=this.k.hidden=this.$.hidden=this.v.hidden=this.L.hidden=this.T.hidden=this.W.hidden=this.R.hidden=this.C.hidden=this.M.hidden=this.S.hidden=this._.hidden=true;switch(this.appearance){case g:this.u.hidden=this.k.hidden=this.$.hidden=this.v.hidden=false;break;case m:this.W.hidden=this.R.hidden=this.C.hidden=this.M.hidden=this.S.hidden=this._.hidden=false;break;case b:default:this.L.hidden=this.T.hidden=false;break}}h(){if(this.mode===s){this.u.checked=true}else{this.$.checked=true}}o(){if(this.mode===s){this.T.style.setProperty(`--${T}-checkbox-icon`,`var(--${T}-light-icon,url("${W}moon.png"))`);this.T.textContent=this.light;if(!this.light){this.T.ariaLabel=r}this.L.checked=false}else{this.T.style.setProperty(`--${T}-checkbox-icon`,`var(--${T}-dark-icon,url("${W}sun.png"))`);this.T.textContent=this.dark;if(!this.dark){this.T.ariaLabel=s}this.L.checked=true}}l(){this.R.ariaLabel=s;this.M.ariaLabel=h;this._.ariaLabel=r;this.R.textContent=this.light;this.M.textContent=this.system;this._.textContent=this.dark;if(this.permanent){if(this.mode===s){this.W.checked=true}else{this.S.checked=true}}else{this.C.checked=true}}q(){if(this.mode===s){this.i.forEach(e=>{e.media=v;e.disabled=false});this.t.forEach(e=>{e.media=L;e.disabled=true})}else{this.t.forEach(e=>{e.media=v;e.disabled=false});this.i.forEach(e=>{e.media=L;e.disabled=true})}}B(){this.D.style.visibility="visible";setTimeout(()=>{this.D.style.visibility="hidden"},3e3)}}customElements.define(T,DarkModeToggle);