diff --git a/index.html b/index.html new file mode 100644 index 0000000..42b1402 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ + svelte-toggle \ No newline at end of file diff --git a/s.f38eaf43.js b/s.f38eaf43.js new file mode 100644 index 0000000..07fb840 --- /dev/null +++ b/s.f38eaf43.js @@ -0,0 +1 @@ +var app=function(){"use strict";function n(){}function t(n,t){for(const s in t)n[s]=t[s];return n}function s(n){return n()}function a(){return Object.create(null)}function e(n){n.forEach(s)}function o(n){return"function"==typeof n}function l(n,t){return n!=n?t==t:n!==t}function p(n,t,s,a){if(n){const e=c(n,t,s,a);return n[0](e)}}function c(n,s,a,e){return n[1]&&e?t(a.ctx.slice(),n[1](e(s))):a.ctx}function i(n,t,s,a){if(n[2]&&a){const e=n[2](a(s));if(void 0===t.dirty)return e;if("object"==typeof e){const n=[],s=Math.max(t.dirty.length,e.length);for(let a=0;a32){const t=[],s=n.ctx.length/32;for(let n=0;nn.removeEventListener(t,s,a)}function w(n,t,s){null==s?n.removeAttribute(t):n.getAttribute(t)!==s&&n.setAttribute(t,s)}const C=["width","height"];function T(n,t){const s=Object.getOwnPropertyDescriptors(n.__proto__);for(const a in t)null==t[a]?n.removeAttribute(a):"style"===a?n.style.cssText=t[a]:"__value"===a?n.value=n[a]=t[a]:s[a]&&s[a].set&&-1===C.indexOf(a)?n[a]=t[a]:w(n,a,t[a])}function L(n,t){t=""+t,n.data!==t&&(n.data=t)}function M(n,t,s){~f.indexOf(s)?function(n,t){t=""+t,n.wholeText!==t&&(n.data=t)}(n,t):L(n,t)}function H(n,t,s,a){null==s?n.style.removeProperty(t):n.style.setProperty(t,s,a?"important":"")}function _(n,t,s){n.classList[s?"add":"remove"](t)}let j;function E(n){j=n}function O(){const n=function(){if(!j)throw new Error("Function called outside component initialization");return j}();return(t,s,{cancelable:a=!1}={})=>{const e=n.$$.callbacks[t];if(e){const o=function(n,t,{bubbles:s=!1,cancelable:a=!1}={}){const e=document.createEvent("CustomEvent");return e.initCustomEvent(n,s,a,t),e}(t,s,{cancelable:a});return e.slice().forEach((t=>{t.call(n,o)})),!o.defaultPrevented}return!0}}function q(n,t){const s=n.$$.callbacks[t.type];s&&s.slice().forEach((n=>n.call(this,t)))}const N=[],S=[];let A=[];const P=[],D=Promise.resolve();let I=!1;function z(n){A.push(n)}function G(n){P.push(n)}const Y=new Set;let F=0;function R(){if(0!==F)return;const n=j;do{try{for(;F{B.delete(n),a&&(s&&n.d(1),a())})),n.o(t)}else a&&a()}function J(n,t){const s={},a={},e={$$scope:1};let o=n.length;for(;o--;){const l=n[o],p=t[o];if(p){for(const n in l)n in p||(a[n]=1);for(const n in p)e[n]||(s[n]=p[n],e[n]=1);n[o]=p}else for(const n in l)e[n]=1}for(const n in a)n in s||(s[n]=void 0);return s}function K(n,t,s){const a=n.$$.props[t];void 0!==a&&(n.$$.bound[a]=s,s(n.$$.ctx[a]))}function Q(n){n&&n.c()}function V(n,t,a,l){const{fragment:p,after_update:c}=n.$$;p&&p.m(t,a),l||z((()=>{const t=n.$$.on_mount.map(s).filter(o);n.$$.on_destroy?n.$$.on_destroy.push(...t):e(t),n.$$.on_mount=[]})),c.forEach(z)}function Z(n,t){const s=n.$$;null!==s.fragment&&(!function(n){const t=[],s=[];A.forEach((a=>-1===n.indexOf(a)?t.push(a):s.push(a))),s.forEach((n=>n())),A=t}(s.after_update),e(s.on_destroy),s.fragment&&s.fragment.d(t),s.on_destroy=s.fragment=null,s.ctx=[])}function nn(n,t){-1===n.$$.dirty[0]&&(N.push(n),I||(I=!0,D.then(R)),n.$$.dirty.fill(0)),n.$$.dirty[t/31|0]|=1<{const e=a.length?a[0]:s;return d.ctx&&p(d.ctx[n],d.ctx[n]=e)&&(!d.skip_bound&&d.bound[n]&&d.bound[n](e),g&&nn(t,n)),s})):[],d.update(),g=!0,e(d.before_update),d.fragment=!!l&&l(d.ctx),s.target){if(s.hydrate){const n=function(n){return Array.from(n.childNodes)}(s.target);d.fragment&&d.fragment.l(n),n.forEach(b)}else d.fragment&&d.fragment.c();s.intro&&X(t.$$.fragment),V(t,s.target,s.anchor,s.customElement),R()}E(u)}class sn{$destroy(){Z(this,1),this.$destroy=n}$on(t,s){if(!o(s))return n;const a=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return a.push(s),()=>{const n=a.indexOf(s);-1!==n&&a.splice(n,1)}}$set(n){var t;this.$$set&&(t=n,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(n),this.$$.skip_bound=!1)}}const an=n=>({label:2&n,button:1&n}),en=n=>({label:n[1],button:n[0]});function on(n){let t;const s=n[6].default,a=p(s,n,n[5],en);return{c(){a&&a.c()},m(n,s){a&&a.m(n,s),t=!0},p(n,[e]){a&&a.p&&(!t||35&e)&&r(a,s,n,n[5],t?i(s,n[5],e,an):u(n[5]),en)},i(n){t||(X(a,n),t=!0)},o(n){W(a,n),t=!1},d(n){a&&a.d(n)}}}function ln(n,s,a){let e,o;const l=["id","toggled","disabled"];let p=g(s,l),{$$slots:c={},$$scope:i}=s,{id:r="toggle"+Math.random().toString(36)}=s,{toggled:u=!0}=s,{disabled:f=!1}=s;return n.$$set=n=>{s=t(t({},s),d(n)),a(7,p=g(s,l)),"id"in n&&a(2,r=n.id),"toggled"in n&&a(3,u=n.toggled),"disabled"in n&&a(4,f=n.disabled),"$$scope"in n&&a(5,i=n.$$scope)},n.$$.update=()=>{4&n.$$.dirty&&a(1,e={for:r}),a(0,o={...p,id:r,disabled:f,"aria-checked":u,type:"button",role:"switch"})},[o,e,r,u,f,i,c]}class pn extends sn{constructor(n){super(),tn(this,n,ln,on,l,{id:2,toggled:3,disabled:4})}}function cn(n){m(n,"svelte-1y1be9d",'label.svelte-1y1be9d{display:block;margin-bottom:0.25rem;font-size:0.75rem}.hideLabel.svelte-1y1be9d{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}button.svelte-1y1be9d{position:relative;padding:0 0.25rem;border:0;border-radius:1rem;height:1.25rem;width:2.5rem;font:inherit;color:inherit;line-height:inherit}button.svelte-1y1be9d:not([disabled]){cursor:pointer}button[disabled].svelte-1y1be9d{cursor:not-allowed;opacity:0.6}button.svelte-1y1be9d:before{position:absolute;content:"";top:0;bottom:0;left:0.125rem;margin:auto;height:1rem;width:1rem;text-align:center;border-radius:50%;background-color:currentColor;transition:transform 150ms ease-out}button[aria-checked="true"].svelte-1y1be9d:before{transform:translateX(1.25rem)}button.small.svelte-1y1be9d{height:1rem;width:1.75rem}button.small.svelte-1y1be9d:before{height:0.75rem;width:0.75rem}button.small[aria-checked="true"].svelte-1y1be9d:before{transform:translateX(0.75rem)}div.svelte-1y1be9d{display:flex;align-items:center}span.svelte-1y1be9d{margin-left:0.5rem}')}const rn=n=>({toggled:1&n}),un=n=>({toggled:n[0]});function dn(n){let t,s,a=(n[0]?n[5]:n[6])+"";return{c(){t=$("span"),s=v(a),w(t,"class","svelte-1y1be9d")},m(n,a){h(n,t,a),k(t,s)},p(n,t){97&t&&a!==(a=(n[0]?n[5]:n[6])+"")&&L(s,a)},d(n){n&&b(t)}}}function gn(n){let t,s=n[5]&&n[6]&&dn(n);return{c(){s&&s.c(),t=v("")},m(n,a){s&&s.m(n,a),h(n,t,a)},p(n,a){n[5]&&n[6]?s?s.p(n,a):(s=dn(n),s.c(),s.m(t.parentNode,t)):s&&(s.d(1),s=null)},d(n){s&&s.d(n),n&&b(t)}}}function fn(n){let s,a,o,l,c,d,g,f,m,C=[n[19]],L={};for(let n=0;n({19:n,20:t}),({label:n,button:t})=>(n?524288:0)|(t?1048576:0)]},$$scope:{ctx:n}};return void 0!==n[0]&&(o.toggled=n[0]),t=new pn({props:o}),S.push((()=>K(t,"toggled",e))),{c(){Q(t.$$.fragment)},m(n,s){V(t,n,s),a=!0},p(n,[a]){const e={};1705983&a&&(e.$$scope={dirty:a,ctx:n}),!s&&1&a&&(s=!0,e.toggled=n[0],G((()=>s=!1))),t.$set(e)},i(n){a||(X(t.$$.fragment,n),a=!0)},o(n){W(t.$$.fragment,n),a=!1},d(n){Z(t,n)}}}function mn(n,s,a){const e=["toggled","label","hideLabel","small","disabled","on","off","switchColor","toggledColor","untoggledColor"];let o=g(s,e),{$$slots:l={},$$scope:p}=s,{toggled:c=!0}=s,{label:i="Label"}=s,{hideLabel:r=!1}=s,{small:u=!1}=s,{disabled:f=!1}=s,{on:k}=s,{off:m}=s,{switchColor:h="#fff"}=s,{toggledColor:b="#0f62fe"}=s,{untoggledColor:$="#8d8d8d"}=s;const v=O();return n.$$set=n=>{s=t(t({},s),d(n)),a(10,o=g(s,e)),"toggled"in n&&a(0,c=n.toggled),"label"in n&&a(1,i=n.label),"hideLabel"in n&&a(2,r=n.hideLabel),"small"in n&&a(3,u=n.small),"disabled"in n&&a(4,f=n.disabled),"on"in n&&a(5,k=n.on),"off"in n&&a(6,m=n.off),"switchColor"in n&&a(7,h=n.switchColor),"toggledColor"in n&&a(8,b=n.toggledColor),"untoggledColor"in n&&a(9,$=n.untoggledColor),"$$scope"in n&&a(17,p=n.$$scope)},n.$$.update=()=>{1&n.$$.dirty&&v("toggle",c)},[c,i,r,u,f,k,m,h,b,$,o,l,function(t){q.call(this,n,t)},function(t){q.call(this,n,t)},function(t){q.call(this,n,t)},()=>a(0,c=!c),function(n){c=n,a(0,c)},p]}class hn extends sn{constructor(n){super(),tn(this,n,mn,kn,l,{toggled:0,label:1,hideLabel:2,small:3,disabled:4,on:5,off:6,switchColor:7,toggledColor:8,untoggledColor:9},cn)}}function bn(n){let t,s,a,e=n[3]?"Yes":"No";return{c(){t=$("strong"),s=v(e),a=y()},m(n,e){h(n,t,e),k(t,s),h(n,a,e)},p(n,t){8&t&&e!==(e=n[3]?"Yes":"No")&&L(s,e)},d(n){n&&b(t),n&&b(a)}}}function $n(n){let s,a,e,o,l,p,c,i,r=n[1]?"On":"Off",u=[n[9]],d={};for(let n=0;nK(nn,"toggled",ps))),kn=new hn({props:{on:"On",off:"Off"}}),Cn=new hn({props:{$$slots:{default:[bn,({toggled:n})=>({3:n}),({toggled:n})=>n?8:0]},$$scope:{ctx:n}}}),On=new hn({props:{small:!0}}),Yn=new hn({props:{switchColor:"#eee",toggledColor:"#24a148",untoggledColor:"#fa4d56"}}),Kn=new hn({props:{label:"Custom label"}}),lt=new hn({props:{hideLabel:!0,label:"Custom label"}}),ft=new hn({props:{disabled:!0}}),Ct=new pn({props:{toggled:n[1],$$slots:{default:[$n,({label:n,button:t})=>({9:n,10:t}),({label:n,button:t})=>(n?512:0)|(t?1024:0)]},$$scope:{ctx:n}}}),zt=new hn({}),zt.$on("toggle",n[8]),{c(){t=$("main"),s=$("h1"),s.textContent="svelte-toggle",a=y(),e=$("p"),e.innerHTML='NPM',o=y(),l=$("blockquote"),l.innerHTML="

Accessible toggle switch component

",p=y(),c=$("p"),c.innerHTML='GitHub repo',i=y(),r=$("p"),r.innerHTML='This Svelte component implements accessibility practices for toggle buttons recommended by the Inclusive Components guide.',u=y(),d=$("p"),d.innerHTML='Try it in the Svelte REPL.',g=y(),f=$("hr"),m=y(),C=$("h2"),C.textContent="Installation",T=y(),M=$("pre"),H=y(),_=$("h2"),_.textContent="Usage",j=y(),E=$("h3"),E.textContent="Uncontrolled",O=y(),q=$("p"),q.textContent="The component is toggled by default.",N=y(),A=$("div"),Q(P.$$.fragment),D=v("\n\nToggled? "),I=v(n[0]),z=$("pre"),Y=y(),F=$("h3"),F.textContent="Two-way binding",R=y(),U=$("p"),U.innerHTML="The toggled prop supports two way binding.",B=y(),J=$("div"),Q(nn.$$.fragment),sn=y(),an=$("button"),en=v(os),on=y(),ln=$("pre"),cn=y(),rn=$("h3"),rn.textContent="Switch descriptors",un=y(),dn=$("p"),dn.innerHTML="Customize the toggle switch descriptors using the "on" and "off" props.",gn=y(),fn=$("div"),Q(kn.$$.fragment),mn=$("pre"),vn=y(),yn=$("p"),yn.textContent="Alternatively, you can override the default slot:",xn=y(),wn=$("div"),Q(Cn.$$.fragment),Tn=$("pre"),Ln=y(),Mn=$("h3"),Mn.textContent="Small variant",Hn=y(),_n=$("p"),_n.innerHTML="Set small to true to use the small size variant.",jn=y(),En=$("div"),Q(On.$$.fragment),qn=$("pre"),Nn=y(),Sn=$("h3"),Sn.textContent="Custom colors",An=y(),Pn=$("p"),Pn.textContent="Customize the switch colors:",Dn=y(),In=$("ul"),In.innerHTML="
  • switchColor (default: #fff)
    • \n
  • toggledColor (default: #0f62fe)
    • \n
  • untoggledColor (default: #8d8d8d)
    • ",zn=y(),Gn=$("div"),Q(Yn.$$.fragment),Fn=$("pre"),Rn=y(),Un=$("h3"),Un.textContent="Custom label",Bn=y(),Xn=$("p"),Xn.innerHTML="Customize the label text through the label prop.",Wn=y(),Jn=$("div"),Q(Kn.$$.fragment),Qn=$("pre"),Vn=y(),Zn=$("h3"),Zn.textContent="Hidden label",nt=y(),tt=$("p"),tt.innerHTML="Set hideLabel to true to visually hide the label.",st=y(),at=$("p"),at.innerHTML='Note: You should still provide a label value for accessibility.',et=y(),ot=$("div"),Q(lt.$$.fragment),pt=$("pre"),ct=y(),it=$("h3"),it.textContent="Disabled",rt=y(),ut=$("p"),ut.innerHTML="Set disabled to true to use the disabled state.",dt=y(),gt=$("div"),Q(ft.$$.fragment),kt=$("pre"),mt=y(),ht=$("h3"),ht.textContent="Fully controlled",bt=y(),$t=$("p"),$t.innerHTML="ToggleCore is an unstyled component that provides the accessibility attributes for the label and button elements.",vt=y(),yt=$("p"),yt.textContent="Use this component if you want to style the component yourself.",xt=y(),wt=$("div"),Q(Ct.$$.fragment),Tt=$("pre"),Lt=y(),Mt=$("h2"),Mt.textContent="API",Ht=y(),_t=$("p"),_t.innerHTML="API for the default Toggle component.",jt=y(),Et=$("h3"),Et.textContent="Props",Ot=y(),qt=$("table"),qt.innerHTML='Prop name \nType \nDefault value \nid \nstring \n"toggle" + Math.random().toString(36)" \nlabel \nstring \n"Label" \nhideLabel \nboolean \nfalse \nsmall \nboolean \nfalse \ntoggled \nboolean \ntrue \ndisabled \nboolean \nfalse \non \nstring \nundefined \noff \nstring \nundefined \nswitchColor \nstring \n"#fff" \ntoggledColor \nstring \n"#0f62fe" \nuntoggledColor \nstring \n"#8d8d8d"',Nt=y(),St=$("h3"),St.textContent="Dispatched events",At=y(),Pt=$("ul"),Pt.innerHTML="
  • on:toggle: fired whenever toggled changes
    • ",Dt=y(),It=$("div"),Q(zt.$$.fragment),Gt=v("\n\non:toggle: "),Yt=v(ls),Ft=$("pre"),Rt=y(),Ut=$("h3"),Ut.textContent="Forwarded events",Bt=y(),Xt=$("ul"),Xt.innerHTML="
  • on:click
    • \n
  • on:focus
    • \n
  • on:blur
    • ",Wt=y(),Jt=$("h2"),Jt.textContent="Changelog",Kt=y(),Qt=$("p"),Qt.innerHTML='CHANGELOG.md',Vt=y(),Zt=$("h2"),Zt.textContent="License",ns=y(),ts=$("p"),ts.innerHTML='MIT',w(s,"id","svelte-toggle"),w(C,"id","installation"),w(M,"class","language-bash"),w(_,"id","usage"),w(E,"id","uncontrolled"),w(A,"class","code-fence"),w(z,"class","language-svelte"),w(z,"data-svelte",""),w(F,"id","two-way-binding"),w(J,"class","code-fence"),w(ln,"class","language-svelte"),w(ln,"data-svelte",""),w(rn,"id","switch-descriptors"),w(fn,"class","code-fence"),w(mn,"class","language-svelte"),w(mn,"data-svelte",""),w(wn,"class","code-fence"),w(Tn,"class","language-svelte"),w(Tn,"data-svelte",""),w(Mn,"id","small-variant"),w(En,"class","code-fence"),w(qn,"class","language-svelte"),w(qn,"data-svelte",""),w(Sn,"id","custom-colors"),w(Gn,"class","code-fence"),w(Fn,"class","language-svelte"),w(Fn,"data-svelte",""),w(Un,"id","custom-label"),w(Jn,"class","code-fence"),w(Qn,"class","language-svelte"),w(Qn,"data-svelte",""),w(Zn,"id","hidden-label"),w(ot,"class","code-fence"),w(pt,"class","language-svelte"),w(pt,"data-svelte",""),w(it,"id","disabled"),w(gt,"class","code-fence"),w(kt,"class","language-svelte"),w(kt,"data-svelte",""),w(ht,"id","fully-controlled"),w(wt,"class","code-fence"),w(Tt,"class","language-svelte"),w(Tt,"data-svelte",""),w(Mt,"id","api"),w(Et,"id","props"),w(St,"id","dispatched-events"),w(It,"class","code-fence"),w(Ft,"class","language-svelte"),w(Ft,"data-svelte",""),w(Ut,"id","forwarded-events"),w(Jt,"id","changelog"),w(Zt,"id","license"),w(t,"class","markdown-body")},m(b,$){h(b,t,$),k(t,s),k(t,a),k(t,e),k(t,o),k(t,l),k(t,p),k(t,c),k(t,i),k(t,r),k(t,u),k(t,d),k(t,g),k(t,f),k(t,m),k(t,C),k(t,T),k(t,M),M.innerHTML='# yarn\nyarn add -D svelte-toggle\n\n# npm\nnpm i -D svelte-toggle\n\n# pnpm\npnpm i -D svelte-toggle\n',k(t,H),k(t,_),k(t,j),k(t,E),k(t,O),k(t,q),k(t,N),k(t,A),V(P,A,null),k(A,D),k(A,I),k(t,z),z.innerHTML='<script>\n import Toggle from "svelte-toggle";\n\n let isToggled = true;\n</script>\n\n<Toggle on:toggle={(e) => (isToggled = e.detail)} />\n\nToggled? {isToggled}\n',k(t,Y),k(t,F),k(t,R),k(t,U),k(t,B),k(t,J),V(nn,J,null),k(J,sn),k(J,an),k(an,en),k(an,on),k(t,ln),ln.innerHTML='<script>\n import Toggle from "svelte-toggle";\n\n let toggled = false;\n</script>\n\n<Toggle bind:toggled />\n\n<button on:click={() => (toggled = !toggled)}>\n {toggled ? "Turn off" : "Turn on"}\n</button>\n',k(t,cn),k(t,rn),k(t,un),k(t,dn),k(t,gn),k(t,fn),V(kn,fn,null),k(t,mn),mn.innerHTML='<Toggle on="On" off="Off" />\n',k(t,vn),k(t,yn),k(t,xn),k(t,wn),V(Cn,wn,null),k(t,Tn),Tn.innerHTML='<Toggle let:toggled>\n <strong>{toggled ? "Yes" : "No"}</strong>\n</Toggle>\n',k(t,Ln),k(t,Mn),k(t,Hn),k(t,_n),k(t,jn),k(t,En),V(On,En,null),k(t,qn),qn.innerHTML='<Toggle small />\n',k(t,Nn),k(t,Sn),k(t,An),k(t,Pn),k(t,Dn),k(t,In),k(t,zn),k(t,Gn),V(Yn,Gn,null),k(t,Fn),Fn.innerHTML='<Toggle switchColor="#eee" toggledColor="#24a148" untoggledColor="#fa4d56" />\n',k(t,Rn),k(t,Un),k(t,Bn),k(t,Xn),k(t,Wn),k(t,Jn),V(Kn,Jn,null),k(t,Qn),Qn.innerHTML='<Toggle label="Custom label" />\n',k(t,Vn),k(t,Zn),k(t,nt),k(t,tt),k(t,st),k(t,at),k(t,et),k(t,ot),V(lt,ot,null),k(t,pt),pt.innerHTML='<Toggle hideLabel label="Custom label" />\n',k(t,ct),k(t,it),k(t,rt),k(t,ut),k(t,dt),k(t,gt),V(ft,gt,null),k(t,kt),kt.innerHTML='<Toggle disabled />\n',k(t,mt),k(t,ht),k(t,bt),k(t,$t),k(t,vt),k(t,yt),k(t,xt),k(t,wt),V(Ct,wt,null),k(t,Tt),Tt.innerHTML='<script>\n import { ToggleCore } from "svelte-toggle";\n\n let on = false;\n</script>\n\n<ToggleCore toggled={on} let:label let:button>\n <!-- svelte-ignore a11y-label-has-associated-control --\x3e\n <label {...label}>Label</label>\n <button {...button} on:click={() => (on = !on)}>\n {on ? "On" : "Off"}\n </button>\n</ToggleCore>\n',k(t,Lt),k(t,Mt),k(t,Ht),k(t,_t),k(t,jt),k(t,Et),k(t,Ot),k(t,qt),k(t,Nt),k(t,St),k(t,At),k(t,Pt),k(t,Dt),k(t,It),V(zt,It,null),k(It,Gt),k(It,Yt),k(t,Ft),Ft.innerHTML='<script>\n import Toggle from "svelte-toggle";\n\n let events = [];\n</script>\n\n<Toggle on:toggle={(e) => (events = [...events, e.detail])} />\n\non:toggle: {events.join(", ")}\n',k(t,Rt),k(t,Ut),k(t,Bt),k(t,Xt),k(t,Wt),k(t,Jt),k(t,Kt),k(t,Qt),k(t,Vt),k(t,Zt),k(t,ns),k(t,ts),ss=!0,as||(es=x(an,"click",n[6]),as=!0)},p(n,[t]){(!ss||1&t)&&L(I,n[0]);const s={};!tn&&8&t&&(tn=!0,s.toggled=n[3],G((()=>tn=!1))),nn.$set(s),(!ss||8&t)&&os!==(os=n[3]?"Turn off":"Turn on")&&L(en,os);const a={};2056&t&&(a.$$scope={dirty:t,ctx:n}),Cn.$set(a);const e={};2&t&&(e.toggled=n[1]),3586&t&&(e.$$scope={dirty:t,ctx:n}),Ct.$set(e),(!ss||4&t)&&ls!==(ls=n[2].join(", ")+"")&&L(Yt,ls)},i(n){ss||(X(P.$$.fragment,n),X(nn.$$.fragment,n),X(kn.$$.fragment,n),X(Cn.$$.fragment,n),X(On.$$.fragment,n),X(Yn.$$.fragment,n),X(Kn.$$.fragment,n),X(lt.$$.fragment,n),X(ft.$$.fragment,n),X(Ct.$$.fragment,n),X(zt.$$.fragment,n),ss=!0)},o(n){W(P.$$.fragment,n),W(nn.$$.fragment,n),W(kn.$$.fragment,n),W(Cn.$$.fragment,n),W(On.$$.fragment,n),W(Yn.$$.fragment,n),W(Kn.$$.fragment,n),W(lt.$$.fragment,n),W(ft.$$.fragment,n),W(Ct.$$.fragment,n),W(zt.$$.fragment,n),ss=!1},d(n){n&&b(t),Z(P),Z(nn),Z(kn),Z(Cn),Z(On),Z(Yn),Z(Kn),Z(lt),Z(ft),Z(Ct),Z(zt),as=!1,es()}}}function yn(n,t,s){let a=!0,e=!1,o=!1,l=[];return[a,o,l,e,n=>s(0,a=n.detail),function(n){e=n,s(3,e)},()=>s(3,e=!e),()=>s(1,o=!o),n=>s(2,l=[...l,n.detail])]}return new class extends sn{constructor(n){super(),tn(this,n,yn,vn,l,{})}}({target:document.body})}();