@thednp/color-picker 0.0.1-alpha3 → 0.0.2-alpha2

package/README.md

@@ -1,10 +1,12 @@
-# ColorPicker Web Component
+# ColorPicker Web Component ![check-code-coverage](https://img.shields.io/badge/code--coverage-100%25-brightgreen) ![cypress version](https://img.shields.io/badge/cypress-9.5.4-brightgreen) ![esbuild version](https://img.shields.io/badge/esbuild-0.14.30-brightgreen) ![shorter-js version](https://img.shields.io/badge/shorter--js-0.3.4-brightgreen)
 The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
 
 [![image](./docs/img/color-picker.png)](http://thednp.github.io/color-picker)
 
+
 [![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg?style=flat-square)](https://www.npmjs.com/package/@thednp/color-picker)
 [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/color-picker.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@thednp/color-picker)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@thednp/color-picker?style=flat-square)](https://bundlephobia.com/package/@thednp/color-picker)
 [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/color-picker/badge)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
 
 **ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!

package/dist/css/color-picker.css

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.1alpha3 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.2alpha1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -443,7 +443,9 @@ color-picker:focus,
   user-select: none;
   background-color: #000;
   border: 1px solid #fff;
+  border-radius: 5px;
   outline: none;
+  will-change: transform;
 }
 
 .knob:hover {
@@ -461,7 +463,6 @@ color-picker:focus,
   width: 7px;
   background-color: transparent;
   border: 0;
-  border-radius: 5px;
 }
 
 .txt-dark .color-pointer {

package/dist/css/color-picker.min.css

@@ -1,2 +1,2 @@
-/* ColorPicker v0.0.1alpha3 | thednp © 2022 | MIT-License */
-color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid rgba(255,255,255,.75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;user-select:none;background-color:#000;border:1px solid #fff;outline:none}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0;border-radius:5px}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}
+/* ColorPicker v0.0.2alpha1 | thednp © 2022 | MIT-License */
+color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid rgba(255,255,255,.75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;user-select:none;background-color:#000;border:1px solid #fff;border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}

package/dist/css/color-picker.rtl.css

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.1alpha3 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.2alpha1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -443,7 +443,9 @@ color-picker:focus,
   user-select: none;
   background-color: #000;
   border: 1px solid #fff;
+  border-radius: 5px;
   outline: none;
+  will-change: transform;
 }
 
 .knob:hover {
@@ -461,7 +463,6 @@ color-picker:focus,
   width: 7px;
   background-color: transparent;
   border: 0;
-  border-radius: 5px;
 }
 
 .txt-dark .color-pointer {

package/dist/css/color-picker.rtl.min.css

@@ -1,2 +1,2 @@
-/* ColorPicker RTL v0.0.1alpha3 | thednp © 2022 | MIT-License */
-color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid rgba(255,255,255,.75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;user-select:none;background-color:#000;border:1px solid #fff;outline:none}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0;border-radius:5px}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}[dir=rtl] .color-preview{text-align:right}[dir=rtl] .menu-toggle{right:auto;left:0;border-radius:.25rem 0 0 .25rem}[dir=rtl] .color-dropdown.picker{right:0;left:auto}[dir=rtl] .color-dropdown.menu{right:auto;left:0}[dir=rtl] .color-control+.color-control{margin-right:.5rem;margin-left:0}[dir=rtl] .color-options.scrollable{margin:0 0 0 -0.5rem}
+/* ColorPicker RTL v0.0.2alpha1 | thednp © 2022 | MIT-License */
+color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid rgba(255,255,255,.75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;user-select:none;background-color:#000;border:1px solid #fff;border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}[dir=rtl] .color-preview{text-align:right}[dir=rtl] .menu-toggle{right:auto;left:0;border-radius:.25rem 0 0 .25rem}[dir=rtl] .color-dropdown.picker{right:0;left:auto}[dir=rtl] .color-dropdown.menu{right:auto;left:0}[dir=rtl] .color-control+.color-control{margin-right:.5rem;margin-left:0}[dir=rtl] .color-options.scrollable{margin:0 0 0 -0.5rem}