toolcool-color-picker - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

dist/toolcool-color-picker.min.js

@@ -1,3 +0,3 @@
-// Tool Cool Picker v1.0.12, MIT License - https://github.com/toolcool-org/toolcool-color-picker
-(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function _(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function B(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function U(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=U(a,s,o+1/3),r=U(a,s,o),n=U(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function N(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:break}n/=6}return{h:n,s:d,v:s}}function lt(o,e,t){o=u(o,360)*6,e=u(e,100),t=u(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),a=t*(1-(1-r)*e),d=i%6,E=[t,s,n,n,a,t][d],x=[a,t,t,s,n,n][d],R=[n,n,a,t,t,s][d];return{r:E*255,g:x*255,b:R*255}}function K(o,e,t,i){var r=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function dt(o,e,t,i,r){var n=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16)),C(Rt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Rt(o){return Math.round(parseFloat(o)*255).toString(16)}function V(o){return g(o)/255}function g(o){return parseInt(o,16)}function ut(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var A={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ct(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,a=!1;return typeof o=="string"&&(o=Pt(o)),typeof o=="object"&&(w(o.r)&&w(o.g)&&w(o.b)?(e=at(o.r,o.g,o.b),s=!0,a=String(o.r).substr(-1)==="%"?"prgb":"rgb"):w(o.h)&&w(o.s)&&w(o.v)?(i=L(o.s),r=L(o.v),e=lt(o.h,i,r),s=!0,a="hsv"):w(o.h)&&w(o.s)&&w(o.l)&&(i=L(o.s),n=L(o.l),e=ht(o.h,i,n),s=!0,a="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=_(t),{ok:s,format:o.format||a,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:t}}var Dt="[-\\+]?\\d+%?",_t="[-\\+]?\\d*\\.\\d+%?",y="(?:".concat(_t,")|(?:").concat(Dt,")"),G="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),F="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),v={CSS_UNIT:new RegExp(y),rgb:new RegExp("rgb"+G),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+G),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+G),hsva:new RegExp("hsva"+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 Pt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(A[o])o=A[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:V(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:V(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function w(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=ut(e)),this.originalInput=e;var r=ct(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,a=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),a<=.03928?r=a/12.92:r=Math.pow((a+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=_(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=N(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=N(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=B(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=B(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),K(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),dt(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(u(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(u(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+K(this.r,this.g,this.b,!1),t=0,i=Object.entries(A);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=k(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=k(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=k(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=k(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],a=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+a)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var $=()=>Math.random().toString(16).slice(2),P=o=>Math.round((o+Number.EPSILON)*100)/100;var H=.01,q=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),X=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},S=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${P(e.a)})`},pt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${P(e.a)})`},gt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${P(e.a)})`},j=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),W=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),T=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},I=o=>360*o/100,O=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ft=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},c=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var z=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$saturation");h(this,"$color");h(this,"$pointer");h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=W(this.saturation),this.$pointer.style.top=j(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${q(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let a=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,d=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,E=Math.min(Math.max(0,a-n),i),x=Math.min(Math.max(0,d-s),r);this.saturation=E/i,this.value=1-x/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-H),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+H),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+H),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-H),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){var s,a,d,E,x;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let i=c(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=j(this.value),n=W(this.saturation);this.shadowRoot.innerHTML=`
+// Tool Cool Picker v1.0.13, MIT License - https://github.com/toolcool-org/toolcool-color-picker
+(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function P(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function U(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function O(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=O(a,s,o+1/3),r=O(a,s,o),n=O(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function K(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:break}n/=6}return{h:n,s:d,v:s}}function lt(o,e,t){o=u(o,360)*6,e=u(e,100),t=u(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),a=t*(1-(1-r)*e),d=i%6,w=[t,s,n,n,a,t][d],x=[a,t,t,s,n,n][d],R=[n,n,a,t,t,s][d];return{r:w*255,g:x*255,b:R*255}}function N(o,e,t,i){var r=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function dt(o,e,t,i,r){var n=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16)),C(Rt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Rt(o){return Math.round(parseFloat(o)*255).toString(16)}function V(o){return g(o)/255}function g(o){return parseInt(o,16)}function ut(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var A={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ct(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,a=!1;return typeof o=="string"&&(o=Bt(o)),typeof o=="object"&&(E(o.r)&&E(o.g)&&E(o.b)?(e=at(o.r,o.g,o.b),s=!0,a=String(o.r).substr(-1)==="%"?"prgb":"rgb"):E(o.h)&&E(o.s)&&E(o.v)?(i=L(o.s),r=L(o.v),e=lt(o.h,i,r),s=!0,a="hsv"):E(o.h)&&E(o.s)&&E(o.l)&&(i=L(o.s),n=L(o.l),e=ht(o.h,i,n),s=!0,a="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=P(t),{ok:s,format:o.format||a,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:t}}var Dt="[-\\+]?\\d+%?",Pt="[-\\+]?\\d*\\.\\d+%?",y="(?:".concat(Pt,")|(?:").concat(Dt,")"),G="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),F="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),v={CSS_UNIT:new RegExp(y),rgb:new RegExp("rgb"+G),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+G),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+G),hsva:new RegExp("hsva"+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 Bt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(A[o])o=A[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:V(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:V(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function E(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=ut(e)),this.originalInput=e;var r=ct(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,a=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),a<=.03928?r=a/12.92:r=Math.pow((a+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=P(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=K(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=K(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),N(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),dt(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(u(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(u(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+N(this.r,this.g,this.b,!1),t=0,i=Object.entries(A);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=k(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=k(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=k(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=k(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],a=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+a)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var $=()=>Math.random().toString(16).slice(2),B=o=>Math.round((o+Number.EPSILON)*100)/100;var H=.01,q=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),z=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},S=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${B(e.a)})`},pt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${B(e.a)})`},gt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${B(e.a)})`},W=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),X=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),T=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},_=o=>360*o/100,I=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ft=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},c=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var j=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$saturation");h(this,"$color");h(this,"$pointer");h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=X(this.saturation),this.$pointer.style.top=W(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${q(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let a=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,d=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,w=Math.min(Math.max(0,a-n),i),x=Math.min(Math.max(0,d-s),r);this.saturation=w/i,this.value=1-x/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-H),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+H),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+H),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-H),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){var s,a,d,w,x;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let i=c(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=W(this.value),n=X(this.saturation);this.shadowRoot.innerHTML=`
            <style>${rt}</style>
@@ -15,3 +15,3 @@ <div class="saturation">
            </div>
-        `,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(E=this.$saturation)==null||E.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=z;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=I(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=I(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=I(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
+        `,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(w=this.$saturation)==null||w.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=j;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=_(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=_(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=_(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
            <style>${vt}</style>
@@ -31,8 +31,8 @@ <div class="hue">
            </div>
-        `,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var Et=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=X(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
-           <style>${Et}</style>
+        `,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var wt=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=z(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
+           <style>${wt}</style>
            <div class="alpha">
                 <div class="box">
                     <div class="transparent-bg box"></div>
-                    <div class="color-bg box" style="background: ${X(t)}"></div>
+                    <div class="color-bg box" style="background: ${z(t)}"></div>
                     
@@ -46,4 +46,4 @@ <div class="pointer box">
            </div>
-        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var wt=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
-           <style>${wt}</style>
+        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
+           <style>${Et}</style>
            <div class="fields">
@@ -70,5 +70,7 @@ <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />
            </div>
-        `,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let E=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");E&&E.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,nt(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}connectedCallback(){var t,i,r;!this.shadowRoot||(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
-            <style>${ot}</style>
-            <div class="color-picker">
+        `,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let w=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");w&&w.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var Ut={sm:"0.875rem",md:"1.2rem",lg:"1.5rem",xl:"2.25rem","2xl":"3rem","3xl":"3.75rem","4xl":"4.5rem"},tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000"),buttonWidth:null,buttonHeight:null,buttonPadding:null});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.formatButtonSize=this.formatButtonSize.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position","button-width","button-height","button-padding"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),(r==="buttonWidth"||r==="buttonHeight"||r==="buttonPadding")&&t.setButtonSize(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}setButtonSize(){!this.$button||(this.state.buttonWidth&&(this.$button.style.width=this.formatButtonSize(this.state.buttonWidth)),this.state.buttonHeight&&(this.$button.style.height=this.formatButtonSize(this.state.buttonHeight)),this.state.buttonPadding&&(this.$button.style.padding=this.state.buttonPadding))}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,nt(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}formatButtonSize(t){var i;return(i=Ut[t])!=null?i:t}connectedCallback(){var t,i,r;!this.shadowRoot||(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.state.buttonWidth=this.getAttribute("button-width"),this.state.buttonHeight=this.getAttribute("button-height"),this.state.buttonPadding=this.getAttribute("button-padding"),this.shadowRoot.innerHTML=`
+            <style>
+                ${ot} 
+            </style>
+            <div class="color-picker" >
                 <button
@@ -79,6 +81,6 @@ type="button"
                     title="Select Color">
-                    <span class="button-color" style="background: ${S(this.state.color)}"></span>
+                    <span class="button-color" style="background: ${S(this.state.color)};"></span>
                 </button>
                 <div data-popup-box></div>
             </div>
-        `,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();
+        `,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),this.setButtonSize(),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange()),t==="button-width"&&(this.state.buttonWidth=this.getAttribute("button-width"),this.setButtonSize()),t==="button-height"&&(this.state.buttonHeight=this.getAttribute("button-height"),this.setButtonSize()),t==="button-padding"&&(this.state.buttonPadding=this.getAttribute("button-padding"),this.setButtonSize())}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();

examples/js/toolcool-color-picker.min.js

@@ -1,3 +0,3 @@
-// Tool Cool Picker v1.0.12, MIT License - https://github.com/toolcool-org/toolcool-color-picker
-(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function _(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function B(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function U(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=U(a,s,o+1/3),r=U(a,s,o),n=U(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function N(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:break}n/=6}return{h:n,s:d,v:s}}function lt(o,e,t){o=u(o,360)*6,e=u(e,100),t=u(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),a=t*(1-(1-r)*e),d=i%6,E=[t,s,n,n,a,t][d],x=[a,t,t,s,n,n][d],R=[n,n,a,t,t,s][d];return{r:E*255,g:x*255,b:R*255}}function K(o,e,t,i){var r=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function dt(o,e,t,i,r){var n=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16)),C(Rt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Rt(o){return Math.round(parseFloat(o)*255).toString(16)}function V(o){return g(o)/255}function g(o){return parseInt(o,16)}function ut(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var A={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ct(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,a=!1;return typeof o=="string"&&(o=Pt(o)),typeof o=="object"&&(w(o.r)&&w(o.g)&&w(o.b)?(e=at(o.r,o.g,o.b),s=!0,a=String(o.r).substr(-1)==="%"?"prgb":"rgb"):w(o.h)&&w(o.s)&&w(o.v)?(i=L(o.s),r=L(o.v),e=lt(o.h,i,r),s=!0,a="hsv"):w(o.h)&&w(o.s)&&w(o.l)&&(i=L(o.s),n=L(o.l),e=ht(o.h,i,n),s=!0,a="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=_(t),{ok:s,format:o.format||a,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:t}}var Dt="[-\\+]?\\d+%?",_t="[-\\+]?\\d*\\.\\d+%?",y="(?:".concat(_t,")|(?:").concat(Dt,")"),G="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),F="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),v={CSS_UNIT:new RegExp(y),rgb:new RegExp("rgb"+G),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+G),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+G),hsva:new RegExp("hsva"+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 Pt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(A[o])o=A[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:V(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:V(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function w(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=ut(e)),this.originalInput=e;var r=ct(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,a=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),a<=.03928?r=a/12.92:r=Math.pow((a+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=_(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=N(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=N(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=B(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=B(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),K(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),dt(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(u(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(u(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+K(this.r,this.g,this.b,!1),t=0,i=Object.entries(A);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=k(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=k(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=k(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=k(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],a=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+a)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var $=()=>Math.random().toString(16).slice(2),P=o=>Math.round((o+Number.EPSILON)*100)/100;var H=.01,q=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),X=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},S=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${P(e.a)})`},pt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${P(e.a)})`},gt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${P(e.a)})`},j=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),W=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),T=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},I=o=>360*o/100,O=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ft=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},c=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var z=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$saturation");h(this,"$color");h(this,"$pointer");h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=W(this.saturation),this.$pointer.style.top=j(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${q(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let a=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,d=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,E=Math.min(Math.max(0,a-n),i),x=Math.min(Math.max(0,d-s),r);this.saturation=E/i,this.value=1-x/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-H),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+H),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+H),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-H),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){var s,a,d,E,x;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let i=c(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=j(this.value),n=W(this.saturation);this.shadowRoot.innerHTML=`
+// Tool Cool Picker v1.0.13, MIT License - https://github.com/toolcool-org/toolcool-color-picker
+(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function P(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function U(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function O(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=O(a,s,o+1/3),r=O(a,s,o),n=O(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function K(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:break}n/=6}return{h:n,s:d,v:s}}function lt(o,e,t){o=u(o,360)*6,e=u(e,100),t=u(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),a=t*(1-(1-r)*e),d=i%6,w=[t,s,n,n,a,t][d],x=[a,t,t,s,n,n][d],R=[n,n,a,t,t,s][d];return{r:w*255,g:x*255,b:R*255}}function N(o,e,t,i){var r=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function dt(o,e,t,i,r){var n=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16)),C(Rt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Rt(o){return Math.round(parseFloat(o)*255).toString(16)}function V(o){return g(o)/255}function g(o){return parseInt(o,16)}function ut(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var A={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ct(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,a=!1;return typeof o=="string"&&(o=Bt(o)),typeof o=="object"&&(E(o.r)&&E(o.g)&&E(o.b)?(e=at(o.r,o.g,o.b),s=!0,a=String(o.r).substr(-1)==="%"?"prgb":"rgb"):E(o.h)&&E(o.s)&&E(o.v)?(i=L(o.s),r=L(o.v),e=lt(o.h,i,r),s=!0,a="hsv"):E(o.h)&&E(o.s)&&E(o.l)&&(i=L(o.s),n=L(o.l),e=ht(o.h,i,n),s=!0,a="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=P(t),{ok:s,format:o.format||a,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:t}}var Dt="[-\\+]?\\d+%?",Pt="[-\\+]?\\d*\\.\\d+%?",y="(?:".concat(Pt,")|(?:").concat(Dt,")"),G="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),F="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),v={CSS_UNIT:new RegExp(y),rgb:new RegExp("rgb"+G),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+G),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+G),hsva:new RegExp("hsva"+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 Bt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(A[o])o=A[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:V(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:V(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function E(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=ut(e)),this.originalInput=e;var r=ct(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,a=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),a<=.03928?r=a/12.92:r=Math.pow((a+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=P(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=K(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=K(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),N(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),dt(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(u(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(u(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+N(this.r,this.g,this.b,!1),t=0,i=Object.entries(A);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=k(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=k(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=k(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=k(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],a=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+a)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var $=()=>Math.random().toString(16).slice(2),B=o=>Math.round((o+Number.EPSILON)*100)/100;var H=.01,q=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),z=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},S=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${B(e.a)})`},pt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${B(e.a)})`},gt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${B(e.a)})`},W=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),X=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),T=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},_=o=>360*o/100,I=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ft=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},c=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var j=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$saturation");h(this,"$color");h(this,"$pointer");h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=X(this.saturation),this.$pointer.style.top=W(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${q(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let a=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,d=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,w=Math.min(Math.max(0,a-n),i),x=Math.min(Math.max(0,d-s),r);this.saturation=w/i,this.value=1-x/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-H),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+H),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+H),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-H),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){var s,a,d,w,x;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let i=c(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=W(this.value),n=X(this.saturation);this.shadowRoot.innerHTML=`
            <style>${rt}</style>
@@ -15,3 +15,3 @@ <div class="saturation">
            </div>
-        `,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(E=this.$saturation)==null||E.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=z;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=I(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=I(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=I(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
+        `,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(w=this.$saturation)==null||w.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=j;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=_(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=_(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=_(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
            <style>${vt}</style>
@@ -31,8 +31,8 @@ <div class="hue">
            </div>
-        `,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var Et=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=X(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
-           <style>${Et}</style>
+        `,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var wt=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=z(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
+           <style>${wt}</style>
            <div class="alpha">
                 <div class="box">
                     <div class="transparent-bg box"></div>
-                    <div class="color-bg box" style="background: ${X(t)}"></div>
+                    <div class="color-bg box" style="background: ${z(t)}"></div>
                     
@@ -46,4 +46,4 @@ <div class="pointer box">
            </div>
-        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var wt=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
-           <style>${wt}</style>
+        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
+           <style>${Et}</style>
            <div class="fields">
@@ -70,5 +70,7 @@ <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />
            </div>
-        `,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let E=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");E&&E.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,nt(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}connectedCallback(){var t,i,r;!this.shadowRoot||(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
-            <style>${ot}</style>
-            <div class="color-picker">
+        `,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let w=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");w&&w.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var Ut={sm:"0.875rem",md:"1.2rem",lg:"1.5rem",xl:"2.25rem","2xl":"3rem","3xl":"3.75rem","4xl":"4.5rem"},tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000"),buttonWidth:null,buttonHeight:null,buttonPadding:null});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.formatButtonSize=this.formatButtonSize.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position","button-width","button-height","button-padding"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),(r==="buttonWidth"||r==="buttonHeight"||r==="buttonPadding")&&t.setButtonSize(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}setButtonSize(){!this.$button||(this.state.buttonWidth&&(this.$button.style.width=this.formatButtonSize(this.state.buttonWidth)),this.state.buttonHeight&&(this.$button.style.height=this.formatButtonSize(this.state.buttonHeight)),this.state.buttonPadding&&(this.$button.style.padding=this.state.buttonPadding))}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,nt(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}formatButtonSize(t){var i;return(i=Ut[t])!=null?i:t}connectedCallback(){var t,i,r;!this.shadowRoot||(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.state.buttonWidth=this.getAttribute("button-width"),this.state.buttonHeight=this.getAttribute("button-height"),this.state.buttonPadding=this.getAttribute("button-padding"),this.shadowRoot.innerHTML=`
+            <style>
+                ${ot} 
+            </style>
+            <div class="color-picker" >
                 <button
@@ -79,6 +81,6 @@ type="button"
                     title="Select Color">
-                    <span class="button-color" style="background: ${S(this.state.color)}"></span>
+                    <span class="button-color" style="background: ${S(this.state.color)};"></span>
                 </button>
                 <div data-popup-box></div>
             </div>
-        `,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();
+        `,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),this.setButtonSize(),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange()),t==="button-width"&&(this.state.buttonWidth=this.getAttribute("button-width"),this.setButtonSize()),t==="button-height"&&(this.state.buttonHeight=this.getAttribute("button-height"),this.setButtonSize()),t==="button-padding"&&(this.state.buttonPadding=this.getAttribute("button-padding"),this.setButtonSize())}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();

package.json

 {
   "name": "toolcool-color-picker",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.",
@@ -12,3 +12,4 @@ "main": "./dist/toolcool-color-picker.min.js",
     "eslint": "eslint ./src/**",
-    "typescript-declarations": "tsc --emitDeclarationOnly"
+    "typescript-declarations": "tsc --emitDeclarationOnly",
+    "prettier": "prettier --write src/**/*.ts"
   },
@@ -32,4 +33,6 @@ "type": "module",
     "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
     "open": "^8.4.0",
     "postcss": "^8.4.14",
+    "prettier": "2.7.1",
     "uglify-js": "^3.16.2",
@@ -36,0 +39,0 @@ "uglifycss": "^0.0.29"

README.md

@@ -24,2 +24,3 @@ # Tool Cool Color Picker
 - [Styles](#styles)
+- [Button width, height, and padding](#button-width-height-and-padding)
 - [TypeScript Usage](#typescript-usage)
@@ -240,3 +241,39 @@ - [Usage with React and TypeScript](#usage-with-react-and-typescript)
 
+## Button width, height, and padding
 
+> Thanks to [MGarcia93](https://github.com/MGarcia93) for contributing to this section.
+
+Button size can be changed using **button-width**, **button-height**, and **button-padding** attributes.
+
+```html
+<toolcool-color-picker
+        color="#B48CF4"
+        button-width="2rem"
+        button-height="1rem"
+        button-padding="2px"></toolcool-color-picker>
+```
+
+It's also possible to use the following predefined values:
+
+| Attribute Value | The result size |
+|-----------------|-----------------|
+| sm              | 0.875rem        |
+| md              | 1.2rem          |
+| lg              | 1.5rem          |
+| xl              | 2.25rem         |
+| 2xl             | 3rem            |
+| 3xl             | 3.75rem         |
+| 4xl             | 4.5rem          |
+
+
+For example:
+
+```html
+<toolcool-color-picker
+        color="#C0F16F"
+        button-width="xl"
+        button-height="lg"
+        button-padding="3px"></toolcool-color-picker>
+```
+
 ## TypeScript Usage
@@ -246,3 +283,3 @@
 import 'toolcool-color-picker';
-import ColorPicker from 'toolcool-color-picker/src/app/color-picker';
+import ColorPicker from 'toolcool-color-picker';
 
@@ -249,0 +286,0 @@ // ...

src/app/color-picker.ts

 // @ts-ignore: esbuild custom loader
 import styles from './styles.pcss';
 import ColorPickerPopup from '../ui/popup/popup';
-import {
-    CUSTOM_EVENT_COLOR_HSV_CHANGED,
-    CUSTOM_EVENT_COLOR_HUE_CHANGED,
-    CUSTOM_EVENT_COLOR_ALPHA_CHANGED, sendButtonClickedCustomEvent, CUSTOM_EVENT_BUTTON_CLICKED,
-} from '../domain/events-provider';
+import { CUSTOM_EVENT_COLOR_HSV_CHANGED, CUSTOM_EVENT_COLOR_HUE_CHANGED, CUSTOM_EVENT_COLOR_ALPHA_CHANGED, CUSTOM_EVENT_BUTTON_CLICKED, sendButtonClickedCustomEvent } from '../domain/events-provider';
 import { getUniqueId } from '../domain/common-provider';
@@ -14,2 +10,15 @@ import { hslaToString, hsvaToString, parseColor, rgbaToString } from '../domain/color-provider';
 
+/**
+ * predefined button widths
+ */
+const buttonPredefinedSizes: { [key: string]: string } = {
+  sm: '0.875rem',
+  md: '1.2rem',
+  lg: '1.5rem',
+  xl: '2.25rem',
+  '2xl': '3rem',
+  '3xl': '3.75rem',
+  '4xl': '4.5rem',
+};
+
 /*
@@ -21,316 +30,355 @@ Usage:
 interface IColorPickerState {
-    isPopupVisible: boolean,
-    popupPosition: string,
-    initialColor: TinyColor,
-    color: TinyColor,
+  // popup
+  isPopupVisible: boolean;
+  popupPosition: string;
+
+  // color
+  initialColor: TinyColor;
+  color: TinyColor;
+
+  // button
+  buttonWidth?: string | null;
+  buttonHeight?: string | null;
+  buttonPadding?: string | null;
 }
 
 class ColorPicker extends HTMLElement {
+  static get observedAttributes() {
+    return ['color', 'popup-position', 'button-width', 'button-height', 'button-padding'];
+  }
 
-    static get observedAttributes() {
-        return ['color', 'popup-position'];
-    }
+  // ----------- APIs ------------------------
 
-    // ----------- APIs ------------------------
+  /**
+   * set any color that TinyColor accepts
+   */
+  public set color(userColor: ColorInput) {
+    this.state.color = new TinyColor(userColor);
+  }
 
-    /**
-     * set any color that TinyColor accepts
-     */
-    public set color(userColor: ColorInput) {
-        this.state.color = new TinyColor(userColor);
-    }
+  /**
+   * returns TinyColor object
+   */
+  public get color() {
+    return this.state.color;
+  }
 
-    /**
-     * returns TinyColor object
-     */
-    public get color() {
-        return this.state.color;
-    }
+  /**
+   * hex format getter
+   */
+  public get hex() {
+    return this.state.color.toHexString().toUpperCase();
+  }
 
-    /**
-     * hex format getter
-     */
-    public get hex() {
-        return this.state.color.toHexString().toUpperCase();
-    }
+  /**
+   * hex with alpha format getter
+   */
+  public get hex8() {
+    return this.state.color.toHex8String().toUpperCase();
+  }
 
-    /**
-     * hex with alpha format getter
-     */
-    public get hex8() {
-        return this.state.color.toHex8String().toUpperCase();
-    }
+  /**
+   * rgb format getter
+   */
+  public get rgb() {
+    return this.state.color.toRgbString();
+  }
 
-    /**
-     * rgb format getter
-     */
-    public get rgb() {
-        return this.state.color.toRgbString();
-    }
+  /**
+   * rgba format getter
+   */
+  public get rgba() {
+    return rgbaToString(this.state.color);
+  }
 
-    /**
-     * rgba format getter
-     */
-    public get rgba() {
-        return rgbaToString(this.state.color);
-    }
+  /**
+   * hsl format getter
+   */
+  public get hsl() {
+    return this.state.color.toHslString();
+  }
 
-    /**
-     * hsl format getter
-     */
-    public get hsl() {
-        return this.state.color.toHslString();
-    }
+  /**
+   * hsla format getter
+   */
+  public get hsla() {
+    return hslaToString(this.state.color);
+  }
 
-    /**
-     * hsla format getter
-     */
-    public get hsla() {
-        return hslaToString(this.state.color);
-    }
+  /**
+   * hsv format getter
+   */
+  public get hsv() {
+    return this.state.color.toHsvString();
+  }
 
-    /**
-     * hsv format getter
-     */
-    public get hsv() {
-        return this.state.color.toHsvString();
-    }
+  /**
+   * hsva format getter
+   */
+  public get hsva() {
+    return hsvaToString(this.state.color);
+  }
 
-    /**
-     * hsva format getter
-     */
-    public get hsva() {
-        return hsvaToString(this.state.color);
-    }
+  public get opened() {
+    return this.state.isPopupVisible;
+  }
 
-    public get opened() {
-        return this.state.isPopupVisible;
-    }
+  public set opened(isOpened: boolean) {
+    this.state.isPopupVisible = isOpened;
+  }
 
-    public set opened(isOpened: boolean) {
-        this.state.isPopupVisible = isOpened;
-    }
+  // -----------------------------------------
 
-    // -----------------------------------------
+  // this id attribute is used for custom events
+  public readonly cid: string;
 
-    // this id attribute is used for custom events
-    public readonly cid: string;
+  private $button: HTMLElement | null;
+  private $buttonColor: HTMLElement | null;
+  private $popupBox: HTMLElement | null;
 
-    private $button: HTMLElement | null;
-    private $buttonColor: HTMLElement | null;
-    private $popupBox: HTMLElement | null;
+  private stateDefaults: IColorPickerState = {
+    isPopupVisible: false,
+    popupPosition: 'left',
+    initialColor: new TinyColor('#000'),
+    color: new TinyColor('#000'),
+    buttonWidth: null,
+    buttonHeight: null,
+    buttonPadding: null,
+  };
+  private state: IColorPickerState;
 
-    private stateDefaults: IColorPickerState = {
-        isPopupVisible: false,
-        popupPosition: 'left',
-        initialColor: new TinyColor('#000'),
-        color: new TinyColor('#000'),
-    };
-    private state: IColorPickerState;
+  constructor() {
+    super();
 
-    constructor() {
-        super();
+    this.cid = getUniqueId();
 
-        this.cid = getUniqueId();
+    // register web components
+    if (!customElements.get('toolcool-color-picker-popup')) {
+      customElements.define('toolcool-color-picker-popup', ColorPickerPopup);
+    }
 
-        // register web components
-        if(!customElements.get('toolcool-color-picker-popup')){
-            customElements.define('toolcool-color-picker-popup', ColorPickerPopup);
-        }
+    this.attachShadow({
+      mode: 'open', // 'closed', 'open',
+    });
 
-        this.attachShadow({
-            mode: 'open', // 'closed', 'open',
-        });
+    this.toggle = this.toggle.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.clickedOutside = this.clickedOutside.bind(this);
+    this.stopPropagation = this.stopPropagation.bind(this);
 
-        this.toggle = this.toggle.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.clickedOutside = this.clickedOutside.bind(this);
-        this.stopPropagation = this.stopPropagation.bind(this);
+    this.hsvChanged = this.hsvChanged.bind(this);
+    this.hueChanged = this.hueChanged.bind(this);
+    this.alphaChanged = this.alphaChanged.bind(this);
+    this.buttonClicked = this.buttonClicked.bind(this);
+    this.formatButtonSize = this.formatButtonSize.bind(this);
 
-        this.hsvChanged = this.hsvChanged.bind(this);
-        this.hueChanged = this.hueChanged.bind(this);
-        this.alphaChanged = this.alphaChanged.bind(this);
-        this.buttonClicked = this.buttonClicked.bind(this);
+    this.initState();
+  }
 
-        this.initState();
-    }
+  initState() {
+    // eslint-disable-next-line
+    const scope = this;
+    this.state = new Proxy(scope.stateDefaults, {
+      // eslint-disable-next-line
+      set(target: IColorPickerState, key: string | symbol, value: any, receiver: any): boolean {
+        target[key] = value;
 
-    initState() {
-        // eslint-disable-next-line
-        const scope = this;
-        this.state = new Proxy(scope.stateDefaults, {
+        if (key === 'isPopupVisible') {
+          scope.onPopupVisibilityChange();
+        }
 
-            // eslint-disable-next-line
-            set(target: IColorPickerState, key: string | symbol, value: any, receiver: any): boolean {
-                target[key] = value;
+        if (key === 'popupPosition') {
+          scope.onPopupPosChange();
+        }
 
-                if(key === 'isPopupVisible'){
-                    scope.onPopupVisibilityChange();
-                }
+        if (key === 'initialColor') {
+          scope.onInitialColorChange();
+        }
 
-                if(key === 'popupPosition'){
-                    scope.onPopupPosChange();
-                }
+        if (key === 'color') {
+          scope.onColorChange();
+        }
 
-                if(key === 'initialColor'){
-                    scope.onInitialColorChange();
-                }
+        if (key === 'buttonWidth' || key === 'buttonHeight' || key === 'buttonPadding') {
+          scope.setButtonSize();
+        }
 
-                if(key === 'color'){
-                    scope.onColorChange();
-                }
+        return true;
+      },
+    });
+  }
 
-                return true;
-            },
-        });
-    }
+  onPopupVisibilityChange() {
+    if (!this.$popupBox) return;
+    this.$popupBox.innerHTML = this.state.isPopupVisible
+      ? `<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`
+      : '';
+  }
 
-    onPopupVisibilityChange() {
-        if(!this.$popupBox) return;
-        this.$popupBox.innerHTML = this.state.isPopupVisible ?
-            `<toolcool-color-picker-popup color="${ this.state.color.toRgbString() }" cid="${ this.cid }" popup-position="${ this.state.popupPosition }" />` :
-            '';
-    }
+  onPopupPosChange() {
+    if (!this.$popupBox) return;
 
-    onPopupPosChange() {
-        if(!this.$popupBox) return;
+    const $popup = this.$popupBox.querySelector('toolcool-color-picker-popup');
+    if (!$popup) return;
 
-        const $popup = this.$popupBox.querySelector('toolcool-color-picker-popup');
-        if(!$popup) return;
+    $popup.setAttribute('popup-position', this.state.popupPosition);
+  }
 
-        $popup.setAttribute('popup-position', this.state.popupPosition);
+  onInitialColorChange() {
+    const bgColor = rgbaToString(this.state.color);
+
+    if (this.$buttonColor) {
+      this.$buttonColor.style.backgroundColor = bgColor;
     }
 
-    onInitialColorChange() {
-        const bgColor = rgbaToString(this.state.color);
+    const $popup = this.shadowRoot?.querySelector('toolcool-color-picker-popup');
+    if ($popup) {
+      $popup.setAttribute('color', bgColor);
+    }
+  }
 
-        if(this.$buttonColor){
-            this.$buttonColor.style.backgroundColor = bgColor;
-        }
+  setButtonSize() {
+    if (!this.$button) return;
 
-        const $popup = this.shadowRoot?.querySelector('toolcool-color-picker-popup');
-        if($popup){
-            $popup.setAttribute('color', bgColor);
-        }
+    if (this.state.buttonWidth) {
+      this.$button.style.width = this.formatButtonSize(this.state.buttonWidth);
     }
 
-    onColorChange() {
+    if (this.state.buttonHeight) {
+      this.$button.style.height = this.formatButtonSize(this.state.buttonHeight);
+    }
 
-        if(this.$buttonColor){
-            this.$buttonColor.style.backgroundColor = rgbaToString(this.state.color);
-        }
-
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: {
-                hex: this.hex,
-                hex8: this.hex8,
-                rgb: this.rgb,
-                rgba: this.rgba,
-                hsl: this.hsl,
-                hsla: this.hsla,
-                hsv: this.hsv,
-                hsva: this.hsva,
-                color: this.color,
-            }
-        }));
+    if (this.state.buttonPadding) {
+      this.$button.style.padding = this.state.buttonPadding;
     }
+  }
 
-    hsvChanged(evt: CustomEvent) {
-        if(!evt || !evt.detail || !evt.detail.cid) return;
-
-        // handle only current instance
-        if(evt.detail.cid !== this.cid) return;
-
-        this.state.color = new TinyColor({
-            h: evt.detail.h,
-            s: evt.detail.s,
-            v: evt.detail.v,
-            a: this.state.color.toHsv().a,
-        });
+  onColorChange() {
+    if (this.$buttonColor) {
+      this.$buttonColor.style.backgroundColor = rgbaToString(this.state.color);
     }
 
-    hueChanged(evt: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          hex: this.hex,
+          hex8: this.hex8,
+          rgb: this.rgb,
+          rgba: this.rgba,
+          hsl: this.hsl,
+          hsla: this.hsla,
+          hsv: this.hsv,
+          hsva: this.hsva,
+          color: this.color,
+        },
+      })
+    );
+  }
 
-        if(!evt || !evt.detail || !evt.detail.cid) return;
+  hsvChanged(evt: CustomEvent) {
+    if (!evt || !evt.detail || !evt.detail.cid) return;
 
-        // handle only current instance
-        if(evt.detail.cid !== this.cid) return;
+    // handle only current instance
+    if (evt.detail.cid !== this.cid) return;
 
-        const hsv = this.state.color.toHsv();
+    this.state.color = new TinyColor({
+      h: evt.detail.h,
+      s: evt.detail.s,
+      v: evt.detail.v,
+      a: this.state.color.toHsv().a,
+    });
+  }
 
-        this.state.color = new TinyColor({
-            h: evt.detail.h,
-            s: hsv.s,
-            v: hsv.v,
-            a: hsv.a,
-        });
-    }
+  hueChanged(evt: CustomEvent) {
+    if (!evt || !evt.detail || !evt.detail.cid) return;
 
-    alphaChanged(evt: CustomEvent) {
+    // handle only current instance
+    if (evt.detail.cid !== this.cid) return;
 
-        if(!evt || !evt.detail || !evt.detail.cid) return;
+    const hsv = this.state.color.toHsv();
 
-        // handle only current instance
-        if(evt.detail.cid !== this.cid) return;
+    this.state.color = new TinyColor({
+      h: evt.detail.h,
+      s: hsv.s,
+      v: hsv.v,
+      a: hsv.a,
+    });
+  }
 
-        const rgba = this.state.color.toRgb();
-        rgba.a = evt.detail.a;
+  alphaChanged(evt: CustomEvent) {
+    if (!evt || !evt.detail || !evt.detail.cid) return;
 
-        this.state.color = new TinyColor(rgba);
-    }
+    // handle only current instance
+    if (evt.detail.cid !== this.cid) return;
 
-    /**
-     * when button clicked ---> close all other color pickers
-     */
-    buttonClicked(evt: CustomEvent) {
-        if(!evt || !evt.detail || !evt.detail.cid) return;
+    const rgba = this.state.color.toRgb();
+    rgba.a = evt.detail.a;
 
-        if(evt.detail.cid === this.cid) return;
+    this.state.color = new TinyColor(rgba);
+  }
 
-        this.state.isPopupVisible = false;
-    }
+  /**
+   * when button clicked ---> close all other color pickers
+   */
+  buttonClicked(evt: CustomEvent) {
+    if (!evt || !evt.detail || !evt.detail.cid) return;
 
-    clickedOutside() {
-        this.state.isPopupVisible = false;
-    }
+    if (evt.detail.cid === this.cid) return;
 
-    toggle() {
+    this.state.isPopupVisible = false;
+  }
 
-        const isVisible = this.state.isPopupVisible;
+  clickedOutside() {
+    this.state.isPopupVisible = false;
+  }
 
-        // setTimeout is used instead stopPropagation
-        // to close other popup instances
-        window.setTimeout(() => {
-            this.state.isPopupVisible = !isVisible;
+  toggle() {
+    const isVisible = this.state.isPopupVisible;
 
-            sendButtonClickedCustomEvent(this.cid);
-        }, 0);
-    }
+    // setTimeout is used instead stopPropagation
+    // to close other popup instances
+    window.setTimeout(() => {
+      this.state.isPopupVisible = !isVisible;
 
-    onKeyDown(evt: KeyboardEvent) {
-        if(evt.key === 'Escape') {
+      sendButtonClickedCustomEvent(this.cid);
+    }, 0);
+  }
 
-            // close the popup
-            this.state.isPopupVisible = false;
-        }
+  onKeyDown(evt: KeyboardEvent) {
+    if (evt.key === 'Escape') {
+      // close the popup
+      this.state.isPopupVisible = false;
     }
+  }
 
-    stopPropagation(evt: MouseEvent){
-        evt.stopPropagation();
-    }
+  stopPropagation(evt: MouseEvent) {
+    evt.stopPropagation();
+  }
 
-    /**
-     * when the custom element connected to DOM
-     */
-    connectedCallback() {
+  /**
+   * button can accept predefined width and height lik sm, lg, etc.
+   * and also it can accept any css sizes like 1rem, 50px, etc.
+   */
+  formatButtonSize(size: string) {
+    return buttonPredefinedSizes[size] ?? size;
+  }
 
-        if(!this.shadowRoot) return;
+  /**
+   * when the custom element connected to DOM
+   */
+  connectedCallback() {
+    if (!this.shadowRoot) return;
 
-        this.state.initialColor = parseColor(this.getAttribute('color'));
-        this.state.color = parseColor(this.getAttribute('color'));
-        this.state.popupPosition = this.getAttribute('popup-position') || 'left';
+    this.state.initialColor = parseColor(this.getAttribute('color'));
+    this.state.color = parseColor(this.getAttribute('color'));
+    this.state.popupPosition = this.getAttribute('popup-position') || 'left';
+    this.state.buttonWidth = this.getAttribute('button-width');
+    this.state.buttonHeight = this.getAttribute('button-height');
+    this.state.buttonPadding = this.getAttribute('button-padding');
 
-        this.shadowRoot.innerHTML = `
-            <style>${ styles }</style>
-            <div class="color-picker">
+    this.shadowRoot.innerHTML = `
+            <style>
+                ${styles} 
+            </style>
+            <div class="color-picker" >
                 <button
@@ -341,3 +389,3 @@ type="button"
                     title="Select Color">
-                    <span class="button-color" style="background: ${ rgbaToString(this.state.color) }"></span>
+                    <span class="button-color" style="background: ${rgbaToString(this.state.color)};"></span>
                 </button>
@@ -348,58 +396,75 @@ <div data-popup-box></div>
 
-        // init button and its events
-        this.$button = this.shadowRoot.querySelector('.button');
-        this.$buttonColor = this.shadowRoot.querySelector('.button-color');
+    // init button and its events
+    this.$button = this.shadowRoot.querySelector('.button');
+    this.$buttonColor = this.shadowRoot.querySelector('.button-color');
 
-        this.$button?.addEventListener('click', this.toggle);
-        this.$button?.addEventListener('keydown', this.onKeyDown);
-        this.$button?.addEventListener('mousedown', this.stopPropagation);
+    this.$button?.addEventListener('click', this.toggle);
+    this.$button?.addEventListener('keydown', this.onKeyDown);
+    this.$button?.addEventListener('mousedown', this.stopPropagation);
 
-        // init popup container
-        this.$popupBox = this.shadowRoot.querySelector('[data-popup-box]');
+    // init popup container
+    this.$popupBox = this.shadowRoot.querySelector('[data-popup-box]');
 
-        // close popup when clicked outside - we use mousedown instead of click to fix strange behaviour when
-        // user drags some inner element like saturation point from the bounds of the window,
-        // and the popup is suddenly closed
-        document.addEventListener('mousedown', this.clickedOutside);
+    // init button dimensions
+    this.setButtonSize();
 
-        // custom event from other parts of the app
-        document.addEventListener(CUSTOM_EVENT_COLOR_HSV_CHANGED, this.hsvChanged);
-        document.addEventListener(CUSTOM_EVENT_COLOR_HUE_CHANGED, this.hueChanged);
-        document.addEventListener(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, this.alphaChanged);
-        document.addEventListener(CUSTOM_EVENT_BUTTON_CLICKED, this.buttonClicked);
-    }
+    // close popup when clicked outside - we use mousedown instead of click to fix strange behaviour when
+    // user drags some inner element like saturation point from the bounds of the window,
+    // and the popup is suddenly closed
+    document.addEventListener('mousedown', this.clickedOutside);
 
-    /**
-     * when the custom element disconnected from DOM
-     */
-    disconnectedCallback(){
-        this.$button?.removeEventListener('click', this.toggle);
-        this.$button?.removeEventListener('keydown', this.onKeyDown);
-        this.$button?.removeEventListener('mousedown', this.stopPropagation);
-        document.removeEventListener('mousedown', this.clickedOutside);
+    // custom event from other parts of the app
+    document.addEventListener(CUSTOM_EVENT_COLOR_HSV_CHANGED, this.hsvChanged);
+    document.addEventListener(CUSTOM_EVENT_COLOR_HUE_CHANGED, this.hueChanged);
+    document.addEventListener(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, this.alphaChanged);
+    document.addEventListener(CUSTOM_EVENT_BUTTON_CLICKED, this.buttonClicked);
+  }
 
-        document.removeEventListener(CUSTOM_EVENT_COLOR_HSV_CHANGED, this.hsvChanged);
-        document.removeEventListener(CUSTOM_EVENT_COLOR_HUE_CHANGED, this.hueChanged);
-        document.removeEventListener(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, this.alphaChanged);
-        document.removeEventListener(CUSTOM_EVENT_BUTTON_CLICKED, this.buttonClicked);
+  /**
+   * when the custom element disconnected from DOM
+   */
+  disconnectedCallback() {
+    this.$button?.removeEventListener('click', this.toggle);
+    this.$button?.removeEventListener('keydown', this.onKeyDown);
+    this.$button?.removeEventListener('mousedown', this.stopPropagation);
+    document.removeEventListener('mousedown', this.clickedOutside);
+
+    document.removeEventListener(CUSTOM_EVENT_COLOR_HSV_CHANGED, this.hsvChanged);
+    document.removeEventListener(CUSTOM_EVENT_COLOR_HUE_CHANGED, this.hueChanged);
+    document.removeEventListener(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, this.alphaChanged);
+    document.removeEventListener(CUSTOM_EVENT_BUTTON_CLICKED, this.buttonClicked);
+  }
+
+  /**
+   * when attributes change
+   */
+  attributeChangedCallback(attrName: string) {
+    if (attrName === 'color') {
+      this.state.initialColor = parseColor(this.getAttribute('color'));
+      this.state.color = parseColor(this.getAttribute('color'));
+      this.onInitialColorChange();
     }
 
-    /**
-     * when attributes change
-     */
-    attributeChangedCallback(attrName: string){
+    if (attrName === 'popup-position') {
+      this.state.popupPosition = this.getAttribute('popup-position') || 'left';
+      this.onPopupPosChange();
+    }
 
-        if(attrName === 'color') {
-            this.state.initialColor = parseColor(this.getAttribute('color'));
-            this.state.color = parseColor(this.getAttribute('color'));
-            this.onInitialColorChange();
-        }
+    if (attrName === 'button-width') {
+      this.state.buttonWidth = this.getAttribute('button-width');
+      this.setButtonSize();
+    }
 
-        if(attrName === 'popup-position') {
-            this.state.popupPosition = this.getAttribute('popup-position') || 'left';
-            this.onPopupPosChange();
-        }
+    if (attrName === 'button-height') {
+      this.state.buttonHeight = this.getAttribute('button-height');
+      this.setButtonSize();
     }
+
+    if (attrName === 'button-padding') {
+      this.state.buttonPadding = this.getAttribute('button-padding');
+      this.setButtonSize();
+    }
+  }
 }
 
-export default ColorPicker;
+export default ColorPicker;

src/domain/color-provider.ts

@@ -12,9 +12,9 @@ import { TinyColor } from '@ctrl/tinycolor';
 export const getHueBackground = (hue: number) => {
-    if(hue < 0){
-        hue = 0;
-    }
-    if(hue > 360){
-        hue = 360;
-    }
-    return `hsl(${ Math.round(hue) }, 100%, 50%)`;
+  if (hue < 0) {
+    hue = 0;
+  }
+  if (hue > 360) {
+    hue = 360;
+  }
+  return `hsl(${Math.round(hue)}, 100%, 50%)`;
 };
@@ -27,19 +27,19 @@
 export const getAlphaColorBackground = (color: TinyColor) => {
-    const rgba = color.toRgb();
-    return `linear-gradient(to right, rgba(${ rgba.r },${ rgba.g },${ rgba.b }, 0) 0%, rgba(${ rgba.r },${ rgba.g },${ rgba.b }, 1) 100%)`;
+  const rgba = color.toRgb();
+  return `linear-gradient(to right, rgba(${rgba.r},${rgba.g},${rgba.b}, 0) 0%, rgba(${rgba.r},${rgba.g},${rgba.b}, 1) 100%)`;
 };
 
 export const rgbaToString = (color: TinyColor) => {
-    const rgba = color.toRgb();
-    return `rgba(${ rgba.r }, ${ rgba.g }, ${ rgba.b }, ${ round2places(rgba.a) })`;
+  const rgba = color.toRgb();
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${round2places(rgba.a)})`;
 };
 
 export const hslaToString = (color: TinyColor) => {
-    const hsla = color.toHsl();
-    return `hsla(${ Math.round(hsla.h) }, ${ Math.round(hsla.s * 100) }%, ${ Math.round(hsla.l * 100) }%, ${ round2places(hsla.a) })`;
+  const hsla = color.toHsl();
+  return `hsla(${Math.round(hsla.h)}, ${Math.round(hsla.s * 100)}%, ${Math.round(hsla.l * 100)}%, ${round2places(hsla.a)})`;
 };
 
 export const hsvaToString = (color: TinyColor) => {
-    const hsva = color.toHsv();
-    return `hsva(${ Math.round(hsva.h) }, ${ Math.round(hsva.s * 100) }%, ${ Math.round(hsva.v * 100) }%, ${ round2places(hsva.a) })`;
+  const hsva = color.toHsv();
+  return `hsva(${Math.round(hsva.h)}, ${Math.round(hsva.s * 100)}%, ${Math.round(hsva.v * 100)}%, ${round2places(hsva.a)})`;
 };
@@ -52,10 +52,10 @@
 export const getTopByValue = (value: number) => {
-    if(value < 0){
-        value = 0;
-    }
-    if(value > 1){
-        value = 1;
-    }
-    const top = -(value * 100) + 100;
-    return `${ top.toFixed(2) }%`;
+  if (value < 0) {
+    value = 0;
+  }
+  if (value > 1) {
+    value = 1;
+  }
+  const top = -(value * 100) + 100;
+  return `${top.toFixed(2)}%`;
 };
@@ -68,11 +68,11 @@
 export const getLeftBySaturation = (saturation: number) => {
-    if(saturation < 0){
-        saturation = 0;
-    }
-    if(saturation > 1){
-        saturation = 1;
-    }
+  if (saturation < 0) {
+    saturation = 0;
+  }
+  if (saturation > 1) {
+    saturation = 1;
+  }
 
-    const top = saturation * 100;
-    return `${ top.toFixed(2) }%`;
+  const top = saturation * 100;
+  return `${top.toFixed(2)}%`;
 };
@@ -85,21 +85,21 @@
 export const getLeftByHue = (hue: number) => {
-    if(hue < 0){
-        hue = 0;
-    }
+  if (hue < 0) {
+    hue = 0;
+  }
 
-    if(hue > 360){
-        hue = 360;
-    }
-    const left = (hue * 100) / 360;
-    let rounded = Math.round( left * 1e2 ) / 1e2; // round to 2 decimal places
+  if (hue > 360) {
+    hue = 360;
+  }
+  const left = (hue * 100) / 360;
+  let rounded = Math.round(left * 1e2) / 1e2; // round to 2 decimal places
 
-    if(rounded < 0){
-        rounded = 0;
-    }
+  if (rounded < 0) {
+    rounded = 0;
+  }
 
-    if(rounded > 100){
-        rounded = 100;
-    }
+  if (rounded > 100) {
+    rounded = 100;
+  }
 
-    return rounded;
+  return rounded;
 };
@@ -111,3 +111,3 @@
 export const getHueByLeft = (left: number) => {
-    return (360 * left) / 100;
+  return (360 * left) / 100;
 };
@@ -118,8 +118,8 @@
  */
-export const fixRGB = (updatedValue: string|number) => {
-    let value = Number(updatedValue) || 0;
-    value = Math.round(value);
-    value = Math.max(0, value);
-    value = Math.min(255, value);
-    return value;
+export const fixRGB = (updatedValue: string | number) => {
+  let value = Number(updatedValue) || 0;
+  value = Math.round(value);
+  value = Math.max(0, value);
+  value = Math.min(255, value);
+  return value;
 };
@@ -130,14 +130,14 @@
  */
-export const fixPercent = (updatedValue: string|number) => {
-    let value = Number(updatedValue) || 100;
-    value = Math.round(value);
-    value = Math.max(0, value);
-    value = Math.min(100, value);
-    return value;
+export const fixPercent = (updatedValue: string | number) => {
+  let value = Number(updatedValue) || 100;
+  value = Math.round(value);
+  value = Math.max(0, value);
+  value = Math.min(100, value);
+  return value;
 };
 
 export const parseColor = (colorString: string | null) => {
-    const color = new TinyColor(colorString || '#000');
-    color.setAlpha(color.getAlpha());
-    return color;
+  const color = new TinyColor(colorString || '#000');
+  color.setAlpha(color.getAlpha());
+  return color;
 };

src/domain/common-provider.ts

@@ -1,8 +0,7 @@
-
 export const getUniqueId = () => {
-    return Math.random().toString(16).slice(2);
+  return Math.random().toString(16).slice(2);
 };
 
 export const round2places = (num: number) => {
-    return Math.round((num + Number.EPSILON) * 100) / 100;
-};
+  return Math.round((num + Number.EPSILON) * 100) / 100;
+};

src/domain/events-provider.ts

@@ -7,48 +7,52 @@ export const CUSTOM_EVENT_COLOR_HSV_CHANGED = 'tc-hsv-changed';
 export const sendButtonClickedCustomEvent = (cid: string) => {
+  if (!cid) return;
 
-    if(!cid) return;
-
-    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_BUTTON_CLICKED, {
-        detail: {
-            cid,
-        }
-    }));
+  document.dispatchEvent(
+    new CustomEvent(CUSTOM_EVENT_BUTTON_CLICKED, {
+      detail: {
+        cid,
+      },
+    })
+  );
 };
 
 export const sendAlphaCustomEvent = (cid: string, a: number) => {
+  if (!cid) return;
 
-    if(!cid) return;
-
-    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, {
-        detail: {
-            a,
-            cid,
-        }
-    }));
+  document.dispatchEvent(
+    new CustomEvent(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, {
+      detail: {
+        a,
+        cid,
+      },
+    })
+  );
 };
 
 export const sendHsvCustomEvent = (cid: string, h: number, s: number, v: number) => {
-    if(!cid) return;
+  if (!cid) return;
 
-    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_COLOR_HSV_CHANGED, {
-        detail: {
-            h,
-            s,
-            v,
-            cid,
-        }
-    }));
+  document.dispatchEvent(
+    new CustomEvent(CUSTOM_EVENT_COLOR_HSV_CHANGED, {
+      detail: {
+        h,
+        s,
+        v,
+        cid,
+      },
+    })
+  );
 };
 
 export const sendHueCustomEvent = (cid: string, h: number) => {
+  if (!cid) return;
 
-    if(!cid) return;
-
-    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_COLOR_HUE_CHANGED, {
-        detail: {
-            h,
-            cid,
-        }
-    }));
+  document.dispatchEvent(
+    new CustomEvent(CUSTOM_EVENT_COLOR_HUE_CHANGED, {
+      detail: {
+        h,
+        cid,
+      },
+    })
+  );
 };
-

test/toolcool-color-picker.min.js

@@ -1,3 +0,3 @@
-// Tool Cool Picker v1.0.12, MIT License - https://github.com/toolcool-org/toolcool-color-picker
-(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function _(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function B(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function U(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=U(a,s,o+1/3),r=U(a,s,o),n=U(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function N(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:break}n/=6}return{h:n,s:d,v:s}}function lt(o,e,t){o=u(o,360)*6,e=u(e,100),t=u(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),a=t*(1-(1-r)*e),d=i%6,E=[t,s,n,n,a,t][d],x=[a,t,t,s,n,n][d],R=[n,n,a,t,t,s][d];return{r:E*255,g:x*255,b:R*255}}function K(o,e,t,i){var r=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function dt(o,e,t,i,r){var n=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16)),C(Rt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Rt(o){return Math.round(parseFloat(o)*255).toString(16)}function V(o){return g(o)/255}function g(o){return parseInt(o,16)}function ut(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var A={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ct(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,a=!1;return typeof o=="string"&&(o=Pt(o)),typeof o=="object"&&(w(o.r)&&w(o.g)&&w(o.b)?(e=at(o.r,o.g,o.b),s=!0,a=String(o.r).substr(-1)==="%"?"prgb":"rgb"):w(o.h)&&w(o.s)&&w(o.v)?(i=L(o.s),r=L(o.v),e=lt(o.h,i,r),s=!0,a="hsv"):w(o.h)&&w(o.s)&&w(o.l)&&(i=L(o.s),n=L(o.l),e=ht(o.h,i,n),s=!0,a="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=_(t),{ok:s,format:o.format||a,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:t}}var Dt="[-\\+]?\\d+%?",_t="[-\\+]?\\d*\\.\\d+%?",y="(?:".concat(_t,")|(?:").concat(Dt,")"),G="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),F="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),v={CSS_UNIT:new RegExp(y),rgb:new RegExp("rgb"+G),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+G),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+G),hsva:new RegExp("hsva"+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 Pt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(A[o])o=A[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:V(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:V(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function w(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=ut(e)),this.originalInput=e;var r=ct(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,a=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),a<=.03928?r=a/12.92:r=Math.pow((a+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=_(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=N(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=N(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=B(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=B(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),K(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),dt(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(u(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(u(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+K(this.r,this.g,this.b,!1),t=0,i=Object.entries(A);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=k(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=k(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=k(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=k(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],a=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+a)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var $=()=>Math.random().toString(16).slice(2),P=o=>Math.round((o+Number.EPSILON)*100)/100;var H=.01,q=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),X=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},S=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${P(e.a)})`},pt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${P(e.a)})`},gt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${P(e.a)})`},j=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),W=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),T=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},I=o=>360*o/100,O=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ft=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},c=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var z=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$saturation");h(this,"$color");h(this,"$pointer");h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=W(this.saturation),this.$pointer.style.top=j(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${q(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let a=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,d=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,E=Math.min(Math.max(0,a-n),i),x=Math.min(Math.max(0,d-s),r);this.saturation=E/i,this.value=1-x/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-H),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+H),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+H),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-H),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){var s,a,d,E,x;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let i=c(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=j(this.value),n=W(this.saturation);this.shadowRoot.innerHTML=`
+// Tool Cool Picker v1.0.13, MIT License - https://github.com/toolcool-org/toolcool-color-picker
+(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function P(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function U(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function O(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=O(a,s,o+1/3),r=O(a,s,o),n=O(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function K(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:break}n/=6}return{h:n,s:d,v:s}}function lt(o,e,t){o=u(o,360)*6,e=u(e,100),t=u(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),a=t*(1-(1-r)*e),d=i%6,w=[t,s,n,n,a,t][d],x=[a,t,t,s,n,n][d],R=[n,n,a,t,t,s][d];return{r:w*255,g:x*255,b:R*255}}function N(o,e,t,i){var r=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function dt(o,e,t,i,r){var n=[C(Math.round(o).toString(16)),C(Math.round(e).toString(16)),C(Math.round(t).toString(16)),C(Rt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Rt(o){return Math.round(parseFloat(o)*255).toString(16)}function V(o){return g(o)/255}function g(o){return parseInt(o,16)}function ut(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var A={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ct(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,a=!1;return typeof o=="string"&&(o=Bt(o)),typeof o=="object"&&(E(o.r)&&E(o.g)&&E(o.b)?(e=at(o.r,o.g,o.b),s=!0,a=String(o.r).substr(-1)==="%"?"prgb":"rgb"):E(o.h)&&E(o.s)&&E(o.v)?(i=L(o.s),r=L(o.v),e=lt(o.h,i,r),s=!0,a="hsv"):E(o.h)&&E(o.s)&&E(o.l)&&(i=L(o.s),n=L(o.l),e=ht(o.h,i,n),s=!0,a="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=P(t),{ok:s,format:o.format||a,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:t}}var Dt="[-\\+]?\\d+%?",Pt="[-\\+]?\\d*\\.\\d+%?",y="(?:".concat(Pt,")|(?:").concat(Dt,")"),G="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),F="[\\s|\\(]+(".concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")[,|\\s]+(").concat(y,")\\s*\\)?"),v={CSS_UNIT:new RegExp(y),rgb:new RegExp("rgb"+G),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+G),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+G),hsva:new RegExp("hsva"+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 Bt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(A[o])o=A[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:V(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:V(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function E(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=ut(e)),this.originalInput=e;var r=ct(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,a=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),a<=.03928?r=a/12.92:r=Math.pow((a+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=P(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=K(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=K(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),N(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),dt(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(u(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(u(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+N(this.r,this.g,this.b,!1),t=0,i=Object.entries(A);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=k(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=k(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=k(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=k(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],a=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+a)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var $=()=>Math.random().toString(16).slice(2),B=o=>Math.round((o+Number.EPSILON)*100)/100;var H=.01,q=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),z=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},S=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${B(e.a)})`},pt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${B(e.a)})`},gt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${B(e.a)})`},W=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),X=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),T=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},_=o=>360*o/100,I=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ft=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},c=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var j=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$saturation");h(this,"$color");h(this,"$pointer");h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=X(this.saturation),this.$pointer.style.top=W(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${q(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let a=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,d=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,w=Math.min(Math.max(0,a-n),i),x=Math.min(Math.max(0,d-s),r);this.saturation=w/i,this.value=1-x/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-H),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+H),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+H),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-H),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){var s,a,d,w,x;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let i=c(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=W(this.value),n=X(this.saturation);this.shadowRoot.innerHTML=`
            <style>${rt}</style>
@@ -15,3 +15,3 @@ <div class="saturation">
            </div>
-        `,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(E=this.$saturation)==null||E.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=z;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=I(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=I(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=I(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
+        `,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(w=this.$saturation)==null||w.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=j;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=_(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=_(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=_(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
            <style>${vt}</style>
@@ -31,8 +31,8 @@ <div class="hue">
            </div>
-        `,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var Et=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=X(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
-           <style>${Et}</style>
+        `,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var wt=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=z(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
+           <style>${wt}</style>
            <div class="alpha">
                 <div class="box">
                     <div class="transparent-bg box"></div>
-                    <div class="color-bg box" style="background: ${X(t)}"></div>
+                    <div class="color-bg box" style="background: ${z(t)}"></div>
                     
@@ -46,4 +46,4 @@ <div class="pointer box">
            </div>
-        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var wt=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=O(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
-           <style>${wt}</style>
+        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
+           <style>${Et}</style>
            <div class="fields">
@@ -70,5 +70,7 @@ <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />
            </div>
-        `,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let E=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");E&&E.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,nt(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}connectedCallback(){var t,i,r;!this.shadowRoot||(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
-            <style>${ot}</style>
-            <div class="color-picker">
+        `,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let w=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");w&&w.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var Ut={sm:"0.875rem",md:"1.2rem",lg:"1.5rem",xl:"2.25rem","2xl":"3rem","3xl":"3.75rem","4xl":"4.5rem"},tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000"),buttonWidth:null,buttonHeight:null,buttonPadding:null});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.formatButtonSize=this.formatButtonSize.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position","button-width","button-height","button-padding"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),(r==="buttonWidth"||r==="buttonHeight"||r==="buttonPadding")&&t.setButtonSize(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}setButtonSize(){!this.$button||(this.state.buttonWidth&&(this.$button.style.width=this.formatButtonSize(this.state.buttonWidth)),this.state.buttonHeight&&(this.$button.style.height=this.formatButtonSize(this.state.buttonHeight)),this.state.buttonPadding&&(this.$button.style.padding=this.state.buttonPadding))}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,nt(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}formatButtonSize(t){var i;return(i=Ut[t])!=null?i:t}connectedCallback(){var t,i,r;!this.shadowRoot||(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.state.buttonWidth=this.getAttribute("button-width"),this.state.buttonHeight=this.getAttribute("button-height"),this.state.buttonPadding=this.getAttribute("button-padding"),this.shadowRoot.innerHTML=`
+            <style>
+                ${ot} 
+            </style>
+            <div class="color-picker" >
                 <button
@@ -79,6 +81,6 @@ type="button"
                     title="Select Color">
-                    <span class="button-color" style="background: ${S(this.state.color)}"></span>
+                    <span class="button-color" style="background: ${S(this.state.color)};"></span>
                 </button>
                 <div data-popup-box></div>
             </div>
-        `,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();
+        `,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),this.setButtonSize(),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange()),t==="button-width"&&(this.state.buttonWidth=this.getAttribute("button-width"),this.setButtonSize()),t==="button-height"&&(this.state.buttonHeight=this.getAttribute("button-height"),this.setButtonSize()),t==="button-padding"&&(this.state.buttonPadding=this.getAttribute("button-padding"),this.setButtonSize())}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();

types/app/color-picker.d.ts

@@ -57,2 +57,3 @@ import { ColorInput } from '@ctrl/tinycolor/dist';
     onInitialColorChange(): void;
+    setButtonSize(): void;
     onColorChange(): void;
@@ -71,2 +72,7 @@ hsvChanged(evt: CustomEvent): void;
     /**
+     * button can accept predefined width and height lik sm, lg, etc.
+     * and also it can accept any css sizes like 1rem, 50px, etc.
+     */
+    formatButtonSize(size: string): string;
+    /**
      * when the custom element connected to DOM
@@ -73,0 +79,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

1014669

increased by1.49%

Lines of code

11918

increased by1.27%

Number of lines in readme file

341

increased by12.17%

Worsened metrics

Dev dependency count

12

increased by20%

Number of package files

88

decreased by-20%

No dependency changes