@thednp/color-picker 0.0.1 → 0.0.2-alpha1

package/dist/js/color.min.js

@@ -0,0 +1,2 @@
+// Color v0.0.2alpha1 | 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 a=["rgb","hex","hsl","hsv","hwb"],i="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",h="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${h})|(?:${i})`,c="(?:[,|\\s]+)",b=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${h})${c}(${h})(?:[,|\\/\\s]*)?(${h})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+b),rgb:new RegExp("rgb(?:a)?"+b),hsl:new RegExp("hsl(?:a)?"+b),hsv:new RegExp("hsv(?:a)?"+b),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 l(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(e){return!o.includes(e)&&!["#",...a].some(t=>e.includes(t))&&["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 p(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function d(t,r){let e=t;l(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 x(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function S(t){return Math.min(1,Math.max(0,t))}function $(e){n(t,{color:e});const o=r(t,"color");return n(t,{color:""}),o}function A(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function y(t){return 1===t.length?"0"+t:String(t)}function v(t,r,e){const n=t/255,o=r/255,s=e/255,a=Math.max(n,o,s),i=Math.min(n,o,s);let h=0,u=0;const c=(a+i)/2;if(a===i)u=0,h=0;else{const t=a-i;switch(u=c>.5?t/(2-a-i):t/(a+i),a){case n:h=(o-s)/t+(o<s?6:0);break;case o:h=(s-n)/t+2;break;case s:h=(n-o)/t+4}h/=6}return{h:h,s:u,l:c}}function R(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 M(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const a=e<.5?e*(1+r):e+r-e*r,i=2*e-a;n=R(i,a,t+1/3),o=R(i,a,t),s=R(i,a,t-1/3)}return[n,o,s]=[n,o,s].map(t=>255*t),{r:n,g:o,b:s}}function F(t,r,e){const n=t/255,o=r/255,s=e/255;let a=0,i=0;const h=Math.min(n,o,s),u=Math.max(n,o,s),c=1-u;if(u===h)return{h:0,w:h,b:c};n===h?(a=o-s,i=3):(a=o===h?s-n:n-o,i=o===h?5:1);const b=(i-a/(u-h))/6;return{h:1===b?0:b,w:h,b:c}}function T(t,r,e){if(r+e>=1){const t=r/(r+e)*255;return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=M(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t/255*(1-r-e)+r).map(t=>255*t),{r:n,g:o,b:s}}function C(t,r,e){const n=t/255,o=r/255,s=e/255,a=Math.max(n,o,s),i=Math.min(n,o,s);let h=0;const u=a,c=a-i,b=0===a?0:c/a;if(a===i)h=0;else{switch(a){case n:h=(o-s)/c+(o<s?6:0);break;case o:h=(s-n)/c+2;break;case s:h=(n-o)/c+4}h/=6}return{h:h,s:b,v:u}}function E(t,r,e){const n=6*t,o=r,s=e,a=Math.floor(n),i=n-a,h=s*(1-o),u=s*(1-i*o),c=s*(1-(1-i)*o),b=a%6;let g=[s,u,h,h,c,s][b],l=[c,s,s,u,h,h][b],f=[h,h,c,s,s,u][b];return[g,l,f]=[g,l,f].map(t=>255*t),{r:g,g:l,b:f}}function N(t,r,e,n){const o=[y(s(t).toString(16)),y(s(r).toString(16)),y(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 k(t,r,e,n,o){const a=[y(s(t).toString(16)),y(s(r).toString(16)),y(s(e).toString(16)),y(A(n))];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 I(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};let e=!1;if(m(r))r=$(r),e=!0;else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,n,s,a,i]=g.rgb.exec(r)||[];return n&&s&&a?{r:n,g:s,b:a,a:void 0!==i?i:1,format:"rgb"}:([,n,s,a,i]=g.hsl.exec(r)||[],n&&s&&a?{h:n,s:s,l:a,a:void 0!==i?i:1,format:"hsl"}:([,n,s,a,i]=g.hsv.exec(r)||[],n&&s&&a?{h:n,s:s,v:a,a:void 0!==i?i:1,format:"hsv"}:([,n,s,a,i]=g.hwb.exec(r)||[],n&&s&&a?{h:n,w:s,b:a,a:void 0!==i?i:1,format:"hwb"}:([,n,s,a,i]=g.hex8.exec(r)||[],n&&s&&a&&i?{r:H(n),g:H(s),b:H(a),a:w(i),format:e?"rgb":"hex"}:([,n,s,a]=g.hex6.exec(r)||[],n&&s&&a?{r:H(n),g:H(s),b:H(a),format:e?"rgb":"hex"}:([,n,s,a,i]=g.hex4.exec(r)||[],n&&s&&a&&i?{r:H(n+n),g:H(s+s),b:H(a+a),a:w(i+i),format:e?"rgb":"hex"}:([,n,s,a]=g.hex3.exec(r)||[],!!(n&&s&&a)&&{r:H(n+n),g:H(s+s),b:H(a+a),format:e?"rgb":"hex"})))))))}function j(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,i=null,h=null,u=null,c=null,b=null,g=null,l=!1;const m="object"==typeof e&&e.format;let S=m&&a.includes(m)?m:"rgb";return"string"==typeof t&&(e=I(t),e&&(l=!0)),"object"==typeof e&&(p(e.r)&&p(e.g)&&p(e.b)?(({r:b,g:g,b:u}=e),[b,g,u]=[b,g,u].map(t=>255*d(t,f(t)?100:255)),r={r:b,g:g,b:u},l=!0,S="rgb"):p(e.h)&&p(e.s)&&p(e.v)?(({h:c,s:o,v:s}=e),c="number"==typeof c?c:d(c,360),o="number"==typeof o?o:d(o,100),s="number"==typeof s?s:d(s,100),r=E(c,o,s),l=!0,S="hsv"):p(e.h)&&p(e.s)&&p(e.l)?(({h:c,s:o,l:i}=e),c="number"==typeof c?c:d(c,360),o="number"==typeof o?o:d(o,100),i="number"==typeof i?i:d(i,100),r=M(c,o,i),l=!0,S="hsl"):p(e.h)&&p(e.w)&&p(e.b)&&(({h:c,w:h,b:u}=e),c="number"==typeof c?c:d(c,360),h="number"==typeof h?h:d(h,100),u="number"==typeof u?u:d(u,100),r=T(c,h,u),l=!0,S="hwb"),p(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?d(n,100):n)),void 0===e&&(l=!0),{ok:l,format:S,r:Math.min(255,Math.max(r.r,0)),g:Math.min(255,Math.max(r.g,0)),b:Math.min(255,Math.max(r.b,0)),a:x(n)}}class _{constructor(t,r){let e=t;const n=r&&a.includes(r)?r:"rgb";if(e instanceof _&&(e=j(e)),"number"==typeof e){e=`#${2===(""+e).length?"0":"00"}${e}`}const{r:o,g:s,b:i,a:h,ok:u,format:c}=j(e);this.originalInput=t,this.r=o,this.g=s,this.b=i,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;const a=t/255,i=r/255,h=e/255;return n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,o=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,s=h<=.03928?h/12.92:((h+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this;return(299*t+587*r+114*e)/1e3}toRgb(){const{r:t,g:r,b:e,a:n}=this;return{r:t,g:r,b:e,a:s(100*n)/100}}toRgbString(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,a,i]=[t,r,e].map(s);return 1===n?`rgb(${o}, ${a}, ${i})`:`rgba(${o}, ${a}, ${i}, ${n})`}toRgbCSS4String(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,a,i]=[t,r,e].map(s);return`rgb(${o} ${a} ${i}${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):k(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 k(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this.toRgb(),{h:o,s:s,v:a}=C(t,r,e);return{h:o,s:s,v:a,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this.toRgb(),{h:o,s:s,l:a}=v(t,r,e);return{h:o,s:s,l:a,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:a}=F(t,r,e);return{h:o,w:s,b:a,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 this.a=x(t),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:i}=M(r,S(n+t/100),o);return e(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:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:i}=M(r,n,S(o+t/100));return e(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:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:i}=M(S((360*r+t)%360/360),n,o);return e(this,{r:s,g:a,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()}}return e(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:h,CSS_UNIT2:u,PERMISSIVE_MATCH:b,matchers:g,isOnePointZero:l,isPercentage:f,isValidCSSUnit:p,isColorName:m,pad2:y,clamp01:S,bound01:d,boundAlpha:x,getRGBFromName:$,convertHexToDecimal:w,convertDecimalToHex:A,rgbToHsl:v,rgbToHex:N,rgbToHsv:C,rgbToHwb:F,rgbaToHex:k,hslToRgb:M,hsvToRgb:E,hueToRgb:R,hwbToRgb:T,parseIntFromHex:H,stringInputToObject:I,inputToRGB:j,roundPart:s,getElementStyle:r,setElementStyle:n,ObjectAssign:e}),_}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/color-picker",
-  "version": "0.0.1",
+  "version": "0.0.2alpha1",
   "description": "Modern Color Picker Web Component",
   "main": "dist/js/color-picker.min.js",
   "module": "dist/js/color-picker.esm.js",
@@ -18,7 +18,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "instrument": "npx nyc instrument --all --compact=false src/js cypress/instrumented",
+    "test": "npm run instrument && npx cypress run",
+    "coverage:report": "npx nyc report --exclude=src/js/util --reporter=lcov --reporter=text --report-dir=cypress/coverage",
     "fix:js": "eslint src/ --config .eslintrc --fix",
     "lint:js": "eslint src/ --config .eslintrc",
     "fix:css": "stylelint --config .stylelintrc.json -s --fix scss \"src/scss/*.scss\"",
@@ -31,6 +33,14 @@
     "build-ce-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.min.js -c",
     "build-ce-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.js -c",
     "build-ce-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.min.js -c",
+    "build-cl": "rollup --environment FORMAT:umd,MIN:false,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color.js -c",
+    "build-cl-min": "rollup --environment FORMAT:umd,MIN:true,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color.min.js -c",
+    "build-cl-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color-esm.js -c",
+    "build-cl-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color-esm.min.js -c",
+    "build-cpl": "rollup --environment FORMAT:umd,MIN:false,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette.js -c",
+    "build-cpl-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette.min.js -c",
+    "build-cpl-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette-esm.js -c",
+    "build-cpl-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette-esm.min.js -c",
     "build-minjs": "rollup --environment FORMAT:umd,MIN:true -c",
     "build-esm": "rollup --environment FORMAT:esm,MIN:false -c",
     "build-esmjs": "rollup --environment FORMAT:esm,MIN:true -c",
@@ -68,15 +78,21 @@
     "shorter-js": "^0.3.4"
   },
   "devDependencies": {
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
+    "@cypress/code-coverage": "^3.9.12",
     "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
+    "babel-plugin-istanbul": "^6.1.1",
+    "cypress": "^9.5.3",
+    "esbuild": "^0.14.30",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.7.0",
     "npm-run-all": "^4.1.5",
-    "rollup": "^1.32.1",
+    "rollup": "^2.70.1",
     "rollup-plugin-terser": "^5.3.1",
     "sass": "^1.39.0",
     "stylelint": "^13.12.0",

package/src/js/color-palette.js

@@ -1,3 +1,5 @@
+import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
+
 import roundPart from './util/roundPart';
 import Color from './color';
 
@@ -6,7 +8,7 @@ import Color from './color';
  * Returns a color palette with a given set of parameters.
  * @example
  * new ColorPalette(0, 12, 10);
- * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
+ * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: Array<Color> }
  */
 export default class ColorPalette {
   /**
@@ -26,11 +28,14 @@ export default class ColorPalette {
       [hue, hueSteps, lightSteps] = args;
     } else if (args.length === 2) {
       [hueSteps, lightSteps] = args;
+      if ([hueSteps, lightSteps].some((n) => n < 1)) {
+        throw TypeError('ColorPalette: when 2 arguments used, both must be larger than 0.');
+      }
     } else {
       throw TypeError('ColorPalette requires minimum 2 arguments');
     }
 
-    /** @type {string[]} */
+    /** @type {Color[]} */
     const colors = [];
 
     const hueStep = 360 / hueSteps;
@@ -59,7 +64,7 @@ export default class ColorPalette {
     for (let i = 0; i < hueSteps; i += 1) {
       const currentHue = ((hue + i * hueStep) % 360) / 360;
       lightnessArray.forEach((l) => {
-        colors.push(new Color({ h: currentHue, s: 1, l }).toHexString());
+        colors.push(new Color({ h: currentHue, s: 1, l }));
       });
     }
 
@@ -69,3 +74,5 @@ export default class ColorPalette {
     this.colors = colors;
   }
 }
+
+ObjectAssign(ColorPalette, { Color });

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

@@ -7,7 +7,7 @@ import getAttribute from 'shorter-js/src/attr/getAttribute';
 import Color from './color';
 import ColorPicker, { getColorPickerInstance } from './color-picker';
 import ColorPalette from './color-palette';
-import Version from './version';
+import Version from './util/version';
 
 let CPID = 0;
 

package/src/js/color-picker.js

@@ -1,14 +1,10 @@
 import { addListener, removeListener } from 'event-listener.js';
 
 import ariaDescription from 'shorter-js/src/strings/ariaDescription';
-// import ariaLabel from 'shorter-js/src/strings/ariaLabel';
 import ariaSelected from 'shorter-js/src/strings/ariaSelected';
 import ariaExpanded from 'shorter-js/src/strings/ariaExpanded';
 import ariaValueText from 'shorter-js/src/strings/ariaValueText';
 import ariaValueNow from 'shorter-js/src/strings/ariaValueNow';
-import ariaHasPopup from 'shorter-js/src/strings/ariaHasPopup';
-import ariaHidden from 'shorter-js/src/strings/ariaHidden';
-import ariaLabelledBy from 'shorter-js/src/strings/ariaLabelledBy';
 import keyArrowDown from 'shorter-js/src/strings/keyArrowDown';
 import keyArrowUp from 'shorter-js/src/strings/keyArrowUp';
 import keyArrowLeft from 'shorter-js/src/strings/keyArrowLeft';
@@ -31,7 +27,7 @@ import keyupEvent from 'shorter-js/src/strings/keyupEvent';
 import resizeEvent from 'shorter-js/src/strings/resizeEvent';
 import focusoutEvent from 'shorter-js/src/strings/focusoutEvent';
 
-import isMobile from 'shorter-js/src/boolean/isMobile';
+// import isMobile from 'shorter-js/src/boolean/isMobile';
 import getDocument from 'shorter-js/src/get/getDocument';
 import getDocumentElement from 'shorter-js/src/get/getDocumentElement';
 import getWindow from 'shorter-js/src/get/getWindow';
@@ -42,8 +38,6 @@ import getElementTransitionDuration from 'shorter-js/src/get/getElementTransitio
 import querySelector from 'shorter-js/src/selectors/querySelector';
 import closest from 'shorter-js/src/selectors/closest';
 import getElementsByClassName from 'shorter-js/src/selectors/getElementsByClassName';
-import createElement from 'shorter-js/src/misc/createElement';
-import createElementNS from 'shorter-js/src/misc/createElementNS';
 import dispatchEvent from 'shorter-js/src/misc/dispatchEvent';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
 import Data, { getInstance } from 'shorter-js/src/misc/data';
@@ -60,19 +54,16 @@ import removeAttribute from 'shorter-js/src/attr/removeAttribute';
 
 // ColorPicker Util
 // ================
+import Color from './color';
+import ColorPalette from './color-palette';
 import colorPickerLabels from './util/colorPickerLabels';
 import colorNames from './util/colorNames';
 import nonColors from './util/nonColors';
-import getColorForm from './util/getColorForm';
-import getColorControls from './util/getColorControls';
-import getColorMenu from './util/getColorMenu';
-import vHidden from './util/vHidden';
 import tabIndex from './util/tabindex';
 import isValidJSON from './util/isValidJSON';
 import roundPart from './util/roundPart';
-import Color from './color';
-import ColorPalette from './color-palette';
-import Version from './version';
+import setMarkup from './util/setMarkup';
+import Version from './util/version';
 
 // ColorPicker GC
 // ==============
@@ -99,110 +90,6 @@ const initColorPicker = (element) => new ColorPicker(element);
 // ColorPicker Private Methods
 // ===========================
 
-/**
- * Generate HTML markup and update instance properties.
- * @param {ColorPicker} self
- */
-function initCallback(self) {
-  const {
-    input, parent, format, id, componentLabels, colorKeywords, colorPresets,
-  } = self;
-  const colorValue = getAttribute(input, 'value') || '#fff';
-
-  const {
-    toggleLabel, pickerLabel, formatLabel, hexLabel,
-  } = componentLabels;
-
-  // update color
-  const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
-  self.color = new Color(color, format);
-
-  // set initial controls dimensions
-  // make the controls smaller on mobile
-  const dropClass = isMobile ? ' mobile' : '';
-  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
-
-  const pickerBtn = createElement({
-    id: `picker-btn-${id}`,
-    tagName: 'button',
-    className: 'picker-toggle btn-appearance',
-  });
-  setAttribute(pickerBtn, ariaExpanded, 'false');
-  setAttribute(pickerBtn, ariaHasPopup, 'true');
-  pickerBtn.append(createElement({
-    tagName: 'span',
-    className: vHidden,
-    innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
-  }));
-
-  const pickerDropdown = createElement({
-    tagName: 'div',
-    className: `color-dropdown picker${dropClass}`,
-  });
-  setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
-  setAttribute(pickerDropdown, 'role', 'group');
-
-  const colorControls = getColorControls(self);
-  const colorForm = getColorForm(self);
-
-  pickerDropdown.append(colorControls, colorForm);
-  input.before(pickerBtn);
-  parent.append(pickerDropdown);
-
-  // set colour key menu template
-  if (colorKeywords || colorPresets) {
-    const presetsDropdown = createElement({
-      tagName: 'div',
-      className: `color-dropdown scrollable menu${dropClass}`,
-    });
-
-    // color presets
-    if ((colorPresets instanceof Array && colorPresets.length)
-      || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
-      const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
-      presetsDropdown.append(presetsMenu);
-    }
-
-    // explicit defaults [reset, initial, inherit, transparent, currentColor]
-    if (colorKeywords && colorKeywords.length) {
-      const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
-      presetsDropdown.append(keywordsMenu);
-    }
-
-    const presetsBtn = createElement({
-      tagName: 'button',
-      className: 'menu-toggle btn-appearance',
-    });
-    setAttribute(presetsBtn, tabIndex, '-1');
-    setAttribute(presetsBtn, ariaExpanded, 'false');
-    setAttribute(presetsBtn, ariaHasPopup, 'true');
-
-    const xmlns = encodeURI('http://www.w3.org/2000/svg');
-    const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
-    setAttribute(presetsIcon, 'xmlns', xmlns);
-    setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
-    setAttribute(presetsIcon, ariaHidden, 'true');
-
-    const path = createElementNS(xmlns, { tagName: 'path' });
-    setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
-    setAttribute(path, 'fill', '#fff');
-    presetsIcon.append(path);
-    presetsBtn.append(createElement({
-      tagName: 'span',
-      className: vHidden,
-      innerText: `${toggleLabel}`,
-    }), presetsIcon);
-
-    parent.append(presetsBtn, presetsDropdown);
-  }
-
-  // solve non-colors after settings save
-  if (colorKeywords && nonColors.includes(colorValue)) {
-    self.value = colorValue;
-  }
-  setAttribute(input, tabIndex, '-1');
-}
-
 /**
  * Add / remove `ColorPicker` main event listeners.
  * @param {ColorPicker} self
@@ -436,7 +323,7 @@ export default class ColorPicker {
     self.handleKnobs = self.handleKnobs.bind(self);
 
     // generate markup
-    initCallback(self);
+    setMarkup(self);
 
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
@@ -632,7 +519,7 @@ export default class ColorPicker {
     const self = this;
     const { activeElement } = getDocument(self.input);
 
-    if ((isMobile && self.dragElement)
+    if ((e.type === touchmoveEvent && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
       e.stopPropagation();
       e.preventDefault();

package/src/js/color.js

@@ -1,13 +1,14 @@
-import getDocumentHead from 'shorter-js/src/get/getDocumentHead';
+import documentHead from 'shorter-js/src/blocks/documentHead';
 import getElementStyle from 'shorter-js/src/get/getElementStyle';
 import setElementStyle from 'shorter-js/src/misc/setElementStyle';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
+import toLowerCase from 'shorter-js/src/misc/toLowerCase';
 
 import nonColors from './util/nonColors';
 import roundPart from './util/roundPart';
 
 // Color supported formats
-const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
+const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsv', 'hwb'];
 
 // Hue angles
 const ANGLES = 'deg|rad|grad|turn';
@@ -29,10 +30,17 @@ const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
 // Add angles to the mix
 const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
 
+// Start & end
+const START_MATCH = '(?:[\\s|\\(\\s|\\s\\(\\s]+)?';
+const END_MATCH = '(?:[\\s|\\)\\s]+)?';
+// Components separation
+const SEP = '(?:[,|\\s]+)';
+const SEP2 = '(?:[,|\\/\\s]*)?';
+
 // Actual matching.
 // Parentheses and commas are optional, but not required.
 // Whitespace can take the place of commas or opening paren
-const PERMISSIVE_MATCH = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
+const PERMISSIVE_MATCH = `${START_MATCH}(${CSS_UNIT2})${SEP}(${CSS_UNIT})${SEP}(${CSS_UNIT})${SEP2}(${CSS_UNIT})?${END_MATCH}`;
 
 const matchers = {
   CSS_UNIT: new RegExp(CSS_UNIT2),
@@ -65,23 +73,22 @@ function isPercentage(n) {
   return `${n}`.includes('%');
 }
 
-/**
- * Check to see if string passed in is an angle
- * @param {string} n testing string
- * @returns {boolean} the query result
- */
-function isAngle(n) {
-  return ANGLES.split('|').some((a) => `${n}`.includes(a));
-}
-
 /**
  * Check to see if string passed is a web safe colour.
+ * @see https://stackoverflow.com/a/16994164
  * @param {string} color a colour name, EG: *red*
  * @returns {boolean} the query result
  */
 function isColorName(color) {
-  return !['#', ...COLOR_FORMAT].some((s) => color.includes(s))
-    && !/[0-9]/.test(color);
+  if (nonColors.includes(color)
+    || ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
+
+  return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].every((c) => {
+    setElementStyle(documentHead, { color });
+    const computedColor = getElementStyle(documentHead, 'color');
+    setElementStyle(documentHead, { color: '' });
+    return computedColor !== c;
+  });
 }
 
 /**
@@ -102,15 +109,15 @@ function isValidCSSUnit(color) {
  */
 function bound01(N, max) {
   let n = N;
-  if (isOnePointZero(n)) n = '100%';
-
-  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+  if (isOnePointZero(N)) n = '100%';
 
-  // Handle hue angles
-  if (isAngle(N)) n = N.replace(new RegExp(ANGLES), '');
+  const processPercent = isPercentage(n);
+  n = max === 360
+    ? parseFloat(n)
+    : Math.min(max, Math.max(0, parseFloat(n)));
 
   // Automatically convert percentage into number
-  if (isPercentage(n)) n = parseInt(String(n * max), 10) / 100;
+  if (processPercent) n = (n * max) / 100;
 
   // Handle floating point rounding errors
   if (Math.abs(n - max) < 0.000001) {
@@ -121,11 +128,11 @@ function bound01(N, max) {
     // If n is a hue given in degrees,
     // wrap around out-of-range values into [0, 360] range
     // then convert into [0, 1].
-    n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+    n = (n < 0 ? (n % max) + max : n % max) / max;
   } else {
     // If n not a hue given in degrees
     // Convert into [0, 1] range if it isn't already.
-    n = (n % max) / parseFloat(String(max));
+    n = (n % max) / max;
   }
   return n;
 }
@@ -160,7 +167,6 @@ function clamp01(v) {
  * @returns {string}
  */
 function getRGBFromName(name) {
-  const documentHead = getDocumentHead();
   setElementStyle(documentHead, { color: name });
   const colorName = getElementStyle(documentHead, 'color');
   setElementStyle(documentHead, { color: '' });
@@ -260,6 +266,36 @@ function hueToRgb(p, q, t) {
   return p;
 }
 
+/**
+ * Converts an HSL colour value to RGB.
+ *
+ * @param {number} h Hue Angle [0, 1]
+ * @param {number} s Saturation [0, 1]
+ * @param {number} l Lightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
+ */
+function hslToRgb(h, s, l) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (s === 0) {
+    // achromatic
+    g = l;
+    b = l;
+    r = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+  [r, g, b] = [r, g, b].map((x) => x * 255);
+
+  return { r, g, b };
+}
+
 /**
 * Returns an HWB colour object from an RGB colour object.
 * @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
@@ -322,36 +358,6 @@ function hwbToRgb(H, W, B) {
   return { r, g, b };
 }
 
-/**
- * Converts an HSL colour value to RGB.
- *
- * @param {number} h Hue Angle [0, 1]
- * @param {number} s Saturation [0, 1]
- * @param {number} l Lightness Angle [0, 1]
- * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
- */
-function hslToRgb(h, s, l) {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-
-  if (s === 0) {
-    // achromatic
-    g = l;
-    b = l;
-    r = l;
-  } else {
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hueToRgb(p, q, h + 1 / 3);
-    g = hueToRgb(p, q, h);
-    b = hueToRgb(p, q, h - 1 / 3);
-  }
-  [r, g, b] = [r, g, b].map((x) => x * 255);
-
-  return { r, g, b };
-}
-
 /**
  * Converts an RGB colour value to HSV.
  *
@@ -408,10 +414,11 @@ function hsvToRgb(H, S, V) {
   const q = v * (1 - f * s);
   const t = v * (1 - (1 - f) * s);
   const mod = i % 6;
-  const r = [v, q, p, p, t, v][mod];
-  const g = [t, v, v, q, p, p][mod];
-  const b = [p, p, t, v, v, q][mod];
-  return { r: r * 255, g: g * 255, b: b * 255 };
+  let r = [v, q, p, p, t, v][mod];
+  let g = [t, v, v, q, p, p][mod];
+  let b = [p, p, t, v, v, q][mod];
+  [r, g, b] = [r, g, b].map((n) => n * 255);
+  return { r, g, b };
 }
 
 /**
@@ -435,7 +442,7 @@ function rgbToHex(r, g, b, allow3Char) {
   // Return a 3 character hex if possible
   if (allow3Char && hex[0].charAt(0) === hex[0].charAt(1)
     && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
   }
 
@@ -463,39 +470,24 @@ function rgbaToHex(r, g, b, a, allow4Char) {
   // Return a 4 character hex if possible
   if (allow4Char && hex[0].charAt(0) === hex[0].charAt(1)
     && hex[1].charAt(0) === hex[1].charAt(1)
-      && hex[2].charAt(0) === hex[2].charAt(1)
-        && hex[3].charAt(0) === hex[3].charAt(1)) {
+    && hex[2].charAt(0) === hex[2].charAt(1)
+    && hex[3].charAt(0) === hex[3].charAt(1)) {
     return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
   }
   return hex.join('');
 }
 
-/**
- * Returns a colour object corresponding to a given number.
- * @param {number} color input number
- * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
- */
-function numberInputToObject(color) {
-  /* eslint-disable no-bitwise */
-  return {
-    r: color >> 16,
-    g: (color & 0xff00) >> 8,
-    b: color & 0xff,
-  };
-  /* eslint-enable no-bitwise */
-}
-
 /**
  * Permissive string parsing. Take in a number of formats, and output an object
  * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
  * @param {string} input colour value in any format
- * @returns {Record<string, (number | string)> | false} an object matching the RegExp
+ * @returns {Record<string, (number | string | boolean)> | false} an object matching the RegExp
  */
 function stringInputToObject(input) {
-  let color = input.trim().toLowerCase();
+  let color = toLowerCase(input.trim());
   if (color.length === 0) {
     return {
-      r: 0, g: 0, b: 0, a: 0,
+      r: 0, g: 0, b: 0, a: 1,
     };
   }
   let named = false;
@@ -503,11 +495,9 @@ function stringInputToObject(input) {
     color = getRGBFromName(color);
     named = true;
   } else if (nonColors.includes(color)) {
-    const isTransparent = color === 'transparent';
-    const rgb = isTransparent ? 0 : 255;
-    const a = isTransparent ? 0 : 1;
+    const a = color === 'transparent' ? 0 : 1;
     return {
-      r: rgb, g: rgb, b: rgb, a, format: 'rgb',
+      r: 0, g: 0, b: 0, a, format: 'rgb', ok: true,
     };
   }
 
@@ -547,7 +537,6 @@ function stringInputToObject(input) {
       g: parseIntFromHex(m2),
       b: parseIntFromHex(m3),
       a: convertHexToDecimal(m4),
-      // format: named ? 'rgb' : 'hex8',
       format: named ? 'rgb' : 'hex',
     };
   }
@@ -611,6 +600,7 @@ function stringInputToObject(input) {
 function inputToRGB(input) {
   let rgb = { r: 0, g: 0, b: 0 };
   let color = input;
+  /** @type {string | number} */
   let a = 1;
   let s = null;
   let v = null;
@@ -621,7 +611,8 @@ function inputToRGB(input) {
   let r = null;
   let g = null;
   let ok = false;
-  let format = 'hex';
+  const inputFormat = typeof color === 'object' && color.format;
+  let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
 
   if (typeof input === 'string') {
     // @ts-ignore -- this now is converted to object
@@ -662,14 +653,17 @@ function inputToRGB(input) {
       format = 'hwb';
     }
     if (isValidCSSUnit(color.a)) {
-      a = color.a;
-      a = isPercentage(`${a}`) ? bound01(a, 100) : a;
+      a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
+      a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
     }
   }
+  if (typeof color === 'undefined') {
+    ok = true;
+  }
 
   return {
-    ok, // @ts-ignore
-    format: color.format || format,
+    ok,
+    format,
     r: Math.min(255, Math.max(rgb.r, 0)),
     g: Math.min(255, Math.max(rgb.g, 0)),
     b: Math.min(255, Math.max(rgb.b, 0)),
@@ -698,7 +692,8 @@ export default class Color {
       color = inputToRGB(color);
     }
     if (typeof color === 'number') {
-      color = numberInputToObject(color);
+      const len = `${color}`.length;
+      color = `#${(len === 2 ? '0' : '00')}${color}`;
     }
     const {
       r, g, b, a, ok, format,
@@ -708,7 +703,7 @@ export default class Color {
     const self = this;
 
     /** @type {CP.ColorInput} */
-    self.originalInput = color;
+    self.originalInput = input;
     /** @type {number} */
     self.r = r;
     /** @type {number} */
@@ -1098,6 +1093,7 @@ ObjectAssign(Color, {
   isOnePointZero,
   isPercentage,
   isValidCSSUnit,
+  isColorName,
   pad2,
   clamp01,
   bound01,
@@ -1115,9 +1111,10 @@ ObjectAssign(Color, {
   hueToRgb,
   hwbToRgb,
   parseIntFromHex,
-  numberInputToObject,
   stringInputToObject,
   inputToRGB,
   roundPart,
+  getElementStyle,
+  setElementStyle,
   ObjectAssign,
 });