@thednp/color-picker 0.0.1-alpha1 → 0.0.1

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

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@thednp/color-picker",
-  "version": "0.0.1alpha1",
-  "description": "Modern Color Picker Component",
+  "version": "0.0.1",
+  "description": "Modern Color Picker Web Component",
   "main": "dist/js/color-picker.min.js",
   "module": "dist/js/color-picker.esm.js",
   "types": "types/index.d.ts",
   "style": "dist/css/color-picker.min.css",
-  "sass": "src/css/color-picker.scss",
+  "sass": "src/scss/color-picker.scss",
   "jsnext": "src/js/color-picker.js",
   "files": [
     "types",
@@ -23,20 +23,27 @@
     "lint:js": "eslint src/ --config .eslintrc",
     "fix:css": "stylelint --config .stylelintrc.json -s --fix scss \"src/scss/*.scss\"",
     "lint:css": "stylelint --config .stylelintrc.json -s scss \"src/scss/*.scss\"",
-    "bundle": "npm-run-all --parallel build compile",
-    "build": "npm run lint:js && npm-run-all --parallel build-*",
+    "bundle": "npm-run-all build compile",
+    "build": "npm run lint:js && npm-run-all --parallel build-* && npm-run-all --parallel copy-js-*",
     "build:ts": "tsc -d",
     "build-js": "rollup --environment FORMAT:umd,MIN:false -c",
     "build-ce": "rollup --environment FORMAT:umd,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.js -c",
     "build-ce-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.min.js -c",
     "build-ce-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.js -c",
-    "build-ce-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.js -c",
+    "build-ce-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.min.js -c",
     "build-minjs": "rollup --environment FORMAT:umd,MIN:true -c",
     "build-esm": "rollup --environment FORMAT:esm,MIN:false -c",
     "build-esmjs": "rollup --environment FORMAT:esm,MIN:true -c",
-    "compile": "npm run lint:css && npm-run-all --parallel compile-* && npm run copy-compile",
+    "copy": "npm-run-all --parallel copy-*",
+    "copy-js-cp": "node compile.js INPUTFILE:dist/js/color-picker.js,OUTPUTFILE:docs/js/color-picker.js,COPY:true",
+    "copy-js-ce": "node compile.js INPUTFILE:dist/js/color-picker-element.js,OUTPUTFILE:docs/js/color-picker-element.js,COPY:true",
+    "copy-css-cp": "node compile.js INPUTFILE:dist/css/color-picker.css,OUTPUTFILE:docs/css/color-picker.css,COPY:true",
+    "copy-css-rtl": "node compile.js INPUTFILE:dist/css/color-picker.rtl.css,OUTPUTFILE:docs/css/color-picker.rtl.css,COPY:true",
+    "compile": "npm run lint:css && npm-run-all --parallel compile-* && npm-run-all --parallel copy-css-*",
     "compile-scss": "node compile.js",
-    "compile-scss-min": "node compile.js MIN:true"
+    "compile-scss-min": "node compile.js MIN:true",
+    "compile-scss-rtl": "node compile.js MIN:false,DIR:rtl",
+    "compile-scss-rtl-min": "node compile.js MIN:true,DIR:rtl"
   },
   "repository": {
     "type": "git",
@@ -46,6 +53,8 @@
     "color-picker",
     "colorpicker",
     "javascript colorpicker",
+    "javascript colorpalette",
+    "color palette",
     "native javascript"
   ],
   "author": "thednp",
@@ -56,7 +65,7 @@
   "homepage": "http://thednp.github.io/color-picker",
   "dependencies": {
     "event-listener.js": "^0.0.5",
-    "shorter-js": "^0.3.1"
+    "shorter-js": "^0.3.4"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",

package/src/js/color-palette.js

@@ -0,0 +1,71 @@
+import roundPart from './util/roundPart';
+import Color from './color';
+
+/**
+ * @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 }
+ */
+export default 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;
+  }
+}

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

@@ -1,33 +1,37 @@
-import querySelector from 'shorter-js/src/selectors/querySelector';
+import getElementsByTagName from 'shorter-js/src/selectors/getElementsByTagName';
 import createElement from 'shorter-js/src/misc/createElement';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
+import setAttribute from 'shorter-js/src/attr/setAttribute';
+import getAttribute from 'shorter-js/src/attr/getAttribute';
 
 import Color from './color';
-import ColorPicker from './color-picker';
+import ColorPicker, { getColorPickerInstance } from './color-picker';
+import ColorPalette from './color-palette';
+import Version from './version';
+
+let CPID = 0;
 
 /**
  * `ColorPickerElement` Web Component.
  * @example
- * <color-picker>
- *   <input type="text">
+ * <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 {ColorPicker?} */
-    this.colorPicker = null;
-    /** @type {HTMLInputElement} */
-    // @ts-ignore - `HTMLInputElement` is also `HTMLElement`
-    this.input = querySelector('input', this);
     /** @type {boolean} */
     this.isDisconnected = true;
     this.attachShadow({ mode: 'open' });
   }
 
-  get value() { return this.input.value; }
-
-  get color() { return this.colorPicker && this.colorPicker.color; }
+  /**
+   * Returns the current color value.
+   * @returns {string?}
+   */
+  get value() { return this.input ? this.input.value : null; }
 
   connectedCallback() {
     if (this.colorPicker) {
@@ -37,11 +41,50 @@ class ColorPickerElement extends HTMLElement {
       return;
     }
 
-    this.colorPicker = new ColorPicker(this.input);
-    this.isDisconnected = false;
+    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'));
+      }
 
-    if (this.shadowRoot) {
-      this.shadowRoot.append(createElement('slot'));
+      this.isDisconnected = false;
     }
   }
 
@@ -54,6 +97,9 @@ class ColorPickerElement extends HTMLElement {
 ObjectAssign(ColorPickerElement, {
   Color,
   ColorPicker,
+  ColorPalette,
+  getInstance: getColorPickerInstance,
+  Version,
 });
 
 customElements.define('color-picker', ColorPickerElement);