@fraziersoft/wisp 1.0.0 → 2.0.1

package/README.md

@@ -5,9 +5,7 @@
   <a href="https://github.com/Frazier-Software/wisp">
     <img src="private/logo.png" alt="Logo" width="254" height="258">
   </a>
-
-<h3 align="center">Wisp</h3>
-
+  <h3 align="center">Wisp</h3>
   <p align="center">
     A dead simple CSS boilerplate.
     <br />

package/dist/wisp.css

@@ -1,8 +1,10 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
 /*
- * Wisp v1.0.0
+ * Wisp v2.0.1
  * https://wisp.frazier.software/
  *
- * Copyright (c) 2024 Chris Frazier
+ * Copyright (c) 2025 Chris Frazier
  * Licensed under the MIT license
  */
-:root{--color-bg:#FDFDFD;--color-font:#222;--color-font-light:#FFF;--color-primary:#1EAEDB;--color-primary-light:#33C3F0;--color-primary-dark:#0FA0CE;--color-secondary:#B90E0A;--color-secondary-light:#D21404;--color-secondary-dark:#990F02;--color-neutral-1:#F1F1F1;--color-neutral-2:#D1D1D1;--color-neutral-3:#BBB;--color-neutral-4:#888;--color-neutral-5:#555;--color-neutral-6:#333;--font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;--border-radius:4px}html{font-size:62.5%}body{background:var(--color-bg);font-size:1.6em;line-height:1.6;font-weight:400;font-family:var(--font-family);color:var(--color-font)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.6rem;line-height:1.6;letter-spacing:0;font-weight:400}@media (min-width:640px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.6rem}}p{margin-top:0}a{color:var(--color-primary)}a:hover{color:var(--color-primary-dark)}.btn,button:not(.hljs-copy-button),input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:38px;padding:0 30px;color:var(--color-neutral-5);text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:var(--border-radius);border:1px solid var(--color-neutral-3);cursor:pointer;box-sizing:border-box;transition:background .4s,color .4s}.btn:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{color:var(--color-neutral-6);border-color:var(--color-neutral-4);outline:0}.btn.btn--primary,button.btn--primary,input[type=button].btn--primary,input[type=reset].btn--primary,input[type=submit].btn--primary{color:var(--color-font-light);background-color:var(--color-primary-light);border-color:var(--color-primary-light)}.btn.btn--primary:hover,button.btn--primary:hover,input[type=button].btn--primary:hover,input[type=reset].btn--primary:hover,input[type=submit].btn--primary:hover{color:var(--color-font-light);background-color:var(--color-primary);border-color:var(--color-primary)}.btn.btn--warning,button.btn--warning,input[type=button].btn--warning,input[type=reset].btn--warning,input[type=submit].btn--warning{color:var(--color-secondary-light);border-color:var(--color-secondary-light)}.btn.btn--warning:hover,button.btn--warning:hover,input[type=button].btn--warning:hover,input[type=reset].btn--warning:hover,input[type=submit].btn--warning:hover{color:var(--color-secondary-dark);border-color:var(--color-secondary-dark)}.btn.btn--danger,button.btn--danger,input[type=button].btn--danger,input[type=reset].btn--danger,input[type=submit].btn--danger{color:var(--color-font-light);background:var(--color-secondary-light);border-color:var(--color-secondary-light)}.btn.btn--danger:hover,button.btn--danger:hover,input[type=button].btn--danger:hover,input[type=reset].btn--danger:hover,input[type=submit].btn--danger:hover{background:var(--color-secondary);border-color:var(--color-secondary)}.btn--ripple{position:relative;overflow:hidden}.btn--ripple .ripple{position:absolute;border-radius:50%;background-color:rgba(255,255,255,.4);transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(4);opacity:0}}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:38px;padding:6px 10px;background-color:var(--color-bg);border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);box-shadow:none;box-sizing:border-box}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:1px solid var(--color-primary-light);outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;cursor:pointer;margin-left:.5rem;font-weight:400}.toggle{font-size:61%;position:relative;top:.2em}.toggle input[type=checkbox]{appearance:none;position:relative;display:inline-block;box-sizing:content-box;width:4.5em;height:2em;padding:.2em;margin-bottom:0;border:none;cursor:pointer;border-radius:1.5em;overflow:hidden;background-color:var(--color-neutral-4);transition:background ease .3s}.toggle input[type=checkbox]:before{content:"on off";display:block;position:absolute;z-index:2;width:2em;height:2em;font-family:system-ui;font-size:1em;line-height:2em;font-weight:500;text-transform:uppercase;text-indent:-2em;word-spacing:2.55em;text-shadow:-1px -1px rgba(0,0,0,.15);white-space:nowrap;background:var(--color-font-light);color:var(--color-font-light);border-radius:1.5em;transition:transform cubic-bezier(.3, 1.5, .7, 1) .3s}.toggle input[type=checkbox]:checked{background-color:var(--color-primary-light)}.toggle input[type=checkbox]:checked:before{transform:translateX(2.5em)}.accordion-tab{border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);margin-bottom:.5rem}.accordion-tab input{display:none}.accordion-tab label{display:flex;justify-content:space-between;margin-bottom:0;padding:5px 5px 5px 10px;cursor:pointer}.accordion-tab:not(.accordion-tab--close) label::after{content:"\276F";color:var(--color-neutral-5);width:1em;height:1em;text-align:center}.accordion-tab:not(.accordion-tab--close) input:checked+label::after{transform:rotate(90deg)}.accordion-tab.accordion-tab--close{border:none;margin-top:12px}.accordion-tab.accordion-tab--close label{font-size:75%;padding:0 0 0 10px}.accordion-content{max-height:0;overflow:hidden;padding:0 5px 0 10px;transition:max-height 650ms}.accordion-content p{margin-bottom:10px}.accordion-content p:first-child{margin-top:15px}.accordion-tab input:checked~.accordion-content{max-height:500rem}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem}li{margin-bottom:1rem}code{padding:2px 5px;margin:0 2px;font-size:90%;white-space:nowrap;background:var(--color-neutral-1);border:1px solid var(--color-neutral-2);border-radius:var(--border-radius)}pre>code{display:block;padding:10px 15px;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid var(--color-neutral-2)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.tooltip{cursor:help;border-bottom:1px dotted var(--color-neutral-5);position:relative}.tooltip::after,.tooltip::before{position:absolute;left:50%;opacity:0;z-index:-100}.tooltip:focus::after,.tooltip:focus::before,.tooltip:hover::after,.tooltip:hover::before{opacity:1;transform:scale(1) translateY(0);z-index:100}.tooltip::before{content:"";border-style:solid;border-width:1em .75em 0 .75em;border-color:var(--color-neutral-6) transparent transparent transparent;bottom:100%;margin-left:-.5em;transition:all .65s cubic-bezier(.84, -.18, .31, 1.26),opacity .65s .5s;transform:scale(.6) translateY(-90%)}.tooltip:focus::before,.tooltip:hover::before{transition:all .65s cubic-bezier(.84,-.18,.31,1.26) .2s}.tooltip::after{background:var(--color-neutral-6);border-radius:var(--border-radius);bottom:180%;color:var(--color-font-light);content:attr(data-tip);margin-left:-8.75em;padding:1em;transition:all .65s cubic-bezier(.84,-.18,.31,1.26) .2s;transform:scale(.6) translateY(50%);font-size:.9em;width:16em}.tooltip:focus::after,.tooltip:hover::after{transition:all .65s cubic-bezier(.84,-.18,.31,1.26)}.tooltip.tooltip--sm::after{font-size:.75em;margin-left:-5em;width:10em}@media (max-width:768px){.tooltip::after{font-size:.75em;margin-left:-5em;width:10em}}.btn,button:not(.hljs-copy-button){margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}hr{margin-top:30px;margin-bottom:35px;border-width:0;border-top:1px solid var(--color-neutral-2)}#back-to-top{display:inline-block;background-color:var(--color-primary-light);width:50px;height:50px;text-align:center;border-radius:var(--border-radius);position:fixed;bottom:30px;right:30px;transition:background-color .3s,opacity .5s,visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top::after{content:"\276F";font-weight:400;font-style:normal;font-size:32px;line-height:50px;color:var(--color-bg);display:inline-block;transform:rotate(270deg)}#back-to-top:active,#back-to-top:hover{cursor:pointer;background-color:var(--color-primary)}#back-to-top.back-to-top--show{opacity:1;visibility:visible}.u-full{width:100%;box-sizing:border-box}.u-max{max-width:100%;box-sizing:border-box}.u-m0{margin:0}.u-mt0{margin-top:0}.u-mb0{margin-bottom:0}.u-ml0{margin-left:0}.u-mr0{margin-right:0}.u-p0{padding:0}.u-pt0{padding-top:0}.u-pb0{padding-bottom:0}.u-pl0{padding-left:0}.u-pr0{padding-right:0}@media (min-width:640px){.sm-hide{display:none!important}}@media (max-width:639px){.sm-show{display:none!important}}@media (min-width:768px){.md-hide{display:none!important}}@media (max-width:767px){.md-show{display:none!important}}@media (min-width:1024px){.lg-hide{display:none!important}}@media (max-width:1023px){.lg-show{display:none!important}}@media (min-width:1280px){.xl-hide{display:none!important}}@media (max-width:1279px){.xl-show{display:none!important}}@media (min-width:1536px){.xxl-hide{display:none!important}}@media (max-width:1535px){.xxl-show{display:none!important}}
+:root{--color-bg:#fdfdfd;--color-font:#222;--color-font-light:#fff;--color-primary:#1eaedb;--color-primary-light:#33c3f0;--color-primary-dark:#0fa0ce;--color-secondary:#b90e0a;--color-secondary-light:#d21404;--color-secondary-dark:#990f02;--color-neutral-1:#f1f1f1;--color-neutral-2:#d1d1d1;--color-neutral-3:#bbb;--color-neutral-4:#888;--color-neutral-5:#555;--color-neutral-6:#333;--font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;--border-radius:4px}html{font-size:62.5%}body{background:var(--color-bg);font-size:1.6em;font-weight:400;line-height:1.6;font-family:var(--font-family);color:var(--color-font)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{letter-spacing:-.1rem;font-size:4rem;line-height:1.2}h2{letter-spacing:-.1rem;font-size:3.6rem;line-height:1.25}h3{letter-spacing:-.1rem;font-size:3rem;line-height:1.3}h4{letter-spacing:-.08rem;font-size:2.4rem;line-height:1.35}h5{letter-spacing:-.05rem;font-size:1.8rem;line-height:1.5}h6{letter-spacing:0;font-size:1.6rem;font-weight:400;line-height:1.6}@media (width>=640px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.6rem}}p{margin-top:0}a{color:var(--color-primary);&:hover{color:var(--color-primary-dark)}}.btn,button:not(.hljs-copy-button),input[type=submit],input[type=reset],input[type=button]{height:38px;color:var(--color-neutral-5);text-align:center;letter-spacing:.1rem;text-transform:uppercase;white-space:nowrap;border-radius:var(--border-radius);border:1px solid var(--color-neutral-3);cursor:pointer;box-sizing:border-box;background-color:#0000;padding:0 30px;font-size:11px;font-weight:600;line-height:38px;text-decoration:none;transition:background .4s,color .4s;display:inline-block}.btn:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{color:var(--color-neutral-6);border-color:var(--color-neutral-4);outline:0}.btn.btn\:primary,button.btn\:primary,input[type=submit].btn\:primary,input[type=reset].btn\:primary,input[type=button].btn\:primary{color:var(--color-font-light);background-color:var(--color-primary-light);border-color:var(--color-primary-light)}.btn.btn\:primary:hover,button.btn\:primary:hover,input[type=submit].btn\:primary:hover,input[type=reset].btn\:primary:hover,input[type=button].btn\:primary:hover{color:var(--color-font-light);background-color:var(--color-primary);border-color:var(--color-primary)}.btn.btn\:warning,button.btn\:warning,input[type=submit].btn\:warning,input[type=reset].btn\:warning,input[type=button].btn\:warning{color:var(--color-secondary-light);border-color:var(--color-secondary-light)}.btn.btn\:warning:hover,button.btn\:warning:hover,input[type=submit].btn\:warning:hover,input[type=reset].btn\:warning:hover,input[type=button].btn\:warning:hover{color:var(--color-secondary-dark);border-color:var(--color-secondary-dark)}.btn.btn\:danger,button.btn\:danger,input[type=submit].btn\:danger,input[type=reset].btn\:danger,input[type=button].btn\:danger{color:var(--color-font-light);background:var(--color-secondary-light);border-color:var(--color-secondary-light)}.btn.btn\:danger:hover,button.btn\:danger:hover,input[type=submit].btn\:danger:hover,input[type=reset].btn\:danger:hover,input[type=button].btn\:danger:hover{background:var(--color-secondary);border-color:var(--color-secondary)}.btn\:ripple{position:relative;overflow:hidden;& .ripple{background-color:#fff6;border-radius:50%;animation:.6s linear ripple;position:absolute;transform:scale(0)}}@keyframes ripple{to{opacity:0;transform:scale(4)}}input[type=email],input[type=number],input[type=search],input[type=text],input[type=tel],input[type=url],input[type=password],textarea,select{background-color:var(--color-bg);border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);height:38px;box-shadow:none;box-sizing:border-box;padding:6px 10px}input[type=email],input[type=number],input[type=search],input[type=text],input[type=tel],input[type=url],input[type=password],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=text]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=password]:focus,textarea:focus,select:focus{border:1px solid var(--color-primary-light);outline:0}label,legend{margin-bottom:.5rem;font-weight:600;display:block}fieldset{border-width:0;padding:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{cursor:pointer;margin-left:.5rem;font-weight:400;display:inline-block}.toggle{font-size:61%;position:relative;top:.2em;& input[type=checkbox]{appearance:none;box-sizing:content-box;cursor:pointer;background-color:var(--color-neutral-4);border:none;border-radius:1.5em;width:4.5em;height:2em;margin-bottom:0;padding:.2em;transition:background .3s;display:inline-block;position:relative;overflow:hidden}& input[type=checkbox]:before{content:"on off";z-index:2;text-transform:uppercase;text-indent:-2em;word-spacing:2.55em;text-shadow:-1px -1px #00000026;white-space:nowrap;background:var(--color-font-light);width:2em;height:2em;color:var(--color-font-light);border-radius:1.5em;font-family:system-ui;font-size:1em;font-weight:500;line-height:2em;transition:transform .3s cubic-bezier(.3,1.5,.7,1);display:block;position:absolute}& input[type=checkbox]:checked{background-color:var(--color-primary-light)}& input[type=checkbox]:checked:before{transform:translate(2.5em)}}.accordion-tab{border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);margin-bottom:.5rem;& input{display:none}& label{cursor:pointer;justify-content:space-between;margin-bottom:0;padding:5px 5px 5px 10px;display:flex}&.accordion-tab\:close{border:none;margin-top:12px}&.accordion-tab\:close label{padding:0 0 0 10px;font-size:75%}&:not(.accordion-tab\:close) label:after{content:"❯";color:var(--color-neutral-5);text-align:center;width:1em;height:1em}&:not(.accordion-tab\:close) input:checked+label:after{transform:rotate(90deg)}}.accordion-content{max-height:0;padding:0 5px 0 10px;transition:max-height .65s;overflow:hidden;& p{margin-bottom:10px}& p:first-child{margin-top:15px}}.accordion-tab input:checked~.accordion-content{max-height:500rem}ul{list-style:inside circle}ol{list-style:inside decimal}ol,ul{margin-top:0;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem}li{margin-bottom:1rem}code{white-space:nowrap;background:var(--color-neutral-1);border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);margin:0 2px;padding:2px 5px;font-size:90%}pre>code{white-space:pre;padding:10px 15px;display:block}th,td{text-align:left;border-bottom:1px solid var(--color-neutral-2);padding:12px 15px}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}.tooltip{cursor:help;border-bottom:1px dotted var(--color-neutral-5);position:relative}.tooltip:before,.tooltip:after{opacity:0;z-index:-100;position:absolute;left:50%}.tooltip:hover:before,.tooltip:focus:before,.tooltip:hover:after,.tooltip:focus:after{opacity:1;z-index:100;transform:scale(1)translateY(0)}.tooltip:before{content:"";border-style:solid;border-width:1em .75em 0;border-color:var(--color-neutral-6)transparent transparent transparent;margin-left:-.5em;transition:all .65s cubic-bezier(.84,-.18,.31,1.26),opacity .65s .5s;bottom:100%;transform:scale(.6)translateY(-90%)}.tooltip:hover:before,.tooltip:focus:before{transition:all .65s cubic-bezier(.84,-.18,.31,1.26) .2s}.tooltip:after{background:var(--color-neutral-6);border-radius:var(--border-radius);color:var(--color-font-light);content:attr(data-tip);width:16em;margin-left:-8.75em;padding:1em;font-size:.9em;transition:all .65s cubic-bezier(.84,-.18,.31,1.26) .2s;bottom:180%;transform:scale(.6)translateY(50%)}.tooltip:hover:after,.tooltip:focus:after{transition:all .65s cubic-bezier(.84,-.18,.31,1.26)}.tooltip.tooltip\:sm:after{width:10em;margin-left:-5em;font-size:.75em}@media (width<=768px){.tooltip:after{width:10em;margin-left:-5em;font-size:.75em}}button:not(.hljs-copy-button),.btn{margin-bottom:1rem}input,textarea,select,fieldset{margin-bottom:1.5rem}pre,blockquote,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem}hr{border-width:0;border-top:1px solid var(--color-neutral-2);margin-top:30px;margin-bottom:35px}#back-to-top{background-color:var(--color-primary-light);text-align:center;border-radius:var(--border-radius);opacity:0;visibility:hidden;z-index:1000;width:50px;height:50px;transition:background-color .3s,opacity .5s,visibility .5s;display:inline-block;position:fixed;bottom:30px;right:30px;&:after{content:"❯";color:var(--color-bg);font-size:32px;font-style:normal;font-weight:400;line-height:50px;display:inline-block;transform:rotate(270deg)}&:hover,&:active{cursor:pointer;background-color:var(--color-primary)}&.back-to-top\:show{opacity:1;visibility:visible}}.u-full{box-sizing:border-box;width:100%}.u-max{box-sizing:border-box;max-width:100%}.u-m0{margin:0}.u-mt0{margin-top:0}.u-mb0{margin-bottom:0}.u-ml0{margin-left:0}.u-mr0{margin-right:0}.u-p0{padding:0}.u-pt0{padding-top:0}.u-pb0{padding-bottom:0}.u-pl0{padding-left:0}.u-pr0{padding-right:0}@media (width>=640px){.sm-hide{display:none!important}}@media (width<=639px){.sm-show{display:none!important}}@media (width>=768px){.md-hide{display:none!important}}@media (width<=767px){.md-show{display:none!important}}@media (width>=1024px){.lg-hide{display:none!important}}@media (width<=1023px){.lg-show{display:none!important}}@media (width>=1280px){.xl-hide{display:none!important}}@media (width<=1279px){.xl-show{display:none!important}}@media (width>=1536px){.xxl-hide{display:none!important}}@media (width<=1535px){.xxl-show{display:none!important}}

package/dist/wisp.js

@@ -1,8 +1,8 @@
 /*
- * Wisp v1.0.0
+ * Wisp v2.0.1
  * https://wisp.frazier.software/
  *
- * Copyright (c) 2024 Chris Frazier
+ * Copyright (c) 2025 Chris Frazier
  * Licensed under the MIT license
  */
-function a(A){var _=A.currentTarget,B=document.createElement('span'),d=Math.max(_.clientWidth,_.clientHeight)/2,e=_.getBoundingClientRect();B.classList.add('ripple');B.style.width=B.style.height=`${2*d}px`;B.style.left=`${A.clientX-(e.left+d)}px`;B.style.top=`${A.clientY-(e.top+d)}px`;for(const el of _.querySelectorAll('.ripple'))el.remove();_.appendChild(B)}function b(C){return ()=>{document.documentElement.scrollTop>300?C.classList.add('back-to-top--show'):C.classList.remove('back-to-top--show')}}function c(_a){_a.preventDefault();document.documentElement.scrollIntoView({behavior:'smooth'})}(D=>document.readyState!=='loading'?D():document.addEventListener('DOMContentLoaded',D))(()=>{for(const E of document.querySelectorAll('.btn--ripple'))E.addEventListener('click',a);var _A=document.querySelector('#back-to-top');_A&&(document.addEventListener('scroll',b(_A)),_A.addEventListener('click',c))});
+function a(A){var _=A.currentTarget,B=document.createElement('span'),d=Math.max(_.clientWidth,_.clientHeight)/2,e=_.getBoundingClientRect();B.classList.add('ripple');B.style.width=B.style.height=`${2*d}px`;B.style.left=`${A.clientX-(e.left+d)}px`;B.style.top=`${A.clientY-(e.top+d)}px`;for(const el of _.querySelectorAll('.ripple'))el.remove();_.appendChild(B)}function b(C){return ()=>{document.documentElement.scrollTop>300?C.classList.add('back-to-top:show'):C.classList.remove('back-to-top:show')}}function c(_a){_a.preventDefault();document.documentElement.scrollIntoView({behavior:'smooth'})}(D=>document.readyState!=='loading'?D():document.addEventListener('DOMContentLoaded',D))(()=>{for(const E of document.querySelectorAll('.btn\\:ripple'))E.addEventListener('click',a);var _A=document.querySelector('#back-to-top');_A&&(document.addEventListener('scroll',b(_A)),_A.addEventListener('click',c))});

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fraziersoft/wisp",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Simple CSS boilerplate",
   "homepage": "https://wisp.frazier.software",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Frazier-Software/wisp.git"
+    "url": "git+https://github.com/Frazier-Software/wisp.git"
   },
   "main": "dist/wisp.css",
   "files": [
@@ -25,6 +25,7 @@
   "devDependencies": {
     "changelogen": "^0.5.7",
     "http-server": "^14.1.1",
+    "lightningcss-cli": "^1.30.1",
     "minify": "^12.0.0",
     "rimraf": "^6.0.1"
   },

package/src/wisp.css

@@ -1,3 +1,12 @@
+/* Breakpoints
+––––––––––––––––––––––––––––––––––––––––––––––––––
+small        640px
+medium       768px
+large       1024px
+x-large     1280px
+xx-large    1535px */
+
+
 /* Variables
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 :root {
@@ -21,20 +30,24 @@
   --color-neutral-6: #333;
 
   --font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --border-radius: 4px; }
+  --border-radius: 4px;
+}
 
 
 /* Base styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 html {
-  font-size: 62.5%; }
+  font-size: 62.5%;
+}
+
 body {
   background: var(--color-bg);
   font-size: 1.6em;
   line-height: 1.6;
   font-weight: 400;
   font-family: var(--font-family);
-  color: var(--color-font); }
+  color: var(--color-font);
+}
 
 
 /* Typography
@@ -42,7 +55,9 @@ body {
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: 2rem;
-  font-weight: 300; }
+  font-weight: 300;
+}
+
 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
@@ -61,15 +76,19 @@ h6 { font-size: 1.6rem; line-height: 1.6;  letter-spacing: 0; font-weight: 400;
 }
 
 p {
-  margin-top: 0; }
+  margin-top: 0;
+}
 
 
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: var(--color-primary); }
-a:hover {
-  color: var(--color-primary-dark); }
+  color: var(--color-primary);
+
+  &:hover {
+    color: var(--color-primary-dark);
+  }
+}
 
 
 /* Buttons
@@ -96,7 +115,9 @@ input[type="button"] {
   border: 1px solid var(--color-neutral-3);
   cursor: pointer;
   box-sizing: border-box;
-  transition: background 400ms, color 400ms;}
+  transition: background 400ms, color 400ms;
+}
+
 .btn:hover,
 button:hover,
 input[type="submit"]:hover,
@@ -104,70 +125,87 @@ input[type="reset"]:hover,
 input[type="button"]:hover {
   color: var(--color-neutral-6);
   border-color: var(--color-neutral-4);
-  outline: 0; }
-.btn.btn--primary,
-button.btn--primary,
-input[type="submit"].btn--primary,
-input[type="reset"].btn--primary,
-input[type="button"].btn--primary {
+  outline: 0;
+}
+
+.btn.btn\:primary,
+button.btn\:primary,
+input[type="submit"].btn\:primary,
+input[type="reset"].btn\:primary,
+input[type="button"].btn\:primary {
   color: var(--color-font-light);
   background-color: var(--color-primary-light);
-  border-color: var(--color-primary-light); }
-.btn.btn--primary:hover,
-button.btn--primary:hover,
-input[type="submit"].btn--primary:hover,
-input[type="reset"].btn--primary:hover,
-input[type="button"].btn--primary:hover {
+  border-color: var(--color-primary-light);
+}
+
+.btn.btn\:primary:hover,
+button.btn\:primary:hover,
+input[type="submit"].btn\:primary:hover,
+input[type="reset"].btn\:primary:hover,
+input[type="button"].btn\:primary:hover {
   color: var(--color-font-light);
   background-color: var(--color-primary);
-  border-color: var(--color-primary); }
-.btn.btn--warning,
-button.btn--warning,
-input[type="submit"].btn--warning,
-input[type="reset"].btn--warning,
-input[type="button"].btn--warning {
+  border-color: var(--color-primary);
+}
+
+.btn.btn\:warning,
+button.btn\:warning,
+input[type="submit"].btn\:warning,
+input[type="reset"].btn\:warning,
+input[type="button"].btn\:warning {
   color: var(--color-secondary-light);
-  border-color: var(--color-secondary-light); }
-.btn.btn--warning:hover,
-button.btn--warning:hover,
-input[type="submit"].btn--warning:hover,
-input[type="reset"].btn--warning:hover,
-input[type="button"].btn--warning:hover {
+  border-color: var(--color-secondary-light);
+}
+
+.btn.btn\:warning:hover,
+button.btn\:warning:hover,
+input[type="submit"].btn\:warning:hover,
+input[type="reset"].btn\:warning:hover,
+input[type="button"].btn\:warning:hover {
   color: var(--color-secondary-dark);
-  border-color: var(--color-secondary-dark); }
-.btn.btn--danger,
-button.btn--danger,
-input[type="submit"].btn--danger,
-input[type="reset"].btn--danger,
-input[type="button"].btn--danger {
+  border-color: var(--color-secondary-dark);
+}
+
+.btn.btn\:danger,
+button.btn\:danger,
+input[type="submit"].btn\:danger,
+input[type="reset"].btn\:danger,
+input[type="button"].btn\:danger {
   color: var(--color-font-light);
   background: var(--color-secondary-light);
-  border-color: var(--color-secondary-light); }
-.btn.btn--danger:hover,
-button.btn--danger:hover,
-input[type="submit"].btn--danger:hover,
-input[type="reset"].btn--danger:hover,
-input[type="button"].btn--danger:hover {
+  border-color: var(--color-secondary-light);
+}
+
+.btn.btn\:danger:hover,
+button.btn\:danger:hover,
+input[type="submit"].btn\:danger:hover,
+input[type="reset"].btn\:danger:hover,
+input[type="button"].btn\:danger:hover {
   background: var(--color-secondary);
-  border-color: var(--color-secondary); }
+  border-color: var(--color-secondary);
+}
 
 
 /* Button Ripple Effect
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-.btn--ripple {
+.btn\:ripple {
   position: relative;
-  overflow: hidden; }
-.btn--ripple .ripple {
-  position: absolute;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.4);
-  transform: scale(0);
-  animation: ripple 600ms linear; }
+  overflow: hidden;
+
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+    transform: scale(0);
+    animation: ripple 600ms linear;
+  }
+}
 
 @keyframes ripple {
   to {
     transform: scale(4);
-    opacity: 0; }
+    opacity: 0;
+  }
 }
 
 
@@ -188,7 +226,9 @@ select {
   border: 1px solid var(--color-neutral-2);
   border-radius: var(--border-radius);
   box-shadow: none;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
+
 input[type="email"],
 input[type="number"],
 input[type="search"],
@@ -200,11 +240,15 @@ textarea {
   /* Removes awkward default styles on some inputs for iOS */
   -webkit-appearance: none;
      -moz-appearance: none;
-          appearance: none; }
+          appearance: none;
+}
+
 textarea {
   min-height: 65px;
   padding-top: 6px;
-  padding-bottom: 6px; }
+  padding-bottom: 6px;
+}
+
 input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
@@ -215,23 +259,32 @@ input[type="password"]:focus,
 textarea:focus,
 select:focus {
   border: 1px solid var(--color-primary-light);
-  outline: 0; }
+  outline: 0;
+}
+
 label,
 legend {
   display: block;
   margin-bottom: .5rem;
-  font-weight: 600; }
+  font-weight: 600;
+}
+
 fieldset {
   padding: 0;
-  border-width: 0; }
+  border-width: 0;
+}
+
 input[type="checkbox"],
 input[type="radio"] {
-  display: inline; }
+  display: inline;
+}
+
 label > .label-body {
   display: inline-block;
   cursor: pointer;
   margin-left: .5rem;
-  font-weight: normal; }
+  font-weight: normal;
+}
 
 
 /* Toggles
@@ -239,46 +292,55 @@ label > .label-body {
 .toggle {
   font-size: 61%;
   position: relative;
-  top: 0.2em; }
-.toggle input[type="checkbox"] {
-  appearance: none;
-  position: relative;
-  display: inline-block;
-  box-sizing: content-box;
-  width: 4.5em;
-  height: 2em;
-  padding: 0.2em;
-  margin-bottom: 0;
-  border: none;
-  cursor: pointer;
-  border-radius: 1.5em;
-  overflow: hidden;
-  background-color: var(--color-neutral-4);
-  transition: background ease 0.3s; }
-.toggle input[type="checkbox"]:before {
-  content: "on off";
-  display: block;
-  position: absolute;
-  z-index: 2;
-  width: 2em;
-  height: 2em;
-  font-family: system-ui;
-  font-size: 1em;
-  line-height: 2em;
-  font-weight: 500;
-  text-transform: uppercase;
-  text-indent: -2em;
-  word-spacing: 2.55em;
-  text-shadow: -1px -1px rgba(0,0,0,0.15);
-  white-space: nowrap;
-  background: var(--color-font-light);
-  color: var(--color-font-light);
-  border-radius: 1.5em;
-  transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s; }
-.toggle input[type="checkbox"]:checked {
-  background-color: var(--color-primary-light); }
-.toggle input[type="checkbox"]:checked:before {
-  transform: translateX(2.5em); }
+  top: 0.2em;
+
+  input[type="checkbox"] {
+    appearance: none;
+    position: relative;
+    display: inline-block;
+    box-sizing: content-box;
+    width: 4.5em;
+    height: 2em;
+    padding: 0.2em;
+    margin-bottom: 0;
+    border: none;
+    cursor: pointer;
+    border-radius: 1.5em;
+    overflow: hidden;
+    background-color: var(--color-neutral-4);
+    transition: background ease 0.3s;
+  }
+
+  input[type="checkbox"]:before {
+    content: "on off";
+    display: block;
+    position: absolute;
+    z-index: 2;
+    width: 2em;
+    height: 2em;
+    font-family: system-ui;
+    font-size: 1em;
+    line-height: 2em;
+    font-weight: 500;
+    text-transform: uppercase;
+    text-indent: -2em;
+    word-spacing: 2.55em;
+    text-shadow: -1px -1px rgba(0,0,0,0.15);
+    white-space: nowrap;
+    background: var(--color-font-light);
+    color: var(--color-font-light);
+    border-radius: 1.5em;
+    transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
+  }
+
+  input[type="checkbox"]:checked {
+    background-color: var(--color-primary-light);
+  }
+
+  input[type="checkbox"]:checked:before {
+    transform: translateX(2.5em);
+  }
+}
 
 
 /* Accordion
@@ -286,58 +348,88 @@ label > .label-body {
 .accordion-tab {
   border: 1px solid var(--color-neutral-2);
   border-radius: var(--border-radius);
-  margin-bottom: 0.5rem; }
-.accordion-tab input {
-  display: none; }
-.accordion-tab label {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0;
-  padding: 5px 5px 5px 10px;
-  cursor: pointer; }
-.accordion-tab:not(.accordion-tab--close) label::after {
-  content: "\276F";
-  color: var(--color-neutral-5);
-  width: 1em;
-  height: 1em;
-  text-align: center; }
-.accordion-tab:not(.accordion-tab--close) input:checked + label::after {
-  transform: rotate(90deg); }
-.accordion-tab.accordion-tab--close {
-  border: none;
-  margin-top: 12px; }
-.accordion-tab.accordion-tab--close label {
-  font-size: 75%;
-  padding: 0 0 0 10px; }
+  margin-bottom: 0.5rem;
+
+  input {
+    display: none;
+  }
+
+  label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    padding: 5px 5px 5px 10px;
+    cursor: pointer;
+  }
+
+  &.accordion-tab\:close {
+    border: none;
+    margin-top: 12px;
+  }
+
+  &.accordion-tab\:close label {
+    font-size: 75%;
+    padding: 0 0 0 10px;
+  }
+
+  &:not(.accordion-tab\:close) label::after {
+    content: "\276F";
+    color: var(--color-neutral-5);
+    width: 1em;
+    height: 1em;
+    text-align: center;
+  }
+
+  &:not(.accordion-tab\:close) input:checked + label::after {
+    transform: rotate(90deg);
+  }
+}
+
 .accordion-content {
   max-height: 0;
   overflow: hidden;
   padding: 0 5px 0 10px;
-  transition: max-height 650ms; }
-.accordion-content p {
-  margin-bottom: 10px; }
-.accordion-content p:first-child {
-  margin-top: 15px; }
+  transition: max-height 650ms;
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  p:first-child {
+    margin-top: 15px;
+  }
+}
+
 .accordion-tab input:checked ~ .accordion-content {
-  max-height: 500rem; }
+  max-height: 500rem;
+}
 
 
 /* Lists
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 ul {
-  list-style: circle inside; }
+  list-style: circle inside;
+}
+
 ol {
-  list-style: decimal inside; }
+  list-style: decimal inside;
+}
+
 ol, ul {
   padding-left: 0;
-  margin-top: 0; }
+  margin-top: 0;
+}
+
 ul ul,
 ul ol,
 ol ol,
 ol ul {
-  margin: 1.5rem 0 1.5rem 3rem; }
+  margin: 1.5rem 0 1.5rem 3rem;
+}
+
 li {
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+}
 
 
 /* Code
@@ -349,11 +441,14 @@ code {
   white-space: nowrap;
   background: var(--color-neutral-1);
   border: 1px solid var(--color-neutral-2);
-  border-radius: var(--border-radius); }
+  border-radius: var(--border-radius);
+}
+
 pre > code {
   display: block;
   padding: 10px 15px;
-  white-space: pre; }
+  white-space: pre;
+}
 
 
 /* Tables
@@ -362,32 +457,45 @@ th,
 td {
   padding: 12px 15px;
   text-align: left;
-  border-bottom: 1px solid var(--color-neutral-2); }
+  border-bottom: 1px solid var(--color-neutral-2);
+}
+
 th:first-child,
 td:first-child {
-  padding-left: 0; }
+  padding-left: 0;
+}
+
 th:last-child,
 td:last-child {
-  padding-right: 0; }
+  padding-right: 0;
+}
 
 
+/* Tooltips
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
 .tooltip {
   cursor: help;
   border-bottom: 1px dotted var(--color-neutral-5);
-  position: relative; }
+  position: relative;
+}
+
 .tooltip::before,
 .tooltip::after {
   position: absolute;
   left: 50%;
   opacity: 0;
-  z-index: -100; }
+  z-index: -100;
+}
+
 .tooltip:hover::before,
 .tooltip:focus::before,
 .tooltip:hover::after,
 .tooltip:focus::after {
   opacity: 1;
   transform: scale(1) translateY(0);
-  z-index: 100; }
+  z-index: 100;
+}
+
 .tooltip::before {
   content: "";
   border-style: solid;
@@ -396,10 +504,14 @@ td:last-child {
   bottom: 100%;
   margin-left: -0.5em;
   transition: all .65s cubic-bezier(.84, -0.18, 0.31, 1.26), opacity .65s .5s;
-  transform: scale(.6) translateY(-90%); }
+  transform: scale(.6) translateY(-90%);
+}
+
 .tooltip:hover::before,
 .tooltip:focus::before {
-  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; }
+  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+}
+
 .tooltip::after {
   background: var(--color-neutral-6);
   border-radius: var(--border-radius);
@@ -411,20 +523,26 @@ td:last-child {
   transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
   transform: scale(.6) translateY(50%);  
   font-size: .9em;
-  width: 16em; }
+  width: 16em;
+}
+
 .tooltip:hover::after,
 .tooltip:focus::after  {
-  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26); }
-.tooltip.tooltip--sm::after {
+  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
+}
+
+.tooltip.tooltip\:sm::after {
   font-size: .75em;
   margin-left: -5em;
-  width: 10em; }
+  width: 10em;
+}
 
 @media (max-width: 768px) {
   .tooltip::after {
     font-size: .75em;
     margin-left: -5em;
-    width: 10em; }
+    width: 10em;
+  }
 }
 
 
@@ -432,12 +550,16 @@ td:last-child {
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 button:not(.hljs-copy-button),
 .btn {
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+}
+
 input,
 textarea,
 select,
 fieldset {
-  margin-bottom: 1.5rem; }
+  margin-bottom: 1.5rem;
+}
+
 pre,
 blockquote,
 dl,
@@ -447,7 +569,8 @@ p,
 ul,
 ol,
 form {
-  margin-bottom: 2.5rem; }
+  margin-bottom: 2.5rem;
+}
 
 
 /* Misc
@@ -456,8 +579,8 @@ hr {
   margin-top: 30px;
   margin-bottom: 35px;
   border-width: 0;
-  border-top: 1px solid var(--color-neutral-2); }
-
+  border-top: 1px solid var(--color-neutral-2);
+}
 
 #back-to-top {
   display: inline-block;
@@ -472,39 +595,50 @@ hr {
   transition: background-color 300ms, opacity 500ms, visibility 500ms;
   opacity: 0;
   visibility: hidden;
-  z-index: 1000; }
-#back-to-top::after {
-  content: "\276F";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 32px;
-  line-height: 50px;
-  color: var(--color-bg);
-  display: inline-block;
-  transform: rotate(270deg);
+  z-index: 1000;
+
+  &::after {
+    content: "\276F";
+    font-weight: normal;
+    font-style: normal;
+    font-size: 32px;
+    line-height: 50px;
+    color: var(--color-bg);
+    display: inline-block;
+    transform: rotate(270deg);
+  }
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+    background-color: var(--color-primary);
+  }
+
+  &.back-to-top\:show {
+    opacity: 1;
+    visibility: visible;
+  }
 }
-#back-to-top:hover,
-#back-to-top:active {
-  cursor: pointer;
-  background-color: var(--color-primary); }
-#back-to-top.back-to-top--show {
-  opacity: 1;
-  visibility: visible; }
 
 
 /* Utilities
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .u-full {
   width: 100%;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
+
 .u-max {
   max-width: 100%;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
+
 .u-m0 { margin: 0; }
 .u-mt0 { margin-top: 0; }
 .u-mb0 { margin-bottom: 0; }
 .u-ml0 { margin-left: 0; }
 .u-mr0 { margin-right: 0; }
+
 .u-p0 { padding: 0; }
 .u-pt0 { padding-top: 0; }
 .u-pb0 { padding-bottom: 0; }
@@ -518,49 +652,59 @@ hr {
 /* Larger than phablet (sm) */
 @media (min-width: 640px) {
   .sm-hide {
-    display: none !important; }
+    display: none !important;
+  }
 }
 @media (max-width: 639px) {
   .sm-show {
-    display: none !important; }
+    display: none !important;
+  }
 }
 
 /* Larger than tablet (md) */
 @media (min-width: 768px) {
   .md-hide {
-    display: none !important; }
+    display: none !important;
+  }
 }
 @media (max-width: 767px) {
   .md-show {
-    display: none !important;}
+    display: none !important;
+  }
 }
 
 /* Larger than desktop (lg) */
 @media (min-width: 1024px) {
   .lg-hide {
-    display: none !important; }
+    display: none !important;
+  }
 }
 @media (max-width: 1023px) {
   .lg-show {
-    display: none !important;}
+    display: none !important;
+  }
 }
 
 /* Larger than Desktop HD (xl) */
 @media (min-width: 1280px) {
   .xl-hide {
-    display: none !important; }
+    display: none !important;
+  }
 }
 @media (max-width: 1279px) {
   .xl-show {
-    display: none !important;}
+    display: none !important;
+  }
 }
 
-/* Extra large (2xl) */
+/* Extra, extra large (xxl) */
 @media (min-width: 1536px) {
   .xxl-hide {
-    display: none !important; }
+    display: none !important;
+  }
 }
 @media (max-width: 1535px) {
   .xxl-show {
-    display: none !important;}
+    display: none !important;
+  }
 }

package/src/wisp.js

@@ -16,9 +16,9 @@ function createRipple(event) {
 function handleScroll(btt) {
   return function () {
     if (document.documentElement.scrollTop > 300) {
-      btt.classList.add('back-to-top--show');
+      btt.classList.add('back-to-top:show');
     } else {
-      btt.classList.remove('back-to-top--show');
+      btt.classList.remove('back-to-top:show');
     }
   };
 }
@@ -36,7 +36,7 @@ const ready = cb => {
 };
 
 ready(() => {
-  document.querySelectorAll('.btn--ripple').forEach(el => {
+  document.querySelectorAll('.btn\\:ripple').forEach(el => {
     el.addEventListener('click', createRipple);
   });