@thednp/color-picker 0.0.1-alpha1 → 0.0.1

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

@@ -1,2 +1,3851 @@
-// ColorPickerElement v0.0.1alpha1 | thednp © 2022 | MIT-License
-function e(e){return e instanceof HTMLElement?e.ownerDocument:e instanceof Window?e.document:window.document}const t=[Document,Element,HTMLElement],o=[Element,HTMLElement];function n(n,r){const a=t.some(e=>r instanceof e)?r:e();return o.some(e=>n instanceof e)?n:a.querySelector(n)}const r=(e,t)=>Object.assign(e,t);function a(t){if("string"==typeof t)return e().createElement(t);const{tagName:o}=t,n={...t},s=a(o);return delete n.tagName,r(s,n),s}const s=(e,t)=>{r(e.style,t)},i=["aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkgrey","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkslategrey","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dimgrey","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","goldenrod","gold","gray","green","greenyellow","grey","honeydew","hotpink","indianred","indigo","ivory","khaki","lavenderblush","lavender","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgray","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightslategrey","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","rebeccapurple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","slategrey","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"],l="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",c=`[\\s|\\(]+(${l})[,|\\s]+(${l})[,|\\s]+(${l})\\s*\\)?`,h=`[\\s|\\(]+(${l})[,|\\s]+(${l})[,|\\s]+(${l})[,|\\s]+(${l})\\s*\\)?`,u={CSS_UNIT:new RegExp(l),rgb:new RegExp("rgb"+c),rgba:new RegExp("rgba"+h),hsl:new RegExp("hsl"+c),hsla:new RegExp("hsla"+h),hsv:new RegExp("hsv"+c),hsva:new RegExp("hsva"+h),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 d(e){return"string"==typeof e&&e.includes(".")&&1===parseFloat(e)}function g(e){return"string"==typeof e&&e.includes("%")}function p(e){return Boolean(u.CSS_UNIT.exec(String(e)))}function m(e,t){let o=e;return d(e)&&(o="100%"),o=360===t?o:Math.min(t,Math.max(0,parseFloat(o))),g(o)&&(o=parseInt(String(o*t),10)/100),Math.abs(o-t)<1e-6?1:(o=360===t?(o<0?o%t+t:o%t)/parseFloat(String(t)):o%t/parseFloat(String(t)),o)}function f(e){let t=parseFloat(e);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t}function b(e){return Math.min(1,Math.max(0,e))}function w(t){const o=e(n).head;var n;s(o,{color:t});const r=function(e,t){const o=getComputedStyle(e);return t in o?o[t]:""}(o,"color");return s(o,{color:""}),r}function v(e){return e<=1?100*Number(e)+"%":e}function k(e){return 1===e.length?"0"+e:String(e)}function x(e,t,o){return{r:255*m(e,255),g:255*m(t,255),b:255*m(o,255)}}function y(e,t,o){const n=m(e,255),r=m(t,255),a=m(o,255),s=Math.max(n,r,a),i=Math.min(n,r,a);let l=0,c=0;const h=(s+i)/2;if(s===i)c=0,l=0;else{const e=s-i;switch(c=h>.5?e/(2-s-i):e/(s+i),s){case n:l=(r-a)/e+(r<a?6:0);break;case r:l=(a-n)/e+2;break;case a:l=(n-r)/e+4}l/=6}return{h:l,s:c,l:h}}function S(e,t,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*n*(t-e):n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function M(e,t,o){let n=0,r=0,a=0;const s=m(e,360),i=m(t,100),l=m(o,100);if(0===i)r=l,a=l,n=l;else{const e=l<.5?l*(1+i):l+i-l*i,t=2*l-e;n=S(t,e,s+1/3),r=S(t,e,s),a=S(t,e,s-1/3)}return{r:255*n,g:255*r,b:255*a}}function C(e,t,o){const n=m(e,255),r=m(t,255),a=m(o,255),s=Math.max(n,r,a),i=Math.min(n,r,a);let l=0;const c=s,h=s-i,u=0===s?0:h/s;if(s===i)l=0;else{switch(s){case n:l=(r-a)/h+(r<a?6:0);break;case r:l=(a-n)/h+2;break;case a:l=(n-r)/h+4}l/=6}return{h:l,s:u,v:c}}function $(e,t,o){const n=6*m(e,360),r=m(t,100),a=m(o,100),s=Math.floor(n),i=n-s,l=a*(1-r),c=a*(1-i*r),h=a*(1-(1-i)*r),u=s%6;return{r:255*[a,c,l,l,h,a][u],g:255*[h,a,a,c,l,l][u],b:255*[l,l,h,a,a,c][u]}}function L(e,t,o){return[k(Math.round(e).toString(16)),k(Math.round(t).toString(16)),k(Math.round(o).toString(16))].join("")}function N(e){return P(e)/255}function P(e){return parseInt(e,16)}function H(e){return{r:e>>16,g:(65280&e)>>8,b:255&e}}function E(e){let t=e.trim().toLowerCase();if(0===t.length)return{r:0,g:0,b:0,a:0};let o=!1;if(i.includes(t))t=w(t),o=!0;else if("transparent"===t)return{r:0,g:0,b:0,a:0,format:"name"};let n=u.rgb.exec(t);return n?{r:n[1],g:n[2],b:n[3]}:(n=u.rgba.exec(t),n?{r:n[1],g:n[2],b:n[3],a:n[4]}:(n=u.hsl.exec(t),n?{h:n[1],s:n[2],l:n[3]}:(n=u.hsla.exec(t),n?{h:n[1],s:n[2],l:n[3],a:n[4]}:(n=u.hsv.exec(t),n?{h:n[1],s:n[2],v:n[3]}:(n=u.hsva.exec(t),n?{h:n[1],s:n[2],v:n[3],a:n[4]}:(n=u.hex8.exec(t),n?{r:P(n[1]),g:P(n[2]),b:P(n[3]),a:N(n[4]),format:o?"name":"hex8"}:(n=u.hex6.exec(t),n?{r:P(n[1]),g:P(n[2]),b:P(n[3]),format:o?"name":"hex"}:(n=u.hex4.exec(t),n?{r:P(n[1]+n[1]),g:P(n[2]+n[2]),b:P(n[3]+n[3]),a:N(n[4]+n[4]),format:o?"name":"hex8"}:(n=u.hex3.exec(t),!!n&&{r:P(n[1]+n[1]),g:P(n[2]+n[2]),b:P(n[3]+n[3]),format:o?"name":"hex"})))))))))}function A(e){let t,o={r:0,g:0,b:0},n=e,r=null,a=null,s=null,i=!1,l="hex";return"string"==typeof e&&(n=E(e),n&&(i=!0)),"object"==typeof n&&(p(n.r)&&p(n.g)&&p(n.b)?(o=x(n.r,n.g,n.b),i=!0,l="%"===(""+n.r).slice(-1)?"prgb":"rgb"):p(n.h)&&p(n.s)&&p(n.v)?(r=v(n.s),a=v(n.v),o=$(n.h,r,a),i=!0,l="hsv"):p(n.h)&&p(n.s)&&p(n.l)&&(r=v(n.s),s=v(n.l),o=M(n.h,r,s),i=!0,l="hsl"),"a"in n&&(t=n.a)),{ok:i,format:n.format||l,r:Math.min(255,Math.max(o.r,0)),g:Math.min(255,Math.max(o.g,0)),b:Math.min(255,Math.max(o.b,0)),a:f(t)}}const T={format:"hex"};class R{constructor(e,t){let o=e;const n="object"==typeof t?r(T,t):r({},T);o instanceof R&&(o=A(o)),"number"==typeof o&&(o=H(o));const{r:a,g:s,b:i,a:l,ok:c,format:h}=A(o);this.originalInput=o,this.r=a,this.g=s,this.b=i,this.a=l,this.ok=c,this.roundA=Math.round(100*this.a)/100,this.format=n.format||h,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))}get isValid(){return this.ok}get isDark(){return this.brightness<128}get luminance(){const{r:e,g:t,b:o}=this;let n=0,r=0,a=0;const s=e/255,i=t/255,l=o/255;return n=s<=.03928?s/12.92:((s+.055)/1.055)**2.4,r=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,a=l<=.03928?l/12.92:((l+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*a}get brightness(){const{r:e,g:t,b:o}=this;return(299*e+587*t+114*o)/1e3}toRgb(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}}toRgbString(){const e=Math.round(this.r),t=Math.round(this.g),o=Math.round(this.b);return 1===this.a?`rgb(${e},${t},${o})`:`rgba(${e},${t},${o},${this.roundA})`}toHex(){return L(this.r,this.g,this.b)}toHexString(){return"#"+this.toHex()}toHsv(){const{h:e,s:t,v:o}=C(this.r,this.g,this.b);return{h:360*e,s:t,v:o,a:this.a}}toHsl(){const{h:e,s:t,l:o}=y(this.r,this.g,this.b);return{h:360*e,s:t,l:o,a:this.a}}toHslString(){const e=this.toHsl(),t=Math.round(e.h),o=Math.round(100*e.s),n=Math.round(100*e.l);return 1===this.a?`hsl(${t},${o}%,${n}%)`:`hsla(${t},${o}%,${n}%,${this.roundA})`}setAlpha(e){return this.a=f(e),this.roundA=Math.round(100*this.a)/100,this}saturate(e){if(!e)return this;const t=this.toHsl();return t.s+=e/100,t.s=b(t.s),new R(t)}desaturate(e){return e?this.saturate(-e):this}greyscale(){return this.desaturate(100)}clone(){return new R(this)}toString(){const{format:e}=this;return"rgb"===e?this.toRgbString():"hsl"===e?this.toHslString():this.toHexString()}}r(R,{colorNames:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:l,PERMISSIVE_MATCH3:c,PERMISSIVE_MATCH4:h,matchers:u,isOnePointZero:d,isPercentage:g,isValidCSSUnit:p,bound01:m,boundAlpha:f,clamp01:b,getHexFromColorName:w,convertToPercentage:v,convertHexToDecimal:N,pad2:k,rgbToRgb:x,rgbToHsl:y,rgbToHex:L,rgbToHsv:C,hslToRgb:M,hsvToRgb:$,hue2rgb:S,parseIntFromHex:P,numberInputToObject:H,stringInputToObject:E,inputToRGB:A});const F={};function D(e){const t=this,{type:o}=e;(F[o]?[...F[o]]:[]).forEach(n=>{const[r,a]=n;[...a].forEach(n=>{if(r===t){const[t,a]=n;t.apply(r,[e]),a&&a.once&&O(r,o,t,a)}})})}const I=(e,t,o,n)=>{F[t]||(F[t]=new Map);const r=F[t];r.has(e)||r.set(e,new Map);const a=r.get(e),{size:s}=a;a&&a.set(o,n),s||e.addEventListener(t,D,n)},O=(e,t,o,n)=>{const r=F[t],a=r&&r.get(e),s=a&&a.get(o),{options:i}=void 0!==s?s:{options:n};a&&a.has(o)&&a.delete(o),!r||a&&a.size||r.delete(e),r&&r.size||delete F[t],a&&a.size||e.removeEventListener(t,D,i)},q="ArrowDown",Y="ArrowUp",_="ArrowLeft",V="ArrowRight",K="Enter",G="Space",{userAgentData:U}=navigator,X=U,{userAgent:j}=navigator,B=j,z=/iPhone|iPad|iPod|Android/i;let W=!1;W=X?X.brands.some(e=>z.test(e.brand)):z.test(B);const J=W;let Z=1;const Q=new Map;function ee(e,t){const{width:o,height:n,top:r,right:a,bottom:s,left:i}=e.getBoundingClientRect();let l=1,c=1;if(t&&e instanceof HTMLElement){const{offsetWidth:t,offsetHeight:r}=e;l=t>0&&Math.round(o)/t||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:a/l,bottom:s/c,left:i/l,x:i/l,y:r/c}}function te(o,n){return(n&&t.some(e=>n instanceof e)?n:e()).querySelectorAll(o)}function oe(t,o){if("string"==typeof o)return e().createElementNS(t,o);const{tagName:n}=o,a={...o},s=oe(t,n);return delete a.tagName,r(s,a),s}const ne=new Map,re={set:(e,t,o)=>{const r=n(e);if(!r)return;ne.has(t)||ne.set(t,new Map);ne.get(t).set(r,o)},getAllFor:e=>ne.get(e)||null,get:(e,t)=>{const o=n(e),r=re.getAllFor(t);return o&&r&&r.get(o)||null},remove:(e,t)=>{const o=n(e),r=ne.get(t);r&&o&&(r.delete(o),0===r.size&&ne.delete(t))}};function ae(e,t){return e.classList.contains(t)}function se(e,t){e.classList.add(t)}function ie(e,t){e.classList.remove(t)}const le=(e,t,o)=>e.setAttribute(t,o),ce=(e,t)=>e.getAttribute(t),he="v-hidden";function ue(e,t,o,n,r){const s=`appearance${e}_${t}`,i=1===e?"color-pointer":"color-slider",l=a({tagName:"div",className:"color-control"});le(l,"role","presentation"),l.append(a({id:s,tagName:"label",className:"color-label v-hidden",ariaLive:"polite"}),a({tagName:"canvas",className:"visual-control"+e,ariaHidden:"true",width:""+o,height:""+n}));const c=a({tagName:"div",className:i+" knob"});return le(c,"aria-labelledby",r||s),le(c,"tabindex","0"),l.append(c),l}const de=["transparent","currentColor","inherit","initial"],ge=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],pe={pickerLabel:"Colour Picker",toggleLabel:"Select colour",menuLabel:"Select colour preset",requiredLabel:"Required",formatLabel:"Colour Format",formatHEX:"Hexadecimal Format",formatRGB:"RGB Format",formatHSL:"HSL Format",alphaLabel:"Alpha",appearanceLabel:"Colour Appearance",hexLabel:"Hexadecimal",hueLabel:"Hue",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"};function me(e,t){const o=t?I:O,{input:n,pickerToggle:r,menuToggle:a}=e;o(n,"focusin",e.showPicker),o(r,"click",e.togglePicker),o(n,"keydown",e.keyHandler),a&&o(a,"click",e.toggleMenu)}function fe(e){const{input:t,parent:o,format:n,id:s,componentLabels:i,keywords:l}=e,c=ce(t,"value")||"#fff",{toggleLabel:h,menuLabel:u,formatLabel:d,pickerLabel:g,appearanceLabel:p}=i,m=de.includes(c)?"#fff":c;e.color=new R(m,{format:n});const f=J?150:230,b=J?150:230,w=J?" mobile":"",v="hsl"===n?`appearance_${s} appearance1_${s}`:"appearance1_"+s,k="hsl"===n?"appearance2_"+s:`appearance_${s} appearance2_${s}`,x=a({tagName:"button",className:"picker-toggle button-appearance",ariaExpanded:"false",ariaHasPopup:"true",ariaLive:"polite"});le(x,"tabindex","-1"),x.append(a({tagName:"span",className:he,innerText:"Open Color Picker"}));const y=a({tagName:"div",className:"color-dropdown picker"+w});le(y,"aria-labelledby",`picker-label-${s} format-label-${s}`),le(y,"role","group"),y.append(a({tagName:"label",className:he,ariaHidden:"true",id:"picker-label-"+s,innerText:""+g}),a({tagName:"label",className:he,ariaHidden:"true",id:"format-label-"+s,innerText:""+d}),a({tagName:"label",className:"color-appearance v-hidden",ariaHidden:"true",ariaLive:"polite",id:"appearance_"+s,innerText:""+p}));const S=a({tagName:"div",className:"color-controls "+n});S.append(ue(1,s,f,b,v),ue(2,s,21,b,k)),"hex"!==n&&S.append(ue(3,s,21,b));const M=function(e){const{format:t,id:o}=e,n=a({tagName:"div",className:"color-form "+t});let s=["hex"];return"rgb"===t?s=["red","green","blue","alpha"]:"hsl"===t&&(s=["hue","saturation","lightness","alpha"]),s.forEach(e=>{const[s]="hex"===t?["#"]:(i=e,i.toUpperCase()).split("");var i;const l=`color_${t}_${e}_${o}`,c=a({tagName:"label"});le(c,"for",l),c.append(a({tagName:"span",ariaHidden:"true",innerText:s+":"}),a({tagName:"span",className:he,innerText:""+e}));const h=a({tagName:"input",id:l,type:"hex"===t?"text":"number",value:"alpha"===e?"1":"0",className:"color-input "+e,autocomplete:"off",spellcheck:"false"});if("hex"!==t){let o="1",n="0.01";"alpha"!==e&&("rgb"===t?(o="255",n="1"):"hue"===e?(o="360",n="1"):(o="100",n="1")),r(h,{min:"0",max:o,step:n})}n.append(c,h)}),n}(e);if(y.append(S,M),o.append(x,y),l){const e=l,r=a({tagName:"div",className:"color-dropdown menu"+w}),s=a({tagName:"ul",ariaLabel:""+u,className:"color-menu"});le(s,"role","listbox"),r.append(s),e.forEach(e=>{const o=e.trim(),r=new R(o,{format:n}).toString()===ce(t,"value"),i=a({tagName:"li",className:"color-option"+(r?" active":""),ariaSelected:r?"true":"false",innerText:""+e});le(i,"role","option"),le(i,"tabindex","0"),le(i,"data-value",""+o),s.append(i)});const i=a({tagName:"button",className:"menu-toggle button-appearance",ariaExpanded:"false",ariaHasPopup:"true"}),c=encodeURI("http://www.w3.org/2000/svg"),d=oe(c,{tagName:"svg"});le(d,"xmlns",c),le(d,"aria-hidden","true"),le(d,"viewBox","0 0 512 512");const g=oe(c,{tagName:"path"});le(g,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),le(g,"fill","#fff"),d.append(g),i.append(a({tagName:"span",className:he,innerText:""+h}),d),o.append(i,r)}l&&de.includes(c)&&(e.value=c)}function be(e,t){const o=t?I:O,n="ontouchstart"in document?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};o(e.controls,n.down,e.pointerDown),e.controlKnobs.forEach(t=>o(t,"keydown",e.handleKnobs)),o(window,"scroll",e.handleScroll),[e.input,...e.inputs].forEach(t=>o(t,"change",e.changeHandler)),e.colorMenu&&(o(e.colorMenu,"click",e.menuClickHandler),o(e.colorMenu,"keydown",e.menuKeyHandler)),o(document,n.move,e.pointerMove),o(document,n.up,e.pointerUp),o(window,"keyup",e.handleDismiss),o(e.parent,"focusout",e.handleFocusOut)}function we(e){var t,o;t=e.input,o=new CustomEvent("colorpicker.change"),t.dispatchEvent(o)}function ve(e,t){const o=t?ae:ie;return!!e&&["show","show-top"][t?"some":"forEach"](t=>o(e,t))}class ke{constructor(e){const t=this;if(t.input=n(e),!t.input)throw new TypeError(`ColorPicker target ${e} cannot be found.`);const{input:o}=t;if(t.parent=function e(t,o){return t?t.closest(o)||e(t.getRootNode().host,o):null}(o,".color-picker,color-picker"),!t.parent)throw new TypeError("ColorPicker requires a specific markup to work.");t.id=function(e,t){Z+=1;let o=Q.get(e),n=Z;if(t&&t.length)if(o){const e=o.get(t);Number.isNaN(e)?o.set(t,n):n=e}else Q.set(e,new Map),o=Q.get(e),o.set(t,n);else Number.isNaN(o)?Q.set(e,n):n=o;return n}(o,"color-picker"),t.dragElement=null,t.isOpen=!1,t.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},t.colorLabels={},t.keywords=!1,t.color=new R("white",{format:t.format}),t.componentLabels=r({},pe);const{componentLabels:a,colorLabels:s,keywords:i}=o.dataset,l=a?JSON.parse(a):{};t.componentLabels=r(t.componentLabels,l);const c=s&&17===s.split(",").length?s.split(","):ge;ge.forEach((e,o)=>{t.colorLabels[e]=c[o]}),"false"!==i&&(t.keywords=i?i.split(","):de),t.showPicker=t.showPicker.bind(t),t.togglePicker=t.togglePicker.bind(t),t.toggleMenu=t.toggleMenu.bind(t),t.menuClickHandler=t.menuClickHandler.bind(t),t.menuKeyHandler=t.menuKeyHandler.bind(t),t.pointerDown=t.pointerDown.bind(t),t.pointerMove=t.pointerMove.bind(t),t.pointerUp=t.pointerUp.bind(t),t.handleScroll=t.handleScroll.bind(t),t.handleFocusOut=t.handleFocusOut.bind(t),t.changeHandler=t.changeHandler.bind(t),t.handleDismiss=t.handleDismiss.bind(t),t.keyHandler=t.keyHandler.bind(t),t.handleKnobs=t.handleKnobs.bind(t),fe(t);const{parent:h}=t;t.pickerToggle=n(".picker-toggle",h),t.menuToggle=n(".menu-toggle",h),t.colorMenu=n(".color-dropdown.menu",h),t.colorPicker=n(".color-dropdown.picker",h),t.controls=n(".color-controls",h),t.inputs=[...te(".color-input",h)],t.controlKnobs=[...te(".knob",h)],t.visuals=[...te("canvas",t.controls)],t.knobLabels=[...te(".color-label",h)],t.appearance=n(".color-appearance",h);const[u,d,g]=t.visuals;t.width1=u.width,t.height1=u.height,t.width2=d.width,t.height2=d.height,t.ctx1=u.getContext("2d"),t.ctx2=d.getContext("2d"),t.ctx1.rect(0,0,t.width1,t.height1),t.ctx2.rect(0,0,t.width2,t.height2),t.width3=0,t.height3=0,"hex"!==t.format&&(t.width3=g.width,t.height3=g.height,this.ctx3=g.getContext("2d"),t.ctx3.rect(0,0,t.width3,t.height3)),this.setControlPositions(),this.setColorAppearence(),this.updateInputs(!0),this.updateControls(),this.updateVisuals(),me(t,!0),re.set(o,"color-picker",t)}get value(){return this.input.value}set value(e){this.input.value=e}get required(){return e=this.input,t="required",e.hasAttribute(t);var e,t}get format(){return ce(this.input,"format")||"hex"}get name(){return ce(this.input,"name")}get label(){return n(`[for="${this.input.id}"]`)}get includeNonColor(){return this.keywords instanceof Array&&this.keywords.some(e=>de.includes(e))}get hex(){return this.color.toHex()}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{rgb:e,brightness:t}=this;return t<120&&e.a>.33}get isValid(){const e=this.input.value;return""!==e&&new R(e).isValid}updateVisuals(){const{color:e,format:t,controlPositions:o,width1:n,width2:r,width3:a,height1:s,height2:i,height3:l,ctx1:c,ctx2:h,ctx3:u}=this,{r:d,g:g,b:p}=e;if("hsl"!==t){const e=Math.round(o.c2y/i*360);c.fillStyle=new R(`hsl(${e},100%,50%})`).toRgbString(),c.fillRect(0,0,n,s);const t=h.createLinearGradient(0,0,n,0);t.addColorStop(0,"rgba(255,255,255,1)"),t.addColorStop(1,"rgba(255,255,255,0)"),c.fillStyle=t,c.fillRect(0,0,n,s);const a=h.createLinearGradient(0,0,0,s);a.addColorStop(0,"rgba(0,0,0,0)"),a.addColorStop(1,"rgba(0,0,0,1)"),c.fillStyle=a,c.fillRect(0,0,n,s);const l=h.createLinearGradient(0,0,0,s);l.addColorStop(0,"rgba(255,0,0,1)"),l.addColorStop(.17,"rgba(255,255,0,1)"),l.addColorStop(.34,"rgba(0,255,0,1)"),l.addColorStop(.51,"rgba(0,255,255,1)"),l.addColorStop(.68,"rgba(0,0,255,1)"),l.addColorStop(.85,"rgba(255,0,255,1)"),l.addColorStop(1,"rgba(255,0,0,1)"),h.fillStyle=l,h.fillRect(0,0,r,i)}else{const t=c.createLinearGradient(0,0,n,0),r=Math.round(100*(1-o.c2y/i));t.addColorStop(0,new R("rgba(255,0,0,1)").desaturate(100-r).toRgbString()),t.addColorStop(.17,new R("rgba(255,255,0,1)").desaturate(100-r).toRgbString()),t.addColorStop(.34,new R("rgba(0,255,0,1)").desaturate(100-r).toRgbString()),t.addColorStop(.51,new R("rgba(0,255,255,1)").desaturate(100-r).toRgbString()),t.addColorStop(.68,new R("rgba(0,0,255,1)").desaturate(100-r).toRgbString()),t.addColorStop(.85,new R("rgba(255,0,255,1)").desaturate(100-r).toRgbString()),t.addColorStop(1,new R("rgba(255,0,0,1)").desaturate(100-r).toRgbString()),c.fillStyle=t,c.fillRect(0,0,n,s);const u=c.createLinearGradient(0,0,0,s);u.addColorStop(0,"rgba(255,255,255,1)"),u.addColorStop(.5,"rgba(255,255,255,0)"),c.fillStyle=u,c.fillRect(0,0,n,s);const m=c.createLinearGradient(0,0,0,s);m.addColorStop(.5,"rgba(0,0,0,0)"),m.addColorStop(1,"rgba(0,0,0,1)"),c.fillStyle=m,c.fillRect(0,0,n,s);const f=h.createLinearGradient(0,0,0,i),b=e.clone().greyscale().toRgb();f.addColorStop(0,`rgba(${d},${g},${p},1)`),f.addColorStop(1,`rgba(${b.r},${b.g},${b.b},1)`),h.fillStyle=f,h.fillRect(0,0,a,l)}if("hex"!==t){u.clearRect(0,0,a,l);const e=u.createLinearGradient(0,0,0,l);e.addColorStop(0,`rgba(${d},${g},${p},1)`),e.addColorStop(1,`rgba(${d},${g},${p},0)`),u.fillStyle=e,u.fillRect(0,0,a,l)}}handleFocusOut({relatedTarget:e}){e&&!this.parent.contains(e)&&this.hide(!0)}handleDismiss({code:e}){const t=this;t.isOpen&&"Escape"===e&&t.hide()}handleScroll(e){const{activeElement:t}=document;(J&&this.dragElement||t&&this.controlKnobs.includes(t))&&(e.stopPropagation(),e.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(e){const{target:t,code:o}=e;[q,Y].includes(o)?e.preventDefault():[K,G].includes(o)&&this.menuClickHandler({target:t})}menuClickHandler(e){const t=this,{target:o}=e,{format:n}=t,r=(ce(o,"data-value")||"").trim(),a=t.colorMenu.querySelector("li.active"),s=de.includes(r)?"white":r;var i;t.color=new R(s,{format:n}),t.setControlPositions(),t.setColorAppearence(),t.updateInputs(!0),t.updateControls(),t.updateVisuals(),a&&(ie(a,"active"),i="aria-selected",a.removeAttribute(i)),a!==o&&(se(o,"active"),le(o,"aria-selected","true"),de.includes(r)&&(t.value=r,we(t)))}pointerDown(e){const t=this,{type:o,target:r,touches:a,pageX:s,pageY:i}=e,{visuals:l,controlKnobs:c,format:h}=t,[u,d,g]=l,[p,m,f]=c,b="canvas"===r.tagName?r:n("canvas",r.parentElement),w=ee(b),v="touchstart"===o?a[0].pageX:s,k="touchstart"===o?a[0].pageY:i,x=v-window.pageXOffset-w.left,y=k-window.pageYOffset-w.top;r===u||r===p?(t.dragElement=b,t.changeControl1({offsetX:x,offsetY:y})):r===d||r===m?(t.dragElement=b,t.changeControl2({offsetY:y})):"hex"===h||r!==g&&r!==f||(t.dragElement=b,t.changeAlpha({offsetY:y})),e.preventDefault()}pointerUp({target:e}){const t=this,o=document.getSelection();t.dragElement||o.toString().length||t.parent.contains(e)||t.hide(),t.dragElement=null}pointerMove(e){const t=this,{dragElement:o,visuals:n,format:r}=t,[a,s,i]=n,{type:l,touches:c,pageX:h,pageY:u}=e;if(!o)return;const d=ee(o),g="touchmove"===l?c[0].pageX:h,p="touchmove"===l?c[0].pageY:u,m=g-window.pageXOffset-d.left,f=p-window.pageYOffset-d.top;o===a&&t.changeControl1({offsetX:m,offsetY:f}),o===s&&t.changeControl2({offsetY:f}),o===i&&"hex"!==r&&t.changeAlpha({offsetY:f})}handleKnobs(e){const{target:t,code:o}=e,n=this;if(![Y,q,_,V].includes(o))return;e.preventDefault();const{activeElement:r}=document,{controlKnobs:a}=n,s=a.find(e=>e===r),[i,l,c]=a;if(s){let r=0,a=0;t===i?([_,V].includes(o)?n.controlPositions.c1x+=o===V?1:-1:[Y,q].includes(o)&&(n.controlPositions.c1y+=o===q?1:-1),r=n.controlPositions.c1x,a=n.controlPositions.c1y,n.changeControl1({offsetX:r,offsetY:a})):t===l?(n.controlPositions.c2y+=[q,V].includes(o)?1:-1,a=n.controlPositions.c2y,n.changeControl2({offsetY:a})):t===c&&(n.controlPositions.c3y+=[q,V].includes(o)?1:-1,a=n.controlPositions.c3y,n.changeAlpha({offsetY:a})),n.setColorAppearence(),n.updateInputs(),n.updateControls(),n.updateVisuals(),n.handleScroll(e)}}changeHandler(){const e=this;let t;const{activeElement:o}=document,{inputs:n,format:r,value:a,input:s}=e,[i,l,c,h]=n,u=e.includeNonColor&&de.includes(a);(o===s||o&&n.includes(o))&&(t=o===s?u?"white":a:"hex"===r?i.value:"hsl"===r?`hsla(${i.value},${l.value}%,${c.value}%,${h.value})`:`rgba(${n.map(e=>e.value).join(",")})`,e.color=new R(t,{format:r}),e.setControlPositions(),e.setColorAppearence(),e.updateInputs(),e.updateControls(),e.updateVisuals(),o===s&&u&&(e.value=a))}changeControl1(e){let[t,o]=[0,0];const{offsetX:n,offsetY:r}=e,{format:a,controlPositions:s,height1:i,height2:l,height3:c,width1:h}=this;n>h?t=h:n>=0&&(t=n),r>i?o=i:r>=0&&(o=r);const u="hsl"!==a?Math.round(s.c2y/l*360):Math.round(t/h*360),d="hsl"!==a?Math.round(t/h*100):Math.round(100*(1-s.c2y/l)),g=Math.round(100*(1-o/i)),p="hex"!==a?Math.round(100*(1-s.c3y/c))/100:1,m="hsl"!==a?"hsva":"hsla";this.color=new R(`${m}(${u},${d}%,${g}%,${p})`,{format:a}),this.controlPositions.c1x=t,this.controlPositions.c1y=o,this.setColorAppearence(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(e){const{offsetY:t}=e,{format:o,width1:n,height1:r,height2:a,height3:s,controlPositions:i}=this;let l=0;t>a?l=a:t>=0&&(l=t);const c="hsl"!==o?Math.round(l/a*360):Math.round(i.c1x/n*360),h="hsl"!==o?Math.round(i.c1x/n*100):Math.round(100*(1-l/a)),u=Math.round(100*(1-i.c1y/r)),d="hex"!==o?Math.round(100*(1-i.c3y/s))/100:1,g="hsl"!==o?"hsva":"hsla";this.color=new R(`${g}(${c},${h}%,${u}%,${d})`,{format:o}),this.controlPositions.c2y=l,this.setColorAppearence(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(e){const{height3:t}=this,{offsetY:o}=e;let n=0;o>t?n=t:o>=0&&(n=o);const r=Math.round(100*(1-n/t));this.color.setAlpha(r/100),this.controlPositions.c3y=n,this.updateInputs(),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:e,colorPicker:t,colorMenu:o}=this,n=ee(e),{offsetHeight:r}=e,a=document.documentElement.clientHeight,s=ve(t,!0)?t:o,{offsetHeight:i}=s,l=a-n.bottom,c=n.top,h=n.top+i+r>a,u=n.top-i<0;ae(s,"show")&&l<c&&h&&(ie(s,"show"),se(s,"show-top")),ae(s,"show-top")&&l>c&&u&&(ie(s,"show-top"),se(s,"show"))}setControlPositions(){const e=this,{hsv:t,hsl:o,format:n,height1:r,height2:a,height3:s,width1:i}=e,l=o.h,c="hsl"!==n?t.s:o.s,h="hsl"!==n?t.v:o.l,u=t.a;e.controlPositions.c1x="hsl"!==n?c*i:l/360*i,e.controlPositions.c1y=(1-h)*r,e.controlPositions.c2y="hsl"!==n?l/360*a:(1-c)*a,"hex"!==n&&(e.controlPositions.c3y=(1-u)*s)}setColorAppearence(){const e=this,{componentLabels:t,colorLabels:o,hsl:n,hsv:r,hex:a,format:s,knobLabels:i}=e,{lightnessLabel:l,saturationLabel:c,hueLabel:h,alphaLabel:u,appearanceLabel:d,hexLabel:g}=t;let{requiredLabel:p}=t;const[m,f,b]=i,w=Math.round(n.h),v=r.a,k="hsl"===s?n.s:r.s,x=Math.round(100*k),y=Math.round(100*n.l),S=100*r.v;let M;if(100===y&&0===x)M=o.white;else if(0===y)M=o.black;else if(0===x)M=o.grey;else if(w<15||w>=345)M=o.red;else if(w>=15&&w<45)M=S>80&&x>80?o.orange:o.brown;else if(w>=45&&w<75){const e=w>=54&&w<75&&S<80;M=w>46&&w<54&&S<80&&x>90?o.gold:o.yellow,M=e?o.olive:M}else w>=75&&w<155?M=S<68?o.green:o.lime:w>=155&&w<175?M=o.teal:w>=175&&w<195?M=o.cyan:w>=195&&w<255?M=o.blue:w>=255&&w<270?M=o.violet:w>=270&&w<295?M=o.magenta:w>=295&&w<345&&(M=o.pink);if("hsl"===s?(m.innerText=`${h}: ${w}°. ${l}: ${y}%`,f.innerText=`${c}: ${x}%`):(m.innerText=`${l}: ${y}%. ${c}: ${x}%`,f.innerText=`${h}: ${w}°`),"hex"!==s){const e=Math.round(100*v);b.innerText=`${u}: ${e}%`}e.appearance.innerText=`${d}: ${M}.`;const C="hex"===s?`${g} ${a.split("").join(" ")}.`:e.value.toUpperCase();if(e.label){const t=e.label.innerText.replace("*","").trim(),[o]=e.pickerToggle.children;p=e.required?" "+p:"",o.innerText=`${t}: ${C}${p}`}}updateControls(){const{format:e,controlKnobs:t,controlPositions:o}=this,[n,r,a]=t;n.style.transform=`translate3d(${o.c1x-3}px,${o.c1y-3}px,0)`,r.style.transform=`translate3d(0,${o.c2y-3}px,0)`,"hex"!==e&&(a.style.transform=`translate3d(0,${o.c3y-3}px,0)`)}updateInputs(e){const t=this,{value:o,rgb:n,hsl:a,hsv:s,format:i,parent:l,input:c,inputs:h}=t,[u,d,g,p]=h,m=a.a,f=Math.round(a.h),b=Math.round(100*a.s),w="hsl"===i?a.l:s.v,v=Math.round(100*w);let k;"hex"===i?(k=t.color.toHexString(),u.value=t.hex):"hsl"===i?(k=t.color.toHslString(),u.value=""+f,d.value=""+b,g.value=""+v,p.value=""+m):"rgb"===i&&(k=t.color.toRgbString(),u.value=""+n.r,d.value=""+n.g,g.value=""+n.b,p.value=""+m),t.value=""+k,r(c.style,{backgroundColor:k}),t.isDark?(ae(l,"light")&&ie(l,"light"),ae(l,"dark")||se(l,"dark")):(ae(l,"dark")&&ie(l,"dark"),ae(l,"light")||se(l,"light")),e||k===o||we(t)}keyHandler(e){const t=this,{menuToggle:o}=t,{activeElement:n}=document,{code:r}=e;[K,G].includes(r)&&(o&&n===o||!n)&&(e.preventDefault(),n?t.toggleMenu():t.togglePicker(e))}togglePicker(e){e.preventDefault();const t=this,o=ve(t.colorPicker,!0);t.isOpen&&o?t.hide(!0):t.showPicker()}showPicker(){ve(this.colorMenu),se(this.colorPicker,"show"),this.input.focus(),this.show(),le(this.pickerToggle,"aria-expanded","true")}toggleMenu(){const e=this,t=ve(e.colorMenu,!0);e.isOpen&&t?e.hide(!0):function(e){ve(e.colorPicker),se(e.colorMenu,"show"),e.show(),le(e.menuToggle,"aria-expanded","true")}(e)}show(){const e=this;e.isOpen||(se(e.parent,"open"),be(e,!0),e.updateDropdownPosition(),e.isOpen=!0)}hide(e){const t=this;if(t.isOpen){const{pickerToggle:o,colorMenu:n}=t;be(t),ie(t.parent,"open"),ve(t.colorPicker),le(o,"aria-expanded","false"),n&&(ve(n),le(t.menuToggle,"aria-expanded","false")),t.isValid||(t.value=t.color.toString()),t.isOpen=!1,e||o.focus()}}dispose(){const{input:e,parent:t}=this;this.hide(!0),me(this),[...t.children].forEach(t=>{t!==e&&t.remove()}),re.remove(e,"color-picker")}}r(ke,{Color:R,getInstance:e=>{return t=e,o="color-picker",re.get(t,o);var t,o},init:e=>new ke(e),selector:'[data-function="color-picker"]'});class xe extends HTMLElement{constructor(){super(),this.colorPicker=null,this.input=n("input",this),this.isDisconnected=!0,this.attachShadow({mode:"open"})}get value(){return this.input.value}get color(){return this.colorPicker&&this.colorPicker.color}connectedCallback(){this.colorPicker?this.isDisconnected&&(this.isDisconnected=!1):(this.colorPicker=new ke(this.input),this.isDisconnected=!1,this.shadowRoot&&this.shadowRoot.append(a("slot")))}disconnectedCallback(){this.colorPicker&&this.colorPicker.dispose(),this.isDisconnected=!0}}r(xe,{Color:R,ColorPicker:ke}),customElements.define("color-picker",xe);export default xe;
+/*!
+* ColorPickerElement v0.0.1 (http://thednp.github.io/color-picker)
+* Copyright 2022 © thednp
+* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
+*/
+/**
+ * Returns the `document` or the `#document` element.
+ * @see https://github.com/floating-ui/floating-ui
+ * @param {(Node | HTMLElement | Element | globalThis)=} node
+ * @returns {Document}
+ */
+function getDocument(node) {
+  if (node instanceof HTMLElement) return node.ownerDocument;
+  if (node instanceof Window) return node.document;
+  return window.document;
+}
+
+/**
+ * A global array of possible `ParentNode`.
+ */
+const parentNodes = [Document, Element, HTMLElement];
+
+/**
+ * Shortcut for `HTMLElement.getElementsByTagName` method. Some `Node` elements
+ * like `ShadowRoot` do not support `getElementsByTagName`.
+ *
+ * @param {string} selector the tag name
+ * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
+ * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
+ */
+function getElementsByTagName(selector, parent) {
+  const lookUp = parent && parentNodes
+    .some((x) => parent instanceof x) ? parent : getDocument();
+  return lookUp.getElementsByTagName(selector);
+}
+
+/**
+ * Shortcut for `Object.assign()` static method.
+ * @param  {Record<string, any>} obj a target object
+ * @param  {Record<string, any>} source a source object
+ */
+const ObjectAssign = (obj, source) => Object.assign(obj, source);
+
+/**
+ * This is a shortie for `document.createElement` method
+ * which allows you to create a new `HTMLElement` for a given `tagName`
+ * or based on an object with specific non-readonly attributes:
+ * `id`, `className`, `textContent`, `style`, etc.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
+ *
+ * @param {Record<string, string> | string} param `tagName` or object
+ * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+ */
+function createElement(param) {
+  if (typeof param === 'string') {
+    return getDocument().createElement(param);
+  }
+
+  const { tagName } = param;
+  const attr = { ...param };
+  const newElement = createElement(tagName);
+  delete attr.tagName;
+  ObjectAssign(newElement, attr);
+  return newElement;
+}
+
+/**
+ * Shortcut for `HTMLElement.setAttribute()` method.
+ * @param  {HTMLElement | Element} element target element
+ * @param  {string} attribute attribute name
+ * @param  {string} value attribute value
+ * @returns {void}
+ */
+const setAttribute = (element, attribute, value) => element.setAttribute(attribute, value);
+
+/**
+ * Shortcut for `HTMLElement.getAttribute()` method.
+ * @param {HTMLElement | Element} element target element
+ * @param {string} attribute attribute name
+ * @returns {string?} attribute value
+ */
+const getAttribute = (element, attribute) => element.getAttribute(attribute);
+
+/**
+ * Returns the `document.head` or the `<head>` element.
+ *
+ * @param {(Node | HTMLElement | Element | globalThis)=} node
+ * @returns {HTMLElement | HTMLHeadElement}
+ */
+function getDocumentHead(node) {
+  return getDocument(node).head;
+}
+
+/**
+ * Shortcut for `window.getComputedStyle(element).propertyName`
+ * static method.
+ *
+ * * If `element` parameter is not an `HTMLElement`, `getComputedStyle`
+ * throws a `ReferenceError`.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {string} property the css property
+ * @return {string} the css property value
+ */
+function getElementStyle(element, property) {
+  const computedStyle = getComputedStyle(element);
+
+  // @ts-ignore -- must use camelcase strings,
+  // or non-camelcase strings with `getPropertyValue`
+  return property in computedStyle ? computedStyle[property] : '';
+}
+
+/**
+ * Shortcut for `Object.keys()` static method.
+ * @param  {Record<string, any>} obj a target object
+ * @returns {string[]}
+ */
+const ObjectKeys = (obj) => Object.keys(obj);
+
+/**
+ * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
+ * @param  {HTMLElement | Element} element target element
+ * @param  {Partial<CSSStyleDeclaration>} styles attribute value
+ */
+// @ts-ignore
+const setElementStyle = (element, styles) => ObjectAssign(element.style, styles);
+
+/**
+ * A list of explicit default non-color values.
+ */
+const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
+
+/**
+ * Round colour components, for all formats except HEX.
+ * @param {number} v one of the colour components
+ * @returns {number} the rounded number
+ */
+function roundPart(v) {
+  const floor = Math.floor(v);
+  return v - floor < 0.5 ? floor : Math.round(v);
+}
+
+// Color supported formats
+const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
+
+// Hue angles
+const ANGLES = 'deg|rad|grad|turn';
+
+// <http://www.w3.org/TR/css3-values/#integers>
+const CSS_INTEGER = '[-\\+]?\\d+%?';
+
+// Include CSS3 Module
+// <http://www.w3.org/TR/css3-values/#number-value>
+const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
+
+// Include CSS4 Module Hue degrees unit
+// <https://www.w3.org/TR/css3-values/#angle-value>
+const CSS_ANGLE = `[-\\+]?\\d*\\.?\\d+(?:${ANGLES})?`;
+
+// Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
+
+// Add angles to the mix
+const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
+
+// Actual matching.
+// Parentheses and commas are optional, but not required.
+// Whitespace can take the place of commas or opening paren
+const PERMISSIVE_MATCH = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
+
+const matchers = {
+  CSS_UNIT: new RegExp(CSS_UNIT2),
+  hwb: new RegExp(`hwb${PERMISSIVE_MATCH}`),
+  rgb: new RegExp(`rgb(?:a)?${PERMISSIVE_MATCH}`),
+  hsl: new RegExp(`hsl(?:a)?${PERMISSIVE_MATCH}`),
+  hsv: new RegExp(`hsv(?:a)?${PERMISSIVE_MATCH}`),
+  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})$/,
+};
+
+/**
+ * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+ * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+ * @param {string} n testing number
+ * @returns {boolean} the query result
+ */
+function isOnePointZero(n) {
+  return `${n}`.includes('.') && parseFloat(n) === 1;
+}
+
+/**
+ * Check to see if string passed in is a percentage
+ * @param {string} n testing number
+ * @returns {boolean} the query result
+ */
+function isPercentage(n) {
+  return `${n}`.includes('%');
+}
+
+/**
+ * Check to see if string passed in is an angle
+ * @param {string} n testing string
+ * @returns {boolean} the query result
+ */
+function isAngle(n) {
+  return ANGLES.split('|').some((a) => `${n}`.includes(a));
+}
+
+/**
+ * Check to see if string passed is a web safe colour.
+ * @param {string} color a colour name, EG: *red*
+ * @returns {boolean} the query result
+ */
+function isColorName(color) {
+  return !['#', ...COLOR_FORMAT].some((s) => color.includes(s))
+    && !/[0-9]/.test(color);
+}
+
+/**
+ * Check to see if it looks like a CSS unit
+ * (see `matchers` above for definition).
+ * @param {string | number} color testing value
+ * @returns {boolean} the query result
+ */
+function isValidCSSUnit(color) {
+  return Boolean(matchers.CSS_UNIT.exec(String(color)));
+}
+
+/**
+ * Take input from [0, n] and return it as [0, 1]
+ * @param {*} N the input number
+ * @param {number} max the number maximum value
+ * @returns {number} the number in [0, 1] value range
+ */
+function bound01(N, max) {
+  let n = N;
+  if (isOnePointZero(n)) n = '100%';
+
+  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+
+  // Handle hue angles
+  if (isAngle(N)) n = N.replace(new RegExp(ANGLES), '');
+
+  // Automatically convert percentage into number
+  if (isPercentage(n)) n = parseInt(String(n * max), 10) / 100;
+
+  // Handle floating point rounding errors
+  if (Math.abs(n - max) < 0.000001) {
+    return 1;
+  }
+  // Convert into [0, 1] range if it isn't already
+  if (max === 360) {
+    // If n is a hue given in degrees,
+    // wrap around out-of-range values into [0, 360] range
+    // then convert into [0, 1].
+    n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+  } else {
+    // If n not a hue given in degrees
+    // Convert into [0, 1] range if it isn't already.
+    n = (n % max) / parseFloat(String(max));
+  }
+  return n;
+}
+
+/**
+ * Return a valid alpha value [0,1] with all invalid values being set to 1.
+ * @param {string | number} a transparency value
+ * @returns {number} a transparency value in the [0, 1] range
+ */
+function boundAlpha(a) {
+  let na = parseFloat(`${a}`);
+
+  if (Number.isNaN(na) || na < 0 || na > 1) {
+    na = 1;
+  }
+
+  return na;
+}
+
+/**
+ * Force a number between 0 and 1.
+ * @param {number} v the float number
+ * @returns {number} - the resulting number
+ */
+function clamp01(v) {
+  return Math.min(1, Math.max(0, v));
+}
+
+/**
+ * Returns the hexadecimal value of a web safe colour.
+ * @param {string} name
+ * @returns {string}
+ */
+function getRGBFromName(name) {
+  const documentHead = getDocumentHead();
+  setElementStyle(documentHead, { color: name });
+  const colorName = getElementStyle(documentHead, 'color');
+  setElementStyle(documentHead, { color: '' });
+  return colorName;
+}
+
+/**
+ * Converts a decimal value to hexadecimal.
+ * @param {number} d the input number
+ * @returns {string} - the hexadecimal value
+ */
+function convertDecimalToHex(d) {
+  return roundPart(d * 255).toString(16);
+}
+
+/**
+ * Converts a hexadecimal value to decimal.
+ * @param {string} h hexadecimal value
+ * @returns {number} number in decimal format
+ */
+function convertHexToDecimal(h) {
+  return parseIntFromHex(h) / 255;
+}
+
+/**
+ * Converts a base-16 hexadecimal value into a base-10 integer.
+ * @param {string} val
+ * @returns {number}
+ */
+function parseIntFromHex(val) {
+  return parseInt(val, 16);
+}
+
+/**
+ * Force a hexadecimal value to have 2 characters.
+ * @param {string} c string with [0-9A-F] ranged values
+ * @returns {string} 0 => 00, a => 0a
+ */
+function pad2(c) {
+  return c.length === 1 ? `0${c}` : String(c);
+}
+
+/**
+ * Converts an RGB colour value to HSL.
+ *
+ * @param {number} R Red component [0, 255]
+ * @param {number} G Green component [0, 255]
+ * @param {number} B Blue component [0, 255]
+ * @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
+ */
+function rgbToHsl(R, G, B) {
+  const r = R / 255;
+  const g = G / 255;
+  const b = B / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max === min) {
+    s = 0;
+    h = 0; // achromatic
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return { h, s, l };
+}
+
+/**
+ * Returns a normalized RGB component value.
+ * @param {number} p
+ * @param {number} q
+ * @param {number} t
+ * @returns {number}
+ */
+function hueToRgb(p, q, t) {
+  let T = t;
+  if (T < 0) T += 1;
+  if (T > 1) T -= 1;
+  if (T < 1 / 6) return p + (q - p) * (6 * T);
+  if (T < 1 / 2) return q;
+  if (T < 2 / 3) return p + (q - p) * (2 / 3 - T) * 6;
+  return p;
+}
+
+/**
+* Returns an HWB colour object from an RGB colour object.
+* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
+* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
+*
+* @param {number} R Red component [0, 255]
+* @param {number} G Green [0, 255]
+* @param {number} B Blue [0, 255]
+* @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
+*/
+function rgbToHwb(R, G, B) {
+  const r = R / 255;
+  const g = G / 255;
+  const b = B / 255;
+
+  let f = 0;
+  let i = 0;
+  const whiteness = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const black = 1 - max;
+
+  if (max === whiteness) return { h: 0, w: whiteness, b: black };
+  if (r === whiteness) {
+    f = g - b;
+    i = 3;
+  } else {
+    f = g === whiteness ? b - r : r - g;
+    i = g === whiteness ? 5 : 1;
+  }
+
+  const h = (i - f / (max - whiteness)) / 6;
+  return {
+    h: h === 1 ? 0 : h,
+    w: whiteness,
+    b: black,
+  };
+}
+
+/**
+* Returns an RGB colour object from an HWB colour.
+*
+* @param {number} H Hue Angle [0, 1]
+* @param {number} W Whiteness [0, 1]
+* @param {number} B Blackness [0, 1]
+* @return {CP.RGB} {r,g,b} object with [0, 255] ranged values
+*
+* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
+* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
+*/
+function hwbToRgb(H, W, B) {
+  if (W + B >= 1) {
+    const gray = (W / (W + B)) * 255;
+    return { r: gray, g: gray, b: gray };
+  }
+  let { r, g, b } = hslToRgb(H, 1, 0.5);
+  [r, g, b] = [r, g, b]
+    .map((v) => (v / 255) * (1 - W - B) + W)
+    .map((v) => v * 255);
+
+  return { r, g, b };
+}
+
+/**
+ * Converts an HSL colour value to RGB.
+ *
+ * @param {number} h Hue Angle [0, 1]
+ * @param {number} s Saturation [0, 1]
+ * @param {number} l Lightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
+ */
+function hslToRgb(h, s, l) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (s === 0) {
+    // achromatic
+    g = l;
+    b = l;
+    r = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+  [r, g, b] = [r, g, b].map((x) => x * 255);
+
+  return { r, g, b };
+}
+
+/**
+ * Converts an RGB colour value to HSV.
+ *
+ * @param {number} R Red component [0, 255]
+ * @param {number} G Green [0, 255]
+ * @param {number} B Blue [0, 255]
+ * @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
+ */
+function rgbToHsv(R, G, B) {
+  const r = R / 255;
+  const g = G / 255;
+  const b = B / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  if (max === min) {
+    h = 0; // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return { h, s, v };
+}
+
+/**
+ * Converts an HSV colour value to RGB.
+ *
+ * @param {number} H Hue Angle [0, 1]
+ * @param {number} S Saturation [0, 1]
+ * @param {number} V Brightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
+ */
+function hsvToRgb(H, S, V) {
+  const h = H * 6;
+  const s = S;
+  const v = V;
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+  return { r: r * 255, g: g * 255, b: b * 255 };
+}
+
+/**
+ * Converts an RGB colour to hex
+ *
+ * Assumes r, g, and b are contained in the set [0, 255]
+ * Returns a 3 or 6 character hex
+ * @param {number} r Red component [0, 255]
+ * @param {number} g Green [0, 255]
+ * @param {number} b Blue [0, 255]
+ * @param {boolean=} allow3Char
+ * @returns {string}
+ */
+function rgbToHex(r, g, b, allow3Char) {
+  const hex = [
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
+  ];
+
+  // Return a 3 character hex if possible
+  if (allow3Char && hex[0].charAt(0) === hex[0].charAt(1)
+    && hex[1].charAt(0) === hex[1].charAt(1)
+      && hex[2].charAt(0) === hex[2].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+  }
+
+  return hex.join('');
+}
+
+/**
+ * Converts an RGBA color plus alpha transparency to hex8.
+ *
+ * @param {number} r Red component [0, 255]
+ * @param {number} g Green [0, 255]
+ * @param {number} b Blue [0, 255]
+ * @param {number} a Alpha transparency [0, 1]
+ * @param {boolean=} allow4Char when *true* it will also find hex shorthand
+ * @returns {string} a hexadecimal value with alpha transparency
+ */
+function rgbaToHex(r, g, b, a, allow4Char) {
+  const hex = [
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
+    pad2(convertDecimalToHex(a)),
+  ];
+
+  // Return a 4 character hex if possible
+  if (allow4Char && hex[0].charAt(0) === hex[0].charAt(1)
+    && hex[1].charAt(0) === hex[1].charAt(1)
+      && hex[2].charAt(0) === hex[2].charAt(1)
+        && hex[3].charAt(0) === hex[3].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+  }
+  return hex.join('');
+}
+
+/**
+ * Returns a colour object corresponding to a given number.
+ * @param {number} color input number
+ * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
+ */
+function numberInputToObject(color) {
+  /* eslint-disable no-bitwise */
+  return {
+    r: color >> 16,
+    g: (color & 0xff00) >> 8,
+    b: color & 0xff,
+  };
+  /* eslint-enable no-bitwise */
+}
+
+/**
+ * Permissive string parsing. Take in a number of formats, and output an object
+ * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
+ * @param {string} input colour value in any format
+ * @returns {Record<string, (number | string)> | false} an object matching the RegExp
+ */
+function stringInputToObject(input) {
+  let color = input.trim().toLowerCase();
+  if (color.length === 0) {
+    return {
+      r: 0, g: 0, b: 0, a: 0,
+    };
+  }
+  let named = false;
+  if (isColorName(color)) {
+    color = getRGBFromName(color);
+    named = true;
+  } else if (nonColors.includes(color)) {
+    const isTransparent = color === 'transparent';
+    const rgb = isTransparent ? 0 : 255;
+    const a = isTransparent ? 0 : 1;
+    return {
+      r: rgb, g: rgb, b: rgb, a, format: 'rgb',
+    };
+  }
+
+  // Try to match string input using regular expressions.
+  // Keep most of the number bounding out of this function,
+  //   don't worry about [0,1] or [0,100] or [0,360]
+  // Just return an object and let the conversion functions handle that.
+  // This way the result will be the same whether Color is initialized with string or object.
+  let [, m1, m2, m3, m4] = matchers.rgb.exec(color) || [];
+  if (m1 && m2 && m3/* && m4 */) {
+    return {
+      r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
+    };
+  }
+  [, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
+  if (m1 && m2 && m3/* && m4 */) {
+    return {
+      h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
+    };
+  }
+  [, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
+  if (m1 && m2 && m3/* && m4 */) {
+    return {
+      h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
+    };
+  }
+  [, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
+  if (m1 && m2 && m3) {
+    return {
+      h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
+    };
+  }
+  [, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
+  if (m1 && m2 && m3 && m4) {
+    return {
+      r: parseIntFromHex(m1),
+      g: parseIntFromHex(m2),
+      b: parseIntFromHex(m3),
+      a: convertHexToDecimal(m4),
+      // format: named ? 'rgb' : 'hex8',
+      format: named ? 'rgb' : 'hex',
+    };
+  }
+  [, m1, m2, m3] = matchers.hex6.exec(color) || [];
+  if (m1 && m2 && m3) {
+    return {
+      r: parseIntFromHex(m1),
+      g: parseIntFromHex(m2),
+      b: parseIntFromHex(m3),
+      format: named ? 'rgb' : 'hex',
+    };
+  }
+  [, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
+  if (m1 && m2 && m3 && m4) {
+    return {
+      r: parseIntFromHex(m1 + m1),
+      g: parseIntFromHex(m2 + m2),
+      b: parseIntFromHex(m3 + m3),
+      a: convertHexToDecimal(m4 + m4),
+      // format: named ? 'rgb' : 'hex8',
+      format: named ? 'rgb' : 'hex',
+    };
+  }
+  [, m1, m2, m3] = matchers.hex3.exec(color) || [];
+  if (m1 && m2 && m3) {
+    return {
+      r: parseIntFromHex(m1 + m1),
+      g: parseIntFromHex(m2 + m2),
+      b: parseIntFromHex(m3 + m3),
+      format: named ? 'rgb' : 'hex',
+    };
+  }
+  return false;
+}
+
+/**
+ * Given a string or object, convert that input to RGB
+ *
+ * Possible string inputs:
+ * ```
+ * "red"
+ * "#f00" or "f00"
+ * "#ff0000" or "ff0000"
+ * "#ff000000" or "ff000000" // CSS4 Module
+ * "rgb 255 0 0" or "rgb (255, 0, 0)"
+ * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+ * "rgba(255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+ * "rgba(1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+ * "rgb(255 0 0 / 10%)" or "rgb 255 0 0 0.1" // CSS4 Module
+ * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+ * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+ * "hsl(0deg 100% 50% / 50%)" or "hsl 0 100 50 50" // CSS4 Module
+ * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+ * "hsva(0, 100%, 100%, 0.1)" or "hsva 0 100% 100% 0.1"
+ * "hsv(0deg 100% 100% / 10%)" or "hsv 0 100 100 0.1" // CSS4 Module
+ * "hwb(0deg, 100%, 100%, 100%)" or "hwb 0 100% 100% 0.1" // CSS4 Module
+ * ```
+ * @param {string | Record<string, any>} input
+ * @returns {CP.ColorObject}
+ */
+function inputToRGB(input) {
+  let rgb = { r: 0, g: 0, b: 0 };
+  let color = input;
+  let a = 1;
+  let s = null;
+  let v = null;
+  let l = null;
+  let w = null;
+  let b = null;
+  let h = null;
+  let r = null;
+  let g = null;
+  let ok = false;
+  let format = 'hex';
+
+  if (typeof input === 'string') {
+    // @ts-ignore -- this now is converted to object
+    color = stringInputToObject(input);
+    if (color) ok = true;
+  }
+  if (typeof color === 'object') {
+    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+      ({ r, g, b } = color);
+      // RGB values now are all in [0, 255] range
+      [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255);
+      rgb = { r, g, b };
+      ok = true;
+      format = 'rgb';
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+      ({ h, s, v } = color);
+      h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+      s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
+      v = typeof v === 'number' ? v : bound01(v, 100); // brightness can be `5%` or a [0, 1] value
+      rgb = hsvToRgb(h, s, v);
+      ok = true;
+      format = 'hsv';
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+      ({ h, s, l } = color);
+      h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+      s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
+      l = typeof l === 'number' ? l : bound01(l, 100); // lightness can be `5%` or a [0, 1] value
+      rgb = hslToRgb(h, s, l);
+      ok = true;
+      format = 'hsl';
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
+      ({ h, w, b } = color);
+      h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+      w = typeof w === 'number' ? w : bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
+      b = typeof b === 'number' ? b : bound01(b, 100); // blackness can be `5%` or a [0, 1] value
+      rgb = hwbToRgb(h, w, b);
+      ok = true;
+      format = 'hwb';
+    }
+    if (isValidCSSUnit(color.a)) {
+      a = color.a;
+      a = isPercentage(`${a}`) ? bound01(a, 100) : a;
+    }
+  }
+
+  return {
+    ok, // @ts-ignore
+    format: color.format || format,
+    r: Math.min(255, Math.max(rgb.r, 0)),
+    g: Math.min(255, Math.max(rgb.g, 0)),
+    b: Math.min(255, Math.max(rgb.b, 0)),
+    a: boundAlpha(a),
+  };
+}
+
+/**
+ * @class
+ * Returns a new `Color` instance.
+ * @see https://github.com/bgrins/TinyColor
+ */
+class Color {
+  /**
+   * @constructor
+   * @param {CP.ColorInput} input the given colour value
+   * @param {CP.ColorFormats=} config the given format
+   */
+  constructor(input, config) {
+    let color = input;
+    const configFormat = config && COLOR_FORMAT.includes(config)
+      ? config : 'rgb';
+
+    // If input is already a `Color`, return itself
+    if (color instanceof Color) {
+      color = inputToRGB(color);
+    }
+    if (typeof color === 'number') {
+      color = numberInputToObject(color);
+    }
+    const {
+      r, g, b, a, ok, format,
+    } = inputToRGB(color);
+
+    // bind
+    const self = this;
+
+    /** @type {CP.ColorInput} */
+    self.originalInput = color;
+    /** @type {number} */
+    self.r = r;
+    /** @type {number} */
+    self.g = g;
+    /** @type {number} */
+    self.b = b;
+    /** @type {number} */
+    self.a = a;
+    /** @type {boolean} */
+    self.ok = ok;
+    /** @type {CP.ColorFormats} */
+    self.format = configFormat || format;
+  }
+
+  /**
+   * Checks if the current input value is a valid colour.
+   * @returns {boolean} the query result
+   */
+  get isValid() {
+    return this.ok;
+  }
+
+  /**
+   * Checks if the current colour requires a light text colour.
+   * @returns {boolean} the query result
+   */
+  get isDark() {
+    return this.brightness < 120;
+  }
+
+  /**
+   * Returns the perceived luminance of a colour.
+   * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+   * @returns {number} a number in the [0, 1] range
+   */
+  get luminance() {
+    const { r, g, b } = this;
+    let R = 0;
+    let G = 0;
+    let B = 0;
+    const rp = r / 255;
+    const rg = g / 255;
+    const rb = b / 255;
+
+    if (rp <= 0.03928) {
+      R = rp / 12.92;
+    } else {
+      R = ((rp + 0.055) / 1.055) ** 2.4;
+    }
+    if (rg <= 0.03928) {
+      G = rg / 12.92;
+    } else {
+      G = ((rg + 0.055) / 1.055) ** 2.4;
+    }
+    if (rb <= 0.03928) {
+      B = rb / 12.92;
+    } else {
+      B = ((rb + 0.055) / 1.055) ** 2.4;
+    }
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  }
+
+  /**
+   * Returns the perceived brightness of the colour.
+   * @returns {number} a number in the [0, 255] range
+   */
+  get brightness() {
+    const { r, g, b } = this;
+    return (r * 299 + g * 587 + b * 114) / 1000;
+  }
+
+  /**
+   * Returns the colour as an RGBA object.
+   * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
+   */
+  toRgb() {
+    const {
+      r, g, b, a,
+    } = this;
+
+    return {
+      r, g, b, a: roundPart(a * 100) / 100,
+    };
+  }
+
+  /**
+   * Returns the RGBA values concatenated into a CSS3 Module string format.
+   * * rgb(255,255,255)
+   * * rgba(255,255,255,0.5)
+   * @returns {string} the CSS valid colour in RGB/RGBA format
+   */
+  toRgbString() {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
+
+    return a === 1
+      ? `rgb(${R}, ${G}, ${B})`
+      : `rgba(${R}, ${G}, ${B}, ${a})`;
+  }
+
+  /**
+   * Returns the RGBA values concatenated into a CSS4 Module string format.
+   * * rgb(255 255 255)
+   * * rgb(255 255 255 / 50%)
+   * @returns {string} the CSS valid colour in CSS4 RGB format
+   */
+  toRgbCSS4String() {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
+    const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
+
+    return `rgb(${R} ${G} ${B}${A})`;
+  }
+
+  /**
+   * Returns the hexadecimal value of the colour. When the parameter is *true*
+   * it will find a 3 characters shorthand of the decimal value.
+   *
+   * @param {boolean=} allow3Char when `true` returns shorthand HEX
+   * @returns {string} the hexadecimal colour format
+   */
+  toHex(allow3Char) {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+
+    return a === 1
+      ? rgbToHex(r, g, b, allow3Char)
+      : rgbaToHex(r, g, b, a, allow3Char);
+  }
+
+  /**
+   * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
+   * it will find a 3 characters shorthand of the value.
+   *
+   * @param {boolean=} allow3Char when `true` returns shorthand HEX
+   * @returns {string} the CSS valid colour in hexadecimal format
+   */
+  toHexString(allow3Char) {
+    return `#${this.toHex(allow3Char)}`;
+  }
+
+  /**
+   * Returns the HEX8 value of the colour.
+   * @param {boolean=} allow4Char when `true` returns shorthand HEX
+   * @returns {string} the CSS valid colour in hexadecimal format
+   */
+  toHex8(allow4Char) {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+
+    return rgbaToHex(r, g, b, a, allow4Char);
+  }
+
+  /**
+   * Returns the HEX8 value of the colour.
+   * @param {boolean=} allow4Char  when `true` returns shorthand HEX
+   * @returns {string} the CSS valid colour in hexadecimal format
+   */
+  toHex8String(allow4Char) {
+    return `#${this.toHex8(allow4Char)}`;
+  }
+
+  /**
+   * Returns the colour as a HSVA object.
+   * @returns {CP.HSVA} the `{h,s,v,a}` object with [0, 1] ranged values
+   */
+  toHsv() {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const { h, s, v } = rgbToHsv(r, g, b);
+
+    return {
+      h, s, v, a,
+    };
+  }
+
+  /**
+   * Returns the colour as an HSLA object.
+   * @returns {CP.HSLA} the `{h,s,l,a}` object with [0, 1] ranged values
+   */
+  toHsl() {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const { h, s, l } = rgbToHsl(r, g, b);
+
+    return {
+      h, s, l, a,
+    };
+  }
+
+  /**
+   * Returns the HSLA values concatenated into a CSS3 Module format string.
+   * * `hsl(150, 100%, 50%)`
+   * * `hsla(150, 100%, 50%, 0.5)`
+   * @returns {string} the CSS valid colour in HSL/HSLA format
+   */
+  toHslString() {
+    let {
+      h, s, l, a,
+    } = this.toHsl();
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100) / 100;
+
+    return a === 1
+      ? `hsl(${h}, ${s}%, ${l}%)`
+      : `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  /**
+   * Returns the HSLA values concatenated into a CSS4 Module format string.
+   * * `hsl(150deg 100% 50%)`
+   * * `hsl(150deg 100% 50% / 50%)`
+   * @returns {string} the CSS valid colour in CSS4 HSL format
+   */
+  toHslCSS4String() {
+    let {
+      h, s, l, a,
+    } = this.toHsl();
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
+
+    return `hsl(${h}deg ${s}% ${l}%${A})`;
+  }
+
+  /**
+   * Returns the colour as an HWBA object.
+   * @returns {CP.HWBA} the `{h,w,b,a}` object with [0, 1] ranged values
+   */
+  toHwb() {
+    const {
+      r, g, b, a,
+    } = this;
+    const { h, w, b: bl } = rgbToHwb(r, g, b);
+    return {
+      h, w, b: bl, a,
+    };
+  }
+
+  /**
+   * Returns the HWBA values concatenated into a string.
+   * @returns {string} the CSS valid colour in HWB format
+   */
+  toHwbString() {
+    let {
+      h, w, b, a,
+    } = this.toHwb();
+    h = roundPart(h * 360);
+    w = roundPart(w * 100);
+    b = roundPart(b * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
+
+    return `hwb(${h}deg ${w}% ${b}%${A})`;
+  }
+
+  /**
+   * Sets the alpha value of the current colour.
+   * @param {number} alpha a new alpha value in the [0, 1] range.
+   * @returns {Color} the `Color` instance
+   */
+  setAlpha(alpha) {
+    const self = this;
+    self.a = boundAlpha(alpha);
+    return self;
+  }
+
+  /**
+   * Saturate the colour with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  saturate(amount) {
+    const self = this;
+    if (typeof amount !== 'number') return self;
+    const { h, s, l } = self.toHsl();
+    const { r, g, b } = hslToRgb(h, clamp01(s + amount / 100), l);
+
+    ObjectAssign(self, { r, g, b });
+    return self;
+  }
+
+  /**
+   * Desaturate the colour with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  desaturate(amount) {
+    return typeof amount === 'number' ? this.saturate(-amount) : this;
+  }
+
+  /**
+   * Completely desaturates a colour into greyscale.
+   * Same as calling `desaturate(100)`
+   * @returns {Color} the `Color` instance
+   */
+  greyscale() {
+    return this.saturate(-100);
+  }
+
+  /**
+   * Increase the colour lightness with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  lighten(amount) {
+    const self = this;
+    if (typeof amount !== 'number') return self;
+
+    const { h, s, l } = self.toHsl();
+    const { r, g, b } = hslToRgb(h, s, clamp01(l + amount / 100));
+
+    ObjectAssign(self, { r, g, b });
+    return self;
+  }
+
+  /**
+   * Decrease the colour lightness with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  darken(amount) {
+    return typeof amount === 'number' ? this.lighten(-amount) : this;
+  }
+
+  /**
+   * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+   * Values outside of this range will be wrapped into this range.
+   *
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  spin(amount) {
+    const self = this;
+    if (typeof amount !== 'number') return self;
+
+    const { h, s, l } = self.toHsl();
+    const { r, g, b } = hslToRgb(clamp01(((h * 360 + amount) % 360) / 360), s, l);
+
+    ObjectAssign(self, { r, g, b });
+    return self;
+  }
+
+  /** Returns a clone of the current `Color` instance. */
+  clone() {
+    return new Color(this);
+  }
+
+  /**
+   * Returns the colour value in CSS valid string format.
+   * @param {boolean=} allowShort when *true*, HEX values can be shorthand
+   * @returns {string} the CSS valid colour in the configured format
+   */
+  toString(allowShort) {
+    const self = this;
+    const { format } = self;
+
+    if (format === 'hex') return self.toHexString(allowShort);
+    if (format === 'hsl') return self.toHslString();
+    if (format === 'hwb') return self.toHwbString();
+
+    return self.toRgbString();
+  }
+}
+
+ObjectAssign(Color, {
+  ANGLES,
+  CSS_ANGLE,
+  CSS_INTEGER,
+  CSS_NUMBER,
+  CSS_UNIT,
+  CSS_UNIT2,
+  PERMISSIVE_MATCH,
+  matchers,
+  isOnePointZero,
+  isPercentage,
+  isValidCSSUnit,
+  pad2,
+  clamp01,
+  bound01,
+  boundAlpha,
+  getRGBFromName,
+  convertHexToDecimal,
+  convertDecimalToHex,
+  rgbToHsl,
+  rgbToHex,
+  rgbToHsv,
+  rgbToHwb,
+  rgbaToHex,
+  hslToRgb,
+  hsvToRgb,
+  hueToRgb,
+  hwbToRgb,
+  parseIntFromHex,
+  numberInputToObject,
+  stringInputToObject,
+  inputToRGB,
+  roundPart,
+  ObjectAssign,
+});
+
+/** @type {Record<string, any>} */
+const EventRegistry = {};
+
+/**
+ * The global event listener.
+ *
+ * @this {Element | HTMLElement | Window | Document}
+ * @param {Event} e
+ * @returns {void}
+ */
+function globalListener(e) {
+  const that = this;
+  const { type } = e;
+  const oneEvMap = EventRegistry[type] ? [...EventRegistry[type]] : [];
+
+  oneEvMap.forEach((elementsMap) => {
+    const [element, listenersMap] = elementsMap;
+    [...listenersMap].forEach((listenerMap) => {
+      if (element === that) {
+        const [listener, options] = listenerMap;
+        listener.apply(element, [e]);
+
+        if (options && options.once) {
+          removeListener(element, type, listener, options);
+        }
+      }
+    });
+  });
+}
+
+/**
+ * Register a new listener with its options and attach the `globalListener`
+ * to the target if this is the first listener.
+ *
+ * @param {Element | HTMLElement | Window | Document} element
+ * @param {string} eventType
+ * @param {EventListenerObject['handleEvent']} listener
+ * @param {AddEventListenerOptions=} options
+ */
+const addListener = (element, eventType, listener, options) => {
+  // get element listeners first
+  if (!EventRegistry[eventType]) {
+    EventRegistry[eventType] = new Map();
+  }
+  const oneEventMap = EventRegistry[eventType];
+
+  if (!oneEventMap.has(element)) {
+    oneEventMap.set(element, new Map());
+  }
+  const oneElementMap = oneEventMap.get(element);
+
+  // get listeners size
+  const { size } = oneElementMap;
+
+  // register listener with its options
+  if (oneElementMap) {
+    oneElementMap.set(listener, options);
+  }
+
+  // add listener last
+  if (!size) {
+    element.addEventListener(eventType, globalListener, options);
+  }
+};
+
+/**
+ * Remove a listener from registry and detach the `globalListener`
+ * if no listeners are found in the registry.
+ *
+ * @param {Element | HTMLElement | Window | Document} element
+ * @param {string} eventType
+ * @param {EventListenerObject['handleEvent']} listener
+ * @param {AddEventListenerOptions=} options
+ */
+const removeListener = (element, eventType, listener, options) => {
+  // get listener first
+  const oneEventMap = EventRegistry[eventType];
+  const oneElementMap = oneEventMap && oneEventMap.get(element);
+  const savedOptions = oneElementMap && oneElementMap.get(listener);
+
+  // also recover initial options
+  const { options: eventOptions } = savedOptions !== undefined
+    ? savedOptions
+    : { options };
+
+  // unsubscribe second, remove from registry
+  if (oneElementMap && oneElementMap.has(listener)) oneElementMap.delete(listener);
+  if (oneEventMap && (!oneElementMap || !oneElementMap.size)) oneEventMap.delete(element);
+  if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
+
+  // remove listener last
+  if (!oneElementMap || !oneElementMap.size) {
+    element.removeEventListener(eventType, globalListener, eventOptions);
+  }
+};
+
+/**
+ * A global namespace for aria-description.
+ * @type {string}
+ */
+const ariaDescription = 'aria-description';
+
+/**
+ * A global namespace for aria-selected.
+ * @type {string}
+ */
+const ariaSelected = 'aria-selected';
+
+/**
+ * A global namespace for aria-expanded.
+ * @type {string}
+ */
+const ariaExpanded = 'aria-expanded';
+
+/**
+ * A global namespace for aria-valuetext.
+ * @type {string}
+ */
+const ariaValueText = 'aria-valuetext';
+
+/**
+ * A global namespace for aria-valuenow.
+ * @type {string}
+ */
+const ariaValueNow = 'aria-valuenow';
+
+/**
+ * A global namespace for aria-haspopup.
+ * @type {string}
+ */
+const ariaHasPopup = 'aria-haspopup';
+
+/**
+ * A global namespace for aria-hidden.
+ * @type {string}
+ */
+const ariaHidden = 'aria-hidden';
+
+/**
+ * A global namespace for aria-labelledby.
+ * @type {string}
+ */
+const ariaLabelledBy = 'aria-labelledby';
+
+/**
+ * A global namespace for `ArrowDown` key.
+ * @type {string} e.which = 40 equivalent
+ */
+const keyArrowDown = 'ArrowDown';
+
+/**
+ * A global namespace for `ArrowUp` key.
+ * @type {string} e.which = 38 equivalent
+ */
+const keyArrowUp = 'ArrowUp';
+
+/**
+ * A global namespace for `ArrowLeft` key.
+ * @type {string} e.which = 37 equivalent
+ */
+const keyArrowLeft = 'ArrowLeft';
+
+/**
+ * A global namespace for `ArrowRight` key.
+ * @type {string} e.which = 39 equivalent
+ */
+const keyArrowRight = 'ArrowRight';
+
+/**
+ * A global namespace for `Enter` key.
+ * @type {string} e.which = 13 equivalent
+ */
+const keyEnter = 'Enter';
+
+/**
+ * A global namespace for `Space` key.
+ * @type {string} e.which = 32 equivalent
+ */
+const keySpace = 'Space';
+
+/**
+ * A global namespace for `Escape` key.
+ * @type {string} e.which = 27 equivalent
+ */
+const keyEscape = 'Escape';
+
+/**
+ * A global namespace for `focusin` event.
+ * @type {string}
+ */
+const focusinEvent = 'focusin';
+
+/**
+ * A global namespace for `click` event.
+ * @type {string}
+ */
+const mouseclickEvent = 'click';
+
+/**
+ * A global namespace for `keydown` event.
+ * @type {string}
+ */
+const keydownEvent = 'keydown';
+
+/**
+ * A global namespace for `change` event.
+ * @type {string}
+ */
+const changeEvent = 'change';
+
+/**
+ * A global namespace for `touchstart` event.
+ * @type {string}
+ */
+const touchstartEvent = 'touchstart';
+
+/**
+ * A global namespace for `touchmove` event.
+ * @type {string}
+ */
+const touchmoveEvent = 'touchmove';
+
+/**
+ * A global namespace for `touchend` event.
+ * @type {string}
+ */
+const touchendEvent = 'touchend';
+
+/**
+ * A global namespace for `mousedown` event.
+ * @type {string}
+ */
+const mousedownEvent = 'mousedown';
+
+/**
+ * A global namespace for `mousemove` event.
+ * @type {string}
+ */
+const mousemoveEvent = 'mousemove';
+
+/**
+ * A global namespace for `mouseup` event.
+ * @type {string}
+ */
+const mouseupEvent = 'mouseup';
+
+/**
+ * A global namespace for `scroll` event.
+ * @type {string}
+ */
+const scrollEvent = 'scroll';
+
+/**
+ * A global namespace for `keyup` event.
+ * @type {string}
+ */
+const keyupEvent = 'keyup';
+
+/**
+ * A global namespace for `resize` event.
+ * @type {string}
+ */
+const resizeEvent = 'resize';
+
+/**
+ * A global namespace for `focusout` event.
+ * @type {string}
+ */
+const focusoutEvent = 'focusout';
+
+// @ts-ignore
+const { userAgentData: uaDATA } = navigator;
+
+/**
+ * A global namespace for `userAgentData` object.
+ */
+const userAgentData = uaDATA;
+
+const { userAgent: userAgentString } = navigator;
+
+/**
+ * A global namespace for `navigator.userAgent` string.
+ */
+const userAgent = userAgentString;
+
+const mobileBrands = /iPhone|iPad|iPod|Android/i;
+let isMobileCheck = false;
+
+if (userAgentData) {
+  isMobileCheck = userAgentData.brands
+    .some((/** @type {Record<String, any>} */x) => mobileBrands.test(x.brand));
+} else {
+  isMobileCheck = mobileBrands.test(userAgent);
+}
+
+/**
+ * A global `boolean` for mobile detection.
+ * @type {boolean}
+ */
+const isMobile = isMobileCheck;
+
+/**
+ * Returns the `document.documentElement` or the `<html>` element.
+ *
+ * @param {(Node | HTMLElement | Element | globalThis)=} node
+ * @returns {HTMLElement | HTMLHtmlElement}
+ */
+function getDocumentElement(node) {
+  return getDocument(node).documentElement;
+}
+
+/**
+ * Returns the `Window` object of a target node.
+ * @see https://github.com/floating-ui/floating-ui
+ *
+ * @param {(Node | HTMLElement | Element | Window)=} node target node
+ * @returns {globalThis}
+ */
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
+
+  if (!(node instanceof Window)) {
+    const { ownerDocument } = node;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  // @ts-ignore
+  return node;
+}
+
+let elementUID = 0;
+let elementMapUID = 0;
+const elementIDMap = new Map();
+
+/**
+ * Returns a unique identifier for popover, tooltip, scrollspy.
+ *
+ * @param {HTMLElement | Element} element target element
+ * @param {string=} key predefined key
+ * @returns {number} an existing or new unique ID
+ */
+function getUID(element, key) {
+  let result = key ? elementUID : elementMapUID;
+
+  if (key) {
+    const elID = getUID(element);
+    const elMap = elementIDMap.get(elID) || new Map();
+    if (!elementIDMap.has(elID)) {
+      elementIDMap.set(elID, elMap);
+    }
+    if (!elMap.has(key)) {
+      elMap.set(key, result);
+      elementUID += 1;
+    } else result = elMap.get(key);
+  } else {
+    const elkey = element.id || element;
+
+    if (!elementIDMap.has(elkey)) {
+      elementIDMap.set(elkey, result);
+      elementMapUID += 1;
+    } else result = elementIDMap.get(elkey);
+  }
+  return result;
+}
+
+/**
+ * Returns the bounding client rect of a target `HTMLElement`.
+ *
+ * @see https://github.com/floating-ui/floating-ui
+ *
+ * @param {HTMLElement | Element} element event.target
+ * @param {boolean=} includeScale when *true*, the target scale is also computed
+ * @returns {SHORTER.BoundingClientRect} the bounding client rect object
+ */
+function getBoundingClientRect(element, includeScale) {
+  const {
+    width, height, top, right, bottom, left,
+  } = element.getBoundingClientRect();
+  let scaleX = 1;
+  let scaleY = 1;
+
+  if (includeScale && element instanceof HTMLElement) {
+    const { offsetWidth, offsetHeight } = element;
+    scaleX = offsetWidth > 0 ? Math.round(width) / offsetWidth || 1 : 1;
+    scaleY = offsetHeight > 0 ? Math.round(height) / offsetHeight || 1 : 1;
+  }
+
+  return {
+    width: width / scaleX,
+    height: height / scaleY,
+    top: top / scaleY,
+    right: right / scaleX,
+    bottom: bottom / scaleY,
+    left: left / scaleX,
+    x: left / scaleX,
+    y: top / scaleY,
+  };
+}
+
+/**
+ * A global namespace for 'transitionDuration' string.
+ * @type {string}
+ */
+const transitionDuration = 'transitionDuration';
+
+/**
+ * A global namespace for `transitionProperty` string for modern browsers.
+ *
+ * @type {string}
+ */
+const transitionProperty = 'transitionProperty';
+
+/**
+ * Utility to get the computed `transitionDuration`
+ * from Element in miliseconds.
+ *
+ * @param {HTMLElement | Element} element target
+ * @return {number} the value in miliseconds
+ */
+function getElementTransitionDuration(element) {
+  const propertyValue = getElementStyle(element, transitionProperty);
+  const durationValue = getElementStyle(element, transitionDuration);
+  const durationScale = durationValue.includes('ms') ? 1 : 1000;
+  const duration = propertyValue && propertyValue !== 'none'
+    ? parseFloat(durationValue) * durationScale : 0;
+
+  return !Number.isNaN(duration) ? duration : 0;
+}
+
+/**
+ * A global array with `Element` | `HTMLElement`.
+ */
+const elementNodes = [Element, HTMLElement];
+
+/**
+ * Utility to check if target is typeof `HTMLElement`, `Element`, `Node`
+ * or find one that matches a selector.
+ *
+ * @param {HTMLElement | Element | string} selector the input selector or target element
+ * @param {(HTMLElement | Element | Document)=} parent optional node to look into
+ * @return {(HTMLElement | Element)?} the `HTMLElement` or `querySelector` result
+ */
+function querySelector(selector, parent) {
+  const lookUp = parentNodes.some((x) => parent instanceof x)
+    ? parent : getDocument();
+
+  // @ts-ignore
+  return elementNodes.some((x) => selector instanceof x)
+    // @ts-ignore
+    ? selector : lookUp.querySelector(selector);
+}
+
+/**
+ * Shortcut for `HTMLElement.closest` method which also works
+ * with children of `ShadowRoot`. The order of the parameters
+ * is intentional since they're both required.
+ *
+ * @see https://stackoverflow.com/q/54520554/803358
+ *
+ * @param {HTMLElement | Element} element Element to look into
+ * @param {string} selector the selector name
+ * @return {(HTMLElement | Element)?} the query result
+ */
+function closest(element, selector) {
+  return element ? (element.closest(selector)
+    // @ts-ignore -- break out of `ShadowRoot`
+    || closest(element.getRootNode().host, selector)) : null;
+}
+
+/**
+ * Shortcut for `HTMLElement.getElementsByClassName` method. Some `Node` elements
+ * like `ShadowRoot` do not support `getElementsByClassName`.
+ *
+ * @param {string} selector the class name
+ * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
+ * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
+ */
+function getElementsByClassName(selector, parent) {
+  const lookUp = parent && parentNodes.some((x) => parent instanceof x)
+    ? parent : getDocument();
+  return lookUp.getElementsByClassName(selector);
+}
+
+/**
+ * This is a shortie for `document.createElementNS` method
+ * which allows you to create a new `HTMLElement` for a given `tagName`
+ * or based on an object with specific non-readonly attributes:
+ * `id`, `className`, `textContent`, `style`, etc.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
+ *
+ * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
+ * @param {Record<string, string> | string} param `tagName` or object
+ * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+ */
+function createElementNS(namespace, param) {
+  if (typeof param === 'string') {
+    return getDocument().createElementNS(namespace, param);
+  }
+
+  const { tagName } = param;
+  const attr = { ...param };
+  const newElement = createElementNS(namespace, tagName);
+  delete attr.tagName;
+  ObjectAssign(newElement, attr);
+  return newElement;
+}
+
+/**
+ * Shortcut for the `Element.dispatchEvent(Event)` method.
+ *
+ * @param {HTMLElement | Element} element is the target
+ * @param {Event} event is the `Event` object
+ */
+const dispatchEvent = (element, event) => element.dispatchEvent(event);
+
+/** @type {Map<string, Map<HTMLElement | Element, Record<string, any>>>} */
+const componentData = new Map();
+/**
+ * An interface for web components background data.
+ * @see https://github.com/thednp/bootstrap.native/blob/master/src/components/base-component.js
+ */
+const Data = {
+  /**
+   * Sets web components data.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string} component the component's name or a unique key
+   * @param {Record<string, any>} instance the component instance
+   */
+  set: (target, component, instance) => {
+    const element = querySelector(target);
+    if (!element) return;
+
+    if (!componentData.has(component)) {
+      componentData.set(component, new Map());
+    }
+
+    const instanceMap = componentData.get(component);
+    // @ts-ignore - not undefined, but defined right above
+    instanceMap.set(element, instance);
+  },
+
+  /**
+   * Returns all instances for specified component.
+   * @param {string} component the component's name or a unique key
+   * @returns {Map<HTMLElement | Element, Record<string, any>>?} all the component instances
+   */
+  getAllFor: (component) => {
+    const instanceMap = componentData.get(component);
+
+    return instanceMap || null;
+  },
+
+  /**
+   * Returns the instance associated with the target.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string} component the component's name or a unique key
+   * @returns {Record<string, any>?} the instance
+   */
+  get: (target, component) => {
+    const element = querySelector(target);
+    const allForC = Data.getAllFor(component);
+    const instance = element && allForC && allForC.get(element);
+
+    return instance || null;
+  },
+
+  /**
+   * Removes web components data.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string} component the component's name or a unique key
+   */
+  remove: (target, component) => {
+    const element = querySelector(target);
+    const instanceMap = componentData.get(component);
+    if (!instanceMap || !element) return;
+
+    instanceMap.delete(element);
+
+    if (instanceMap.size === 0) {
+      componentData.delete(component);
+    }
+  },
+};
+
+/**
+ * An alias for `Data.get()`.
+ * @type {SHORTER.getInstance<any>}
+ */
+const getInstance = (target, component) => Data.get(target, component);
+
+/**
+ * The raw value or a given component option.
+ *
+ * @typedef {string | HTMLElement | Function | number | boolean | null} niceValue
+ */
+
+/**
+ * Utility to normalize component options
+ *
+ * @param {any} value the input value
+ * @return {niceValue} the normalized value
+ */
+function normalizeValue(value) {
+  if (value === 'true') { // boolean
+    return true;
+  }
+
+  if (value === 'false') { // boolean
+    return false;
+  }
+
+  if (!Number.isNaN(+value)) { // number
+    return +value;
+  }
+
+  if (value === '' || value === 'null') { // null
+    return null;
+  }
+
+  // string / function / HTMLElement / object
+  return value;
+}
+
+/**
+ * Shortcut for `String.toLowerCase()`.
+ *
+ * @param {string} source input string
+ * @returns {string} lowercase output string
+ */
+const toLowerCase = (source) => source.toLowerCase();
+
+/**
+ * Utility to normalize component options.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {Record<string, any>} defaultOps component default options
+ * @param {Record<string, any>} inputOps component instance options
+ * @param {string=} ns component namespace
+ * @return {Record<string, any>} normalized component options object
+ */
+function normalizeOptions(element, defaultOps, inputOps, ns) {
+  // @ts-ignore -- our targets are always `HTMLElement`
+  const data = { ...element.dataset };
+  /** @type {Record<string, any>} */
+  const normalOps = {};
+  /** @type {Record<string, any>} */
+  const dataOps = {};
+  const title = 'title';
+
+  ObjectKeys(data).forEach((k) => {
+    const key = ns && k.includes(ns)
+      ? k.replace(ns, '').replace(/[A-Z]/, (match) => toLowerCase(match))
+      : k;
+
+    dataOps[key] = normalizeValue(data[k]);
+  });
+
+  ObjectKeys(inputOps).forEach((k) => {
+    inputOps[k] = normalizeValue(inputOps[k]);
+  });
+
+  ObjectKeys(defaultOps).forEach((k) => {
+    if (k in inputOps) {
+      normalOps[k] = inputOps[k];
+    } else if (k in dataOps) {
+      normalOps[k] = dataOps[k];
+    } else {
+      normalOps[k] = k === title
+        ? getAttribute(element, title)
+        : defaultOps[k];
+    }
+  });
+
+  return normalOps;
+}
+
+/**
+ * Utility to force re-paint of an `HTMLElement` target.
+ *
+ * @param {HTMLElement | Element} element is the target
+ * @return {number} the `Element.offsetHeight` value
+ */
+// @ts-ignore
+const reflow = (element) => element.offsetHeight;
+
+/**
+ * Utility to focus an `HTMLElement` target.
+ *
+ * @param {HTMLElement | Element} element is the target
+ */
+// @ts-ignore -- `Element`s resulted from querySelector can focus too
+const focus = (element) => element.focus();
+
+/**
+ * Check class in `HTMLElement.classList`.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {string} classNAME to check
+ * @returns {boolean}
+ */
+function hasClass(element, classNAME) {
+  return element.classList.contains(classNAME);
+}
+
+/**
+ * Add class to `HTMLElement.classList`.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {string} classNAME to add
+ * @returns {void}
+ */
+function addClass(element, classNAME) {
+  element.classList.add(classNAME);
+}
+
+/**
+ * Remove class from `HTMLElement.classList`.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {string} classNAME to remove
+ * @returns {void}
+ */
+function removeClass(element, classNAME) {
+  element.classList.remove(classNAME);
+}
+
+/**
+ * Shortcut for `HTMLElement.removeAttribute()` method.
+ * @param  {HTMLElement | Element} element target element
+ * @param  {string} attribute attribute name
+ * @returns {void}
+ */
+const removeAttribute = (element, attribute) => element.removeAttribute(attribute);
+
+/** @type {Record<string, string>} */
+const colorPickerLabels = {
+  pickerLabel: 'Colour Picker',
+  appearanceLabel: 'Colour Appearance',
+  valueLabel: 'Colour Value',
+  toggleLabel: 'Select Colour',
+  presetsLabel: 'Colour Presets',
+  defaultsLabel: 'Colour Defaults',
+  formatLabel: 'Format',
+  alphaLabel: 'Alpha',
+  hexLabel: 'Hexadecimal',
+  hueLabel: 'Hue',
+  whitenessLabel: 'Whiteness',
+  blacknessLabel: 'Blackness',
+  saturationLabel: 'Saturation',
+  lightnessLabel: 'Lightness',
+  redLabel: 'Red',
+  greenLabel: 'Green',
+  blueLabel: 'Blue',
+};
+
+/**
+ * A list of 17 color names used for WAI-ARIA compliance.
+ * @type {string[]}
+ */
+const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
+
+/**
+ * Shortcut for `String.toUpperCase()`.
+ *
+ * @param {string} source input string
+ * @returns {string} uppercase output string
+ */
+const toUpperCase = (source) => source.toUpperCase();
+
+const vHidden = 'v-hidden';
+
+/**
+ * Returns the color form for `ColorPicker`.
+ *
+ * @param {CP.ColorPicker} self the `ColorPicker` instance
+ * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
+ */
+function getColorForm(self) {
+  const { format, id, componentLabels } = self;
+  const colorForm = createElement({
+    tagName: 'div',
+    className: `color-form ${format}`,
+  });
+
+  let components = ['hex'];
+  if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
+  else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
+  else if (format === 'hwb') components = ['hue', 'whiteness', 'blackness', 'alpha'];
+
+  components.forEach((c) => {
+    const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
+    const cID = `color_${format}_${c}_${id}`;
+    const formatLabel = componentLabels[`${c}Label`];
+    const cInputLabel = createElement({ tagName: 'label' });
+    setAttribute(cInputLabel, 'for', cID);
+    cInputLabel.append(
+      createElement({ tagName: 'span', ariaHidden: 'true', innerText: `${C}:` }),
+      createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
+    );
+    const cInput = createElement({
+      tagName: 'input',
+      id: cID,
+      // name: cID, - prevent saving the value to a form
+      type: format === 'hex' ? 'text' : 'number',
+      value: c === 'alpha' ? '100' : '0',
+      className: `color-input ${c}`,
+    });
+    setAttribute(cInput, 'autocomplete', 'off');
+    setAttribute(cInput, 'spellcheck', 'false');
+
+    // alpha
+    let max = '100';
+    let step = '1';
+    if (c !== 'alpha') {
+      if (format === 'rgb') {
+        max = '255'; step = '1';
+      } else if (c === 'hue') {
+        max = '360'; step = '1';
+      }
+    }
+    ObjectAssign(cInput, {
+      min: '0',
+      max,
+      step,
+    });
+    colorForm.append(cInputLabel, cInput);
+  });
+  return colorForm;
+}
+
+/**
+ * A global namespace for aria-label.
+ * @type {string}
+ */
+const ariaLabel = 'aria-label';
+
+/**
+ * A global namespace for aria-valuemin.
+ * @type {string}
+ */
+const ariaValueMin = 'aria-valuemin';
+
+/**
+ * A global namespace for aria-valuemax.
+ * @type {string}
+ */
+const ariaValueMax = 'aria-valuemax';
+
+const tabIndex = 'tabindex';
+
+/**
+ * Returns all color controls for `ColorPicker`.
+ *
+ * @param {CP.ColorPicker} self the `ColorPicker` instance
+ * @returns {HTMLElement | Element} color controls
+ */
+function getColorControls(self) {
+  const { format, componentLabels } = self;
+  const {
+    hueLabel, alphaLabel, lightnessLabel, saturationLabel,
+    whitenessLabel, blacknessLabel,
+  } = componentLabels;
+
+  const max1 = format === 'hsl' ? 360 : 100;
+  const max2 = format === 'hsl' ? 100 : 360;
+  const max3 = 100;
+
+  let ctrl1Label = format === 'hsl'
+    ? `${hueLabel} & ${lightnessLabel}`
+    : `${lightnessLabel} & ${saturationLabel}`;
+
+  ctrl1Label = format === 'hwb'
+    ? `${whitenessLabel} & ${blacknessLabel}`
+    : ctrl1Label;
+
+  const ctrl2Label = format === 'hsl'
+    ? `${saturationLabel}`
+    : `${hueLabel}`;
+
+  const colorControls = createElement({
+    tagName: 'div',
+    className: `color-controls ${format}`,
+  });
+
+  const colorPointer = 'color-pointer';
+  const colorSlider = 'color-slider';
+
+  const controls = [
+    {
+      i: 1,
+      c: colorPointer,
+      l: ctrl1Label,
+      min: 0,
+      max: max1,
+    },
+    {
+      i: 2,
+      c: colorSlider,
+      l: ctrl2Label,
+      min: 0,
+      max: max2,
+    },
+    {
+      i: 3,
+      c: colorSlider,
+      l: alphaLabel,
+      min: 0,
+      max: max3,
+    },
+  ];
+
+  controls.forEach((template) => {
+    const {
+      i, c, l, min, max,
+    } = template;
+    const control = createElement({
+      tagName: 'div',
+      className: 'color-control',
+    });
+    setAttribute(control, 'role', 'presentation');
+
+    control.append(
+      createElement({
+        tagName: 'div',
+        className: `visual-control visual-control${i}`,
+      }),
+    );
+
+    const knob = createElement({
+      tagName: 'div',
+      className: `${c} knob`,
+      ariaLive: 'polite',
+    });
+
+    setAttribute(knob, ariaLabel, l);
+    setAttribute(knob, 'role', 'slider');
+    setAttribute(knob, tabIndex, '0');
+    setAttribute(knob, ariaValueMin, `${min}`);
+    setAttribute(knob, ariaValueMax, `${max}`);
+    control.append(knob);
+    colorControls.append(control);
+  });
+
+  return colorControls;
+}
+
+/**
+ * Helps setting CSS variables to the color-menu.
+ * @param {HTMLElement} element
+ * @param {Record<string,any>} props
+ */
+function setCSSProperties(element, props) {
+  ObjectKeys(props).forEach((prop) => {
+    element.style.setProperty(prop, props[prop]);
+  });
+}
+
+/**
+ * @class
+ * Returns a color palette with a given set of parameters.
+ * @example
+ * new ColorPalette(0, 12, 10);
+ * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
+ */
+class ColorPalette {
+  /**
+   * The `hue` parameter is optional, which would be set to 0.
+   * @param {number[]} args represeinting hue, hueSteps, lightSteps
+   * * `args.hue` the starting Hue [0, 360]
+   * * `args.hueSteps` Hue Steps Count [5, 24]
+   * * `args.lightSteps` Lightness Steps Count [5, 12]
+   */
+  constructor(...args) {
+    let hue = 0;
+    let hueSteps = 12;
+    let lightSteps = 10;
+    let lightnessArray = [0.5];
+
+    if (args.length === 3) {
+      [hue, hueSteps, lightSteps] = args;
+    } else if (args.length === 2) {
+      [hueSteps, lightSteps] = args;
+    } else {
+      throw TypeError('ColorPalette requires minimum 2 arguments');
+    }
+
+    /** @type {string[]} */
+    const colors = [];
+
+    const hueStep = 360 / hueSteps;
+    const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
+    const estimatedStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
+
+    let lightStep = 0.25;
+    lightStep = [4, 5].includes(lightSteps) ? 0.2 : lightStep;
+    lightStep = [6, 7].includes(lightSteps) ? 0.15 : lightStep;
+    lightStep = [8, 9].includes(lightSteps) ? 0.11 : lightStep;
+    lightStep = [10, 11].includes(lightSteps) ? 0.09 : lightStep;
+    lightStep = [12, 13].includes(lightSteps) ? 0.075 : lightStep;
+    lightStep = lightSteps > 13 ? estimatedStep : lightStep;
+
+    // light tints
+    for (let i = 1; i < half + 1; i += 1) {
+      lightnessArray = [...lightnessArray, (0.5 + lightStep * (i))];
+    }
+
+    // dark tints
+    for (let i = 1; i < lightSteps - half; i += 1) {
+      lightnessArray = [(0.5 - lightStep * (i)), ...lightnessArray];
+    }
+
+    // feed `colors` Array
+    for (let i = 0; i < hueSteps; i += 1) {
+      const currentHue = ((hue + i * hueStep) % 360) / 360;
+      lightnessArray.forEach((l) => {
+        colors.push(new Color({ h: currentHue, s: 1, l }).toHexString());
+      });
+    }
+
+    this.hue = hue;
+    this.hueSteps = hueSteps;
+    this.lightSteps = lightSteps;
+    this.colors = colors;
+  }
+}
+
+/**
+ * Returns a color-defaults with given values and class.
+ * @param {CP.ColorPicker} self
+ * @param {CP.ColorPalette | string[]} colorsSource
+ * @param {string} menuClass
+ * @returns {HTMLElement | Element}
+ */
+function getColorMenu(self, colorsSource, menuClass) {
+  const { input, format, componentLabels } = self;
+  const { defaultsLabel, presetsLabel } = componentLabels;
+  const isOptionsMenu = menuClass === 'color-options';
+  const isPalette = colorsSource instanceof ColorPalette;
+  const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
+  let colorsArray = isPalette ? colorsSource.colors : colorsSource;
+  colorsArray = colorsArray instanceof Array ? colorsArray : [];
+  const colorsCount = colorsArray.length;
+  const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
+  const fit = lightSteps || [9, 10].find((x) => colorsCount > x * 2 && !(colorsCount % x)) || 5;
+  const isMultiLine = isOptionsMenu && colorsCount > fit;
+  let rowCountHover = 2;
+  rowCountHover = isMultiLine && colorsCount >= fit * 2 ? 3 : rowCountHover;
+  rowCountHover = colorsCount >= fit * 3 ? 4 : rowCountHover;
+  rowCountHover = colorsCount >= fit * 4 ? 5 : rowCountHover;
+  const rowCount = rowCountHover - (colorsCount < fit * 3 ? 1 : 2);
+  const isScrollable = isMultiLine && colorsCount > rowCount * fit;
+  let finalClass = menuClass;
+  finalClass += isScrollable ? ' scrollable' : '';
+  finalClass += isMultiLine ? ' multiline' : '';
+  const gap = isMultiLine ? '1px' : '0.25rem';
+  let optionSize = isMultiLine ? 1.75 : 2;
+  optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
+  const menuHeight = `${(rowCount || 1) * optionSize}rem`;
+  const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
+
+  const menu = createElement({
+    tagName: 'ul',
+    className: finalClass,
+  });
+  setAttribute(menu, 'role', 'listbox');
+  setAttribute(menu, ariaLabel, menuLabel);
+
+  if (isScrollable) { // @ts-ignore
+    setCSSProperties(menu, {
+      '--grid-item-size': `${optionSize}rem`,
+      '--grid-fit': fit,
+      '--grid-gap': gap,
+      '--grid-height': menuHeight,
+      '--grid-hover-height': menuHeightHover,
+    });
+  }
+
+  colorsArray.forEach((x) => {
+    const [value, label] = x.trim().split(':');
+    const xRealColor = new Color(value, format).toString();
+    const isActive = xRealColor === getAttribute(input, 'value');
+    const active = isActive ? ' active' : '';
+
+    const option = createElement({
+      tagName: 'li',
+      className: `color-option${active}`,
+      innerText: `${label || x}`,
+    });
+
+    setAttribute(option, tabIndex, '0');
+    setAttribute(option, 'data-value', `${value}`);
+    setAttribute(option, 'role', 'option');
+    setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
+
+    if (isOptionsMenu) {
+      setElementStyle(option, { backgroundColor: x });
+    }
+
+    menu.append(option);
+  });
+  return menu;
+}
+
+/**
+ * Check if a string is valid JSON string.
+ * @param {string} str the string input
+ * @returns {boolean} the query result
+ */
+function isValidJSON(str) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+var version = "0.0.1";
+
+// @ts-ignore
+
+const Version = version;
+
+// ColorPicker GC
+// ==============
+const colorPickerString = 'color-picker';
+const colorPickerSelector = `[data-function="${colorPickerString}"]`;
+const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
+const colorPickerDefaults = {
+  componentLabels: colorPickerLabels,
+  colorLabels: colorNames,
+  format: 'rgb',
+  colorPresets: false,
+  colorKeywords: false,
+};
+
+// ColorPicker Static Methods
+// ==========================
+
+/** @type {CP.GetInstance<ColorPicker>} */
+const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
+
+/** @type {CP.InitCallback<ColorPicker>} */
+const initColorPicker = (element) => new ColorPicker(element);
+
+// ColorPicker Private Methods
+// ===========================
+
+/**
+ * Generate HTML markup and update instance properties.
+ * @param {ColorPicker} self
+ */
+function initCallback(self) {
+  const {
+    input, parent, format, id, componentLabels, colorKeywords, colorPresets,
+  } = self;
+  const colorValue = getAttribute(input, 'value') || '#fff';
+
+  const {
+    toggleLabel, pickerLabel, formatLabel, hexLabel,
+  } = componentLabels;
+
+  // update color
+  const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
+  self.color = new Color(color, format);
+
+  // set initial controls dimensions
+  // make the controls smaller on mobile
+  const dropClass = isMobile ? ' mobile' : '';
+  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
+
+  const pickerBtn = createElement({
+    id: `picker-btn-${id}`,
+    tagName: 'button',
+    className: 'picker-toggle btn-appearance',
+  });
+  setAttribute(pickerBtn, ariaExpanded, 'false');
+  setAttribute(pickerBtn, ariaHasPopup, 'true');
+  pickerBtn.append(createElement({
+    tagName: 'span',
+    className: vHidden,
+    innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
+  }));
+
+  const pickerDropdown = createElement({
+    tagName: 'div',
+    className: `color-dropdown picker${dropClass}`,
+  });
+  setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
+  setAttribute(pickerDropdown, 'role', 'group');
+
+  const colorControls = getColorControls(self);
+  const colorForm = getColorForm(self);
+
+  pickerDropdown.append(colorControls, colorForm);
+  input.before(pickerBtn);
+  parent.append(pickerDropdown);
+
+  // set colour key menu template
+  if (colorKeywords || colorPresets) {
+    const presetsDropdown = createElement({
+      tagName: 'div',
+      className: `color-dropdown scrollable menu${dropClass}`,
+    });
+
+    // color presets
+    if ((colorPresets instanceof Array && colorPresets.length)
+      || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
+      const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
+      presetsDropdown.append(presetsMenu);
+    }
+
+    // explicit defaults [reset, initial, inherit, transparent, currentColor]
+    if (colorKeywords && colorKeywords.length) {
+      const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
+      presetsDropdown.append(keywordsMenu);
+    }
+
+    const presetsBtn = createElement({
+      tagName: 'button',
+      className: 'menu-toggle btn-appearance',
+    });
+    setAttribute(presetsBtn, tabIndex, '-1');
+    setAttribute(presetsBtn, ariaExpanded, 'false');
+    setAttribute(presetsBtn, ariaHasPopup, 'true');
+
+    const xmlns = encodeURI('http://www.w3.org/2000/svg');
+    const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
+    setAttribute(presetsIcon, 'xmlns', xmlns);
+    setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
+    setAttribute(presetsIcon, ariaHidden, 'true');
+
+    const path = createElementNS(xmlns, { tagName: 'path' });
+    setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
+    setAttribute(path, 'fill', '#fff');
+    presetsIcon.append(path);
+    presetsBtn.append(createElement({
+      tagName: 'span',
+      className: vHidden,
+      innerText: `${toggleLabel}`,
+    }), presetsIcon);
+
+    parent.append(presetsBtn, presetsDropdown);
+  }
+
+  // solve non-colors after settings save
+  if (colorKeywords && nonColors.includes(colorValue)) {
+    self.value = colorValue;
+  }
+  setAttribute(input, tabIndex, '-1');
+}
+
+/**
+ * Add / remove `ColorPicker` main event listeners.
+ * @param {ColorPicker} self
+ * @param {boolean=} action
+ */
+function toggleEvents(self, action) {
+  const fn = action ? addListener : removeListener;
+  const { input, pickerToggle, menuToggle } = self;
+
+  fn(input, focusinEvent, self.showPicker);
+  fn(pickerToggle, mouseclickEvent, self.togglePicker);
+
+  fn(input, keydownEvent, self.keyToggle);
+
+  if (menuToggle) {
+    fn(menuToggle, mouseclickEvent, self.toggleMenu);
+  }
+}
+
+/**
+ * Add / remove `ColorPicker` event listeners active only when open.
+ * @param {ColorPicker} self
+ * @param {boolean=} action
+ */
+function toggleEventsOnShown(self, action) {
+  const fn = action ? addListener : removeListener;
+  const { input, colorMenu, parent } = self;
+  const doc = getDocument(input);
+  const win = getWindow(input);
+  const pointerEvents = `on${touchstartEvent}` in doc
+    ? { down: touchstartEvent, move: touchmoveEvent, up: touchendEvent }
+    : { down: mousedownEvent, move: mousemoveEvent, up: mouseupEvent };
+
+  fn(self.controls, pointerEvents.down, self.pointerDown);
+  self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
+
+  // @ts-ignore -- this is `Window`
+  fn(win, scrollEvent, self.handleScroll);
+  // @ts-ignore -- this is `Window`
+  fn(win, resizeEvent, self.update);
+
+  [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
+
+  if (colorMenu) {
+    fn(colorMenu, mouseclickEvent, self.menuClickHandler);
+    fn(colorMenu, keydownEvent, self.menuKeyHandler);
+  }
+
+  fn(doc, pointerEvents.move, self.pointerMove);
+  fn(doc, pointerEvents.up, self.pointerUp);
+  fn(parent, focusoutEvent, self.handleFocusOut);
+  // @ts-ignore -- this is `Window`
+  fn(win, keyupEvent, self.handleDismiss);
+}
+
+/**
+ * Triggers the `ColorPicker` original event.
+ * @param {ColorPicker} self
+ */
+function firePickerChange(self) {
+  dispatchEvent(self.input, new CustomEvent('colorpicker.change'));
+}
+
+/**
+ * Hides a visible dropdown.
+ * @param {HTMLElement} element
+ * @returns {void}
+ */
+function removePosition(element) {
+  if (element) {
+    ['bottom', 'top'].forEach((x) => removeClass(element, x));
+  }
+}
+
+/**
+ * Shows a `ColorPicker` dropdown and close the curent open dropdown.
+ * @param {ColorPicker} self
+ * @param {HTMLElement | Element} dropdown
+ */
+function showDropdown(self, dropdown) {
+  const {
+    colorPicker, colorMenu, menuToggle, pickerToggle, parent,
+  } = self;
+  const isPicker = dropdown === colorPicker;
+  const openDropdown = isPicker ? colorMenu : colorPicker;
+  const activeBtn = isPicker ? menuToggle : pickerToggle;
+  const nextBtn = !isPicker ? menuToggle : pickerToggle;
+
+  if (!hasClass(parent, 'open')) {
+    addClass(parent, 'open');
+  }
+  if (openDropdown) {
+    removeClass(openDropdown, 'show');
+    removePosition(openDropdown);
+  }
+  addClass(dropdown, 'bottom');
+  reflow(dropdown);
+  addClass(dropdown, 'show');
+
+  if (isPicker) self.update();
+
+  if (!self.isOpen) {
+    toggleEventsOnShown(self, true);
+    self.updateDropdownPosition();
+    self.isOpen = true;
+    setAttribute(self.input, tabIndex, '0');
+    if (menuToggle) {
+      setAttribute(menuToggle, tabIndex, '0');
+    }
+  }
+
+  setAttribute(nextBtn, ariaExpanded, 'true');
+  if (activeBtn) {
+    setAttribute(activeBtn, ariaExpanded, 'false');
+  }
+}
+
+/**
+ * Color Picker Web Component
+ * @see http://thednp.github.io/color-picker
+ */
+class ColorPicker {
+  /**
+   * Returns a new `ColorPicker` instance. The target of this constructor
+   * must be an `HTMLInputElement`.
+   *
+   * @param {HTMLInputElement | string} target the target `<input>` element
+   * @param {CP.ColorPickerOptions=} config instance options
+   */
+  constructor(target, config) {
+    const self = this;
+    /** @type {HTMLInputElement} */
+    // @ts-ignore
+    const input = querySelector(target);
+
+    // invalidate
+    if (!input) throw new TypeError(`ColorPicker target ${target} cannot be found.`);
+    self.input = input;
+
+    const parent = closest(input, colorPickerParentSelector);
+    if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
+
+    /** @type {HTMLElement} */
+    // @ts-ignore
+    self.parent = parent;
+
+    /** @type {number} */
+    self.id = getUID(input, colorPickerString);
+
+    // set initial state
+    /** @type {HTMLElement?} */
+    self.dragElement = null;
+    /** @type {boolean} */
+    self.isOpen = false;
+    /** @type {Record<string, number>} */
+    self.controlPositions = {
+      c1x: 0, c1y: 0, c2y: 0, c3y: 0,
+    };
+    /** @type {Record<string, string>} */
+    self.colorLabels = {};
+    /** @type {string[]=} */
+    self.colorKeywords = undefined;
+    /** @type {(ColorPalette | string[])=} */
+    self.colorPresets = undefined;
+
+    // process options
+    const {
+      format, componentLabels, colorLabels, colorKeywords, colorPresets,
+    } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
+
+    let translatedColorLabels = colorNames;
+    if (colorLabels instanceof Array && colorLabels.length === 17) {
+      translatedColorLabels = colorLabels;
+    } else if (colorLabels && colorLabels.split(',').length === 17) {
+      translatedColorLabels = colorLabels.split(',');
+    }
+
+    // expose colour labels to all methods
+    colorNames.forEach((c, i) => {
+      self.colorLabels[c] = translatedColorLabels[i].trim();
+    });
+
+    // update and expose component labels
+    const tempLabels = ObjectAssign({}, colorPickerLabels);
+    const jsonLabels = componentLabels && isValidJSON(componentLabels)
+      ? JSON.parse(componentLabels) : componentLabels || {};
+
+    /** @type {Record<string, string>} */
+    self.componentLabels = ObjectAssign(tempLabels, jsonLabels);
+
+    /** @type {Color} */
+    self.color = new Color('white', format);
+
+    /** @type {CP.ColorFormats} */
+    self.format = format;
+
+    // set colour defaults
+    if (colorKeywords instanceof Array) {
+      self.colorKeywords = colorKeywords;
+    } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
+      self.colorKeywords = colorKeywords.split(',');
+    }
+
+    // set colour presets
+    if (colorPresets instanceof Array) {
+      self.colorPresets = colorPresets;
+    } else if (typeof colorPresets === 'string' && colorPresets.length) {
+      if (isValidJSON(colorPresets)) {
+        const { hue, hueSteps, lightSteps } = JSON.parse(colorPresets);
+        self.colorPresets = new ColorPalette(hue, hueSteps, lightSteps);
+      } else {
+        self.colorPresets = colorPresets.split(',').map((x) => x.trim());
+      }
+    }
+
+    // bind events
+    self.showPicker = self.showPicker.bind(self);
+    self.togglePicker = self.togglePicker.bind(self);
+    self.toggleMenu = self.toggleMenu.bind(self);
+    self.menuClickHandler = self.menuClickHandler.bind(self);
+    self.menuKeyHandler = self.menuKeyHandler.bind(self);
+    self.pointerDown = self.pointerDown.bind(self);
+    self.pointerMove = self.pointerMove.bind(self);
+    self.pointerUp = self.pointerUp.bind(self);
+    self.update = self.update.bind(self);
+    self.handleScroll = self.handleScroll.bind(self);
+    self.handleFocusOut = self.handleFocusOut.bind(self);
+    self.changeHandler = self.changeHandler.bind(self);
+    self.handleDismiss = self.handleDismiss.bind(self);
+    self.keyToggle = self.keyToggle.bind(self);
+    self.handleKnobs = self.handleKnobs.bind(self);
+
+    // generate markup
+    initCallback(self);
+
+    const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
+    // set main elements
+    /** @type {HTMLElement} */
+    // @ts-ignore
+    self.pickerToggle = querySelector('.picker-toggle', parent);
+    /** @type {HTMLElement} */
+    // @ts-ignore
+    self.menuToggle = querySelector('.menu-toggle', parent);
+    /** @type {HTMLElement} */
+    // @ts-ignore
+    self.colorPicker = colorPicker;
+    /** @type {HTMLElement} */
+    // @ts-ignore
+    self.colorMenu = colorMenu;
+    /** @type {HTMLInputElement[]} */
+    // @ts-ignore
+    self.inputs = [...getElementsByClassName('color-input', parent)];
+    const [controls] = getElementsByClassName('color-controls', parent);
+    self.controls = controls;
+    /** @type {(HTMLElement | Element)[]} */
+    self.controlKnobs = [...getElementsByClassName('knob', controls)];
+    /** @type {(HTMLElement)[]} */
+    // @ts-ignore
+    self.visuals = [...getElementsByClassName('visual-control', controls)];
+
+    // update colour picker controls, inputs and visuals
+    self.update();
+
+    // add main events listeners
+    toggleEvents(self, true);
+
+    // set component data
+    Data.set(input, colorPickerString, self);
+  }
+
+  /** Returns the current colour value */
+  get value() { return this.input.value; }
+
+  /**
+   * Sets a new colour value.
+   * @param {string} v new colour value
+   */
+  set value(v) { this.input.value = v; }
+
+  /** Check if the colour presets include any non-colour. */
+  get hasNonColor() {
+    return this.colorKeywords instanceof Array
+      && this.colorKeywords.some((x) => nonColors.includes(x));
+  }
+
+  /** Check if the parent of the target is a `ColorPickerElement` instance. */
+  get isCE() { return this.parent.localName === colorPickerString; }
+
+  /** Returns hexadecimal value of the current colour. */
+  get hex() { return this.color.toHex(true); }
+
+  /** Returns the current colour value in {h,s,v,a} object format. */
+  get hsv() { return this.color.toHsv(); }
+
+  /** Returns the current colour value in {h,s,l,a} object format. */
+  get hsl() { return this.color.toHsl(); }
+
+  /** Returns the current colour value in {h,w,b,a} object format. */
+  get hwb() { return this.color.toHwb(); }
+
+  /** Returns the current colour value in {r,g,b,a} object format. */
+  get rgb() { return this.color.toRgb(); }
+
+  /** Returns the current colour brightness. */
+  get brightness() { return this.color.brightness; }
+
+  /** Returns the current colour luminance. */
+  get luminance() { return this.color.luminance; }
+
+  /** Checks if the current colour requires a light text colour. */
+  get isDark() {
+    const { color, brightness } = this;
+    return brightness < 120 && color.a > 0.33;
+  }
+
+  /** Checks if the current input value is a valid colour. */
+  get isValid() {
+    const inputValue = this.input.value;
+    return inputValue !== '' && new Color(inputValue).isValid;
+  }
+
+  /** Updates `ColorPicker` visuals. */
+  updateVisuals() {
+    const self = this;
+    const {
+      format, controlPositions, visuals,
+    } = self;
+    const [v1, v2, v3] = visuals;
+    const { offsetWidth, offsetHeight } = v1;
+    const hue = format === 'hsl'
+      ? controlPositions.c1x / offsetWidth
+      : controlPositions.c2y / offsetHeight;
+    // @ts-ignore - `hslToRgb` is assigned to `Color` as static method
+    const { r, g, b } = Color.hslToRgb(hue, 1, 0.5);
+    const whiteGrad = 'linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)';
+    const alpha = 1 - controlPositions.c3y / offsetHeight;
+    const roundA = roundPart((alpha * 100)) / 100;
+
+    if (format !== 'hsl') {
+      const fill = new Color({
+        h: hue, s: 1, l: 0.5, a: alpha,
+      }).toRgbString();
+      const hueGradient = `linear-gradient(
+        rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
+        rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
+        rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
+        rgb(255,0,0) 100%)`;
+      setElementStyle(v1, {
+        background: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${roundA}) 100%),
+        linear-gradient(to right, rgba(255,255,255,${roundA}) 0%, ${fill} 100%),
+        ${whiteGrad}`,
+      });
+      setElementStyle(v2, { background: hueGradient });
+    } else {
+      const saturation = roundPart((controlPositions.c2y / offsetHeight) * 100);
+      const fill0 = new Color({
+        r: 255, g: 0, b: 0, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fill1 = new Color({
+        r: 255, g: 255, b: 0, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fill2 = new Color({
+        r: 0, g: 255, b: 0, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fill3 = new Color({
+        r: 0, g: 255, b: 255, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fill4 = new Color({
+        r: 0, g: 0, b: 255, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fill5 = new Color({
+        r: 255, g: 0, b: 255, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fill6 = new Color({
+        r: 255, g: 0, b: 0, a: alpha,
+      }).saturate(-saturation).toRgbString();
+      const fillGradient = `linear-gradient(to right,
+        ${fill0} 0%, ${fill1} 16.67%, ${fill2} 33.33%, ${fill3} 50%,
+        ${fill4} 66.67%, ${fill5} 83.33%, ${fill6} 100%)`;
+      const lightGrad = `linear-gradient(rgba(255,255,255,${roundA}) 0%, rgba(255,255,255,0) 50%),
+        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${roundA}) 100%)`;
+
+      setElementStyle(v1, { background: `${lightGrad},${fillGradient},${whiteGrad}` });
+      const {
+        r: gr, g: gg, b: gb,
+      } = new Color({ r, g, b }).greyscale().toRgb();
+
+      setElementStyle(v2, {
+        background: `linear-gradient(rgb(${r},${g},${b}) 0%, rgb(${gr},${gg},${gb}) 100%)`,
+      });
+    }
+    setElementStyle(v3, {
+      background: `linear-gradient(rgba(${r},${g},${b},1) 0%,rgba(${r},${g},${b},0) 100%)`,
+    });
+  }
+
+  /**
+   * The `ColorPicker` *focusout* event listener when open.
+   * @param {FocusEvent} e
+   * @this {ColorPicker}
+   */
+  handleFocusOut({ relatedTarget }) {
+    // @ts-ignore
+    if (relatedTarget && !this.parent.contains(relatedTarget)) {
+      this.hide(true);
+    }
+  }
+
+  /**
+   * The `ColorPicker` *keyup* event listener when open.
+   * @param {KeyboardEvent} e
+   * @this {ColorPicker}
+   */
+  handleDismiss({ code }) {
+    const self = this;
+    if (self.isOpen && code === keyEscape) {
+      self.hide();
+    }
+  }
+
+  /**
+   * The `ColorPicker` *scroll* event listener when open.
+   * @param {Event} e
+   * @this {ColorPicker}
+   */
+  handleScroll(e) {
+    const self = this;
+    const { activeElement } = getDocument(self.input);
+
+    if ((isMobile && self.dragElement)
+      || (activeElement && self.controlKnobs.includes(activeElement))) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
+    self.updateDropdownPosition();
+  }
+
+  /**
+   * The `ColorPicker` keyboard event listener for menu navigation.
+   * @param {KeyboardEvent} e
+   * @this {ColorPicker}
+   */
+  menuKeyHandler(e) {
+    const { target, code } = e;
+    // @ts-ignore
+    const { previousElementSibling, nextElementSibling, parentElement } = target;
+    const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
+    const allSiblings = [...parentElement.children];
+    const columnsCount = isColorOptionsMenu
+      && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
+    const currentIndex = allSiblings.indexOf(target);
+    const previousElement = currentIndex > -1
+      && columnsCount && allSiblings[currentIndex - columnsCount];
+    const nextElement = currentIndex > -1
+      && columnsCount && allSiblings[currentIndex + columnsCount];
+
+    if ([keyArrowDown, keyArrowUp, keySpace].includes(code)) {
+      // prevent scroll when navigating the menu via arrow keys / Space
+      e.preventDefault();
+    }
+    if (isColorOptionsMenu) {
+      if (previousElement && code === keyArrowUp) {
+        focus(previousElement);
+      } else if (nextElement && code === keyArrowDown) {
+        focus(nextElement);
+      } else if (previousElementSibling && code === keyArrowLeft) {
+        focus(previousElementSibling);
+      } else if (nextElementSibling && code === keyArrowRight) {
+        focus(nextElementSibling);
+      }
+    } else if (previousElementSibling && [keyArrowLeft, keyArrowUp].includes(code)) {
+      focus(previousElementSibling);
+    } else if (nextElementSibling && [keyArrowRight, keyArrowDown].includes(code)) {
+      focus(nextElementSibling);
+    }
+
+    if ([keyEnter, keySpace].includes(code)) {
+      this.menuClickHandler({ target });
+    }
+  }
+
+  /**
+   * The `ColorPicker` click event listener for the colour menu presets / defaults.
+   * @param {Partial<Event>} e
+   * @this {ColorPicker}
+   */
+  menuClickHandler(e) {
+    const self = this;
+    /** @type {*} */
+    const { target } = e;
+    const { colorMenu } = self;
+    const newOption = (getAttribute(target, 'data-value') || '').trim();
+    // invalidate for targets other than color options
+    if (!newOption.length) return;
+    const currentActive = querySelector('li.active', colorMenu);
+    let newColor = nonColors.includes(newOption) ? 'white' : newOption;
+    newColor = newOption === 'transparent' ? 'rgba(0,0,0,0)' : newOption;
+
+    const {
+      r, g, b, a,
+    } = new Color(newColor);
+
+    ObjectAssign(self.color, {
+      r, g, b, a,
+    });
+
+    self.update();
+
+    if (currentActive !== target) {
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
+
+      addClass(target, 'active');
+      setAttribute(target, ariaSelected, 'true');
+
+      if (nonColors.includes(newOption)) {
+        self.value = newOption;
+      }
+      firePickerChange(self);
+    }
+  }
+
+  /**
+   * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
+   * @param {TouchEvent} e
+   * @this {ColorPicker}
+   */
+  pointerDown(e) {
+    const self = this;
+    /** @type {*} */
+    const {
+      type, target, touches, pageX, pageY,
+    } = e;
+    const { colorMenu, visuals, controlKnobs } = self;
+    const [v1, v2, v3] = visuals;
+    const [c1, c2, c3] = controlKnobs;
+    /** @type {HTMLElement} */
+    const visual = hasClass(target, 'visual-control')
+      ? target : querySelector('.visual-control', target.parentElement);
+    const visualRect = getBoundingClientRect(visual);
+    const X = type === 'touchstart' ? touches[0].pageX : pageX;
+    const Y = type === 'touchstart' ? touches[0].pageY : pageY;
+    const offsetX = X - window.pageXOffset - visualRect.left;
+    const offsetY = Y - window.pageYOffset - visualRect.top;
+
+    if (target === v1 || target === c1) {
+      self.dragElement = visual;
+      self.changeControl1(offsetX, offsetY);
+    } else if (target === v2 || target === c2) {
+      self.dragElement = visual;
+      self.changeControl2(offsetY);
+    } else if (target === v3 || target === c3) {
+      self.dragElement = visual;
+      self.changeAlpha(offsetY);
+    }
+
+    if (colorMenu) {
+      const currentActive = querySelector('li.active', colorMenu);
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
+    }
+    e.preventDefault();
+  }
+
+  /**
+   * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
+   * @param {TouchEvent} e
+   * @this {ColorPicker}
+   */
+  pointerUp({ target }) {
+    const self = this;
+    const { parent } = self;
+    const doc = getDocument(parent);
+    const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
+    const selection = doc.getSelection();
+    // @ts-ignore
+    if (!self.dragElement && !selection.toString().length
+      // @ts-ignore
+      && !parent.contains(target)) {
+      self.hide(currentOpen);
+    }
+
+    self.dragElement = null;
+  }
+
+  /**
+   * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
+   * @param {TouchEvent} e
+   */
+  pointerMove(e) {
+    const self = this;
+    const { dragElement, visuals } = self;
+    const [v1, v2, v3] = visuals;
+    const {
+      // @ts-ignore
+      type, touches, pageX, pageY,
+    } = e;
+
+    if (!dragElement) return;
+
+    const controlRect = getBoundingClientRect(dragElement);
+    const X = type === 'touchmove' ? touches[0].pageX : pageX;
+    const Y = type === 'touchmove' ? touches[0].pageY : pageY;
+    const offsetX = X - window.pageXOffset - controlRect.left;
+    const offsetY = Y - window.pageYOffset - controlRect.top;
+
+    if (dragElement === v1) {
+      self.changeControl1(offsetX, offsetY);
+    }
+
+    if (dragElement === v2) {
+      self.changeControl2(offsetY);
+    }
+
+    if (dragElement === v3) {
+      self.changeAlpha(offsetY);
+    }
+  }
+
+  /**
+   * The `ColorPicker` *keydown* event listener for control knobs.
+   * @param {KeyboardEvent} e
+   */
+  handleKnobs(e) {
+    const { target, code } = e;
+    const self = this;
+
+    // only react to arrow buttons
+    if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
+    e.preventDefault();
+
+    const { format, controlKnobs, visuals } = self;
+    const { offsetWidth, offsetHeight } = visuals[0];
+    const [c1, c2, c3] = controlKnobs;
+    const { activeElement } = getDocument(c1);
+    const currentKnob = controlKnobs.find((x) => x === activeElement);
+    const yRatio = offsetHeight / (format === 'hsl' ? 100 : 360);
+
+    if (currentKnob) {
+      let offsetX = 0;
+      let offsetY = 0;
+
+      if (target === c1) {
+        const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
+
+        if ([keyArrowLeft, keyArrowRight].includes(code)) {
+          self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
+        } else if ([keyArrowUp, keyArrowDown].includes(code)) {
+          self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
+        }
+
+        offsetX = self.controlPositions.c1x;
+        offsetY = self.controlPositions.c1y;
+        self.changeControl1(offsetX, offsetY);
+      } else if (target === c2) {
+        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
+        offsetY = self.controlPositions.c2y;
+        self.changeControl2(offsetY);
+      } else if (target === c3) {
+        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
+        offsetY = self.controlPositions.c3y;
+        self.changeAlpha(offsetY);
+      }
+      self.handleScroll(e);
+    }
+  }
+
+  /** The event listener of the colour form inputs. */
+  changeHandler() {
+    const self = this;
+    let colorSource;
+    const {
+      inputs, format, value: currentValue, input, controlPositions, visuals,
+    } = self;
+    /** @type {*} */
+    const { activeElement } = getDocument(input);
+    const { offsetHeight } = visuals[0];
+    const [i1,,, i4] = inputs;
+    const [v1, v2, v3, v4] = format === 'rgb'
+      ? inputs.map((i) => parseFloat(i.value) / (i === i4 ? 100 : 1))
+      : inputs.map((i) => parseFloat(i.value) / (i !== i1 ? 100 : 360));
+    const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
+    const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
+
+    if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
+      if (activeElement === input) {
+        if (isNonColorValue) {
+          colorSource = 'white';
+        } else {
+          colorSource = currentValue;
+        }
+      } else if (format === 'hex') {
+        colorSource = i1.value;
+      } else if (format === 'hsl') {
+        colorSource = {
+          h: v1, s: v2, l: v3, a: alpha,
+        };
+      } else if (format === 'hwb') {
+        colorSource = {
+          h: v1, w: v2, b: v3, a: alpha,
+        };
+      } else {
+        colorSource = {
+          r: v1, g: v2, b: v3, a: alpha,
+        };
+      }
+
+      const {
+        r, g, b, a,
+      } = new Color(colorSource);
+
+      ObjectAssign(self.color, {
+        r, g, b, a,
+      });
+      self.setControlPositions();
+      self.updateAppearance();
+      self.updateInputs();
+      self.updateControls();
+      self.updateVisuals();
+
+      // set non-color keyword
+      if (activeElement === input && isNonColorValue) {
+        self.value = currentValue;
+      }
+    }
+  }
+
+  /**
+   * Updates `ColorPicker` first control:
+   * * `lightness` and `saturation` for HEX/RGB;
+   * * `lightness` and `hue` for HSL.
+   *
+   * @param {number} X the X component of the offset
+   * @param {number} Y the Y component of the offset
+   */
+  changeControl1(X, Y) {
+    const self = this;
+    let [offsetX, offsetY] = [0, 0];
+    const {
+      format, controlPositions, visuals,
+    } = self;
+    const { offsetHeight, offsetWidth } = visuals[0];
+
+    if (X > offsetWidth) offsetX = offsetWidth;
+    else if (X >= 0) offsetX = X;
+
+    if (Y > offsetHeight) offsetY = offsetHeight;
+    else if (Y >= 0) offsetY = Y;
+
+    const hue = format === 'hsl'
+      ? offsetX / offsetWidth
+      : controlPositions.c2y / offsetHeight;
+
+    const saturation = format === 'hsl'
+      ? 1 - controlPositions.c2y / offsetHeight
+      : offsetX / offsetWidth;
+
+    const lightness = 1 - offsetY / offsetHeight;
+    const alpha = 1 - controlPositions.c3y / offsetHeight;
+
+    const colorObject = format === 'hsl'
+      ? {
+        h: hue, s: saturation, l: lightness, a: alpha,
+      }
+      : {
+        h: hue, s: saturation, v: lightness, a: alpha,
+      };
+
+    // new color
+    const {
+      r, g, b, a,
+    } = new Color(colorObject);
+
+    ObjectAssign(self.color, {
+      r, g, b, a,
+    });
+
+    // new positions
+    self.controlPositions.c1x = offsetX;
+    self.controlPositions.c1y = offsetY;
+
+    // update color picker
+    self.updateAppearance();
+    self.updateInputs();
+    self.updateControls();
+    self.updateVisuals();
+  }
+
+  /**
+   * Updates `ColorPicker` second control:
+   * * `hue` for HEX/RGB/HWB;
+   * * `saturation` for HSL.
+   *
+   * @param {number} Y the Y offset
+   */
+  changeControl2(Y) {
+    const self = this;
+    const {
+      format, controlPositions, visuals,
+    } = self;
+    const { offsetHeight, offsetWidth } = visuals[0];
+
+    let offsetY = 0;
+
+    if (Y > offsetHeight) offsetY = offsetHeight;
+    else if (Y >= 0) offsetY = Y;
+
+    const hue = format === 'hsl'
+      ? controlPositions.c1x / offsetWidth
+      : offsetY / offsetHeight;
+    const saturation = format === 'hsl'
+      ? 1 - offsetY / offsetHeight
+      : controlPositions.c1x / offsetWidth;
+    const lightness = 1 - controlPositions.c1y / offsetHeight;
+    const alpha = 1 - controlPositions.c3y / offsetHeight;
+    const colorObject = format === 'hsl'
+      ? {
+        h: hue, s: saturation, l: lightness, a: alpha,
+      }
+      : {
+        h: hue, s: saturation, v: lightness, a: alpha,
+      };
+
+    // new color
+    const {
+      r, g, b, a,
+    } = new Color(colorObject);
+
+    ObjectAssign(self.color, {
+      r, g, b, a,
+    });
+
+    // new position
+    self.controlPositions.c2y = offsetY;
+    // update color picker
+    self.updateAppearance();
+    self.updateInputs();
+    self.updateControls();
+    self.updateVisuals();
+  }
+
+  /**
+   * Updates `ColorPicker` last control,
+   * the `alpha` channel.
+   *
+   * @param {number} Y
+   */
+  changeAlpha(Y) {
+    const self = this;
+    const { visuals } = self;
+    const { offsetHeight } = visuals[0];
+    let offsetY = 0;
+
+    if (Y > offsetHeight) offsetY = offsetHeight;
+    else if (Y >= 0) offsetY = Y;
+
+    // update color alpha
+    const alpha = 1 - offsetY / offsetHeight;
+    self.color.setAlpha(alpha);
+    // update position
+    self.controlPositions.c3y = offsetY;
+    // update color picker
+    self.updateAppearance();
+    self.updateInputs();
+    self.updateControls();
+    self.updateVisuals();
+  }
+
+  /**
+   * Updates `ColorPicker` control positions on:
+   * * initialization
+   * * window resize
+   */
+  update() {
+    const self = this;
+    self.updateDropdownPosition();
+    self.updateAppearance();
+    self.setControlPositions();
+    self.updateInputs(true);
+    self.updateControls();
+    self.updateVisuals();
+  }
+
+  /** Updates the open dropdown position on *scroll* event. */
+  updateDropdownPosition() {
+    const self = this;
+    const { input, colorPicker, colorMenu } = self;
+    const elRect = getBoundingClientRect(input);
+    const { top, bottom } = elRect;
+    const { offsetHeight: elHeight } = input;
+    const windowHeight = getDocumentElement(input).clientHeight;
+    const isPicker = hasClass(colorPicker, 'show');
+    const dropdown = isPicker ? colorPicker : colorMenu;
+    if (!dropdown) return;
+    const { offsetHeight: dropHeight } = dropdown;
+    const distanceBottom = windowHeight - bottom;
+    const distanceTop = top;
+    const bottomExceed = top + dropHeight + elHeight > windowHeight; // show
+    const topExceed = top - dropHeight < 0; // show-top
+
+    if ((hasClass(dropdown, 'bottom') || !topExceed) && distanceBottom < distanceTop && bottomExceed) {
+      removeClass(dropdown, 'bottom');
+      addClass(dropdown, 'top');
+    } else {
+      removeClass(dropdown, 'top');
+      addClass(dropdown, 'bottom');
+    }
+  }
+
+  /** Updates control knobs' positions. */
+  setControlPositions() {
+    const self = this;
+    const {
+      format, visuals, color, hsl, hsv,
+    } = self;
+    const { offsetHeight, offsetWidth } = visuals[0];
+    const alpha = color.a;
+    const hue = hsl.h;
+
+    const saturation = format !== 'hsl' ? hsv.s : hsl.s;
+    const lightness = format !== 'hsl' ? hsv.v : hsl.l;
+
+    self.controlPositions.c1x = format !== 'hsl' ? saturation * offsetWidth : hue * offsetWidth;
+    self.controlPositions.c1y = (1 - lightness) * offsetHeight;
+    self.controlPositions.c2y = format !== 'hsl' ? hue * offsetHeight : (1 - saturation) * offsetHeight;
+    self.controlPositions.c3y = (1 - alpha) * offsetHeight;
+  }
+
+  /** Update the visual appearance label and control knob labels. */
+  updateAppearance() {
+    const self = this;
+    const {
+      componentLabels, colorLabels, color, parent,
+      hsl, hsv, hex, format, controlKnobs,
+    } = self;
+    const {
+      appearanceLabel, hexLabel, valueLabel,
+    } = componentLabels;
+    const { r, g, b } = color.toRgb();
+    const [knob1, knob2, knob3] = controlKnobs;
+    const hue = roundPart(hsl.h * 360);
+    const alpha = color.a;
+    const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
+    const saturation = roundPart(saturationSource * 100);
+    const lightness = roundPart(hsl.l * 100);
+    const hsvl = hsv.v * 100;
+    let colorName;
+
+    // determine color appearance
+    if (lightness === 100 && saturation === 0) {
+      colorName = colorLabels.white;
+    } else if (lightness === 0) {
+      colorName = colorLabels.black;
+    } else if (saturation === 0) {
+      colorName = colorLabels.grey;
+    } else if (hue < 15 || hue >= 345) {
+      colorName = colorLabels.red;
+    } else if (hue >= 15 && hue < 45) {
+      colorName = hsvl > 80 && saturation > 80 ? colorLabels.orange : colorLabels.brown;
+    } else if (hue >= 45 && hue < 75) {
+      const isGold = hue > 46 && hue < 54 && hsvl < 80 && saturation > 90;
+      const isOlive = hue >= 54 && hue < 75 && hsvl < 80;
+      colorName = isGold ? colorLabels.gold : colorLabels.yellow;
+      colorName = isOlive ? colorLabels.olive : colorName;
+    } else if (hue >= 75 && hue < 155) {
+      colorName = hsvl < 68 ? colorLabels.green : colorLabels.lime;
+    } else if (hue >= 155 && hue < 175) {
+      colorName = colorLabels.teal;
+    } else if (hue >= 175 && hue < 195) {
+      colorName = colorLabels.cyan;
+    } else if (hue >= 195 && hue < 255) {
+      colorName = colorLabels.blue;
+    } else if (hue >= 255 && hue < 270) {
+      colorName = colorLabels.violet;
+    } else if (hue >= 270 && hue < 295) {
+      colorName = colorLabels.magenta;
+    } else if (hue >= 295 && hue < 345) {
+      colorName = colorLabels.pink;
+    }
+
+    let colorLabel = `${hexLabel} ${hex.split('').join(' ')}`;
+
+    if (format === 'hsl') {
+      colorLabel = `HSL: ${hue}°, ${saturation}%, ${lightness}%`;
+      setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
+      setAttribute(knob1, ariaValueText, `${hue}° & ${lightness}%`);
+      setAttribute(knob1, ariaValueNow, `${hue}`);
+      setAttribute(knob2, ariaValueText, `${saturation}%`);
+      setAttribute(knob2, ariaValueNow, `${saturation}`);
+    } else if (format === 'hwb') {
+      const { hwb } = self;
+      const whiteness = roundPart(hwb.w * 100);
+      const blackness = roundPart(hwb.b * 100);
+      colorLabel = `HWB: ${hue}°, ${whiteness}%, ${blackness}%`;
+      setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
+      setAttribute(knob1, ariaValueText, `${whiteness}% & ${blackness}%`);
+      setAttribute(knob1, ariaValueNow, `${whiteness}`);
+      setAttribute(knob2, ariaValueText, `${hue}%`);
+      setAttribute(knob2, ariaValueNow, `${hue}`);
+    } else {
+      colorLabel = format === 'rgb' ? `RGB: ${r}, ${g}, ${b}` : colorLabel;
+      setAttribute(knob2, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
+      setAttribute(knob1, ariaValueText, `${lightness}% & ${saturation}%`);
+      setAttribute(knob1, ariaValueNow, `${lightness}`);
+      setAttribute(knob2, ariaValueText, `${hue}°`);
+      setAttribute(knob2, ariaValueNow, `${hue}`);
+    }
+
+    const alphaValue = roundPart(alpha * 100);
+    setAttribute(knob3, ariaValueText, `${alphaValue}%`);
+    setAttribute(knob3, ariaValueNow, `${alphaValue}`);
+
+    // update the input backgroundColor
+    const newColor = color.toString();
+    setElementStyle(self.input, { backgroundColor: newColor });
+
+    // toggle dark/light classes will also style the placeholder
+    // dark sets color white, light sets color black
+    // isDark ? '#000' : '#fff'
+    if (!self.isDark) {
+      if (hasClass(parent, 'txt-dark')) removeClass(parent, 'txt-dark');
+      if (!hasClass(parent, 'txt-light')) addClass(parent, 'txt-light');
+    } else {
+      if (hasClass(parent, 'txt-light')) removeClass(parent, 'txt-light');
+      if (!hasClass(parent, 'txt-dark')) addClass(parent, 'txt-dark');
+    }
+  }
+
+  /** Updates the control knobs actual positions. */
+  updateControls() {
+    const { controlKnobs, controlPositions } = this;
+    let {
+      c1x, c1y, c2y, c3y,
+    } = controlPositions;
+    const [control1, control2, control3] = controlKnobs;
+    // round control positions
+    [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
+
+    setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
+    setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
+    setElementStyle(control3, { transform: `translate3d(0,${c3y - 4}px,0)` });
+  }
+
+  /**
+   * Updates all color form inputs.
+   * @param {boolean=} isPrevented when `true`, the component original event is prevented
+   */
+  updateInputs(isPrevented) {
+    const self = this;
+    const {
+      value: oldColor, format, inputs, color, hsl,
+    } = self;
+    const [i1, i2, i3, i4] = inputs;
+    const alpha = roundPart(color.a * 100);
+    const hue = roundPart(hsl.h * 360);
+    let newColor;
+
+    if (format === 'hex') {
+      newColor = self.color.toHexString(true);
+      i1.value = self.hex;
+    } else if (format === 'hsl') {
+      const lightness = roundPart(hsl.l * 100);
+      const saturation = roundPart(hsl.s * 100);
+      newColor = self.color.toHslString();
+      i1.value = `${hue}`;
+      i2.value = `${saturation}`;
+      i3.value = `${lightness}`;
+      i4.value = `${alpha}`;
+    } else if (format === 'hwb') {
+      const { w, b } = self.hwb;
+      const whiteness = roundPart(w * 100);
+      const blackness = roundPart(b * 100);
+
+      newColor = self.color.toHwbString();
+      i1.value = `${hue}`;
+      i2.value = `${whiteness}`;
+      i3.value = `${blackness}`;
+      i4.value = `${alpha}`;
+    } else if (format === 'rgb') {
+      let { r, g, b } = self.rgb;
+      [r, g, b] = [r, g, b].map(roundPart);
+
+      newColor = self.color.toRgbString();
+      i1.value = `${r}`;
+      i2.value = `${g}`;
+      i3.value = `${b}`;
+      i4.value = `${alpha}`;
+    }
+
+    // update the color value
+    self.value = `${newColor}`;
+
+    // don't trigger the custom event unless it's really changed
+    if (!isPrevented && newColor !== oldColor) {
+      firePickerChange(self);
+    }
+  }
+
+  /**
+   * The `Space` & `Enter` keys specific event listener.
+   * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
+   * @param {KeyboardEvent} e
+   * @this {ColorPicker}
+   */
+  keyToggle(e) {
+    const self = this;
+    const { menuToggle } = self;
+    const { activeElement } = getDocument(menuToggle);
+    const { code } = e;
+
+    if ([keyEnter, keySpace].includes(code)) {
+      if ((menuToggle && activeElement === menuToggle) || !activeElement) {
+        e.preventDefault();
+        if (!activeElement) {
+          self.togglePicker(e);
+        } else {
+          self.toggleMenu();
+        }
+      }
+    }
+  }
+
+  /**
+   * Toggle the `ColorPicker` dropdown visibility.
+   * @param {Event} e
+   * @this {ColorPicker}
+   */
+  togglePicker(e) {
+    e.preventDefault();
+    const self = this;
+    const { colorPicker } = self;
+
+    if (self.isOpen && hasClass(colorPicker, 'show')) {
+      self.hide(true);
+    } else {
+      showDropdown(self, colorPicker);
+    }
+  }
+
+  /** Shows the `ColorPicker` dropdown. */
+  showPicker() {
+    const self = this;
+    const { colorPicker } = self;
+
+    if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
+      showDropdown(self, colorPicker);
+    }
+  }
+
+  /** Toggles the visibility of the `ColorPicker` presets menu. */
+  toggleMenu() {
+    const self = this;
+    const { colorMenu } = self;
+
+    if (self.isOpen && hasClass(colorMenu, 'show')) {
+      self.hide(true);
+    } else {
+      showDropdown(self, colorMenu);
+    }
+  }
+
+  /**
+   * Hides the currently open `ColorPicker` dropdown.
+   * @param {boolean=} focusPrevented
+   */
+  hide(focusPrevented) {
+    const self = this;
+    if (self.isOpen) {
+      const {
+        pickerToggle, menuToggle, colorPicker, colorMenu, parent, input,
+      } = self;
+      const openPicker = hasClass(colorPicker, 'show');
+      const openDropdown = openPicker ? colorPicker : colorMenu;
+      const relatedBtn = openPicker ? pickerToggle : menuToggle;
+      const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
+
+      if (openDropdown) {
+        removeClass(openDropdown, 'show');
+        setAttribute(relatedBtn, ariaExpanded, 'false');
+        setTimeout(() => {
+          removePosition(openDropdown);
+          if (!querySelector('.show', parent)) {
+            removeClass(parent, 'open');
+            toggleEventsOnShown(self);
+            self.isOpen = false;
+          }
+        }, animationDuration);
+      }
+
+      if (!self.isValid) {
+        self.value = self.color.toString();
+      }
+      if (!focusPrevented) {
+        focus(pickerToggle);
+      }
+      setAttribute(input, tabIndex, '-1');
+      if (menuToggle) {
+        setAttribute(menuToggle, tabIndex, '-1');
+      }
+    }
+  }
+
+  /** Removes `ColorPicker` from target `<input>`. */
+  dispose() {
+    const self = this;
+    const { input, parent } = self;
+    self.hide(true);
+    toggleEvents(self);
+    [...parent.children].forEach((el) => {
+      if (el !== input) el.remove();
+    });
+
+    removeAttribute(input, tabIndex);
+    setElementStyle(input, { backgroundColor: '' });
+
+    ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
+    Data.remove(input, colorPickerString);
+  }
+}
+
+ObjectAssign(ColorPicker, {
+  Color,
+  ColorPalette,
+  Version,
+  getInstance: getColorPickerInstance,
+  init: initColorPicker,
+  selector: colorPickerSelector,
+  // utils important for render
+  roundPart,
+  setElementStyle,
+  setAttribute,
+  getBoundingClientRect,
+});
+
+let CPID = 0;
+
+/**
+ * `ColorPickerElement` Web Component.
+ * @example
+ * <label for="UNIQUE_ID">Label</label>
+ * <color-picker data-format="hex" data-value="#075">
+ *   <input id="UNIQUE_ID" type="text" class="color-preview btn-appearance">
+ * </color-picker>
+ */
+class ColorPickerElement extends HTMLElement {
+  constructor() {
+    super();
+    /** @type {boolean} */
+    this.isDisconnected = true;
+    this.attachShadow({ mode: 'open' });
+  }
+
+  /**
+   * Returns the current color value.
+   * @returns {string?}
+   */
+  get value() { return this.input ? this.input.value : null; }
+
+  connectedCallback() {
+    if (this.colorPicker) {
+      if (this.isDisconnected) {
+        this.isDisconnected = false;
+      }
+      return;
+    }
+
+    const inputs = getElementsByTagName('input', this);
+
+    if (!inputs.length) {
+      const label = getAttribute(this, 'data-label');
+      const value = getAttribute(this, 'data-value') || '#069';
+      const format = getAttribute(this, 'data-format') || 'rgb';
+      const newInput = createElement({
+        tagName: 'input',
+        type: 'text',
+        className: 'color-preview btn-appearance',
+      });
+      let id = getAttribute(this, 'data-id');
+      if (!id) {
+        id = `color-picker-${format}-${CPID}`;
+        CPID += 1;
+      }
+
+      const labelElement = createElement({ tagName: 'label', innerText: label || 'Color Picker' });
+      this.before(labelElement);
+      setAttribute(labelElement, 'for', id);
+      setAttribute(newInput, 'id', id);
+      setAttribute(newInput, 'name', id);
+      setAttribute(newInput, 'autocomplete', 'off');
+      setAttribute(newInput, 'spellcheck', 'false');
+      setAttribute(newInput, 'value', value);
+      this.append(newInput);
+    }
+
+    const [input] = inputs;
+
+    if (input) {
+      /** @type {HTMLInputElement} */
+      // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+      this.input = input;
+
+      // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+      this.colorPicker = new ColorPicker(input);
+      this.color = this.colorPicker.color;
+
+      if (this.shadowRoot) {
+        this.shadowRoot.append(createElement('slot'));
+      }
+
+      this.isDisconnected = false;
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.colorPicker) this.colorPicker.dispose();
+    this.isDisconnected = true;
+  }
+}
+
+ObjectAssign(ColorPickerElement, {
+  Color,
+  ColorPicker,
+  ColorPalette,
+  getInstance: getColorPickerInstance,
+  Version,
+});
+
+customElements.define('color-picker', ColorPickerElement);
+
+export default ColorPickerElement;