@thednp/color-picker 0.0.2-alpha3 → 0.0.2-alpha4

package/dist/js/color-esm.js

@@ -1,5 +1,5 @@
 /*!
-* Color v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* Color v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */

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

@@ -1,2 +1,2 @@
-// Color v0.0.2alpha3 | thednp © 2022 | MIT-License
+// Color v0.0.2alpha4 | thednp © 2022 | MIT-License
 const{head:t}=document;function r(t,r){const n=getComputedStyle(t);return r in n?n[r]:""}const n=(t,r)=>Object.assign(t,r),e=(t,r)=>{n(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const a=["rgb","hex","hsl","hsv","hwb"],h="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${i})|(?:${h})`,c="(?:[,|\\s]+)",g=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${i})${c}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,l={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+g),rgb:new RegExp("rgb(?:a)?"+g),hsl:new RegExp("hsl(?:a)?"+g),hsv:new RegExp("hsv(?:a)?"+g),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 b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(n){return!o.includes(n)&&!["#",...a].some(t=>n.includes(t))&&(!!["black","white"].includes(n)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{e(t,{color:n});const s=r(t,"color");return e(t,{color:""}),s!==o}))}function x(t){return Boolean(l.CSS_UNIT.exec(String(t)))}function S(t,r){let n=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(n="100%");const e=f(n);return n=360===r?parseFloat(n):Math.min(r,Math.max(0,parseFloat(n))),e&&(n=n*r/100),Math.abs(n-r)<1e-6?1:(n=360===r?(n<0?n%r+r:n%r)/r:n%r/r,n)}function d(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function A(t){return Math.min(1,Math.max(0,t))}function $(n){e(t,{color:n});const o=r(t,"color");return e(t,{color:""}),o}function p(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,n){const e=Math.max(t,r,n),o=Math.min(t,r,n);let s=0,a=0;const h=(e+o)/2;if(e===o)a=0,s=0;else{const i=e-o;a=h>.5?i/(2-e-o):i/(e+o),e===t&&(s=(r-n)/i+(r<n?6:0)),e===r&&(s=(n-t)/i+2),e===n&&(s=(t-r)/i+4),s/=6}return{h:s,s:a,l:h}}function F(t,r,n){let e=n;return e<0&&(e+=1),e>1&&(e-=1),e<1/6?t+6*e*(r-t):e<.5?r:e<2/3?t+(r-t)*(2/3-e)*6:t}function M(t,r,n){let e=0,o=0,s=0;if(0===r)o=n,s=n,e=n;else{const a=n<.5?n*(1+r):n+r-n*r,h=2*n-a;e=F(h,a,t+1/3),o=F(h,a,t),s=F(h,a,t-1/3)}return{r:e,g:o,b:s}}function T(t,r,n){let e=0,o=0;const s=Math.min(t,r,n),a=Math.max(t,r,n),h=1-a;if(a===s)return{h:0,w:s,b:h};t===s?(e=r-n,o=3):(e=r===s?n-t:t-r,o=r===s?5:1);const i=(o-e/(a-s))/6;return{h:1===i?0:i,w:s,b:h}}function y(t,r,n){if(r+n>=1){const t=r/(r+n);return{r:t,g:t,b:t}}let{r:e,g:o,b:s}=M(t,1,.5);return[e,o,s]=[e,o,s].map(t=>t*(1-r-n)+r),{r:e,g:o,b:s}}function C(t,r,n){const e=Math.max(t,r,n),o=Math.min(t,r,n);let s=0;const a=e-o;return e===o?s=0:(t===e&&(s=(r-n)/a+(r<n?6:0)),r===e&&(s=(n-t)/a+2),n===e&&(s=(t-r)/a+4),s/=6),{h:s,s:0===e?0:a/e,v:e}}function E(t,r,n){const e=6*t,o=r,s=n,a=Math.floor(e),h=e-a,i=s*(1-o),u=s*(1-h*o),c=s*(1-(1-h)*o),g=a%6;return{r:[s,u,i,i,c,s][g],g:[c,s,s,u,i,i][g],b:[i,i,c,s,s,u][g]}}function N(t,r,n,e){const o=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(n).toString(16))];return e&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function I(t,r,n,e,o){const a=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(n).toString(16)),v(p(e))];return o&&a[0].charAt(0)===a[0].charAt(1)&&a[1].charAt(0)===a[1].charAt(1)&&a[2].charAt(0)===a[2].charAt(1)&&a[3].charAt(0)===a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function k(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=$(r);else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,n,e,s,a]=l.rgb.exec(r)||[];return n&&e&&s?{r:n,g:e,b:s,a:void 0!==a?a:1,format:"rgb"}:([,n,e,s,a]=l.hsl.exec(r)||[],n&&e&&s?{h:n,s:e,l:s,a:void 0!==a?a:1,format:"hsl"}:([,n,e,s,a]=l.hsv.exec(r)||[],n&&e&&s?{h:n,s:e,v:s,a:void 0!==a?a:1,format:"hsv"}:([,n,e,s,a]=l.hwb.exec(r)||[],n&&e&&s?{h:n,w:e,b:s,a:void 0!==a?a:1,format:"hwb"}:([,n,e,s,a]=l.hex8.exec(r)||[],n&&e&&s&&a?{r:H(n),g:H(e),b:H(s),a:w(a),format:"hex"}:([,n,e,s]=l.hex6.exec(r)||[],n&&e&&s?{r:H(n),g:H(e),b:H(s),format:"hex"}:([,n,e,s,a]=l.hex4.exec(r)||[],n&&e&&s&&a?{r:H(n+n),g:H(e+e),b:H(s+s),a:w(a+a),format:"hex"}:([,n,e,s]=l.hex3.exec(r)||[],!!(n&&e&&s)&&{r:H(n+n),g:H(e+e),b:H(s+s),format:"hex"})))))))}function _(t){let r={r:0,g:0,b:0},n=t,e=1,o=null,s=null,h=null,i=null,u=null,c=null,g=null,l=null,b=!1;const m="object"==typeof n&&n.format;let A=m&&a.includes(m)?m:"rgb";return"string"==typeof t&&(n=k(t),n&&(b=!0)),"object"==typeof n&&(x(n.r)&&x(n.g)&&x(n.b)&&(({r:g,g:l,b:u}=n),[g,l,u]=[g,l,u].map(t=>S(t,f(t)?100:255)),r={r:g,g:l,b:u},b=!0,A=n.format||"rgb"),x(n.h)&&x(n.s)&&x(n.v)&&(({h:c,s:o,v:s}=n),c=S(c,360),o=S(o,100),s=S(s,100),r=E(c,o,s),b=!0,A="hsv"),x(n.h)&&x(n.s)&&x(n.l)&&(({h:c,s:o,l:h}=n),c=S(c,360),o=S(o,100),h=S(h,100),r=M(c,o,h),b=!0,A="hsl"),x(n.h)&&x(n.w)&&x(n.b)&&(({h:c,w:i,b:u}=n),c=S(c,360),i=S(i,100),u=S(u,100),r=y(c,i,u),b=!0,A="hwb"),x(n.a)&&(e=n.a,e=f(""+e)||parseFloat(e)>1?S(e,100):e)),void 0===n&&(b=!0),{ok:b,format:A,r:r.r,g:r.g,b:r.b,a:d(e)}}class j{constructor(t,r){let n=t;const e=r&&a.includes(r)?r:"";n instanceof j&&(n=_(n));const{r:o,g:s,b:h,a:i,ok:u,format:c}=_(n);this.originalInput=t,this.r=o,this.g=s,this.b=h,this.a=i,this.ok=u,this.format=e||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:n}=this;let e=0,o=0,s=0;return e=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,.2126*e+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:n}=this.toRgb();return(299*t+587*r+114*n)/1e3}toRgb(){let{r:t,g:r,b:n,a:e}=this;return[t,r,n]=[t,r,n].map(t=>s(255*t*100)/100),e=s(100*e)/100,{r:t,g:r,b:n,a:e}}toRgbString(){const{r:t,g:r,b:n,a:e}=this.toRgb(),[o,a,h]=[t,r,n].map(s);return 1===e?`rgb(${o}, ${a}, ${h})`:`rgba(${o}, ${a}, ${h}, ${e})`}toRgbCSS4String(){const{r:t,g:r,b:n,a:e}=this.toRgb(),[o,a,h]=[t,r,n].map(s);return`rgb(${o} ${a} ${h}${1===e?"":` / ${s(100*e)}%`})`}toHex(t){const{r:r,g:n,b:e,a:o}=this.toRgb();return 1===o?N(r,n,e,t):I(r,n,e,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:n,b:e,a:o}=this.toRgb();return I(r,n,e,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:n,a:e}=this,{h:o,s:s,v:a}=C(t,r,n);return{h:o,s:s,v:a,a:e}}toHsl(){const{r:t,g:r,b:n,a:e}=this,{h:o,s:s,l:a}=R(t,r,n);return{h:o,s:s,l:a,a:e}}toHslString(){let{h:t,s:r,l:n,a:e}=this.toHsl();return t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e)/100,1===e?`hsl(${t}, ${r}%, ${n}%)`:`hsla(${t}, ${r}%, ${n}%, ${e})`}toHslCSS4String(){let{h:t,s:r,l:n,a:e}=this.toHsl();t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e);return`hsl(${t}deg ${r}% ${n}%${e<100?` / ${s(e)}%`:""})`}toHwb(){const{r:t,g:r,b:n,a:e}=this,{h:o,w:s,b:a}=T(t,r,n);return{h:o,w:s,b:a,a:e}}toHwbString(){let{h:t,w:r,b:n,a:e}=this.toHwb();t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e);return`hwb(${t}deg ${r}% ${n}%${e<100?` / ${s(e)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=d(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,A(e+t/100),o);return n(this,{r:s,g:a,b:h}),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:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,e,A(o+t/100));return n(this,{r:s,g:a,b:h}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(A((360*r+t)%360/360),e,o);return n(this,{r:s,g:a,b:h}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}n(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:h,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:u,PERMISSIVE_MATCH:g,matchers:l,isOnePointZero:b,isPercentage:f,isValidCSSUnit:x,isColorName:m,pad2:v,clamp01:A,bound01:S,boundAlpha:d,getRGBFromName:$,convertHexToDecimal:w,convertDecimalToHex:p,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:T,rgbaToHex:I,hslToRgb:M,hsvToRgb:E,hueToRgb:F,hwbToRgb:y,parseIntFromHex:H,stringInputToObject:k,inputToRGB:_,roundPart:s,getElementStyle:r,setElementStyle:e,ObjectAssign:n});export{j as default};

package/dist/js/color-palette-esm.js

@@ -1,5 +1,5 @@
 /*!
-* ColorPalette v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* ColorPalette v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */

package/dist/js/color-palette-esm.min.js

@@ -1,2 +1,2 @@
-// ColorPalette v0.0.2alpha3 | thednp © 2022 | MIT-License
+// ColorPalette v0.0.2alpha4 | thednp © 2022 | MIT-License
 const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],h=["rgb","hex","hsl","hsv","hwb"],a="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${i})|(?:${a})`,c="(?:[,|\\s]+)",l=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${i})${c}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+l),rgb:new RegExp("rgb(?:a)?"+l),hsl:new RegExp("hsl(?:a)?"+l),hsv:new RegExp("hsv(?:a)?"+l),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 b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(t){return!s.includes(t)&&!["#",...h].some(r=>t.includes(r))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(r=>{o(e,{color:t});const s=n(e,"color");return o(e,{color:""}),s!==r}))}function S(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function d(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(t){o(e,{color:t});const r=n(e,"color");return o(e,{color:""}),r}function $(t){return r(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,h=0;const a=(n+o)/2;if(n===o)h=0,s=0;else{const i=n-o;h=a>.5?i/(2-n-o):i/(n+o),n===t&&(s=(r-e)/i+(r<e?6:0)),n===r&&(s=(e-t)/i+2),n===e&&(s=(t-r)/i+4),s/=6}return{h:s,s:h,l:a}}function F(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function T(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const h=e<.5?e*(1+r):e+r-e*r,a=2*e-h;n=F(a,h,t+1/3),o=F(a,h,t),s=F(a,h,t-1/3)}return{r:n,g:o,b:s}}function M(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),h=Math.max(t,r,e),a=1-h;if(h===s)return{h:0,w:s,b:a};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const i=(o-n/(h-s))/6;return{h:1===i?0:i,w:s,b:a}}function y(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=T(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const h=n-o;return n===o?s=0:(t===n&&(s=(r-e)/h+(r<e?6:0)),r===n&&(s=(e-t)/h+2),e===n&&(s=(t-r)/h+4),s/=6),{h:s,s:0===n?0:h/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,h=Math.floor(n),a=n-h,i=s*(1-o),u=s*(1-a*o),c=s*(1-(1-a)*o),l=h%6;return{r:[s,u,i,i,c,s][l],g:[c,s,s,u,i,i][l],b:[i,i,c,s,s,u][l]}}function N(t,e,n,o){const s=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16))];return o&&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[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function I(t,e,n,o,s){const h=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16)),v($(o))];return s&&h[0].charAt(0)===h[0].charAt(1)&&h[1].charAt(0)===h[1].charAt(1)&&h[2].charAt(0)===h[2].charAt(1)&&h[3].charAt(0)===h[3].charAt(1)?h[0].charAt(0)+h[1].charAt(0)+h[2].charAt(0)+h[3].charAt(0):h.join("")}function k(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(s.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,o,h]=g.rgb.exec(r)||[];return e&&n&&o?{r:e,g:n,b:o,a:void 0!==h?h:1,format:"rgb"}:([,e,n,o,h]=g.hsl.exec(r)||[],e&&n&&o?{h:e,s:n,l:o,a:void 0!==h?h:1,format:"hsl"}:([,e,n,o,h]=g.hsv.exec(r)||[],e&&n&&o?{h:e,s:n,v:o,a:void 0!==h?h:1,format:"hsv"}:([,e,n,o,h]=g.hwb.exec(r)||[],e&&n&&o?{h:e,w:n,b:o,a:void 0!==h?h:1,format:"hwb"}:([,e,n,o,h]=g.hex8.exec(r)||[],e&&n&&o&&h?{r:H(e),g:H(n),b:H(o),a:w(h),format:"hex"}:([,e,n,o]=g.hex6.exec(r)||[],e&&n&&o?{r:H(e),g:H(n),b:H(o),format:"hex"}:([,e,n,o,h]=g.hex4.exec(r)||[],e&&n&&o&&h?{r:H(e+e),g:H(n+n),b:H(o+o),a:w(h+h),format:"hex"}:([,e,n,o]=g.hex3.exec(r)||[],!!(e&&n&&o)&&{r:H(e+e),g:H(n+n),b:H(o+o),format:"hex"})))))))}function _(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,a=null,i=null,u=null,c=null,l=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&h.includes(m)?m:"rgb";return"string"==typeof t&&(e=k(t),e&&(b=!0)),"object"==typeof e&&(S(e.r)&&S(e.g)&&S(e.b)&&(({r:l,g:g,b:u}=e),[l,g,u]=[l,g,u].map(t=>x(t,f(t)?100:255)),r={r:l,g:g,b:u},b=!0,p=e.format||"rgb"),S(e.h)&&S(e.s)&&S(e.v)&&(({h:c,s:o,v:s}=e),c=x(c,360),o=x(o,100),s=x(s,100),r=E(c,o,s),b=!0,p="hsv"),S(e.h)&&S(e.s)&&S(e.l)&&(({h:c,s:o,l:a}=e),c=x(c,360),o=x(o,100),a=x(a,100),r=T(c,o,a),b=!0,p="hsl"),S(e.h)&&S(e.w)&&S(e.b)&&(({h:c,w:i,b:u}=e),c=x(c,360),i=x(i,100),u=x(u,100),r=y(c,i,u),b=!0,p="hwb"),S(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:d(n)}}class j{constructor(t,r){let e=t;const n=r&&h.includes(r)?r:"";e instanceof j&&(e=_(e));const{r:o,g:s,b:a,a:i,ok:u,format:c}=_(e);this.originalInput=t,this.r=o,this.g=s,this.b=a,this.a=i,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:e,b:n,a:o}=this;return[t,e,n]=[t,e,n].map(t=>r(255*t*100)/100),o=r(100*o)/100,{r:t,g:e,b:n,a:o}}toRgbString(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,a]=[t,e,n].map(r);return 1===o?`rgb(${s}, ${h}, ${a})`:`rgba(${s}, ${h}, ${a}, ${o})`}toRgbCSS4String(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,a]=[t,e,n].map(r);return`rgb(${s} ${h} ${a}${1===o?"":` / ${r(100*o)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:h}=C(t,r,e);return{h:o,s:s,v:h,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:h}=R(t,r,e);return{h:o,s:s,l:h,a:n}}toHslString(){let{h:t,s:e,l:n,a:o}=this.toHsl();return t=r(360*t),e=r(100*e),n=r(100*n),o=r(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=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hsl(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:h}=M(t,r,e);return{h:o,w:s,b:h,a:n}}toHwbString(){let{h:t,w:e,b:n,a:o}=this.toHwb();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hwb(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=d(t)),this}saturate(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(e,p(n+r/100),o);return t(this,{r:s,g:h,b:a}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(e,n,p(o+r/100));return t(this,{r:s,g:h,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(p((360*e+r)%360/360),n,o);return t(this,{r:s,g:h,b:a}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}t(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:a,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:u,PERMISSIVE_MATCH:l,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:S,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:d,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:M,rgbaToHex:I,hslToRgb:T,hsvToRgb:E,hueToRgb:F,hwbToRgb:y,parseIntFromHex:H,stringInputToObject:k,inputToRGB:_,roundPart:r,getElementStyle:n,setElementStyle:o,ObjectAssign:t});class U{constructor(...t){let e=0,n=12,o=10,s=[.5];if(3===t.length)[e,n,o]=t;else if(2===t.length&&([n,o]=t,[n,o].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const h=[],a=360/n,i=r((o-(o%2?1:0))/2),u=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],c=u.find(t=>t.includes(o)),l=c?[.25,.2,.15,.11,.09,.075][u.indexOf(c)]:100/(o+(o%2?0:1))/100;for(let t=1;t<i+1;t+=1)s=[...s,.5+l*t];for(let t=1;t<o-i;t+=1)s=[.5-l*t,...s];for(let t=0;t<n;t+=1){const r=(e+t*a)%360/360;s.forEach(t=>{h.push(new j({h:r,s:1,l:t}))})}this.hue=e,this.hueSteps=n,this.lightSteps=o,this.colors=h}}t(U,{Color:j});export{U as default};

package/dist/js/color-palette.js

@@ -1,5 +1,5 @@
 /*!
-* ColorPalette v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* ColorPalette v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */

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

@@ -1,2 +1,2 @@
-// ColorPalette v0.0.2alpha3 | thednp © 2022 | MIT-License
+// ColorPalette v0.0.2alpha4 | thednp © 2022 | MIT-License
 !function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPalette=r()}(this,(function(){"use strict";const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],h=["rgb","hex","hsl","hsv","hwb"],i="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",a="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${a})|(?:${i})`,l="(?:[,|\\s]+)",c=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${l}(${a})${l}(${a})(?:[,|\\/\\s]*)?(${a})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+c),rgb:new RegExp("rgb(?:a)?"+c),hsl:new RegExp("hsl(?:a)?"+c),hsv:new RegExp("hsv(?:a)?"+c),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 b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(t){return!s.includes(t)&&!["#",...h].some(r=>t.includes(r))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(r=>{o(e,{color:t});const s=n(e,"color");return o(e,{color:""}),s!==r}))}function d(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function S(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(t){o(e,{color:t});const r=n(e,"color");return o(e,{color:""}),r}function $(t){return r(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,h=0;const i=(n+o)/2;if(n===o)h=0,s=0;else{const a=n-o;h=i>.5?a/(2-n-o):a/(n+o),n===t&&(s=(r-e)/a+(r<e?6:0)),n===r&&(s=(e-t)/a+2),n===e&&(s=(t-r)/a+4),s/=6}return{h:s,s:h,l:i}}function T(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function y(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const h=e<.5?e*(1+r):e+r-e*r,i=2*e-h;n=T(i,h,t+1/3),o=T(i,h,t),s=T(i,h,t-1/3)}return{r:n,g:o,b:s}}function F(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),h=Math.max(t,r,e),i=1-h;if(h===s)return{h:0,w:s,b:i};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const a=(o-n/(h-s))/6;return{h:1===a?0:a,w:s,b:i}}function M(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=y(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const h=n-o;return n===o?s=0:(t===n&&(s=(r-e)/h+(r<e?6:0)),r===n&&(s=(e-t)/h+2),e===n&&(s=(t-r)/h+4),s/=6),{h:s,s:0===n?0:h/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,h=Math.floor(n),i=n-h,a=s*(1-o),u=s*(1-i*o),l=s*(1-(1-i)*o),c=h%6;return{r:[s,u,a,a,l,s][c],g:[l,s,s,u,a,a][c],b:[a,a,l,s,s,u][c]}}function N(t,e,n,o){const s=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16))];return o&&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[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function I(t,e,n,o,s){const h=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16)),v($(o))];return s&&h[0].charAt(0)===h[0].charAt(1)&&h[1].charAt(0)===h[1].charAt(1)&&h[2].charAt(0)===h[2].charAt(1)&&h[3].charAt(0)===h[3].charAt(1)?h[0].charAt(0)+h[1].charAt(0)+h[2].charAt(0)+h[3].charAt(0):h.join("")}function j(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(s.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,o,h]=g.rgb.exec(r)||[];return e&&n&&o?{r:e,g:n,b:o,a:void 0!==h?h:1,format:"rgb"}:([,e,n,o,h]=g.hsl.exec(r)||[],e&&n&&o?{h:e,s:n,l:o,a:void 0!==h?h:1,format:"hsl"}:([,e,n,o,h]=g.hsv.exec(r)||[],e&&n&&o?{h:e,s:n,v:o,a:void 0!==h?h:1,format:"hsv"}:([,e,n,o,h]=g.hwb.exec(r)||[],e&&n&&o?{h:e,w:n,b:o,a:void 0!==h?h:1,format:"hwb"}:([,e,n,o,h]=g.hex8.exec(r)||[],e&&n&&o&&h?{r:H(e),g:H(n),b:H(o),a:w(h),format:"hex"}:([,e,n,o]=g.hex6.exec(r)||[],e&&n&&o?{r:H(e),g:H(n),b:H(o),format:"hex"}:([,e,n,o,h]=g.hex4.exec(r)||[],e&&n&&o&&h?{r:H(e+e),g:H(n+n),b:H(o+o),a:w(h+h),format:"hex"}:([,e,n,o]=g.hex3.exec(r)||[],!!(e&&n&&o)&&{r:H(e+e),g:H(n+n),b:H(o+o),format:"hex"})))))))}function k(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,i=null,a=null,u=null,l=null,c=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&h.includes(m)?m:"rgb";return"string"==typeof t&&(e=j(t),e&&(b=!0)),"object"==typeof e&&(d(e.r)&&d(e.g)&&d(e.b)&&(({r:c,g:g,b:u}=e),[c,g,u]=[c,g,u].map(t=>x(t,f(t)?100:255)),r={r:c,g:g,b:u},b=!0,p=e.format||"rgb"),d(e.h)&&d(e.s)&&d(e.v)&&(({h:l,s:o,v:s}=e),l=x(l,360),o=x(o,100),s=x(s,100),r=E(l,o,s),b=!0,p="hsv"),d(e.h)&&d(e.s)&&d(e.l)&&(({h:l,s:o,l:i}=e),l=x(l,360),o=x(o,100),i=x(i,100),r=y(l,o,i),b=!0,p="hsl"),d(e.h)&&d(e.w)&&d(e.b)&&(({h:l,w:a,b:u}=e),l=x(l,360),a=x(a,100),u=x(u,100),r=M(l,a,u),b=!0,p="hwb"),d(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:S(n)}}class _{constructor(t,r){let e=t;const n=r&&h.includes(r)?r:"";e instanceof _&&(e=k(e));const{r:o,g:s,b:i,a:a,ok:u,format:l}=k(e);this.originalInput=t,this.r=o,this.g=s,this.b=i,this.a=a,this.ok=u,this.format=n||l}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:e,b:n,a:o}=this;return[t,e,n]=[t,e,n].map(t=>r(255*t*100)/100),o=r(100*o)/100,{r:t,g:e,b:n,a:o}}toRgbString(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,i]=[t,e,n].map(r);return 1===o?`rgb(${s}, ${h}, ${i})`:`rgba(${s}, ${h}, ${i}, ${o})`}toRgbCSS4String(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,i]=[t,e,n].map(r);return`rgb(${s} ${h} ${i}${1===o?"":` / ${r(100*o)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:h}=C(t,r,e);return{h:o,s:s,v:h,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:h}=R(t,r,e);return{h:o,s:s,l:h,a:n}}toHslString(){let{h:t,s:e,l:n,a:o}=this.toHsl();return t=r(360*t),e=r(100*e),n=r(100*n),o=r(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=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hsl(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:h}=F(t,r,e);return{h:o,w:s,b:h,a:n}}toHwbString(){let{h:t,w:e,b:n,a:o}=this.toHwb();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hwb(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=S(t)),this}saturate(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(e,p(n+r/100),o);return t(this,{r:s,g:h,b:i}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(e,n,p(o+r/100));return t(this,{r:s,g:h,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(p((360*e+r)%360/360),n,o);return t(this,{r:s,g:h,b:i}),this}clone(){return new _(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}t(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:a,CSS_UNIT2:u,PERMISSIVE_MATCH:c,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:d,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:S,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:F,rgbaToHex:I,hslToRgb:y,hsvToRgb:E,hueToRgb:T,hwbToRgb:M,parseIntFromHex:H,stringInputToObject:j,inputToRGB:k,roundPart:r,getElementStyle:n,setElementStyle:o,ObjectAssign:t});class P{constructor(...t){let e=0,n=12,o=10,s=[.5];if(3===t.length)[e,n,o]=t;else if(2===t.length&&([n,o]=t,[n,o].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const h=[],i=360/n,a=r((o-(o%2?1:0))/2),u=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],l=u.find(t=>t.includes(o)),c=l?[.25,.2,.15,.11,.09,.075][u.indexOf(l)]:100/(o+(o%2?0:1))/100;for(let t=1;t<a+1;t+=1)s=[...s,.5+c*t];for(let t=1;t<o-a;t+=1)s=[.5-c*t,...s];for(let t=0;t<n;t+=1){const r=(e+t*i)%360/360;s.forEach(t=>{h.push(new _({h:r,s:1,l:t}))})}this.hue=e,this.hueSteps=n,this.lightSteps=o,this.colors=h}}return t(P,{Color:_}),P}));

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

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -2431,7 +2431,7 @@ function setMarkup(self) {
   setAttribute(input, tabIndex, '-1');
 }
 
-var version = "0.0.2alpha3";
+var version = "0.0.2alpha4";
 
 // @ts-ignore
 

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

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

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

@@ -1,5 +1,5 @@
 /*!
-* ColorPickerElement v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* ColorPickerElement v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -2437,7 +2437,7 @@
     setAttribute(input, tabIndex, '-1');
   }
 
-  var version = "0.0.2alpha3";
+  var version = "0.0.2alpha4";
 
   // @ts-ignore
 

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

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

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

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -2417,7 +2417,7 @@ function setMarkup(self) {
   setAttribute(input, tabIndex, '-1');
 }
 
-var version = "0.0.2alpha3";
+var version = "0.0.2alpha4";
 
 // @ts-ignore
 

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

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

package/dist/js/color-picker.js

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* ColorPicker v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -2423,7 +2423,7 @@
     setAttribute(input, tabIndex, '-1');
   }
 
-  var version = "0.0.2alpha3";
+  var version = "0.0.2alpha4";
 
   // @ts-ignore
 

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

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

package/dist/js/color.js

@@ -1,5 +1,5 @@
 /*!
-* Color v0.0.2alpha3 (http://thednp.github.io/color-picker)
+* Color v0.0.2alpha4 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */

package/dist/js/color.min.js

@@ -1,2 +1,2 @@
-// Color v0.0.2alpha3 | thednp © 2022 | MIT-License
+// Color v0.0.2alpha4 | thednp © 2022 | MIT-License
 !function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).Color=r()}(this,(function(){"use strict";const{head:t}=document;function r(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const e=(t,r)=>Object.assign(t,r),n=(t,r)=>{e(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const i=["rgb","hex","hsl","hsv","hwb"],a="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",h="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${h})|(?:${a})`,c="(?:[,|\\s]+)",l=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${h})${c}(${h})(?:[,|\\/\\s]*)?(${h})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+l),rgb:new RegExp("rgb(?:a)?"+l),hsl:new RegExp("hsl(?:a)?"+l),hsv:new RegExp("hsv(?:a)?"+l),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 b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(e){return!o.includes(e)&&!["#",...i].some(t=>e.includes(t))&&(!!["black","white"].includes(e)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{n(t,{color:e});const s=r(t,"color");return n(t,{color:""}),s!==o}))}function d(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function S(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(e){n(t,{color:e});const o=r(t,"color");return n(t,{color:""}),o}function $(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,i=0;const a=(n+o)/2;if(n===o)i=0,s=0;else{const h=n-o;i=a>.5?h/(2-n-o):h/(n+o),n===t&&(s=(r-e)/h+(r<e?6:0)),n===r&&(s=(e-t)/h+2),n===e&&(s=(t-r)/h+4),s/=6}return{h:s,s:i,l:a}}function F(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function T(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const i=e<.5?e*(1+r):e+r-e*r,a=2*e-i;n=F(a,i,t+1/3),o=F(a,i,t),s=F(a,i,t-1/3)}return{r:n,g:o,b:s}}function y(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),i=Math.max(t,r,e),a=1-i;if(i===s)return{h:0,w:s,b:a};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const h=(o-n/(i-s))/6;return{h:1===h?0:h,w:s,b:a}}function M(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=T(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const i=n-o;return n===o?s=0:(t===n&&(s=(r-e)/i+(r<e?6:0)),r===n&&(s=(e-t)/i+2),e===n&&(s=(t-r)/i+4),s/=6),{h:s,s:0===n?0:i/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,i=Math.floor(n),a=n-i,h=s*(1-o),u=s*(1-a*o),c=s*(1-(1-a)*o),l=i%6;return{r:[s,u,h,h,c,s][l],g:[c,s,s,u,h,h][l],b:[h,h,c,s,s,u][l]}}function N(t,r,e,n){const o=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16))];return n&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function I(t,r,e,n,o){const i=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16)),v($(n))];return o&&i[0].charAt(0)===i[0].charAt(1)&&i[1].charAt(0)===i[1].charAt(1)&&i[2].charAt(0)===i[2].charAt(1)&&i[3].charAt(0)===i[3].charAt(1)?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0)+i[3].charAt(0):i.join("")}function j(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,s,i]=g.rgb.exec(r)||[];return e&&n&&s?{r:e,g:n,b:s,a:void 0!==i?i:1,format:"rgb"}:([,e,n,s,i]=g.hsl.exec(r)||[],e&&n&&s?{h:e,s:n,l:s,a:void 0!==i?i:1,format:"hsl"}:([,e,n,s,i]=g.hsv.exec(r)||[],e&&n&&s?{h:e,s:n,v:s,a:void 0!==i?i:1,format:"hsv"}:([,e,n,s,i]=g.hwb.exec(r)||[],e&&n&&s?{h:e,w:n,b:s,a:void 0!==i?i:1,format:"hwb"}:([,e,n,s,i]=g.hex8.exec(r)||[],e&&n&&s&&i?{r:H(e),g:H(n),b:H(s),a:w(i),format:"hex"}:([,e,n,s]=g.hex6.exec(r)||[],e&&n&&s?{r:H(e),g:H(n),b:H(s),format:"hex"}:([,e,n,s,i]=g.hex4.exec(r)||[],e&&n&&s&&i?{r:H(e+e),g:H(n+n),b:H(s+s),a:w(i+i),format:"hex"}:([,e,n,s]=g.hex3.exec(r)||[],!!(e&&n&&s)&&{r:H(e+e),g:H(n+n),b:H(s+s),format:"hex"})))))))}function k(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,a=null,h=null,u=null,c=null,l=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&i.includes(m)?m:"rgb";return"string"==typeof t&&(e=j(t),e&&(b=!0)),"object"==typeof e&&(d(e.r)&&d(e.g)&&d(e.b)&&(({r:l,g:g,b:u}=e),[l,g,u]=[l,g,u].map(t=>x(t,f(t)?100:255)),r={r:l,g:g,b:u},b=!0,p=e.format||"rgb"),d(e.h)&&d(e.s)&&d(e.v)&&(({h:c,s:o,v:s}=e),c=x(c,360),o=x(o,100),s=x(s,100),r=E(c,o,s),b=!0,p="hsv"),d(e.h)&&d(e.s)&&d(e.l)&&(({h:c,s:o,l:a}=e),c=x(c,360),o=x(o,100),a=x(a,100),r=T(c,o,a),b=!0,p="hsl"),d(e.h)&&d(e.w)&&d(e.b)&&(({h:c,w:h,b:u}=e),c=x(c,360),h=x(h,100),u=x(u,100),r=M(c,h,u),b=!0,p="hwb"),d(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:S(n)}}class _{constructor(t,r){let e=t;const n=r&&i.includes(r)?r:"";e instanceof _&&(e=k(e));const{r:o,g:s,b:a,a:h,ok:u,format:c}=k(e);this.originalInput=t,this.r=o,this.g=s,this.b=a,this.a=h,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:r,b:e,a:n}=this;return[t,r,e]=[t,r,e].map(t=>s(255*t*100)/100),n=s(100*n)/100,{r:t,g:r,b:e,a:n}}toRgbString(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,i,a]=[t,r,e].map(s);return 1===n?`rgb(${o}, ${i}, ${a})`:`rgba(${o}, ${i}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,i,a]=[t,r,e].map(s);return`rgb(${o} ${i} ${a}${1===n?"":` / ${s(100*n)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:i}=C(t,r,e);return{h:o,s:s,v:i,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:i}=R(t,r,e);return{h:o,s:s,l:i,a:n}}toHslString(){let{h:t,s:r,l:e,a:n}=this.toHsl();return t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n)/100,1===n?`hsl(${t}, ${r}%, ${e}%)`:`hsla(${t}, ${r}%, ${e}%, ${n})`}toHslCSS4String(){let{h:t,s:r,l:e,a:n}=this.toHsl();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hsl(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:i}=y(t,r,e);return{h:o,w:s,b:i,a:n}}toHwbString(){let{h:t,w:r,b:e,a:n}=this.toHwb();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hwb(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=S(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(r,p(n+t/100),o);return e(this,{r:s,g:i,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:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(r,n,p(o+t/100));return e(this,{r:s,g:i,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(p((360*r+t)%360/360),n,o);return e(this,{r:s,g:i,b:a}),this}clone(){return new _(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}return e(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:a,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:h,CSS_UNIT2:u,PERMISSIVE_MATCH:l,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:d,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:S,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:y,rgbaToHex:I,hslToRgb:T,hsvToRgb:E,hueToRgb:F,hwbToRgb:M,parseIntFromHex:H,stringInputToObject:j,inputToRGB:k,roundPart:s,getElementStyle:r,setElementStyle:n,ObjectAssign:e}),_}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/color-picker",
-  "version": "0.0.2alpha3",
+  "version": "0.0.2alpha4",
   "description": "Modern Color Picker Web Component",
   "main": "dist/js/color-picker.min.js",
   "module": "dist/js/color-picker.esm.js",