@thednp/color-picker 0.0.1-alpha3 → 0.0.1

package/dist/css/color-picker.css

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.1alpha3 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.1 (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.1 | 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.1 (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.1 | 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}

package/dist/js/color-picker-element-esm.js

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.1alpha3 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -763,9 +763,9 @@ function inputToRGB(input) {
   if (typeof color === 'object') {
     if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
       ({ r, g, b } = color);
-      [r, g, b] = [...[r, g, b]]
-        .map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255).map(roundPart);
-      rgb = { r, g, b }; // RGB values now are all in [0, 255] range
+      // RGB values now are all in [0, 255] range
+      [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255);
+      rgb = { r, g, b };
       ok = true;
       format = 'rgb';
     } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
@@ -920,13 +920,9 @@ class Color {
     const {
       r, g, b, a,
     } = this;
-    const [R, G, B] = [r, g, b].map((x) => roundPart(x));
 
     return {
-      r: R,
-      g: G,
-      b: B,
-      a: roundPart(a * 100) / 100,
+      r, g, b, a: roundPart(a * 100) / 100,
     };
   }
 
@@ -940,10 +936,11 @@ class Color {
     const {
       r, g, b, a,
     } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
 
     return a === 1
-      ? `rgb(${r}, ${g}, ${b})`
-      : `rgba(${r}, ${g}, ${b}, ${a})`;
+      ? `rgb(${R}, ${G}, ${B})`
+      : `rgba(${R}, ${G}, ${B}, ${a})`;
   }
 
   /**
@@ -956,9 +953,10 @@ class Color {
     const {
       r, g, b, a,
     } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
     const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
 
-    return `rgb(${r} ${g} ${b}${A})`;
+    return `rgb(${R} ${G} ${B}${A})`;
   }
 
   /**
@@ -2375,7 +2373,7 @@ function isValidJSON(str) {
   return true;
 }
 
-var version = "0.0.1alpha3";
+var version = "0.0.1";
 
 // @ts-ignore
 
@@ -3146,30 +3144,41 @@ class ColorPicker {
     if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
     e.preventDefault();
 
-    const { controlKnobs } = self;
+    const { format, controlKnobs, visuals } = self;
+    const { offsetWidth, offsetHeight } = visuals[0];
     const [c1, c2, c3] = controlKnobs;
     const { activeElement } = getDocument(c1);
     const currentKnob = controlKnobs.find((x) => x === activeElement);
+    const yRatio = offsetHeight / (format === 'hsl' ? 100 : 360);
 
     if (currentKnob) {
       let offsetX = 0;
       let offsetY = 0;
+
       if (target === c1) {
+        const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
+
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
-          self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+          self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
         } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-          self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+          self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
         }
 
         offsetX = self.controlPositions.c1x;
         offsetY = self.controlPositions.c1y;
         self.changeControl1(offsetX, offsetY);
       } else if (target === c2) {
-        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
         offsetY = self.controlPositions.c2y;
         self.changeControl2(offsetY);
       } else if (target === c3) {
-        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
         offsetY = self.controlPositions.c3y;
         self.changeAlpha(offsetY);
       }
@@ -3541,10 +3550,12 @@ class ColorPicker {
   /** Updates the control knobs actual positions. */
   updateControls() {
     const { controlKnobs, controlPositions } = this;
-    const {
+    let {
       c1x, c1y, c2y, c3y,
     } = controlPositions;
     const [control1, control2, control3] = controlKnobs;
+    // round control positions
+    [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
 
     setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
     setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
@@ -3587,7 +3598,8 @@ class ColorPicker {
       i3.value = `${blackness}`;
       i4.value = `${alpha}`;
     } else if (format === 'rgb') {
-      const { r, g, b } = self.rgb;
+      let { r, g, b } = self.rgb;
+      [r, g, b] = [r, g, b].map(roundPart);
 
       newColor = self.color.toRgbString();
       i1.value = `${r}`;

package/dist/js/color-picker-element-esm.min.js

@@ -1,2 +1,2 @@
-// ColorPickerElement v0.0.1alpha3 | thednp © 2022 | MIT-License
-function t(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}const e=[Document,Element,HTMLElement];const o=(t,e)=>Object.assign(t,e);function n(e){if("string"==typeof e)return t().createElement(e);const{tagName:r}=e,s={...e},a=n(r);return delete s.tagName,o(a,s),a}const r=(t,e,o)=>t.setAttribute(e,o),s=(t,e)=>t.getAttribute(e);function a(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}const i=t=>Object.keys(t),l=(t,e)=>o(t.style,e),c=["transparent","currentColor","inherit","revert","initial"];function u(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const h=["rgb","hex","hsl","hsb","hwb"],g="deg|rad|grad|turn",p=`[-\\+]?\\d*\\.?\\d+(?:${g})?`,d="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",b=`(?:${d})|(?:${p})`,f=`[\\s|\\(]+(${b})[,|\\s]+(${d})[,|\\s]+(${d})[,|\\s|\\/\\s]*(${d})?\\s*\\)?`,m={CSS_UNIT:new RegExp(b),hwb:new RegExp("hwb"+f),rgb:new RegExp("rgb(?:a)?"+f),hsl:new RegExp("hsl(?:a)?"+f),hsv:new RegExp("hsv(?:a)?"+f),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function w(t){return(""+t).includes(".")&&1===parseFloat(t)}function v(t){return(""+t).includes("%")}function x(t){return Boolean(m.CSS_UNIT.exec(String(t)))}function $(t,e){let o=t;return w(o)&&(o="100%"),o=360===e?o:Math.min(e,Math.max(0,parseFloat(o))),function(t){return g.split("|").some(e=>(""+t).includes(e))}(t)&&(o=t.replace(new RegExp(g),"")),v(o)&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(o=360===e?(o<0?o%e+e:o%e)/parseFloat(String(e)):o%e/parseFloat(String(e)),o)}function k(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function y(t){return Math.min(1,Math.max(0,t))}function S(e){const o=t(n).head;var n;l(o,{color:e});const r=a(o,"color");return l(o,{color:""}),r}function P(t){return u(255*t).toString(16)}function A(t){return H(t)/255}function H(t){return parseInt(t,16)}function E(t){return 1===t.length?"0"+t:String(t)}function N(t,e,o){const n=t/255,r=e/255,s=o/255,a=Math.max(n,r,s),i=Math.min(n,r,s);let l=0,c=0;const u=(a+i)/2;if(a===i)c=0,l=0;else{const t=a-i;switch(c=u>.5?t/(2-a-i):t/(a+i),a){case n:l=(r-s)/t+(r<s?6:0);break;case r:l=(s-n)/t+2;break;case s:l=(n-r)/t+4}l/=6}return{h:l,s:c,l:u}}function L(t,e,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(e-t):n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function C(t,e,o){const n=t/255,r=e/255,s=o/255;let a=0,i=0;const l=Math.min(n,r,s),c=Math.max(n,r,s),u=1-c;if(c===l)return{h:0,w:l,b:u};n===l?(a=r-s,i=3):(a=r===l?s-n:n-r,i=r===l?5:1);const h=(i-a/(c-l))/6;return{h:1===h?0:h,w:l,b:u}}function M(t,e,o){if(e+o>=1){const t=e/(e+o)*255;return{r:t,g:t,b:t}}let{r:n,g:r,b:s}=T(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t/255*(1-e-o)+e).map(t=>255*t),{r:n,g:r,b:s}}function T(t,e,o){let n=0,r=0,s=0;if(0===e)r=o,s=o,n=o;else{const a=o<.5?o*(1+e):o+e-o*e,i=2*o-a;n=L(i,a,t+1/3),r=L(i,a,t),s=L(i,a,t-1/3)}return[n,r,s]=[n,r,s].map(t=>255*t),{r:n,g:r,b:s}}function R(t,e,o){const n=t/255,r=e/255,s=o/255,a=Math.max(n,r,s),i=Math.min(n,r,s);let l=0;const c=a,u=a-i,h=0===a?0:u/a;if(a===i)l=0;else{switch(a){case n:l=(r-s)/u+(r<s?6:0);break;case r:l=(s-n)/u+2;break;case s:l=(n-r)/u+4}l/=6}return{h:l,s:h,v:c}}function D(t,e,o){const n=6*t,r=e,s=o,a=Math.floor(n),i=n-a,l=s*(1-r),c=s*(1-i*r),u=s*(1-(1-i)*r),h=a%6;return{r:255*[s,c,l,l,u,s][h],g:255*[u,s,s,c,l,l][h],b:255*[l,l,u,s,s,c][h]}}function F(t,e,o,n){const r=[E(u(t).toString(16)),E(u(e).toString(16)),E(u(o).toString(16))];return n&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function O(t,e,o,n,r){const s=[E(u(t).toString(16)),E(u(e).toString(16)),E(u(o).toString(16)),E(P(n))];return r&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)&&s[3].charAt(0)===s[3].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0)+s[3].charAt(0):s.join("")}function K(t){return{r:t>>16,g:(65280&t)>>8,b:255&t}}function I(t){let e=t.trim().toLowerCase();if(0===e.length)return{r:0,g:0,b:0,a:0};let o=!1;if(function(t){return!["#",...h].some(e=>t.includes(e))&&!/[0-9]/.test(t)}(e))e=S(e),o=!0;else if(c.includes(e)){const t="transparent"===e,o=t?0:255;return{r:o,g:o,b:o,a:t?0:1,format:"rgb"}}let[,n,r,s,a]=m.rgb.exec(e)||[];return n&&r&&s?{r:n,g:r,b:s,a:void 0!==a?a:1,format:"rgb"}:([,n,r,s,a]=m.hsl.exec(e)||[],n&&r&&s?{h:n,s:r,l:s,a:void 0!==a?a:1,format:"hsl"}:([,n,r,s,a]=m.hsv.exec(e)||[],n&&r&&s?{h:n,s:r,v:s,a:void 0!==a?a:1,format:"hsv"}:([,n,r,s,a]=m.hwb.exec(e)||[],n&&r&&s?{h:n,w:r,b:s,a:void 0!==a?a:1,format:"hwb"}:([,n,r,s,a]=m.hex8.exec(e)||[],n&&r&&s&&a?{r:H(n),g:H(r),b:H(s),a:A(a),format:o?"rgb":"hex"}:([,n,r,s]=m.hex6.exec(e)||[],n&&r&&s?{r:H(n),g:H(r),b:H(s),format:o?"rgb":"hex"}:([,n,r,s,a]=m.hex4.exec(e)||[],n&&r&&s&&a?{r:H(n+n),g:H(r+r),b:H(s+s),a:A(a+a),format:o?"rgb":"hex"}:([,n,r,s]=m.hex3.exec(e)||[],!!(n&&r&&s)&&{r:H(n+n),g:H(r+r),b:H(s+s),format:o?"rgb":"hex"})))))))}function V(t){let e={r:0,g:0,b:0},o=t,n=1,r=null,s=null,a=null,i=null,l=null,c=null,h=null,g=null,p=!1,d="hex";return"string"==typeof t&&(o=I(t),o&&(p=!0)),"object"==typeof o&&(x(o.r)&&x(o.g)&&x(o.b)?(({r:h,g:g,b:l}=o),[h,g,l]=[h,g,l].map(t=>255*$(t,v(t)?100:255)).map(u),e={r:h,g:g,b:l},p=!0,d="rgb"):x(o.h)&&x(o.s)&&x(o.v)?(({h:c,s:r,v:s}=o),c="number"==typeof c?c:$(c,360),r="number"==typeof r?r:$(r,100),s="number"==typeof s?s:$(s,100),e=D(c,r,s),p=!0,d="hsv"):x(o.h)&&x(o.s)&&x(o.l)?(({h:c,s:r,l:a}=o),c="number"==typeof c?c:$(c,360),r="number"==typeof r?r:$(r,100),a="number"==typeof a?a:$(a,100),e=T(c,r,a),p=!0,d="hsl"):x(o.h)&&x(o.w)&&x(o.b)&&(({h:c,w:i,b:l}=o),c="number"==typeof c?c:$(c,360),i="number"==typeof i?i:$(i,100),l="number"==typeof l?l:$(l,100),e=M(c,i,l),p=!0,d="hwb"),x(o.a)&&(n=o.a,n=v(""+n)?$(n,100):n)),{ok:p,format:o.format||d,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:k(n)}}class U{constructor(t,e){let o=t;const n=e&&h.includes(e)?e:"rgb";o instanceof U&&(o=V(o)),"number"==typeof o&&(o=K(o));const{r:r,g:s,b:a,a:i,ok:l,format:c}=V(o);this.originalInput=o,this.r=r,this.g=s,this.b=a,this.a=i,this.ok=l,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:o}=this;let n=0,r=0,s=0;const a=t/255,i=e/255,l=o/255;return n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,r=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,s=l<=.03928?l/12.92:((l+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*s}get brightness(){const{r:t,g:e,b:o}=this;return(299*t+587*e+114*o)/1e3}toRgb(){const{r:t,g:e,b:o,a:n}=this,[r,s,a]=[t,e,o].map(t=>u(t));return{r:r,g:s,b:a,a:u(100*n)/100}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb();return 1===n?`rgb(${t}, ${e}, ${o})`:`rgba(${t}, ${e}, ${o}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:o,a:n}=this.toRgb();return`rgb(${t} ${e} ${o}${1===n?"":` / ${u(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?F(e,o,n,t):O(e,o,n,r,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return O(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:s,v:a}=R(t,e,o);return{h:r,s:s,v:a,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:s,l:a}=N(t,e,o);return{h:r,s:s,l:a,a:n}}toHslString(){let{h:t,s:e,l:o,a:n}=this.toHsl();return t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n)/100,1===n?`hsl(${t}, ${e}%, ${o}%)`:`hsla(${t}, ${e}%, ${o}%, ${n})`}toHslCSS4String(){let{h:t,s:e,l:o,a:n}=this.toHsl();t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${u(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=C(t,e,o);return{h:r,w:s,b:a,a:n}}toHwbString(){let{h:t,w:e,b:o,a:n}=this.toHwb();t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${u(n)}%`:""})`}setAlpha(t){return this.a=k(t),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=T(e,y(n+t/100),r);return o(this,{r:s,g:a,b:i}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=T(e,n,y(r+t/100));return o(this,{r:s,g:a,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=T(y((360*e+t)%360/360),n,r);return o(this,{r:s,g:a,b:i}),this}clone(){return new U(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}o(U,{ANGLES:g,CSS_ANGLE:p,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:d,CSS_UNIT2:b,PERMISSIVE_MATCH:f,matchers:m,isOnePointZero:w,isPercentage:v,isValidCSSUnit:x,pad2:E,clamp01:y,bound01:$,boundAlpha:k,getRGBFromName:S,convertHexToDecimal:A,convertDecimalToHex:P,rgbToHsl:N,rgbToHex:F,rgbToHsv:R,rgbToHwb:C,rgbaToHex:O,hslToRgb:T,hsvToRgb:D,hueToRgb:L,hwbToRgb:M,parseIntFromHex:H,numberInputToObject:K,stringInputToObject:I,inputToRGB:V,roundPart:u,ObjectAssign:o});const B={};function _(t){const e=this,{type:o}=t;(B[o]?[...B[o]]:[]).forEach(n=>{const[r,s]=n;[...s].forEach(n=>{if(r===e){const[e,s]=n;e.apply(r,[t]),s&&s.once&&W(r,o,e,s)}})})}const j=(t,e,o,n)=>{B[e]||(B[e]=new Map);const r=B[e];r.has(t)||r.set(t,new Map);const s=r.get(t),{size:a}=s;s&&s.set(o,n),a||t.addEventListener(e,_,n)},W=(t,e,o,n)=>{const r=B[e],s=r&&r.get(t),a=s&&s.get(o),{options:i}=void 0!==a?a:{options:n};s&&s.has(o)&&s.delete(o),!r||s&&s.size||r.delete(t),r&&r.size||delete B[e],s&&s.size||t.removeEventListener(e,_,i)},z="ArrowDown",G="ArrowUp",X="ArrowLeft",Y="ArrowRight",q="Enter",J="Space",{userAgentData:Z}=navigator,Q=Z,{userAgent:tt}=navigator,et=tt,ot=/iPhone|iPad|iPod|Android/i;let nt=!1;nt=Q?Q.brands.some(t=>ot.test(t.brand)):ot.test(et);const rt=nt;let st=0,at=0;const it=new Map;function lt(t,e){const{width:o,height:n,top:r,right:s,bottom:a,left:i}=t.getBoundingClientRect();let l=1,c=1;if(e&&t instanceof HTMLElement){const{offsetWidth:e,offsetHeight:r}=t;l=e>0&&Math.round(o)/e||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:s/l,bottom:a/c,left:i/l,x:i/l,y:r/c}}const ct=[Element,HTMLElement];function ut(o,n){const r=e.some(t=>n instanceof t)?n:t();return ct.some(t=>o instanceof t)?o:r.querySelector(o)}function ht(o,n){return(n&&e.some(t=>n instanceof t)?n:t()).getElementsByClassName(o)}function gt(e,n){if("string"==typeof n)return t().createElementNS(e,n);const{tagName:r}=n,s={...n},a=gt(e,r);return delete s.tagName,o(a,s),a}const pt=new Map,dt={set:(t,e,o)=>{const n=ut(t);if(!n)return;pt.has(e)||pt.set(e,new Map);pt.get(e).set(n,o)},getAllFor:t=>pt.get(t)||null,get:(t,e)=>{const o=ut(t),n=dt.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=ut(t),n=pt.get(e);n&&o&&(n.delete(o),0===n.size&&pt.delete(e))}};function bt(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const ft=t=>t.focus();function mt(t,e){return t.classList.contains(e)}function wt(t,e){t.classList.add(e)}function vt(t,e){t.classList.remove(e)}const xt=(t,e)=>t.removeAttribute(e),$t={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},kt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];class yt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else{if(2!==t.length)throw TypeError("ColorPalette requires minimum 2 arguments");[o,n]=t}const s=[],a=360/o,i=u((n-(n%2?1:0))/2),l=100/(n+(n%2?0:1))/100;let c=.25;c=[4,5].includes(n)?.2:c,c=[6,7].includes(n)?.15:c,c=[8,9].includes(n)?.11:c,c=[10,11].includes(n)?.09:c,c=[12,13].includes(n)?.075:c,c=n>13?l:c;for(let t=1;t<i+1;t+=1)r=[...r,.5+c*t];for(let t=1;t<n-i;t+=1)r=[.5-c*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new U({h:o,s:1,l:t}).toHexString())})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}function St(t,e,o){const{input:a,format:c,componentLabels:u}=t,{defaultsLabel:h,presetsLabel:g}=u,p="color-options"===o,d=e instanceof yt,b=p?g:h;let f=d?e.colors:e;f=f instanceof Array?f:[];const m=f.length,{lightSteps:w}=d?e:{lightSteps:null},v=w||[9,10].find(t=>m>2*t&&!(m%t))||5,x=p&&m>v;let $=2;$=x&&m>=2*v?3:$,$=m>=3*v?4:$,$=m>=4*v?5:$;const k=$-(m<3*v?1:2),y=x&&m>k*v;let S=o;S+=y?" scrollable":"",S+=x?" multiline":"";const P=x?"1px":"0.25rem";let A=x?1.75:2;A=v>5&&x?1.5:A;const H=(k||1)*A+"rem",E=`calc(${$} * ${A}rem + ${$-1} * ${P})`,N=n({tagName:"ul",className:S});var L,C;return r(N,"role","listbox"),r(N,"aria-label",b),y&&(L=N,i(C={"--grid-item-size":A+"rem","--grid-fit":v,"--grid-gap":P,"--grid-height":H,"--grid-hover-height":E}).forEach(t=>{L.style.setProperty(t,C[t])})),f.forEach(t=>{const[e,o]=t.trim().split(":"),i=new U(e,c).toString()===s(a,"value"),u=n({tagName:"li",className:"color-option"+(i?" active":""),innerText:""+(o||t)});r(u,"tabindex","0"),r(u,"data-value",""+e),r(u,"role","option"),r(u,"aria-selected",i?"true":"false"),p&&l(u,{backgroundColor:t}),N.append(u)}),N}function Pt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const At={componentLabels:$t,colorLabels:kt,format:"rgb",colorPresets:!1,colorKeywords:!1},Ht=t=>{return e=t,o="color-picker",dt.get(e,o);var e,o};function Et(t){const{input:e,parent:a,format:i,id:l,componentLabels:u,colorKeywords:h,colorPresets:g}=t,p=s(e,"value")||"#fff",{toggleLabel:d,pickerLabel:b,formatLabel:f,hexLabel:m}=u,w=c.includes(p)?"#fff":p;t.color=new U(w,i);const v=rt?" mobile":"",x="hex"===i?m:i.toUpperCase(),$=n({id:"picker-btn-"+l,tagName:"button",className:"picker-toggle btn-appearance"});r($,"aria-expanded","false"),r($,"aria-haspopup","true"),$.append(n({tagName:"span",className:"v-hidden",innerText:`${b}. ${f}: ${x}`}));const k=n({tagName:"div",className:"color-dropdown picker"+v});r(k,"aria-labelledby","picker-btn-"+l),r(k,"role","group");const y=function(t){const{format:e,componentLabels:o}=t,{hueLabel:s,alphaLabel:a,lightnessLabel:i,saturationLabel:l,whitenessLabel:c,blacknessLabel:u}=o,h="hsl"===e?360:100,g="hsl"===e?100:360;let p="hsl"===e?`${s} & ${i}`:`${i} & ${l}`;p="hwb"===e?`${c} & ${u}`:p;const d="hsl"===e?""+l:""+s,b=n({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:p,min:0,max:h},{i:2,c:"color-slider",l:d,min:0,max:g},{i:3,c:"color-slider",l:a,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:s,min:a,max:i}=t,l=n({tagName:"div",className:"color-control"});r(l,"role","presentation"),l.append(n({tagName:"div",className:"visual-control visual-control"+e}));const c=n({tagName:"div",className:o+" knob",ariaLive:"polite"});r(c,"aria-label",s),r(c,"role","slider"),r(c,"tabindex","0"),r(c,"aria-valuemin",""+a),r(c,"aria-valuemax",""+i),l.append(c),b.append(l)}),b}(t),S=function(t){const{format:e,id:s,componentLabels:a}=t,i=n({tagName:"div",className:"color-form "+e});let l=["hex"];return"rgb"===e?l=["red","green","blue","alpha"]:"hsl"===e?l=["hue","saturation","lightness","alpha"]:"hwb"===e&&(l=["hue","whiteness","blackness","alpha"]),l.forEach(t=>{const[l]="hex"===e?["#"]:(c=t,c.toUpperCase()).split("");var c;const u=`color_${e}_${t}_${s}`,h=a[t+"Label"],g=n({tagName:"label"});r(g,"for",u),g.append(n({tagName:"span",ariaHidden:"true",innerText:l+":"}),n({tagName:"span",className:"v-hidden",innerText:h}));const p=n({tagName:"input",id:u,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});r(p,"autocomplete","off"),r(p,"spellcheck","false");let d="100",b="1";"alpha"!==t&&("rgb"===e?(d="255",b="1"):"hue"===t&&(d="360",b="1")),o(p,{min:"0",max:d,step:b}),i.append(g,p)}),i}(t);if(k.append(y,S),e.before($),a.append(k),h||g){const e=n({tagName:"div",className:"color-dropdown scrollable menu"+v});if(g instanceof Array&&g.length||g instanceof yt&&g.colors){const o=St(t,g,"color-options");e.append(o)}if(h&&h.length){const o=St(t,h,"color-defaults");e.append(o)}const o=n({tagName:"button",className:"menu-toggle btn-appearance"});r(o,"tabindex","-1"),r(o,"aria-expanded","false"),r(o,"aria-haspopup","true");const s=encodeURI("http://www.w3.org/2000/svg"),i=gt(s,{tagName:"svg"});r(i,"xmlns",s),r(i,"viewBox","0 0 512 512"),r(i,"aria-hidden","true");const l=gt(s,{tagName:"path"});r(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),r(l,"fill","#fff"),i.append(l),o.append(n({tagName:"span",className:"v-hidden",innerText:""+d}),i),a.append(o,e)}h&&c.includes(p)&&(t.value=p),r(e,"tabindex","-1")}function Nt(t,e){const o=e?j:W,{input:n,pickerToggle:r,menuToggle:s}=t;o(n,"focusin",t.showPicker),o(r,"click",t.togglePicker),o(n,"keydown",t.keyToggle),s&&o(s,"click",t.toggleMenu)}function Lt(e,o){const n=o?j:W,{input:r,colorMenu:s,parent:a}=e,i=t(r),l=function(t){if(null==t)return window;if(!(t instanceof Window)){const{ownerDocument:e}=t;return e&&e.defaultView||window}return t}(r),c="ontouchstart"in i?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};n(e.controls,c.down,e.pointerDown),e.controlKnobs.forEach(t=>n(t,"keydown",e.handleKnobs)),n(l,"scroll",e.handleScroll),n(l,"resize",e.update),[r,...e.inputs].forEach(t=>n(t,"change",e.changeHandler)),s&&(n(s,"click",e.menuClickHandler),n(s,"keydown",e.menuKeyHandler)),n(i,c.move,e.pointerMove),n(i,c.up,e.pointerUp),n(a,"focusout",e.handleFocusOut),n(l,"keyup",e.handleDismiss)}function Ct(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Mt(t){t&&["bottom","top"].forEach(e=>vt(t,e))}function Tt(t,e){const{colorPicker:o,colorMenu:n,menuToggle:s,pickerToggle:a,parent:i}=t,l=e===o,c=l?n:o,u=l?s:a,h=l?a:s;mt(i,"open")||wt(i,"open"),c&&(vt(c,"show"),Mt(c)),wt(e,"bottom"),e.offsetHeight,wt(e,"show"),l&&t.update(),t.isOpen||(Lt(t,!0),t.updateDropdownPosition(),t.isOpen=!0,r(t.input,"tabindex","0"),s&&r(s,"tabindex","0")),r(h,"aria-expanded","true"),u&&r(u,"aria-expanded","false")}class Rt{constructor(t,e){const n=this,r=ut(t);if(!r)throw new TypeError(`ColorPicker target ${t} cannot be found.`);n.input=r;const a=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(r,".color-picker,color-picker");if(!a)throw new TypeError("ColorPicker requires a specific markup to work.");n.parent=a,n.id=function t(e,o){let n=o?st:at;if(o){const r=t(e),s=it.get(r)||new Map;it.has(r)||it.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),st+=1)}else{const t=e.id||e;it.has(t)?n=it.get(t):(it.set(t,n),at+=1)}return n}(r,"color-picker"),n.dragElement=null,n.isOpen=!1,n.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},n.colorLabels={},n.colorKeywords=void 0,n.colorPresets=void 0;const{format:l,componentLabels:c,colorLabels:u,colorKeywords:h,colorPresets:g}=function(t,e,o,n){const r={...t.dataset},a={},l={};return i(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>t.toLowerCase()):t;l[e]=bt(r[t])}),i(o).forEach(t=>{o[t]=bt(o[t])}),i(e).forEach(n=>{a[n]=n in o?o[n]:n in l?l[n]:"title"===n?s(t,"title"):e[n]}),a}(this.isCE?a:r,At,e||{});let p=kt;u instanceof Array&&17===u.length?p=u:u&&17===u.split(",").length&&(p=u.split(",")),kt.forEach((t,e)=>{n.colorLabels[t]=p[e].trim()});const d=o({},$t),b=c&&Pt(c)?JSON.parse(c):c||{};if(n.componentLabels=o(d,b),n.color=new U("white",l),n.format=l,h instanceof Array?n.colorKeywords=h:"string"==typeof h&&h.length&&(n.colorKeywords=h.split(",")),g instanceof Array)n.colorPresets=g;else if("string"==typeof g&&g.length)if(Pt(g)){const{hue:t,hueSteps:e,lightSteps:o}=JSON.parse(g);n.colorPresets=new yt(t,e,o)}else n.colorPresets=g.split(",").map(t=>t.trim());n.showPicker=n.showPicker.bind(n),n.togglePicker=n.togglePicker.bind(n),n.toggleMenu=n.toggleMenu.bind(n),n.menuClickHandler=n.menuClickHandler.bind(n),n.menuKeyHandler=n.menuKeyHandler.bind(n),n.pointerDown=n.pointerDown.bind(n),n.pointerMove=n.pointerMove.bind(n),n.pointerUp=n.pointerUp.bind(n),n.update=n.update.bind(n),n.handleScroll=n.handleScroll.bind(n),n.handleFocusOut=n.handleFocusOut.bind(n),n.changeHandler=n.changeHandler.bind(n),n.handleDismiss=n.handleDismiss.bind(n),n.keyToggle=n.keyToggle.bind(n),n.handleKnobs=n.handleKnobs.bind(n),Et(n);const[f,m]=ht("color-dropdown",a);n.pickerToggle=ut(".picker-toggle",a),n.menuToggle=ut(".menu-toggle",a),n.colorPicker=f,n.colorMenu=m,n.inputs=[...ht("color-input",a)];const[w]=ht("color-controls",a);n.controls=w,n.controlKnobs=[...ht("knob",w)],n.visuals=[...ht("visual-control",w)],n.update(),Nt(n,!0),dt.set(r,"color-picker",n)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>c.includes(t))}get isCE(){return"color-picker"===this.parent.localName}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return""!==t&&new U(t).isValid}updateVisuals(){const{format:t,controlPositions:e,visuals:o}=this,[n,r,s]=o,{offsetWidth:a,offsetHeight:i}=n,c="hsl"===t?e.c1x/a:e.c2y/i,{r:h,g:g,b:p}=U.hslToRgb(c,1,.5),d="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",b=1-e.c3y/i,f=u(100*b)/100;if("hsl"!==t){const t=new U({h:c,s:1,l:.5,a:b}).toRgbString(),e="linear-gradient(\n        rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,\n        rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,\n        rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,\n        rgb(255,0,0) 100%)";l(n,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${f}) 100%),\n        linear-gradient(to right, rgba(255,255,255,${f}) 0%, ${t} 100%),\n        ${d}`}),l(r,{background:e})}else{const t=u(e.c2y/i*100),o=new U({r:255,g:0,b:0,a:b}).saturate(-t).toRgbString(),s=new U({r:255,g:255,b:0,a:b}).saturate(-t).toRgbString(),a=new U({r:0,g:255,b:0,a:b}).saturate(-t).toRgbString(),c=new U({r:0,g:255,b:255,a:b}).saturate(-t).toRgbString(),m=new U({r:0,g:0,b:255,a:b}).saturate(-t).toRgbString(),w=new U({r:255,g:0,b:255,a:b}).saturate(-t).toRgbString(),v=new U({r:255,g:0,b:0,a:b}).saturate(-t).toRgbString();l(n,{background:`${`linear-gradient(rgba(255,255,255,${f}) 0%, rgba(255,255,255,0) 50%),\n        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${f}) 100%)`},${`linear-gradient(to right,\n        ${o} 0%, ${s} 16.67%, ${a} 33.33%, ${c} 50%,\n        ${m} 66.67%, ${w} 83.33%, ${v} 100%)`},${d}`});const{r:x,g:$,b:k}=new U({r:h,g:g,b:p}).greyscale().toRgb();l(r,{background:`linear-gradient(rgb(${h},${g},${p}) 0%, rgb(${x},${$},${k}) 100%)`})}l(s,{background:`linear-gradient(rgba(${h},${g},${p},1) 0%,rgba(${h},${g},${p},0) 100%)`})}handleFocusOut({relatedTarget:t}){t&&!this.parent.contains(t)&&this.hide(!0)}handleDismiss({code:t}){const e=this;e.isOpen&&"Escape"===t&&e.hide()}handleScroll(e){const{activeElement:o}=t(this.input);(rt&&this.dragElement||o&&this.controlKnobs.includes(o))&&(e.stopPropagation(),e.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:r,parentElement:s}=e,i=s&&mt(s,"color-options"),l=[...s.children],c=i&&a(s,"grid-template-columns").split(" ").length,u=l.indexOf(e),h=u>-1&&c&&l[u-c],g=u>-1&&c&&l[u+c];[z,G,J].includes(o)&&t.preventDefault(),i?h&&o===G?ft(h):g&&o===z?ft(g):n&&o===X?ft(n):r&&o===Y&&ft(r):n&&[X,G].includes(o)?ft(n):r&&[Y,z].includes(o)&&ft(r),[q,J].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:n}=t,{colorMenu:a}=e,i=(s(n,"data-value")||"").trim();if(!i.length)return;const l=ut("li.active",a);let u=c.includes(i)?"white":i;u="transparent"===i?"rgba(0,0,0,0)":i;const{r:h,g:g,b:p,a:d}=new U(u);o(e.color,{r:h,g:g,b:p,a:d}),e.update(),l!==n&&(l&&(vt(l,"active"),xt(l,"aria-selected")),wt(n,"active"),r(n,"aria-selected","true"),c.includes(i)&&(e.value=i),Ct(e))}pointerDown(t){const e=this,{type:o,target:n,touches:r,pageX:s,pageY:a}=t,{colorMenu:i,visuals:l,controlKnobs:c}=e,[u,h,g]=l,[p,d,b]=c,f=mt(n,"visual-control")?n:ut(".visual-control",n.parentElement),m=lt(f),w="touchstart"===o?r[0].pageX:s,v="touchstart"===o?r[0].pageY:a,x=w-window.pageXOffset-m.left,$=v-window.pageYOffset-m.top;if(n===u||n===p?(e.dragElement=f,e.changeControl1(x,$)):n===h||n===d?(e.dragElement=f,e.changeControl2($)):n!==g&&n!==b||(e.dragElement=f,e.changeAlpha($)),i){const t=ut("li.active",i);t&&(vt(t,"active"),xt(t,"aria-selected"))}t.preventDefault()}pointerUp({target:e}){const o=this,{parent:n}=o,r=t(n),s=null!==ut(".color-picker,color-picker.open",r),a=r.getSelection();o.dragElement||a.toString().length||n.contains(e)||o.hide(s),o.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{type:i,touches:l,pageX:c,pageY:u}=t;if(!o)return;const h=lt(o),g="touchmove"===i?l[0].pageX:c,p="touchmove"===i?l[0].pageY:u,d=g-window.pageXOffset-h.left,b=p-window.pageYOffset-h.top;o===r&&e.changeControl1(d,b),o===s&&e.changeControl2(b),o===a&&e.changeAlpha(b)}handleKnobs(e){const{target:o,code:n}=e,r=this;if(![G,z,X,Y].includes(n))return;e.preventDefault();const{controlKnobs:s}=r,[a,i,l]=s,{activeElement:c}=t(a);if(s.find(t=>t===c)){let t=0,s=0;o===a?([X,Y].includes(n)?r.controlPositions.c1x+=n===Y?1:-1:[G,z].includes(n)&&(r.controlPositions.c1y+=n===z?1:-1),t=r.controlPositions.c1x,s=r.controlPositions.c1y,r.changeControl1(t,s)):o===i?(r.controlPositions.c2y+=[z,Y].includes(n)?1:-1,s=r.controlPositions.c2y,r.changeControl2(s)):o===l&&(r.controlPositions.c3y+=[z,Y].includes(n)?1:-1,s=r.controlPositions.c3y,r.changeAlpha(s)),r.handleScroll(e)}}changeHandler(){const e=this;let n;const{inputs:r,format:s,value:a,input:i,controlPositions:l,visuals:u}=e,{activeElement:h}=t(i),{offsetHeight:g}=u[0],[p,,,d]=r,[b,f,m,w]="rgb"===s?r.map(t=>parseFloat(t.value)/(t===d?100:1)):r.map(t=>parseFloat(t.value)/(t!==p?100:360)),v=e.hasNonColor&&c.includes(a),x=d?w:1-l.c3y/g;if(h===i||h&&r.includes(h)){n=h===i?v?"white":a:"hex"===s?p.value:"hsl"===s?{h:b,s:f,l:m,a:x}:"hwb"===s?{h:b,w:f,b:m,a:x}:{r:b,g:f,b:m,a:x};const{r:t,g:r,b:l,a:c}=new U(n);o(e.color,{r:t,g:r,b:l,a:c}),e.setControlPositions(),e.updateAppearance(),e.updateInputs(),e.updateControls(),e.updateVisuals(),h===i&&v&&(e.value=a)}}changeControl1(t,e){let[n,r]=[0,0];const{format:s,controlPositions:a,visuals:i}=this,{offsetHeight:l,offsetWidth:c}=i[0];t>c?n=c:t>=0&&(n=t),e>l?r=l:e>=0&&(r=e);const u="hsl"===s?n/c:a.c2y/l,h="hsl"===s?1-a.c2y/l:n/c,g=1-r/l,p=1-a.c3y/l,d="hsl"===s?{h:u,s:h,l:g,a:p}:{h:u,s:h,v:g,a:p},{r:b,g:f,b:m,a:w}=new U(d);o(this.color,{r:b,g:f,b:m,a:w}),this.controlPositions.c1x=n,this.controlPositions.c1y=r,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{format:e,controlPositions:n,visuals:r}=this,{offsetHeight:s,offsetWidth:a}=r[0];let i=0;t>s?i=s:t>=0&&(i=t);const l="hsl"===e?n.c1x/a:i/s,c="hsl"===e?1-i/s:n.c1x/a,u=1-n.c1y/s,h=1-n.c3y/s,g="hsl"===e?{h:l,s:c,l:u,a:h}:{h:l,s:c,v:u,a:h},{r:p,g:d,b:b,a:f}=new U(g);o(this.color,{r:p,g:d,b:b,a:f}),this.controlPositions.c2y=i,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(t){const{visuals:e}=this,{offsetHeight:o}=e[0];let n=0;t>o?n=o:t>=0&&(n=t);const r=1-n/o;this.color.setAlpha(r),this.controlPositions.c3y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}update(){this.updateDropdownPosition(),this.updateAppearance(),this.setControlPositions(),this.updateInputs(!0),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:e,colorPicker:o,colorMenu:n}=this,r=lt(e),{top:s,bottom:a}=r,{offsetHeight:i}=e,l=(c=e,t(c).documentElement).clientHeight;var c;const u=mt(o,"show")?o:n;if(!u)return;const{offsetHeight:h}=u,g=l-a,p=s,d=s+h+i>l,b=s-h<0;(mt(u,"bottom")||!b)&&g<p&&d?(vt(u,"bottom"),wt(u,"top")):(vt(u,"top"),wt(u,"bottom"))}setControlPositions(){const{format:t,visuals:e,color:o,hsl:n,hsv:r}=this,{offsetHeight:s,offsetWidth:a}=e[0],i=o.a,l=n.h,c="hsl"!==t?r.s:n.s,u="hsl"!==t?r.v:n.l;this.controlPositions.c1x="hsl"!==t?c*a:l*a,this.controlPositions.c1y=(1-u)*s,this.controlPositions.c2y="hsl"!==t?l*s:(1-c)*s,this.controlPositions.c3y=(1-i)*s}updateAppearance(){const t=this,{componentLabels:e,colorLabels:o,color:n,parent:s,hsl:a,hsv:i,hex:c,format:h,controlKnobs:g}=t,{appearanceLabel:p,hexLabel:d,valueLabel:b}=e,{r:f,g:m,b:w}=n.toRgb(),[v,x,$]=g,k=u(360*a.h),y=n.a,S=u(100*("hsl"===h?a.s:i.s)),P=u(100*a.l),A=100*i.v;let H;if(100===P&&0===S)H=o.white;else if(0===P)H=o.black;else if(0===S)H=o.grey;else if(k<15||k>=345)H=o.red;else if(k>=15&&k<45)H=A>80&&S>80?o.orange:o.brown;else if(k>=45&&k<75){const t=k>=54&&k<75&&A<80;H=k>46&&k<54&&A<80&&S>90?o.gold:o.yellow,H=t?o.olive:H}else k>=75&&k<155?H=A<68?o.green:o.lime:k>=155&&k<175?H=o.teal:k>=175&&k<195?H=o.cyan:k>=195&&k<255?H=o.blue:k>=255&&k<270?H=o.violet:k>=270&&k<295?H=o.magenta:k>=295&&k<345&&(H=o.pink);let E=`${d} ${c.split("").join(" ")}`;if("hsl"===h)E=`HSL: ${k}°, ${S}%, ${P}%`,r(v,"aria-description",`${b}: ${E}. ${p}: ${H}.`),r(v,"aria-valuetext",`${k}° & ${P}%`),r(v,"aria-valuenow",""+k),r(x,"aria-valuetext",S+"%"),r(x,"aria-valuenow",""+S);else if("hwb"===h){const{hwb:e}=t,o=u(100*e.w),n=u(100*e.b);E=`HWB: ${k}°, ${o}%, ${n}%`,r(v,"aria-description",`${b}: ${E}. ${p}: ${H}.`),r(v,"aria-valuetext",`${o}% & ${n}%`),r(v,"aria-valuenow",""+o),r(x,"aria-valuetext",k+"%"),r(x,"aria-valuenow",""+k)}else E="rgb"===h?`RGB: ${f}, ${m}, ${w}`:E,r(x,"aria-description",`${b}: ${E}. ${p}: ${H}.`),r(v,"aria-valuetext",`${P}% & ${S}%`),r(v,"aria-valuenow",""+P),r(x,"aria-valuetext",k+"°"),r(x,"aria-valuenow",""+k);const N=u(100*y);r($,"aria-valuetext",N+"%"),r($,"aria-valuenow",""+N);const L=n.toString();l(t.input,{backgroundColor:L}),t.isDark?(mt(s,"txt-light")&&vt(s,"txt-light"),mt(s,"txt-dark")||wt(s,"txt-dark")):(mt(s,"txt-dark")&&vt(s,"txt-dark"),mt(s,"txt-light")||wt(s,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this,{c1x:o,c1y:n,c2y:r,c3y:s}=e,[a,i,c]=t;l(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),l(i,{transform:`translate3d(0,${r-4}px,0)`}),l(c,{transform:`translate3d(0,${s-4}px,0)`})}updateInputs(t){const e=this,{value:o,format:n,inputs:r,color:s,hsl:a}=e,[i,l,c,h]=r,g=u(100*s.a),p=u(360*a.h);let d;if("hex"===n)d=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=u(100*a.l),o=u(100*a.s);d=e.color.toHslString(),i.value=""+p,l.value=""+o,c.value=""+t,h.value=""+g}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=u(100*t),r=u(100*o);d=e.color.toHwbString(),i.value=""+p,l.value=""+n,c.value=""+r,h.value=""+g}else if("rgb"===n){const{r:t,g:o,b:n}=e.rgb;d=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,h.value=""+g}e.value=""+d,t||d===o||Ct(e)}keyToggle(e){const o=this,{menuToggle:n}=o,{activeElement:r}=t(n),{code:s}=e;[q,J].includes(s)&&(n&&r===n||!r)&&(e.preventDefault(),r?o.toggleMenu():o.togglePicker(e))}togglePicker(t){t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&mt(o,"show")?e.hide(!0):Tt(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>mt(e,t))||Tt(t,e)}toggleMenu(){const t=this,{colorMenu:e}=t;t.isOpen&&mt(e,"show")?t.hide(!0):Tt(t,e)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:s,colorMenu:i,parent:l,input:c}=e,u=mt(s,"show"),h=u?s:i,g=u?o:n,p=h&&function(t){const e=a(t,"transitionProperty"),o=a(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(h);h&&(vt(h,"show"),r(g,"aria-expanded","false"),setTimeout(()=>{Mt(h),ut(".show",l)||(vt(l,"open"),Lt(e),e.isOpen=!1)},p)),e.isValid||(e.value=e.color.toString()),t||ft(o),r(c,"tabindex","-1"),n&&r(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Nt(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),xt(t,"tabindex"),l(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>vt(e,t)),dt.remove(t,"color-picker")}}o(Rt,{Color:U,ColorPalette:yt,Version:"0.0.1alpha3",getInstance:Ht,init:t=>new Rt(t),selector:'[data-function="color-picker"]',roundPart:u,setElementStyle:l,setAttribute:r,getBoundingClientRect:lt});let Dt=0;class Ft extends HTMLElement{constructor(){super(),this.isDisconnected=!0,this.attachShadow({mode:"open"})}get value(){return this.input?this.input.value:null}connectedCallback(){if(this.colorPicker)return void(this.isDisconnected&&(this.isDisconnected=!1));const o=(a="input",((i=this)&&e.some(t=>i instanceof t)?i:t()).getElementsByTagName(a));var a,i;if(!o.length){const t=s(this,"data-label"),e=s(this,"data-value")||"#069",o=s(this,"data-format")||"rgb",a=n({tagName:"input",type:"text",className:"color-preview btn-appearance"});let i=s(this,"data-id");i||(i=`color-picker-${o}-${Dt}`,Dt+=1);const l=n({tagName:"label",innerText:t||"Color Picker"});this.before(l),r(l,"for",i),r(a,"id",i),r(a,"name",i),r(a,"autocomplete","off"),r(a,"spellcheck","false"),r(a,"value",e),this.append(a)}const[l]=o;l&&(this.input=l,this.colorPicker=new Rt(l),this.color=this.colorPicker.color,this.shadowRoot&&this.shadowRoot.append(n("slot")),this.isDisconnected=!1)}disconnectedCallback(){this.colorPicker&&this.colorPicker.dispose(),this.isDisconnected=!0}}o(Ft,{Color:U,ColorPicker:Rt,ColorPalette:yt,getInstance:Ht,Version:"0.0.1alpha3"}),customElements.define("color-picker",Ft);export default Ft;
+// ColorPickerElement v0.0.1 | thednp © 2022 | MIT-License
+function t(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}const e=[Document,Element,HTMLElement];const o=(t,e)=>Object.assign(t,e);function n(e){if("string"==typeof e)return t().createElement(e);const{tagName:r}=e,s={...e},a=n(r);return delete s.tagName,o(a,s),a}const r=(t,e,o)=>t.setAttribute(e,o),s=(t,e)=>t.getAttribute(e);function a(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}const i=t=>Object.keys(t),l=(t,e)=>o(t.style,e),c=["transparent","currentColor","inherit","revert","initial"];function u(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const h=["rgb","hex","hsl","hsb","hwb"],g="deg|rad|grad|turn",p=`[-\\+]?\\d*\\.?\\d+(?:${g})?`,d="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",b=`(?:${d})|(?:${p})`,f=`[\\s|\\(]+(${b})[,|\\s]+(${d})[,|\\s]+(${d})[,|\\s|\\/\\s]*(${d})?\\s*\\)?`,m={CSS_UNIT:new RegExp(b),hwb:new RegExp("hwb"+f),rgb:new RegExp("rgb(?:a)?"+f),hsl:new RegExp("hsl(?:a)?"+f),hsv:new RegExp("hsv(?:a)?"+f),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function w(t){return(""+t).includes(".")&&1===parseFloat(t)}function v(t){return(""+t).includes("%")}function x(t){return Boolean(m.CSS_UNIT.exec(String(t)))}function $(t,e){let o=t;return w(o)&&(o="100%"),o=360===e?o:Math.min(e,Math.max(0,parseFloat(o))),function(t){return g.split("|").some(e=>(""+t).includes(e))}(t)&&(o=t.replace(new RegExp(g),"")),v(o)&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(o=360===e?(o<0?o%e+e:o%e)/parseFloat(String(e)):o%e/parseFloat(String(e)),o)}function k(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function y(t){return Math.min(1,Math.max(0,t))}function S(e){const o=t(n).head;var n;l(o,{color:e});const r=a(o,"color");return l(o,{color:""}),r}function P(t){return u(255*t).toString(16)}function A(t){return H(t)/255}function H(t){return parseInt(t,16)}function E(t){return 1===t.length?"0"+t:String(t)}function N(t,e,o){const n=t/255,r=e/255,s=o/255,a=Math.max(n,r,s),i=Math.min(n,r,s);let l=0,c=0;const u=(a+i)/2;if(a===i)c=0,l=0;else{const t=a-i;switch(c=u>.5?t/(2-a-i):t/(a+i),a){case n:l=(r-s)/t+(r<s?6:0);break;case r:l=(s-n)/t+2;break;case s:l=(n-r)/t+4}l/=6}return{h:l,s:c,l:u}}function L(t,e,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(e-t):n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function C(t,e,o){const n=t/255,r=e/255,s=o/255;let a=0,i=0;const l=Math.min(n,r,s),c=Math.max(n,r,s),u=1-c;if(c===l)return{h:0,w:l,b:u};n===l?(a=r-s,i=3):(a=r===l?s-n:n-r,i=r===l?5:1);const h=(i-a/(c-l))/6;return{h:1===h?0:h,w:l,b:u}}function M(t,e,o){if(e+o>=1){const t=e/(e+o)*255;return{r:t,g:t,b:t}}let{r:n,g:r,b:s}=T(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t/255*(1-e-o)+e).map(t=>255*t),{r:n,g:r,b:s}}function T(t,e,o){let n=0,r=0,s=0;if(0===e)r=o,s=o,n=o;else{const a=o<.5?o*(1+e):o+e-o*e,i=2*o-a;n=L(i,a,t+1/3),r=L(i,a,t),s=L(i,a,t-1/3)}return[n,r,s]=[n,r,s].map(t=>255*t),{r:n,g:r,b:s}}function R(t,e,o){const n=t/255,r=e/255,s=o/255,a=Math.max(n,r,s),i=Math.min(n,r,s);let l=0;const c=a,u=a-i,h=0===a?0:u/a;if(a===i)l=0;else{switch(a){case n:l=(r-s)/u+(r<s?6:0);break;case r:l=(s-n)/u+2;break;case s:l=(n-r)/u+4}l/=6}return{h:l,s:h,v:c}}function D(t,e,o){const n=6*t,r=e,s=o,a=Math.floor(n),i=n-a,l=s*(1-r),c=s*(1-i*r),u=s*(1-(1-i)*r),h=a%6;return{r:255*[s,c,l,l,u,s][h],g:255*[u,s,s,c,l,l][h],b:255*[l,l,u,s,s,c][h]}}function F(t,e,o,n){const r=[E(u(t).toString(16)),E(u(e).toString(16)),E(u(o).toString(16))];return n&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function O(t,e,o,n,r){const s=[E(u(t).toString(16)),E(u(e).toString(16)),E(u(o).toString(16)),E(P(n))];return r&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)&&s[3].charAt(0)===s[3].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0)+s[3].charAt(0):s.join("")}function K(t){return{r:t>>16,g:(65280&t)>>8,b:255&t}}function I(t){let e=t.trim().toLowerCase();if(0===e.length)return{r:0,g:0,b:0,a:0};let o=!1;if(function(t){return!["#",...h].some(e=>t.includes(e))&&!/[0-9]/.test(t)}(e))e=S(e),o=!0;else if(c.includes(e)){const t="transparent"===e,o=t?0:255;return{r:o,g:o,b:o,a:t?0:1,format:"rgb"}}let[,n,r,s,a]=m.rgb.exec(e)||[];return n&&r&&s?{r:n,g:r,b:s,a:void 0!==a?a:1,format:"rgb"}:([,n,r,s,a]=m.hsl.exec(e)||[],n&&r&&s?{h:n,s:r,l:s,a:void 0!==a?a:1,format:"hsl"}:([,n,r,s,a]=m.hsv.exec(e)||[],n&&r&&s?{h:n,s:r,v:s,a:void 0!==a?a:1,format:"hsv"}:([,n,r,s,a]=m.hwb.exec(e)||[],n&&r&&s?{h:n,w:r,b:s,a:void 0!==a?a:1,format:"hwb"}:([,n,r,s,a]=m.hex8.exec(e)||[],n&&r&&s&&a?{r:H(n),g:H(r),b:H(s),a:A(a),format:o?"rgb":"hex"}:([,n,r,s]=m.hex6.exec(e)||[],n&&r&&s?{r:H(n),g:H(r),b:H(s),format:o?"rgb":"hex"}:([,n,r,s,a]=m.hex4.exec(e)||[],n&&r&&s&&a?{r:H(n+n),g:H(r+r),b:H(s+s),a:A(a+a),format:o?"rgb":"hex"}:([,n,r,s]=m.hex3.exec(e)||[],!!(n&&r&&s)&&{r:H(n+n),g:H(r+r),b:H(s+s),format:o?"rgb":"hex"})))))))}function V(t){let e={r:0,g:0,b:0},o=t,n=1,r=null,s=null,a=null,i=null,l=null,c=null,u=null,h=null,g=!1,p="hex";return"string"==typeof t&&(o=I(t),o&&(g=!0)),"object"==typeof o&&(x(o.r)&&x(o.g)&&x(o.b)?(({r:u,g:h,b:l}=o),[u,h,l]=[u,h,l].map(t=>255*$(t,v(t)?100:255)),e={r:u,g:h,b:l},g=!0,p="rgb"):x(o.h)&&x(o.s)&&x(o.v)?(({h:c,s:r,v:s}=o),c="number"==typeof c?c:$(c,360),r="number"==typeof r?r:$(r,100),s="number"==typeof s?s:$(s,100),e=D(c,r,s),g=!0,p="hsv"):x(o.h)&&x(o.s)&&x(o.l)?(({h:c,s:r,l:a}=o),c="number"==typeof c?c:$(c,360),r="number"==typeof r?r:$(r,100),a="number"==typeof a?a:$(a,100),e=T(c,r,a),g=!0,p="hsl"):x(o.h)&&x(o.w)&&x(o.b)&&(({h:c,w:i,b:l}=o),c="number"==typeof c?c:$(c,360),i="number"==typeof i?i:$(i,100),l="number"==typeof l?l:$(l,100),e=M(c,i,l),g=!0,p="hwb"),x(o.a)&&(n=o.a,n=v(""+n)?$(n,100):n)),{ok:g,format:o.format||p,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:k(n)}}class U{constructor(t,e){let o=t;const n=e&&h.includes(e)?e:"rgb";o instanceof U&&(o=V(o)),"number"==typeof o&&(o=K(o));const{r:r,g:s,b:a,a:i,ok:l,format:c}=V(o);this.originalInput=o,this.r=r,this.g=s,this.b=a,this.a=i,this.ok=l,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:o}=this;let n=0,r=0,s=0;const a=t/255,i=e/255,l=o/255;return n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,r=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,s=l<=.03928?l/12.92:((l+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*s}get brightness(){const{r:t,g:e,b:o}=this;return(299*t+587*e+114*o)/1e3}toRgb(){const{r:t,g:e,b:o,a:n}=this;return{r:t,g:e,b:o,a:u(100*n)/100}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(u);return 1===n?`rgb(${r}, ${s}, ${a})`:`rgba(${r}, ${s}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(u);return`rgb(${r} ${s} ${a}${1===n?"":` / ${u(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?F(e,o,n,t):O(e,o,n,r,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return O(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:s,v:a}=R(t,e,o);return{h:r,s:s,v:a,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:s,l:a}=N(t,e,o);return{h:r,s:s,l:a,a:n}}toHslString(){let{h:t,s:e,l:o,a:n}=this.toHsl();return t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n)/100,1===n?`hsl(${t}, ${e}%, ${o}%)`:`hsla(${t}, ${e}%, ${o}%, ${n})`}toHslCSS4String(){let{h:t,s:e,l:o,a:n}=this.toHsl();t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${u(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=C(t,e,o);return{h:r,w:s,b:a,a:n}}toHwbString(){let{h:t,w:e,b:o,a:n}=this.toHwb();t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${u(n)}%`:""})`}setAlpha(t){return this.a=k(t),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=T(e,y(n+t/100),r);return o(this,{r:s,g:a,b:i}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=T(e,n,y(r+t/100));return o(this,{r:s,g:a,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=T(y((360*e+t)%360/360),n,r);return o(this,{r:s,g:a,b:i}),this}clone(){return new U(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}o(U,{ANGLES:g,CSS_ANGLE:p,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:d,CSS_UNIT2:b,PERMISSIVE_MATCH:f,matchers:m,isOnePointZero:w,isPercentage:v,isValidCSSUnit:x,pad2:E,clamp01:y,bound01:$,boundAlpha:k,getRGBFromName:S,convertHexToDecimal:A,convertDecimalToHex:P,rgbToHsl:N,rgbToHex:F,rgbToHsv:R,rgbToHwb:C,rgbaToHex:O,hslToRgb:T,hsvToRgb:D,hueToRgb:L,hwbToRgb:M,parseIntFromHex:H,numberInputToObject:K,stringInputToObject:I,inputToRGB:V,roundPart:u,ObjectAssign:o});const B={};function _(t){const e=this,{type:o}=t;(B[o]?[...B[o]]:[]).forEach(n=>{const[r,s]=n;[...s].forEach(n=>{if(r===e){const[e,s]=n;e.apply(r,[t]),s&&s.once&&j(r,o,e,s)}})})}const W=(t,e,o,n)=>{B[e]||(B[e]=new Map);const r=B[e];r.has(t)||r.set(t,new Map);const s=r.get(t),{size:a}=s;s&&s.set(o,n),a||t.addEventListener(e,_,n)},j=(t,e,o,n)=>{const r=B[e],s=r&&r.get(t),a=s&&s.get(o),{options:i}=void 0!==a?a:{options:n};s&&s.has(o)&&s.delete(o),!r||s&&s.size||r.delete(t),r&&r.size||delete B[e],s&&s.size||t.removeEventListener(e,_,i)},z="ArrowDown",G="ArrowUp",X="ArrowLeft",Y="ArrowRight",q="Enter",J="Space",{userAgentData:Z}=navigator,Q=Z,{userAgent:tt}=navigator,et=tt,ot=/iPhone|iPad|iPod|Android/i;let nt=!1;nt=Q?Q.brands.some(t=>ot.test(t.brand)):ot.test(et);const rt=nt;let st=0,at=0;const it=new Map;function lt(t,e){const{width:o,height:n,top:r,right:s,bottom:a,left:i}=t.getBoundingClientRect();let l=1,c=1;if(e&&t instanceof HTMLElement){const{offsetWidth:e,offsetHeight:r}=t;l=e>0&&Math.round(o)/e||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:s/l,bottom:a/c,left:i/l,x:i/l,y:r/c}}const ct=[Element,HTMLElement];function ut(o,n){const r=e.some(t=>n instanceof t)?n:t();return ct.some(t=>o instanceof t)?o:r.querySelector(o)}function ht(o,n){return(n&&e.some(t=>n instanceof t)?n:t()).getElementsByClassName(o)}function gt(e,n){if("string"==typeof n)return t().createElementNS(e,n);const{tagName:r}=n,s={...n},a=gt(e,r);return delete s.tagName,o(a,s),a}const pt=new Map,dt={set:(t,e,o)=>{const n=ut(t);if(!n)return;pt.has(e)||pt.set(e,new Map);pt.get(e).set(n,o)},getAllFor:t=>pt.get(t)||null,get:(t,e)=>{const o=ut(t),n=dt.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=ut(t),n=pt.get(e);n&&o&&(n.delete(o),0===n.size&&pt.delete(e))}};function bt(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const ft=t=>t.focus();function mt(t,e){return t.classList.contains(e)}function wt(t,e){t.classList.add(e)}function vt(t,e){t.classList.remove(e)}const xt=(t,e)=>t.removeAttribute(e),$t={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},kt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];class yt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else{if(2!==t.length)throw TypeError("ColorPalette requires minimum 2 arguments");[o,n]=t}const s=[],a=360/o,i=u((n-(n%2?1:0))/2),l=100/(n+(n%2?0:1))/100;let c=.25;c=[4,5].includes(n)?.2:c,c=[6,7].includes(n)?.15:c,c=[8,9].includes(n)?.11:c,c=[10,11].includes(n)?.09:c,c=[12,13].includes(n)?.075:c,c=n>13?l:c;for(let t=1;t<i+1;t+=1)r=[...r,.5+c*t];for(let t=1;t<n-i;t+=1)r=[.5-c*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new U({h:o,s:1,l:t}).toHexString())})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}function St(t,e,o){const{input:a,format:c,componentLabels:u}=t,{defaultsLabel:h,presetsLabel:g}=u,p="color-options"===o,d=e instanceof yt,b=p?g:h;let f=d?e.colors:e;f=f instanceof Array?f:[];const m=f.length,{lightSteps:w}=d?e:{lightSteps:null},v=w||[9,10].find(t=>m>2*t&&!(m%t))||5,x=p&&m>v;let $=2;$=x&&m>=2*v?3:$,$=m>=3*v?4:$,$=m>=4*v?5:$;const k=$-(m<3*v?1:2),y=x&&m>k*v;let S=o;S+=y?" scrollable":"",S+=x?" multiline":"";const P=x?"1px":"0.25rem";let A=x?1.75:2;A=v>5&&x?1.5:A;const H=(k||1)*A+"rem",E=`calc(${$} * ${A}rem + ${$-1} * ${P})`,N=n({tagName:"ul",className:S});var L,C;return r(N,"role","listbox"),r(N,"aria-label",b),y&&(L=N,i(C={"--grid-item-size":A+"rem","--grid-fit":v,"--grid-gap":P,"--grid-height":H,"--grid-hover-height":E}).forEach(t=>{L.style.setProperty(t,C[t])})),f.forEach(t=>{const[e,o]=t.trim().split(":"),i=new U(e,c).toString()===s(a,"value"),u=n({tagName:"li",className:"color-option"+(i?" active":""),innerText:""+(o||t)});r(u,"tabindex","0"),r(u,"data-value",""+e),r(u,"role","option"),r(u,"aria-selected",i?"true":"false"),p&&l(u,{backgroundColor:t}),N.append(u)}),N}function Pt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const At={componentLabels:$t,colorLabels:kt,format:"rgb",colorPresets:!1,colorKeywords:!1},Ht=t=>{return e=t,o="color-picker",dt.get(e,o);var e,o};function Et(t){const{input:e,parent:a,format:i,id:l,componentLabels:u,colorKeywords:h,colorPresets:g}=t,p=s(e,"value")||"#fff",{toggleLabel:d,pickerLabel:b,formatLabel:f,hexLabel:m}=u,w=c.includes(p)?"#fff":p;t.color=new U(w,i);const v=rt?" mobile":"",x="hex"===i?m:i.toUpperCase(),$=n({id:"picker-btn-"+l,tagName:"button",className:"picker-toggle btn-appearance"});r($,"aria-expanded","false"),r($,"aria-haspopup","true"),$.append(n({tagName:"span",className:"v-hidden",innerText:`${b}. ${f}: ${x}`}));const k=n({tagName:"div",className:"color-dropdown picker"+v});r(k,"aria-labelledby","picker-btn-"+l),r(k,"role","group");const y=function(t){const{format:e,componentLabels:o}=t,{hueLabel:s,alphaLabel:a,lightnessLabel:i,saturationLabel:l,whitenessLabel:c,blacknessLabel:u}=o,h="hsl"===e?360:100,g="hsl"===e?100:360;let p="hsl"===e?`${s} & ${i}`:`${i} & ${l}`;p="hwb"===e?`${c} & ${u}`:p;const d="hsl"===e?""+l:""+s,b=n({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:p,min:0,max:h},{i:2,c:"color-slider",l:d,min:0,max:g},{i:3,c:"color-slider",l:a,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:s,min:a,max:i}=t,l=n({tagName:"div",className:"color-control"});r(l,"role","presentation"),l.append(n({tagName:"div",className:"visual-control visual-control"+e}));const c=n({tagName:"div",className:o+" knob",ariaLive:"polite"});r(c,"aria-label",s),r(c,"role","slider"),r(c,"tabindex","0"),r(c,"aria-valuemin",""+a),r(c,"aria-valuemax",""+i),l.append(c),b.append(l)}),b}(t),S=function(t){const{format:e,id:s,componentLabels:a}=t,i=n({tagName:"div",className:"color-form "+e});let l=["hex"];return"rgb"===e?l=["red","green","blue","alpha"]:"hsl"===e?l=["hue","saturation","lightness","alpha"]:"hwb"===e&&(l=["hue","whiteness","blackness","alpha"]),l.forEach(t=>{const[l]="hex"===e?["#"]:(c=t,c.toUpperCase()).split("");var c;const u=`color_${e}_${t}_${s}`,h=a[t+"Label"],g=n({tagName:"label"});r(g,"for",u),g.append(n({tagName:"span",ariaHidden:"true",innerText:l+":"}),n({tagName:"span",className:"v-hidden",innerText:h}));const p=n({tagName:"input",id:u,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});r(p,"autocomplete","off"),r(p,"spellcheck","false");let d="100",b="1";"alpha"!==t&&("rgb"===e?(d="255",b="1"):"hue"===t&&(d="360",b="1")),o(p,{min:"0",max:d,step:b}),i.append(g,p)}),i}(t);if(k.append(y,S),e.before($),a.append(k),h||g){const e=n({tagName:"div",className:"color-dropdown scrollable menu"+v});if(g instanceof Array&&g.length||g instanceof yt&&g.colors){const o=St(t,g,"color-options");e.append(o)}if(h&&h.length){const o=St(t,h,"color-defaults");e.append(o)}const o=n({tagName:"button",className:"menu-toggle btn-appearance"});r(o,"tabindex","-1"),r(o,"aria-expanded","false"),r(o,"aria-haspopup","true");const s=encodeURI("http://www.w3.org/2000/svg"),i=gt(s,{tagName:"svg"});r(i,"xmlns",s),r(i,"viewBox","0 0 512 512"),r(i,"aria-hidden","true");const l=gt(s,{tagName:"path"});r(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),r(l,"fill","#fff"),i.append(l),o.append(n({tagName:"span",className:"v-hidden",innerText:""+d}),i),a.append(o,e)}h&&c.includes(p)&&(t.value=p),r(e,"tabindex","-1")}function Nt(t,e){const o=e?W:j,{input:n,pickerToggle:r,menuToggle:s}=t;o(n,"focusin",t.showPicker),o(r,"click",t.togglePicker),o(n,"keydown",t.keyToggle),s&&o(s,"click",t.toggleMenu)}function Lt(e,o){const n=o?W:j,{input:r,colorMenu:s,parent:a}=e,i=t(r),l=function(t){if(null==t)return window;if(!(t instanceof Window)){const{ownerDocument:e}=t;return e&&e.defaultView||window}return t}(r),c="ontouchstart"in i?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};n(e.controls,c.down,e.pointerDown),e.controlKnobs.forEach(t=>n(t,"keydown",e.handleKnobs)),n(l,"scroll",e.handleScroll),n(l,"resize",e.update),[r,...e.inputs].forEach(t=>n(t,"change",e.changeHandler)),s&&(n(s,"click",e.menuClickHandler),n(s,"keydown",e.menuKeyHandler)),n(i,c.move,e.pointerMove),n(i,c.up,e.pointerUp),n(a,"focusout",e.handleFocusOut),n(l,"keyup",e.handleDismiss)}function Ct(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Mt(t){t&&["bottom","top"].forEach(e=>vt(t,e))}function Tt(t,e){const{colorPicker:o,colorMenu:n,menuToggle:s,pickerToggle:a,parent:i}=t,l=e===o,c=l?n:o,u=l?s:a,h=l?a:s;mt(i,"open")||wt(i,"open"),c&&(vt(c,"show"),Mt(c)),wt(e,"bottom"),e.offsetHeight,wt(e,"show"),l&&t.update(),t.isOpen||(Lt(t,!0),t.updateDropdownPosition(),t.isOpen=!0,r(t.input,"tabindex","0"),s&&r(s,"tabindex","0")),r(h,"aria-expanded","true"),u&&r(u,"aria-expanded","false")}class Rt{constructor(t,e){const n=this,r=ut(t);if(!r)throw new TypeError(`ColorPicker target ${t} cannot be found.`);n.input=r;const a=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(r,".color-picker,color-picker");if(!a)throw new TypeError("ColorPicker requires a specific markup to work.");n.parent=a,n.id=function t(e,o){let n=o?st:at;if(o){const r=t(e),s=it.get(r)||new Map;it.has(r)||it.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),st+=1)}else{const t=e.id||e;it.has(t)?n=it.get(t):(it.set(t,n),at+=1)}return n}(r,"color-picker"),n.dragElement=null,n.isOpen=!1,n.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},n.colorLabels={},n.colorKeywords=void 0,n.colorPresets=void 0;const{format:l,componentLabels:c,colorLabels:u,colorKeywords:h,colorPresets:g}=function(t,e,o,n){const r={...t.dataset},a={},l={};return i(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>t.toLowerCase()):t;l[e]=bt(r[t])}),i(o).forEach(t=>{o[t]=bt(o[t])}),i(e).forEach(n=>{a[n]=n in o?o[n]:n in l?l[n]:"title"===n?s(t,"title"):e[n]}),a}(this.isCE?a:r,At,e||{});let p=kt;u instanceof Array&&17===u.length?p=u:u&&17===u.split(",").length&&(p=u.split(",")),kt.forEach((t,e)=>{n.colorLabels[t]=p[e].trim()});const d=o({},$t),b=c&&Pt(c)?JSON.parse(c):c||{};if(n.componentLabels=o(d,b),n.color=new U("white",l),n.format=l,h instanceof Array?n.colorKeywords=h:"string"==typeof h&&h.length&&(n.colorKeywords=h.split(",")),g instanceof Array)n.colorPresets=g;else if("string"==typeof g&&g.length)if(Pt(g)){const{hue:t,hueSteps:e,lightSteps:o}=JSON.parse(g);n.colorPresets=new yt(t,e,o)}else n.colorPresets=g.split(",").map(t=>t.trim());n.showPicker=n.showPicker.bind(n),n.togglePicker=n.togglePicker.bind(n),n.toggleMenu=n.toggleMenu.bind(n),n.menuClickHandler=n.menuClickHandler.bind(n),n.menuKeyHandler=n.menuKeyHandler.bind(n),n.pointerDown=n.pointerDown.bind(n),n.pointerMove=n.pointerMove.bind(n),n.pointerUp=n.pointerUp.bind(n),n.update=n.update.bind(n),n.handleScroll=n.handleScroll.bind(n),n.handleFocusOut=n.handleFocusOut.bind(n),n.changeHandler=n.changeHandler.bind(n),n.handleDismiss=n.handleDismiss.bind(n),n.keyToggle=n.keyToggle.bind(n),n.handleKnobs=n.handleKnobs.bind(n),Et(n);const[f,m]=ht("color-dropdown",a);n.pickerToggle=ut(".picker-toggle",a),n.menuToggle=ut(".menu-toggle",a),n.colorPicker=f,n.colorMenu=m,n.inputs=[...ht("color-input",a)];const[w]=ht("color-controls",a);n.controls=w,n.controlKnobs=[...ht("knob",w)],n.visuals=[...ht("visual-control",w)],n.update(),Nt(n,!0),dt.set(r,"color-picker",n)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>c.includes(t))}get isCE(){return"color-picker"===this.parent.localName}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return""!==t&&new U(t).isValid}updateVisuals(){const{format:t,controlPositions:e,visuals:o}=this,[n,r,s]=o,{offsetWidth:a,offsetHeight:i}=n,c="hsl"===t?e.c1x/a:e.c2y/i,{r:h,g:g,b:p}=U.hslToRgb(c,1,.5),d="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",b=1-e.c3y/i,f=u(100*b)/100;if("hsl"!==t){const t=new U({h:c,s:1,l:.5,a:b}).toRgbString(),e="linear-gradient(\n        rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,\n        rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,\n        rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,\n        rgb(255,0,0) 100%)";l(n,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${f}) 100%),\n        linear-gradient(to right, rgba(255,255,255,${f}) 0%, ${t} 100%),\n        ${d}`}),l(r,{background:e})}else{const t=u(e.c2y/i*100),o=new U({r:255,g:0,b:0,a:b}).saturate(-t).toRgbString(),s=new U({r:255,g:255,b:0,a:b}).saturate(-t).toRgbString(),a=new U({r:0,g:255,b:0,a:b}).saturate(-t).toRgbString(),c=new U({r:0,g:255,b:255,a:b}).saturate(-t).toRgbString(),m=new U({r:0,g:0,b:255,a:b}).saturate(-t).toRgbString(),w=new U({r:255,g:0,b:255,a:b}).saturate(-t).toRgbString(),v=new U({r:255,g:0,b:0,a:b}).saturate(-t).toRgbString();l(n,{background:`${`linear-gradient(rgba(255,255,255,${f}) 0%, rgba(255,255,255,0) 50%),\n        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${f}) 100%)`},${`linear-gradient(to right,\n        ${o} 0%, ${s} 16.67%, ${a} 33.33%, ${c} 50%,\n        ${m} 66.67%, ${w} 83.33%, ${v} 100%)`},${d}`});const{r:x,g:$,b:k}=new U({r:h,g:g,b:p}).greyscale().toRgb();l(r,{background:`linear-gradient(rgb(${h},${g},${p}) 0%, rgb(${x},${$},${k}) 100%)`})}l(s,{background:`linear-gradient(rgba(${h},${g},${p},1) 0%,rgba(${h},${g},${p},0) 100%)`})}handleFocusOut({relatedTarget:t}){t&&!this.parent.contains(t)&&this.hide(!0)}handleDismiss({code:t}){const e=this;e.isOpen&&"Escape"===t&&e.hide()}handleScroll(e){const{activeElement:o}=t(this.input);(rt&&this.dragElement||o&&this.controlKnobs.includes(o))&&(e.stopPropagation(),e.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:r,parentElement:s}=e,i=s&&mt(s,"color-options"),l=[...s.children],c=i&&a(s,"grid-template-columns").split(" ").length,u=l.indexOf(e),h=u>-1&&c&&l[u-c],g=u>-1&&c&&l[u+c];[z,G,J].includes(o)&&t.preventDefault(),i?h&&o===G?ft(h):g&&o===z?ft(g):n&&o===X?ft(n):r&&o===Y&&ft(r):n&&[X,G].includes(o)?ft(n):r&&[Y,z].includes(o)&&ft(r),[q,J].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:n}=t,{colorMenu:a}=e,i=(s(n,"data-value")||"").trim();if(!i.length)return;const l=ut("li.active",a);let u=c.includes(i)?"white":i;u="transparent"===i?"rgba(0,0,0,0)":i;const{r:h,g:g,b:p,a:d}=new U(u);o(e.color,{r:h,g:g,b:p,a:d}),e.update(),l!==n&&(l&&(vt(l,"active"),xt(l,"aria-selected")),wt(n,"active"),r(n,"aria-selected","true"),c.includes(i)&&(e.value=i),Ct(e))}pointerDown(t){const e=this,{type:o,target:n,touches:r,pageX:s,pageY:a}=t,{colorMenu:i,visuals:l,controlKnobs:c}=e,[u,h,g]=l,[p,d,b]=c,f=mt(n,"visual-control")?n:ut(".visual-control",n.parentElement),m=lt(f),w="touchstart"===o?r[0].pageX:s,v="touchstart"===o?r[0].pageY:a,x=w-window.pageXOffset-m.left,$=v-window.pageYOffset-m.top;if(n===u||n===p?(e.dragElement=f,e.changeControl1(x,$)):n===h||n===d?(e.dragElement=f,e.changeControl2($)):n!==g&&n!==b||(e.dragElement=f,e.changeAlpha($)),i){const t=ut("li.active",i);t&&(vt(t,"active"),xt(t,"aria-selected"))}t.preventDefault()}pointerUp({target:e}){const o=this,{parent:n}=o,r=t(n),s=null!==ut(".color-picker,color-picker.open",r),a=r.getSelection();o.dragElement||a.toString().length||n.contains(e)||o.hide(s),o.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{type:i,touches:l,pageX:c,pageY:u}=t;if(!o)return;const h=lt(o),g="touchmove"===i?l[0].pageX:c,p="touchmove"===i?l[0].pageY:u,d=g-window.pageXOffset-h.left,b=p-window.pageYOffset-h.top;o===r&&e.changeControl1(d,b),o===s&&e.changeControl2(b),o===a&&e.changeAlpha(b)}handleKnobs(e){const{target:o,code:n}=e,r=this;if(![G,z,X,Y].includes(n))return;e.preventDefault();const{format:s,controlKnobs:a,visuals:i}=r,{offsetWidth:l,offsetHeight:c}=i[0],[u,h,g]=a,{activeElement:p}=t(u),d=c/("hsl"===s?100:360);if(a.find(t=>t===p)){let t=0,a=0;if(o===u){const e=l/("hsl"===s?360:100);[X,Y].includes(n)?r.controlPositions.c1x+=n===Y?e:-e:[G,z].includes(n)&&(r.controlPositions.c1y+=n===z?d:-d),t=r.controlPositions.c1x,a=r.controlPositions.c1y,r.changeControl1(t,a)}else o===h?(r.controlPositions.c2y+=[z,Y].includes(n)?d:-d,a=r.controlPositions.c2y,r.changeControl2(a)):o===g&&(r.controlPositions.c3y+=[z,Y].includes(n)?d:-d,a=r.controlPositions.c3y,r.changeAlpha(a));r.handleScroll(e)}}changeHandler(){const e=this;let n;const{inputs:r,format:s,value:a,input:i,controlPositions:l,visuals:u}=e,{activeElement:h}=t(i),{offsetHeight:g}=u[0],[p,,,d]=r,[b,f,m,w]="rgb"===s?r.map(t=>parseFloat(t.value)/(t===d?100:1)):r.map(t=>parseFloat(t.value)/(t!==p?100:360)),v=e.hasNonColor&&c.includes(a),x=d?w:1-l.c3y/g;if(h===i||h&&r.includes(h)){n=h===i?v?"white":a:"hex"===s?p.value:"hsl"===s?{h:b,s:f,l:m,a:x}:"hwb"===s?{h:b,w:f,b:m,a:x}:{r:b,g:f,b:m,a:x};const{r:t,g:r,b:l,a:c}=new U(n);o(e.color,{r:t,g:r,b:l,a:c}),e.setControlPositions(),e.updateAppearance(),e.updateInputs(),e.updateControls(),e.updateVisuals(),h===i&&v&&(e.value=a)}}changeControl1(t,e){let[n,r]=[0,0];const{format:s,controlPositions:a,visuals:i}=this,{offsetHeight:l,offsetWidth:c}=i[0];t>c?n=c:t>=0&&(n=t),e>l?r=l:e>=0&&(r=e);const u="hsl"===s?n/c:a.c2y/l,h="hsl"===s?1-a.c2y/l:n/c,g=1-r/l,p=1-a.c3y/l,d="hsl"===s?{h:u,s:h,l:g,a:p}:{h:u,s:h,v:g,a:p},{r:b,g:f,b:m,a:w}=new U(d);o(this.color,{r:b,g:f,b:m,a:w}),this.controlPositions.c1x=n,this.controlPositions.c1y=r,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{format:e,controlPositions:n,visuals:r}=this,{offsetHeight:s,offsetWidth:a}=r[0];let i=0;t>s?i=s:t>=0&&(i=t);const l="hsl"===e?n.c1x/a:i/s,c="hsl"===e?1-i/s:n.c1x/a,u=1-n.c1y/s,h=1-n.c3y/s,g="hsl"===e?{h:l,s:c,l:u,a:h}:{h:l,s:c,v:u,a:h},{r:p,g:d,b:b,a:f}=new U(g);o(this.color,{r:p,g:d,b:b,a:f}),this.controlPositions.c2y=i,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(t){const{visuals:e}=this,{offsetHeight:o}=e[0];let n=0;t>o?n=o:t>=0&&(n=t);const r=1-n/o;this.color.setAlpha(r),this.controlPositions.c3y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}update(){this.updateDropdownPosition(),this.updateAppearance(),this.setControlPositions(),this.updateInputs(!0),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:e,colorPicker:o,colorMenu:n}=this,r=lt(e),{top:s,bottom:a}=r,{offsetHeight:i}=e,l=(c=e,t(c).documentElement).clientHeight;var c;const u=mt(o,"show")?o:n;if(!u)return;const{offsetHeight:h}=u,g=l-a,p=s,d=s+h+i>l,b=s-h<0;(mt(u,"bottom")||!b)&&g<p&&d?(vt(u,"bottom"),wt(u,"top")):(vt(u,"top"),wt(u,"bottom"))}setControlPositions(){const{format:t,visuals:e,color:o,hsl:n,hsv:r}=this,{offsetHeight:s,offsetWidth:a}=e[0],i=o.a,l=n.h,c="hsl"!==t?r.s:n.s,u="hsl"!==t?r.v:n.l;this.controlPositions.c1x="hsl"!==t?c*a:l*a,this.controlPositions.c1y=(1-u)*s,this.controlPositions.c2y="hsl"!==t?l*s:(1-c)*s,this.controlPositions.c3y=(1-i)*s}updateAppearance(){const t=this,{componentLabels:e,colorLabels:o,color:n,parent:s,hsl:a,hsv:i,hex:c,format:h,controlKnobs:g}=t,{appearanceLabel:p,hexLabel:d,valueLabel:b}=e,{r:f,g:m,b:w}=n.toRgb(),[v,x,$]=g,k=u(360*a.h),y=n.a,S=u(100*("hsl"===h?a.s:i.s)),P=u(100*a.l),A=100*i.v;let H;if(100===P&&0===S)H=o.white;else if(0===P)H=o.black;else if(0===S)H=o.grey;else if(k<15||k>=345)H=o.red;else if(k>=15&&k<45)H=A>80&&S>80?o.orange:o.brown;else if(k>=45&&k<75){const t=k>=54&&k<75&&A<80;H=k>46&&k<54&&A<80&&S>90?o.gold:o.yellow,H=t?o.olive:H}else k>=75&&k<155?H=A<68?o.green:o.lime:k>=155&&k<175?H=o.teal:k>=175&&k<195?H=o.cyan:k>=195&&k<255?H=o.blue:k>=255&&k<270?H=o.violet:k>=270&&k<295?H=o.magenta:k>=295&&k<345&&(H=o.pink);let E=`${d} ${c.split("").join(" ")}`;if("hsl"===h)E=`HSL: ${k}°, ${S}%, ${P}%`,r(v,"aria-description",`${b}: ${E}. ${p}: ${H}.`),r(v,"aria-valuetext",`${k}° & ${P}%`),r(v,"aria-valuenow",""+k),r(x,"aria-valuetext",S+"%"),r(x,"aria-valuenow",""+S);else if("hwb"===h){const{hwb:e}=t,o=u(100*e.w),n=u(100*e.b);E=`HWB: ${k}°, ${o}%, ${n}%`,r(v,"aria-description",`${b}: ${E}. ${p}: ${H}.`),r(v,"aria-valuetext",`${o}% & ${n}%`),r(v,"aria-valuenow",""+o),r(x,"aria-valuetext",k+"%"),r(x,"aria-valuenow",""+k)}else E="rgb"===h?`RGB: ${f}, ${m}, ${w}`:E,r(x,"aria-description",`${b}: ${E}. ${p}: ${H}.`),r(v,"aria-valuetext",`${P}% & ${S}%`),r(v,"aria-valuenow",""+P),r(x,"aria-valuetext",k+"°"),r(x,"aria-valuenow",""+k);const N=u(100*y);r($,"aria-valuetext",N+"%"),r($,"aria-valuenow",""+N);const L=n.toString();l(t.input,{backgroundColor:L}),t.isDark?(mt(s,"txt-light")&&vt(s,"txt-light"),mt(s,"txt-dark")||wt(s,"txt-dark")):(mt(s,"txt-dark")&&vt(s,"txt-dark"),mt(s,"txt-light")||wt(s,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:o,c1y:n,c2y:r,c3y:s}=e;const[a,i,c]=t;[o,n,r,s]=[o,n,r,s].map(u),l(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),l(i,{transform:`translate3d(0,${r-4}px,0)`}),l(c,{transform:`translate3d(0,${s-4}px,0)`})}updateInputs(t){const e=this,{value:o,format:n,inputs:r,color:s,hsl:a}=e,[i,l,c,h]=r,g=u(100*s.a),p=u(360*a.h);let d;if("hex"===n)d=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=u(100*a.l),o=u(100*a.s);d=e.color.toHslString(),i.value=""+p,l.value=""+o,c.value=""+t,h.value=""+g}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=u(100*t),r=u(100*o);d=e.color.toHwbString(),i.value=""+p,l.value=""+n,c.value=""+r,h.value=""+g}else if("rgb"===n){let{r:t,g:o,b:n}=e.rgb;[t,o,n]=[t,o,n].map(u),d=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,h.value=""+g}e.value=""+d,t||d===o||Ct(e)}keyToggle(e){const o=this,{menuToggle:n}=o,{activeElement:r}=t(n),{code:s}=e;[q,J].includes(s)&&(n&&r===n||!r)&&(e.preventDefault(),r?o.toggleMenu():o.togglePicker(e))}togglePicker(t){t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&mt(o,"show")?e.hide(!0):Tt(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>mt(e,t))||Tt(t,e)}toggleMenu(){const t=this,{colorMenu:e}=t;t.isOpen&&mt(e,"show")?t.hide(!0):Tt(t,e)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:s,colorMenu:i,parent:l,input:c}=e,u=mt(s,"show"),h=u?s:i,g=u?o:n,p=h&&function(t){const e=a(t,"transitionProperty"),o=a(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(h);h&&(vt(h,"show"),r(g,"aria-expanded","false"),setTimeout(()=>{Mt(h),ut(".show",l)||(vt(l,"open"),Lt(e),e.isOpen=!1)},p)),e.isValid||(e.value=e.color.toString()),t||ft(o),r(c,"tabindex","-1"),n&&r(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Nt(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),xt(t,"tabindex"),l(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>vt(e,t)),dt.remove(t,"color-picker")}}o(Rt,{Color:U,ColorPalette:yt,Version:"0.0.1",getInstance:Ht,init:t=>new Rt(t),selector:'[data-function="color-picker"]',roundPart:u,setElementStyle:l,setAttribute:r,getBoundingClientRect:lt});let Dt=0;class Ft extends HTMLElement{constructor(){super(),this.isDisconnected=!0,this.attachShadow({mode:"open"})}get value(){return this.input?this.input.value:null}connectedCallback(){if(this.colorPicker)return void(this.isDisconnected&&(this.isDisconnected=!1));const o=(a="input",((i=this)&&e.some(t=>i instanceof t)?i:t()).getElementsByTagName(a));var a,i;if(!o.length){const t=s(this,"data-label"),e=s(this,"data-value")||"#069",o=s(this,"data-format")||"rgb",a=n({tagName:"input",type:"text",className:"color-preview btn-appearance"});let i=s(this,"data-id");i||(i=`color-picker-${o}-${Dt}`,Dt+=1);const l=n({tagName:"label",innerText:t||"Color Picker"});this.before(l),r(l,"for",i),r(a,"id",i),r(a,"name",i),r(a,"autocomplete","off"),r(a,"spellcheck","false"),r(a,"value",e),this.append(a)}const[l]=o;l&&(this.input=l,this.colorPicker=new Rt(l),this.color=this.colorPicker.color,this.shadowRoot&&this.shadowRoot.append(n("slot")),this.isDisconnected=!1)}disconnectedCallback(){this.colorPicker&&this.colorPicker.dispose(),this.isDisconnected=!0}}o(Ft,{Color:U,ColorPicker:Rt,ColorPalette:yt,getInstance:Ht,Version:"0.0.1"}),customElements.define("color-picker",Ft);export default Ft;

package/dist/js/color-picker-element.js

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.1alpha3 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -769,9 +769,9 @@
     if (typeof color === 'object') {
       if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
         ({ r, g, b } = color);
-        [r, g, b] = [...[r, g, b]]
-          .map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255).map(roundPart);
-        rgb = { r, g, b }; // RGB values now are all in [0, 255] range
+        // RGB values now are all in [0, 255] range
+        [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255);
+        rgb = { r, g, b };
         ok = true;
         format = 'rgb';
       } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
@@ -926,13 +926,9 @@
       const {
         r, g, b, a,
       } = this;
-      const [R, G, B] = [r, g, b].map((x) => roundPart(x));
 
       return {
-        r: R,
-        g: G,
-        b: B,
-        a: roundPart(a * 100) / 100,
+        r, g, b, a: roundPart(a * 100) / 100,
       };
     }
 
@@ -946,10 +942,11 @@
       const {
         r, g, b, a,
       } = this.toRgb();
+      const [R, G, B] = [r, g, b].map(roundPart);
 
       return a === 1
-        ? `rgb(${r}, ${g}, ${b})`
-        : `rgba(${r}, ${g}, ${b}, ${a})`;
+        ? `rgb(${R}, ${G}, ${B})`
+        : `rgba(${R}, ${G}, ${B}, ${a})`;
     }
 
     /**
@@ -962,9 +959,10 @@
       const {
         r, g, b, a,
       } = this.toRgb();
+      const [R, G, B] = [r, g, b].map(roundPart);
       const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
 
-      return `rgb(${r} ${g} ${b}${A})`;
+      return `rgb(${R} ${G} ${B}${A})`;
     }
 
     /**
@@ -2381,7 +2379,7 @@
     return true;
   }
 
-  var version = "0.0.1alpha3";
+  var version = "0.0.1";
 
   // @ts-ignore
 
@@ -3152,30 +3150,41 @@
       if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
       e.preventDefault();
 
-      const { controlKnobs } = self;
+      const { format, controlKnobs, visuals } = self;
+      const { offsetWidth, offsetHeight } = visuals[0];
       const [c1, c2, c3] = controlKnobs;
       const { activeElement } = getDocument(c1);
       const currentKnob = controlKnobs.find((x) => x === activeElement);
+      const yRatio = offsetHeight / (format === 'hsl' ? 100 : 360);
 
       if (currentKnob) {
         let offsetX = 0;
         let offsetY = 0;
+
         if (target === c1) {
+          const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
+
           if ([keyArrowLeft, keyArrowRight].includes(code)) {
-            self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+            self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
           } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-            self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+            self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
           }
 
           offsetX = self.controlPositions.c1x;
           offsetY = self.controlPositions.c1y;
           self.changeControl1(offsetX, offsetY);
         } else if (target === c2) {
-          self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+          self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
+            ? yRatio
+            : -yRatio;
+
           offsetY = self.controlPositions.c2y;
           self.changeControl2(offsetY);
         } else if (target === c3) {
-          self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+          self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+            ? yRatio
+            : -yRatio;
+
           offsetY = self.controlPositions.c3y;
           self.changeAlpha(offsetY);
         }
@@ -3547,10 +3556,12 @@
     /** Updates the control knobs actual positions. */
     updateControls() {
       const { controlKnobs, controlPositions } = this;
-      const {
+      let {
         c1x, c1y, c2y, c3y,
       } = controlPositions;
       const [control1, control2, control3] = controlKnobs;
+      // round control positions
+      [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
 
       setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
       setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
@@ -3593,7 +3604,8 @@
         i3.value = `${blackness}`;
         i4.value = `${alpha}`;
       } else if (format === 'rgb') {
-        const { r, g, b } = self.rgb;
+        let { r, g, b } = self.rgb;
+        [r, g, b] = [r, g, b].map(roundPart);
 
         newColor = self.color.toRgbString();
         i1.value = `${r}`;