kempo-ui 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/ColorPicker.js +19 -14
  2. package/docs/components/color-picker.html +84 -52
  3. package/docs/src/components/ColorPicker.js +19 -14
  4. package/package.json +1 -1
  5. package/src/components/ColorPicker.js +61 -15
  6. package/color-picker-fixed.png +0 -0
package/dist/components/ColorPicker.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static properties={format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}updated(t){super.updated(t),t.has("format")&&this.requestUpdate()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,void(a.hasAlpha&&(this.alpha=a.a))}this.red=0,this.green=0,this.blue=0,this.alpha=1}}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static formAssociated=!0;static properties={name:{type:String,reflect:!0,attribute:"name"},format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.internals=this.attachInternals(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}connectedCallback(){super.connectedCallback(),this.originalHadFormat=this.hasAttribute("format"),this.originalValue=this.getAttribute("value")}firstUpdated(t){if(super.firstUpdated(t),this.originalValue&&!this.originalHadFormat)for(const[t,a]of Object.entries(this.constructor.formats))if(a.detect(this.originalValue)){this.format=t;break}}updated(t){super.updated(t),t.has("format")&&this.requestUpdate(),(t.has("red")||t.has("green")||t.has("blue")||t.has("alpha")||t.has("format"))&&this.updateFormValue()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,a.hasAlpha&&(this.alpha=a.a),void this.updateFormValue()}this.red=0,this.green=0,this.blue=0,this.alpha=1,this.updateFormValue()}}updateFormValue(){const t=this.value;this.internals.setFormValue(t)}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
2
2
  <div id="container">
3
3
  <select
4
4
  id="format"
@@ -11,30 +11,35 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
11
11
  value="${this.value}"
12
12
  @change=${this.onTextInputChange}
13
13
  />
14
- <input
15
- id="color"
16
- type="color"
17
- value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
18
- @change=${this.onColorInputChange}
19
- />
14
+ <div id="color-wrapper">
15
+ <input
16
+ id="color"
17
+ type="color"
18
+ value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
19
+ @change=${this.onColorInputChange}
20
+ />
21
+ </div>
20
22
  </div>
21
23
  `}static styles=css`
22
24
  :host {
23
25
  display: block;
24
26
  }
25
27
  #container {
26
- display: flex;
28
+ display: grid;
29
+ grid-template-columns: 7rem 1fr auto;
27
30
  align-items: stretch;
28
31
  }
29
32
  #format {
30
- width: 7rem;
33
+ flex-shrink: 0;
31
34
  }
32
35
  #text {
33
- flex: 1 1 auto;
36
+ min-width: 0;
37
+ }
38
+ #color-wrapper {
39
+ display: contents;
34
40
  }
35
41
  #color {
36
- width: 3rem;
37
- height: auto !important;
38
- align-self: stretch !important;
42
+ aspect-ratio: 1;
43
+ height: 100%;
39
44
  }
40
- `;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,r,e=t.slice(1),o=e.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(e[0]+e[0],16),s=parseInt(e[1]+e[1],16),r=parseInt(e[2]+e[2],16),4===o&&(h=parseInt(e[3]+e[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(e.slice(0,2),16),s=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16),8===o&&(h=parseInt(e.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:r,a:h,hasAlpha:n}},toString:(t,a,s,r)=>{let e=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(r<1){e+=Math.round(255*r).toString(16).padStart(2,"0")}return"#"+e}},rgba:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,r)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),r<1?`rgba(${t}, ${a}, ${s}, ${r})`:`rgb(${t}, ${a}, ${s})`)},hsla:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,r=parseFloat(a[2])/100,e=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,l;if(0===r)n=d=l=e;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=e<.5?e*(1+r):e+r-e*r,o=2*e-a;n=t(o,a,s+1/3),d=t(o,a,s),l=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*l),a:o,hasAlpha:h}},toString:(t,a,s,r)=>{t/=255,a/=255,s/=255;const e=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(e+o)/2;if(e===o)h=n=0;else{const r=e-o;switch(n=d>.5?r/(2-e-o):r/(e+o),e){case t:h=(a-s)/r+(a<s?6:0);break;case a:h=(s-t)/r+2;break;case s:h=(t-a)/r+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),r<1?`hsla(${h}, ${n}%, ${d}%, ${r})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,r,e,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,l=1-h-n;if(l>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+l*(1-a),d=h+l*a;t<1/6?(s=h+l,r=d,e=h):t<2/6?(s=n,r=h+l,e=h):t<.5?(s=h,r=h+l,e=d):t<4/6?(s=h,r=n,e=h+l):t<5/6?(s=d,r=h,e=h+l):(s=h+l,r=h,e=n)}else s=r=e=h;const i=!!a[4];return{r:Math.round(255*s),g:Math.round(255*r),b:Math.round(255*e),a:d,hasAlpha:i}},toString:(t,a,s,r)=>{t/=255,a/=255,s/=255;const e=Math.max(t,a,s),o=Math.min(t,a,s),h=e-o;let n=0;if(0!==h){switch(e){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),l=Math.round(100*(1-e));return r<1?`hwb(${n} ${d}% ${l}% / ${r})`:`hwb(${n} ${d}% ${l}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+r/500,d=h-e/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),i=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*l-1.5371385*i-.4985314*p,M=-.969266*l+1.8760108*i+.041556*p,c=.0556434*l-.2040259*i+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055,g=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:b}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=e>.008856?Math.pow(e,1/3):7.787*e+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=h>.008856?Math.pow(h,1/3):7.787*h+16/116,i=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-l)*100)/100;return r<1?`lab(${i}% ${p} ${u} / ${r})`:`lab(${i}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+r*Math.cos(e*Math.PI/180)/500,d=h-r*Math.sin(e*Math.PI/180)/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),i=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*l-1.5371385*i-.4985314*p,M=-.969266*l+1.8760108*i+.041556*p,c=.0556434*l-.2040259*i+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055,g=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:b}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=e>.008856?Math.pow(e,1/3):7.787*e+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=(116*d-16)/100,i=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(i*i+p*p);let M=180*Math.atan2(p,i)/Math.PI;M<0&&(M+=360);const c=Math.round(100*l*100)/100,m=Math.round(100*u)/100,$=Math.round(100*M)/100;return r<1?`lch(${c}% ${m} ${$} / ${r})`:`lch(${c}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*r+.2158037573*e,n=s-.1055613458*r-.0638541728*e,d=s-.0894841775*r-1.291485548*e,l=4.0767416621*h-3.3077115913*n+.2309699292*d,i=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,M))),b:Math.round(255*Math.max(0,Math.min(1,c))),a:o,hasAlpha:m}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(e,1/3),d=Math.pow(o,1/3),l=Math.pow(h,1/3),i=.2104542553*n+.793617785*d-.0040720468*l,p=1.9779984951*n-2.428592205*d+.4505937099*l,u=.0259040371*n+.7827717662*d-.808675766*l,M=Math.round(100*i*100)/100,c=Math.round(100*p)/100,m=Math.round(100*u)/100;return r<1?`oklab(${M}% ${c} ${m} / ${r})`:`oklab(${M}% ${c} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=r*Math.cos(e*Math.PI/180),n=r*Math.sin(e*Math.PI/180),d=s+.3963377774*h+.2158037573*n,l=s-.1055613458*h-.0638541728*n,i=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*l+.2309699292*i,u=-1.2684380046*d+2.6097574011*l-.3413193965*i,M=-.0041960863*d-.7034186147*l+1.707614701*i,c=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,c))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(e,1/3),d=Math.pow(o,1/3),l=Math.pow(h,1/3),i=.2104542553*n+.793617785*d-.0040720468*l,p=1.9779984951*n-2.428592205*d+.4505937099*l,u=.0259040371*n+.7827717662*d-.808675766*l,M=Math.sqrt(p*p+u*u);let c=180*Math.atan2(u,p)/Math.PI;c<0&&(c+=360);const m=Math.round(100*i*100)/100,$=Math.round(100*M)/100,g=Math.round(100*c)/100;return r<1?`oklch(${m}% ${$} ${g} / ${r})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
45
+ `;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,e,r=t.slice(1),o=r.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(r[0]+r[0],16),s=parseInt(r[1]+r[1],16),e=parseInt(r[2]+r[2],16),4===o&&(h=parseInt(r[3]+r[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(r.slice(0,2),16),s=parseInt(r.slice(2,4),16),e=parseInt(r.slice(4,6),16),8===o&&(h=parseInt(r.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:e,a:h,hasAlpha:n}},toString:(t,a,s,e)=>{let r=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(e<1){r+=Math.round(255*e).toString(16).padStart(2,"0")}return"#"+r}},rgb:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,e)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),e<1?`rgba(${t}, ${a}, ${s}, ${e})`:`rgb(${t}, ${a}, ${s})`)},hsl:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,e=parseFloat(a[2])/100,r=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,i;if(0===e)n=d=i=r;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=r<.5?r*(1+e):r+e-r*e,o=2*r-a;n=t(o,a,s+1/3),d=t(o,a,s),i=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*i),a:o,hasAlpha:h}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(r+o)/2;if(r===o)h=n=0;else{const e=r-o;switch(n=d>.5?e/(2-r-o):e/(r+o),r){case t:h=(a-s)/e+(a<s?6:0);break;case a:h=(s-t)/e+2;break;case s:h=(t-a)/e+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),e<1?`hsla(${h}, ${n}%, ${d}%, ${e})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,e,r,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,i=1-h-n;if(i>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+i*(1-a),d=h+i*a;t<1/6?(s=h+i,e=d,r=h):t<2/6?(s=n,e=h+i,r=h):t<.5?(s=h,e=h+i,r=d):t<4/6?(s=h,e=n,r=h+i):t<5/6?(s=d,e=h,r=h+i):(s=h+i,e=h,r=n)}else s=e=r=h;const l=!!a[4];return{r:Math.round(255*s),g:Math.round(255*e),b:Math.round(255*r),a:d,hasAlpha:l}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s),h=r-o;let n=0;if(0!==h){switch(r){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),i=Math.round(100*(1-r));return e<1?`hwb(${n} ${d}% ${i}% / ${e})`:`hwb(${n} ${d}% ${i}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+e/500,d=h-r/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=h>.008856?Math.pow(h,1/3):7.787*h+16/116,l=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-i)*100)/100;return e<1?`lab(${l}% ${p} ${u} / ${e})`:`lab(${l}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+e*Math.cos(r*Math.PI/180)/500,d=h-e*Math.sin(r*Math.PI/180)/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=(116*d-16)/100,l=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(l*l+p*p);let c=180*Math.atan2(p,l)/Math.PI;c<0&&(c+=360);const M=Math.round(100*i*100)/100,m=Math.round(100*u)/100,$=Math.round(100*c)/100;return e<1?`lch(${M}% ${m} ${$} / ${e})`:`lch(${M}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*e+.2158037573*r,n=s-.1055613458*e-.0638541728*r,d=s-.0894841775*e-1.291485548*r,i=4.0767416621*h-3.3077115913*n+.2309699292*d,l=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,c))),b:Math.round(255*Math.max(0,Math.min(1,M))),a:o,hasAlpha:m}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.round(100*l*100)/100,M=Math.round(100*p)/100,m=Math.round(100*u)/100;return e<1?`oklab(${c}% ${M} ${m} / ${e})`:`oklab(${c}% ${M} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=e*Math.cos(r*Math.PI/180),n=e*Math.sin(r*Math.PI/180),d=s+.3963377774*h+.2158037573*n,i=s-.1055613458*h-.0638541728*n,l=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*i+.2309699292*l,u=-1.2684380046*d+2.6097574011*i-.3413193965*l,c=-.0041960863*d-.7034186147*i+1.707614701*l,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,M))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.sqrt(p*p+u*u);let M=180*Math.atan2(u,p)/Math.PI;M<0&&(M+=360);const m=Math.round(100*l*100)/100,$=Math.round(100*c)/100,g=Math.round(100*M)/100;return e<1?`oklch(${m}% ${$} ${g} / ${e})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
package/docs/components/color-picker.html CHANGED
@@ -15,27 +15,30 @@
15
15
 
16
16
  <main>
17
17
  <h1>ColorPicker Component</h1>
18
- <p>The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color formats including hex, RGB, HSL, named colors, HWB, Lab, LCH, OKLab, and OKLCH. It features bidirectional color format conversion and intelligent alpha transparency handling.</p>
18
+ <p>The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color
19
+ formats including hex, RGB, HSL, named colors, HWB, Lab, LCH, OKLab, and OKLCH. It features bidirectional color
20
+ format conversion and intelligent alpha transparency handling.</p>
19
21
 
20
22
  <k-accordion persistent-id="toc" class="b r mb">
21
23
  <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
22
24
  <k-accordion-panel name="toc-panel">
23
- <div class="m pl">
24
- <h6>Examples</h6>
25
- <a href="#basicUsage">Basic Usage</a><br />
26
- <a href="#colorFormats">Supported Color Formats</a><br />
27
- <a href="#alphaHandling">Alpha Transparency</a><br />
28
- <a href="#formatSelection">Format Selection</a><br />
29
- <a href="#javascriptUsage">JavaScript Usage</a><br />
30
-
31
- <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
32
- <a href="#constructor">Constructor</a><br />
33
- <a href="#requirements">Requirements</a><br />
34
- <a href="#properties">Properties</a><br />
35
- <a href="#methods">Methods</a><br />
36
- <a href="#staticMembers">Static Members</a><br />
37
- </div>
38
- </k-accordion-panel>
25
+ <div class="m pl">
26
+ <h6>Examples</h6>
27
+ <a href="#basicUsage">Basic Usage</a><br />
28
+ <a href="#colorFormats">Supported Color Formats</a><br />
29
+ <a href="#alphaHandling">Alpha Transparency</a><br />
30
+ <a href="#formatSelection">Format Selection</a><br />
31
+ <a href="#formUsage">Form Integration</a><br />
32
+ <a href="#javascriptUsage">JavaScript Usage</a><br />
33
+
34
+ <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
35
+ <a href="#constructor">Constructor</a><br />
36
+ <a href="#requirements">Requirements</a><br />
37
+ <a href="#properties">Properties</a><br />
38
+ <a href="#methods">Methods</a><br />
39
+ <a href="#staticMembers">Static Members</a><br />
40
+ </div>
41
+ </k-accordion-panel>
39
42
  </k-accordion>
40
43
 
41
44
  <h2 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h2>
@@ -200,7 +203,8 @@
200
203
  </div>
201
204
 
202
205
  <h2 id="alphaHandling"><a href="#alphaHandling" class="no-link">Alpha Transparency</a></h2>
203
- <p>The ColorPicker intelligently handles alpha transparency. When you set a color without alpha, it preserves the existing alpha value. Only when you explicitly provide an alpha value does it update the transparency.</p>
206
+ <p>The ColorPicker intelligently handles alpha transparency. When you set a color without alpha, it preserves the
207
+ existing alpha value. Only when you explicitly provide an alpha value does it update the transparency.</p>
204
208
 
205
209
  <div class="row -mx">
206
210
  <div class="col m-span-12 px">
@@ -228,10 +232,10 @@
228
232
  </div>
229
233
  <script>
230
234
  const alphaPicker = document.getElementById('alphaPicker');
231
- document.getElementById('setOpaque').addEventListener('click', ()=>{
235
+ document.getElementById('setOpaque').addEventListener('click', () => {
232
236
  alphaPicker.value = '#0000ff'; // Alpha preserved at 0.5
233
237
  });
234
- document.getElementById('setTransparent').addEventListener('click', ()=>{
238
+ document.getElementById('setTransparent').addEventListener('click', () => {
235
239
  alphaPicker.value = 'rgba(0, 255, 0, 0.3)'; // Alpha updated to 0.3
236
240
  });
237
241
  </script>
@@ -240,7 +244,8 @@
240
244
  </div>
241
245
 
242
246
  <h2 id="formatSelection"><a href="#formatSelection" class="no-link">Format Selection</a></h2>
243
- <p>You can specify the output format using the <code>format</code> attribute. The component will convert colors to the specified format when displaying the value.</p>
247
+ <p>You can specify the output format using the <code>format</code> attribute. The component will convert colors to
248
+ the specified format when displaying the value.</p>
244
249
 
245
250
  <div class="row -mx">
246
251
  <div class="col m-span-12 px">
@@ -257,32 +262,48 @@
257
262
  </div>
258
263
  </div>
259
264
 
265
+ <h2 id="formUsage"><a href="#formUsage" class="no-link">Form Integration</a></h2>
266
+ <p>The ColorPicker component is form-associated and works seamlessly with native HTML forms using the
267
+ <code>name</code> attribute. The component uses the ElementInternals API to participate in form submission,
268
+ validation, and reset operations.
269
+ </p>
270
+ <div class="row -mx">
271
+ <div class="col m-span-12 px">
272
+ <k-card label="HTML">
273
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorForm"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"bgColor"</span>&gt;</span>Background Color:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"bgColor"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#3498db"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textColor"</span>&gt;</span>Text Color:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"textColor"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"rgb"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ffffff"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"formOutput"</span>&gt;</span>Submit the form to see values<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorForm'</span>).addEventListener(<span class="hljs-string">'submit'</span>, (e) =&gt; {<br /> e.preventDefault();<br /> <span class="hljs-keyword">const</span> formData = <span class="hljs-keyword">new</span> FormData(e.target);<br /> <span class="hljs-keyword">const</span> output = <span class="hljs-built_in">Array</span>.from(formData.entries())<br /> .map(<span class="hljs-function">(<span class="hljs-params">[key, value]</span>) =&gt;</span> <span class="hljs-string">`<span class="hljs-subst">${key}</span>: <span class="hljs-subst">${value}</span>`</span>)<br /> .join(<span class="hljs-string">', '</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'formOutput'</span>).textContent = output;<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
274
+ </k-card>
275
+ </div>
276
+ <div class="col m-span-12 px">
277
+ <k-card label="Output">
278
+ <form id="colorForm" class="mb">
279
+ <label for="bgColor">Background Color:</label>
280
+ <k-color-picker name="bgColor" value="#3498db" class="mb"></k-color-picker>
281
+
282
+ <label for="textColor">Text Color:</label>
283
+ <k-color-picker name="textColor" format="rgb" value="#ffffff" class="mb"></k-color-picker>
284
+
285
+ <button type="submit">Submit</button>
286
+ </form>
287
+ <p id="formOutput">Submit the form to see values</p>
288
+ <script>
289
+ document.getElementById('colorForm').addEventListener('submit', (e) => {
290
+ e.preventDefault();
291
+ const formData = new FormData(e.target);
292
+ const output = Array.from(formData.entries())
293
+ .map(([key, value]) => `${key}: ${value}`)
294
+ .join(', ');
295
+ document.getElementById('formOutput').textContent = output;
296
+ });
297
+ </script>
298
+ </k-card>
299
+ </div>
300
+ </div>
301
+
260
302
  <h2 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h2>
261
303
  <div class="row -mx">
262
304
  <div class="col m-span-12 px">
263
305
  <k-card label="HTML">
264
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsPicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
265
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setColor"</span>&gt;</span>Set Color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
266
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"getColor"</span>&gt;</span>Get Color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
267
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeFormat"</span>&gt;</span>Change Format<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
268
- <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorValue"</span>&gt;</span>Color value will appear here<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
269
- <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
270
- <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jsPicker'</span>);
271
- <span class="hljs-keyword">const</span> valueDisplay = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorValue'</span>);
272
-
273
- <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
274
- picker.value = <span class="hljs-string">'oklch(70% 0.2 180)'</span>;
275
- });
276
-
277
- <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'getColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
278
- valueDisplay.textContent = <span class="hljs-string">`Current color: <span class="hljs-subst">${picker.value}</span>`</span>;
279
- });
280
-
281
- <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeFormat'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
282
- picker.format = <span class="hljs-string">'hex'</span>;
283
- valueDisplay.textContent = <span class="hljs-string">`Switched to hex format: <span class="hljs-subst">${picker.value}</span>`</span>;
284
- });
285
- </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
306
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsPicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setColor"</span>&gt;</span>Set Color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"getColor"</span>&gt;</span>Get Color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeFormat"</span>&gt;</span>Change Format<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorValue"</span>&gt;</span>Color value will appear here<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jsPicker'</span>);<br /> <span class="hljs-keyword">const</span> valueDisplay = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorValue'</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br /> picker.value = <span class="hljs-string">'oklch(70% 0.2 180)'</span>;<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'getColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br /> valueDisplay.textContent = <span class="hljs-string">`Current color: <span class="hljs-subst">${picker.value}</span>`</span>;<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeFormat'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br /> picker.format = <span class="hljs-string">'hex'</span>;<br /> valueDisplay.textContent = <span class="hljs-string">`Switched to hex format: <span class="hljs-subst">${picker.value}</span>`</span>;<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
286
307
  </k-card>
287
308
  </div>
288
309
  <div class="col m-span-12 px">
@@ -297,16 +318,16 @@
297
318
  <script>
298
319
  const jsPicker = document.getElementById('jsPicker');
299
320
  const valueDisplay = document.getElementById('colorValue');
300
-
301
- document.getElementById('setColor').addEventListener('click', ()=>{
321
+
322
+ document.getElementById('setColor').addEventListener('click', () => {
302
323
  jsPicker.value = 'oklch(70% 0.2 180)';
303
324
  });
304
-
305
- document.getElementById('getColor').addEventListener('click', ()=>{
325
+
326
+ document.getElementById('getColor').addEventListener('click', () => {
306
327
  valueDisplay.textContent = `Current color: ${jsPicker.value}`;
307
328
  });
308
-
309
- document.getElementById('changeFormat').addEventListener('click', ()=>{
329
+
330
+ document.getElementById('changeFormat').addEventListener('click', () => {
310
331
  jsPicker.format = 'hex';
311
332
  valueDisplay.textContent = `Switched to hex format: ${jsPicker.value}`;
312
333
  });
@@ -329,11 +350,20 @@
329
350
  </ul>
330
351
 
331
352
  <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
353
+ <h5><code>name<i>: string</i></code></h5>
354
+ <p>The name of the form control, used for form submission. When set, the component will participate in form data
355
+ collection. Syncs to <code>name</code> attribute.</p>
356
+
332
357
  <h5><code>format<i>: string</i></code></h5>
333
- <p>The output color format. Supported values: <code>'hex'</code>, <code>'rgba'</code>, <code>'hsla'</code>, <code>'named'</code>, <code>'hwb'</code>, <code>'lab'</code>, <code>'lch'</code>, <code>'oklab'</code>, <code>'oklch'</code>. Default is <code>'hex'</code>. Syncs to <code>format</code> attribute.</p>
358
+ <p>The output color format. Supported values: <code>'hex'</code>, <code>'rgba'</code>, <code>'hsla'</code>,
359
+ <code>'named'</code>, <code>'hwb'</code>, <code>'lab'</code>, <code>'lch'</code>, <code>'oklab'</code>,
360
+ <code>'oklch'</code>. Default is <code>'hex'</code>. Syncs to <code>format</code> attribute.
361
+ </p>
334
362
 
335
363
  <h5><code>value<i>: string</i></code></h5>
336
- <p>The current color value as a string in the current format. Accepts any supported color format and converts it internally to RGB. When setting a color without alpha, the existing alpha value is preserved. Only colors with explicit alpha values will update the transparency. Syncs to <code>value</code> attribute.</p>
364
+ <p>The current color value as a string in the current format. Accepts any supported color format and converts it
365
+ internally to RGB. When setting a color without alpha, the existing alpha value is preserved. Only colors with
366
+ explicit alpha values will update the transparency. Syncs to <code>value</code> attribute.</p>
337
367
 
338
368
  <h5><code>red<i>: number</i></code></h5>
339
369
  <p>The red component of the color (0-255).</p>
@@ -356,7 +386,9 @@
356
386
  <p>An object containing 147 named CSS colors mapped to their hex values.</p>
357
387
 
358
388
  <h5><code>formats<i>: object</i></code></h5>
359
- <p>An object containing format definitions for all supported color formats. Each format has <code>detect()</code>, <code>parse()</code>, and <code>toString()</code> methods.</p>
389
+ <p>An object containing format definitions for all supported color formats. Each format has <code>detect()</code>,
390
+ <code>parse()</code>, and <code>toString()</code> methods.
391
+ </p>
360
392
 
361
393
  </main>
362
394
  <div style="height:33vh"></div>
package/docs/src/components/ColorPicker.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static properties={format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}updated(t){super.updated(t),t.has("format")&&this.requestUpdate()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,void(a.hasAlpha&&(this.alpha=a.a))}this.red=0,this.green=0,this.blue=0,this.alpha=1}}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static formAssociated=!0;static properties={name:{type:String,reflect:!0,attribute:"name"},format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.internals=this.attachInternals(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}connectedCallback(){super.connectedCallback(),this.originalHadFormat=this.hasAttribute("format"),this.originalValue=this.getAttribute("value")}firstUpdated(t){if(super.firstUpdated(t),this.originalValue&&!this.originalHadFormat)for(const[t,a]of Object.entries(this.constructor.formats))if(a.detect(this.originalValue)){this.format=t;break}}updated(t){super.updated(t),t.has("format")&&this.requestUpdate(),(t.has("red")||t.has("green")||t.has("blue")||t.has("alpha")||t.has("format"))&&this.updateFormValue()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,a.hasAlpha&&(this.alpha=a.a),void this.updateFormValue()}this.red=0,this.green=0,this.blue=0,this.alpha=1,this.updateFormValue()}}updateFormValue(){const t=this.value;this.internals.setFormValue(t)}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
2
2
  <div id="container">
3
3
  <select
4
4
  id="format"
@@ -11,30 +11,35 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
11
11
  value="${this.value}"
12
12
  @change=${this.onTextInputChange}
13
13
  />
14
- <input
15
- id="color"
16
- type="color"
17
- value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
18
- @change=${this.onColorInputChange}
19
- />
14
+ <div id="color-wrapper">
15
+ <input
16
+ id="color"
17
+ type="color"
18
+ value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
19
+ @change=${this.onColorInputChange}
20
+ />
21
+ </div>
20
22
  </div>
21
23
  `}static styles=css`
22
24
  :host {
23
25
  display: block;
24
26
  }
25
27
  #container {
26
- display: flex;
28
+ display: grid;
29
+ grid-template-columns: 7rem 1fr auto;
27
30
  align-items: stretch;
28
31
  }
29
32
  #format {
30
- width: 7rem;
33
+ flex-shrink: 0;
31
34
  }
32
35
  #text {
33
- flex: 1 1 auto;
36
+ min-width: 0;
37
+ }
38
+ #color-wrapper {
39
+ display: contents;
34
40
  }
35
41
  #color {
36
- width: 3rem;
37
- height: auto !important;
38
- align-self: stretch !important;
42
+ aspect-ratio: 1;
43
+ height: 100%;
39
44
  }
40
- `;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,r,e=t.slice(1),o=e.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(e[0]+e[0],16),s=parseInt(e[1]+e[1],16),r=parseInt(e[2]+e[2],16),4===o&&(h=parseInt(e[3]+e[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(e.slice(0,2),16),s=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16),8===o&&(h=parseInt(e.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:r,a:h,hasAlpha:n}},toString:(t,a,s,r)=>{let e=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(r<1){e+=Math.round(255*r).toString(16).padStart(2,"0")}return"#"+e}},rgba:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,r)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),r<1?`rgba(${t}, ${a}, ${s}, ${r})`:`rgb(${t}, ${a}, ${s})`)},hsla:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,r=parseFloat(a[2])/100,e=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,l;if(0===r)n=d=l=e;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=e<.5?e*(1+r):e+r-e*r,o=2*e-a;n=t(o,a,s+1/3),d=t(o,a,s),l=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*l),a:o,hasAlpha:h}},toString:(t,a,s,r)=>{t/=255,a/=255,s/=255;const e=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(e+o)/2;if(e===o)h=n=0;else{const r=e-o;switch(n=d>.5?r/(2-e-o):r/(e+o),e){case t:h=(a-s)/r+(a<s?6:0);break;case a:h=(s-t)/r+2;break;case s:h=(t-a)/r+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),r<1?`hsla(${h}, ${n}%, ${d}%, ${r})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,r,e,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,l=1-h-n;if(l>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+l*(1-a),d=h+l*a;t<1/6?(s=h+l,r=d,e=h):t<2/6?(s=n,r=h+l,e=h):t<.5?(s=h,r=h+l,e=d):t<4/6?(s=h,r=n,e=h+l):t<5/6?(s=d,r=h,e=h+l):(s=h+l,r=h,e=n)}else s=r=e=h;const i=!!a[4];return{r:Math.round(255*s),g:Math.round(255*r),b:Math.round(255*e),a:d,hasAlpha:i}},toString:(t,a,s,r)=>{t/=255,a/=255,s/=255;const e=Math.max(t,a,s),o=Math.min(t,a,s),h=e-o;let n=0;if(0!==h){switch(e){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),l=Math.round(100*(1-e));return r<1?`hwb(${n} ${d}% ${l}% / ${r})`:`hwb(${n} ${d}% ${l}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+r/500,d=h-e/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),i=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*l-1.5371385*i-.4985314*p,M=-.969266*l+1.8760108*i+.041556*p,c=.0556434*l-.2040259*i+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055,g=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:b}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=e>.008856?Math.pow(e,1/3):7.787*e+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=h>.008856?Math.pow(h,1/3):7.787*h+16/116,i=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-l)*100)/100;return r<1?`lab(${i}% ${p} ${u} / ${r})`:`lab(${i}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+r*Math.cos(e*Math.PI/180)/500,d=h-r*Math.sin(e*Math.PI/180)/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),i=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*l-1.5371385*i-.4985314*p,M=-.969266*l+1.8760108*i+.041556*p,c=.0556434*l-.2040259*i+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055,g=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:b}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=e>.008856?Math.pow(e,1/3):7.787*e+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=(116*d-16)/100,i=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(i*i+p*p);let M=180*Math.atan2(p,i)/Math.PI;M<0&&(M+=360);const c=Math.round(100*l*100)/100,m=Math.round(100*u)/100,$=Math.round(100*M)/100;return r<1?`lch(${c}% ${m} ${$} / ${r})`:`lch(${c}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*r+.2158037573*e,n=s-.1055613458*r-.0638541728*e,d=s-.0894841775*r-1.291485548*e,l=4.0767416621*h-3.3077115913*n+.2309699292*d,i=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,M))),b:Math.round(255*Math.max(0,Math.min(1,c))),a:o,hasAlpha:m}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(e,1/3),d=Math.pow(o,1/3),l=Math.pow(h,1/3),i=.2104542553*n+.793617785*d-.0040720468*l,p=1.9779984951*n-2.428592205*d+.4505937099*l,u=.0259040371*n+.7827717662*d-.808675766*l,M=Math.round(100*i*100)/100,c=Math.round(100*p)/100,m=Math.round(100*u)/100;return r<1?`oklab(${M}% ${c} ${m} / ${r})`:`oklab(${M}% ${c} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=r*Math.cos(e*Math.PI/180),n=r*Math.sin(e*Math.PI/180),d=s+.3963377774*h+.2158037573*n,l=s-.1055613458*h-.0638541728*n,i=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*l+.2309699292*i,u=-1.2684380046*d+2.6097574011*l-.3413193965*i,M=-.0041960863*d-.7034186147*l+1.707614701*i,c=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,c))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(e,1/3),d=Math.pow(o,1/3),l=Math.pow(h,1/3),i=.2104542553*n+.793617785*d-.0040720468*l,p=1.9779984951*n-2.428592205*d+.4505937099*l,u=.0259040371*n+.7827717662*d-.808675766*l,M=Math.sqrt(p*p+u*u);let c=180*Math.atan2(u,p)/Math.PI;c<0&&(c+=360);const m=Math.round(100*i*100)/100,$=Math.round(100*M)/100,g=Math.round(100*c)/100;return r<1?`oklch(${m}% ${$} ${g} / ${r})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
45
+ `;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,e,r=t.slice(1),o=r.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(r[0]+r[0],16),s=parseInt(r[1]+r[1],16),e=parseInt(r[2]+r[2],16),4===o&&(h=parseInt(r[3]+r[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(r.slice(0,2),16),s=parseInt(r.slice(2,4),16),e=parseInt(r.slice(4,6),16),8===o&&(h=parseInt(r.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:e,a:h,hasAlpha:n}},toString:(t,a,s,e)=>{let r=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(e<1){r+=Math.round(255*e).toString(16).padStart(2,"0")}return"#"+r}},rgb:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,e)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),e<1?`rgba(${t}, ${a}, ${s}, ${e})`:`rgb(${t}, ${a}, ${s})`)},hsl:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,e=parseFloat(a[2])/100,r=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,i;if(0===e)n=d=i=r;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=r<.5?r*(1+e):r+e-r*e,o=2*r-a;n=t(o,a,s+1/3),d=t(o,a,s),i=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*i),a:o,hasAlpha:h}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(r+o)/2;if(r===o)h=n=0;else{const e=r-o;switch(n=d>.5?e/(2-r-o):e/(r+o),r){case t:h=(a-s)/e+(a<s?6:0);break;case a:h=(s-t)/e+2;break;case s:h=(t-a)/e+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),e<1?`hsla(${h}, ${n}%, ${d}%, ${e})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,e,r,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,i=1-h-n;if(i>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+i*(1-a),d=h+i*a;t<1/6?(s=h+i,e=d,r=h):t<2/6?(s=n,e=h+i,r=h):t<.5?(s=h,e=h+i,r=d):t<4/6?(s=h,e=n,r=h+i):t<5/6?(s=d,e=h,r=h+i):(s=h+i,e=h,r=n)}else s=e=r=h;const l=!!a[4];return{r:Math.round(255*s),g:Math.round(255*e),b:Math.round(255*r),a:d,hasAlpha:l}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s),h=r-o;let n=0;if(0!==h){switch(r){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),i=Math.round(100*(1-r));return e<1?`hwb(${n} ${d}% ${i}% / ${e})`:`hwb(${n} ${d}% ${i}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+e/500,d=h-r/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=h>.008856?Math.pow(h,1/3):7.787*h+16/116,l=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-i)*100)/100;return e<1?`lab(${l}% ${p} ${u} / ${e})`:`lab(${l}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+e*Math.cos(r*Math.PI/180)/500,d=h-e*Math.sin(r*Math.PI/180)/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=(116*d-16)/100,l=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(l*l+p*p);let c=180*Math.atan2(p,l)/Math.PI;c<0&&(c+=360);const M=Math.round(100*i*100)/100,m=Math.round(100*u)/100,$=Math.round(100*c)/100;return e<1?`lch(${M}% ${m} ${$} / ${e})`:`lch(${M}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*e+.2158037573*r,n=s-.1055613458*e-.0638541728*r,d=s-.0894841775*e-1.291485548*r,i=4.0767416621*h-3.3077115913*n+.2309699292*d,l=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,c))),b:Math.round(255*Math.max(0,Math.min(1,M))),a:o,hasAlpha:m}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.round(100*l*100)/100,M=Math.round(100*p)/100,m=Math.round(100*u)/100;return e<1?`oklab(${c}% ${M} ${m} / ${e})`:`oklab(${c}% ${M} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=e*Math.cos(r*Math.PI/180),n=e*Math.sin(r*Math.PI/180),d=s+.3963377774*h+.2158037573*n,i=s-.1055613458*h-.0638541728*n,l=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*i+.2309699292*l,u=-1.2684380046*d+2.6097574011*i-.3413193965*l,c=-.0041960863*d-.7034186147*i+1.707614701*l,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,M))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.sqrt(p*p+u*u);let M=180*Math.atan2(u,p)/Math.PI;M<0&&(M+=360);const m=Math.round(100*l*100)/100,$=Math.round(100*c)/100,g=Math.round(100*M)/100;return e<1?`oklch(${m}% ${$} ${g} / ${e})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-ui",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "type": "module",
5
5
  "description": "A Lit based web-component library",
6
6
  "main": "index.js",
package/src/components/ColorPicker.js CHANGED
@@ -2,8 +2,15 @@ import ShadowComponent from './ShadowComponent.js';
2
2
  import { html, css } from '../lit-all.min.js';
3
3
 
4
4
  export default class ColorPicker extends ShadowComponent {
5
+ static formAssociated = true;
6
+
5
7
  /* Properties */
6
8
  static properties = {
9
+ name: {
10
+ type: String,
11
+ reflect: true,
12
+ attribute: 'name'
13
+ },
7
14
  format: {
8
15
  type: String,
9
16
  reflect: true,
@@ -29,6 +36,7 @@ export default class ColorPicker extends ShadowComponent {
29
36
  };
30
37
  constructor(){
31
38
  super();
39
+ this.internals = this.attachInternals();
32
40
  this.format = "hex";
33
41
  this.red = 0;
34
42
  this.green = 0;
@@ -37,11 +45,37 @@ export default class ColorPicker extends ShadowComponent {
37
45
  }
38
46
 
39
47
  /* Lifecycle */
48
+ connectedCallback(){
49
+ super.connectedCallback();
50
+ // Capture original attributes BEFORE Lit processes them
51
+ this.originalHadFormat = this.hasAttribute('format');
52
+ this.originalValue = this.getAttribute('value');
53
+ }
54
+
55
+ firstUpdated(changedProperties){
56
+ super.firstUpdated(changedProperties);
57
+
58
+ // If value was set but format wasn't, auto-detect
59
+ if(this.originalValue && !this.originalHadFormat){
60
+ for(const [formatName, format] of Object.entries(this.constructor.formats)){
61
+ if(format.detect(this.originalValue)){
62
+ this.format = formatName;
63
+ break;
64
+ }
65
+ }
66
+ }
67
+ }
68
+
40
69
  updated(changedProperties){
41
70
  super.updated(changedProperties);
42
- if (changedProperties.has('format')) {
71
+
72
+ if(changedProperties.has('format')){
43
73
  this.requestUpdate();
44
74
  }
75
+
76
+ if(changedProperties.has('red') || changedProperties.has('green') || changedProperties.has('blue') || changedProperties.has('alpha') || changedProperties.has('format')){
77
+ this.updateFormValue();
78
+ }
45
79
  }
46
80
 
47
81
  /* Members */
@@ -75,6 +109,7 @@ export default class ColorPicker extends ShadowComponent {
75
109
  if (parsed.hasAlpha) {
76
110
  this.alpha = parsed.a;
77
111
  }
112
+ this.updateFormValue();
78
113
  return;
79
114
  }
80
115
  }
@@ -85,6 +120,12 @@ export default class ColorPicker extends ShadowComponent {
85
120
  this.green = 0;
86
121
  this.blue = 0;
87
122
  this.alpha = 1;
123
+ this.updateFormValue();
124
+ }
125
+
126
+ updateFormValue(){
127
+ const formValue = this.value;
128
+ this.internals.setFormValue(formValue);
88
129
  }
89
130
 
90
131
  /* Methods */
@@ -118,12 +159,14 @@ export default class ColorPicker extends ShadowComponent {
118
159
  value="${this.value}"
119
160
  @change=${this.onTextInputChange}
120
161
  />
121
- <input
122
- id="color"
123
- type="color"
124
- value="${this.constructor.formats.hex.toString(this.red || 0, this.green || 0, this.blue || 0, 1)}"
125
- @change=${this.onColorInputChange}
126
- />
162
+ <div id="color-wrapper">
163
+ <input
164
+ id="color"
165
+ type="color"
166
+ value="${this.constructor.formats.hex.toString(this.red || 0, this.green || 0, this.blue || 0, 1)}"
167
+ @change=${this.onColorInputChange}
168
+ />
169
+ </div>
127
170
  </div>
128
171
  `;
129
172
  }
@@ -132,19 +175,22 @@ export default class ColorPicker extends ShadowComponent {
132
175
  display: block;
133
176
  }
134
177
  #container {
135
- display: flex;
178
+ display: grid;
179
+ grid-template-columns: 7rem 1fr auto;
136
180
  align-items: stretch;
137
181
  }
138
182
  #format {
139
- width: 7rem;
183
+ flex-shrink: 0;
140
184
  }
141
185
  #text {
142
- flex: 1 1 auto;
186
+ min-width: 0;
187
+ }
188
+ #color-wrapper {
189
+ display: contents;
143
190
  }
144
191
  #color {
145
- width: 3rem;
146
- height: auto !important;
147
- align-self: stretch !important;
192
+ aspect-ratio: 1;
193
+ height: 100%;
148
194
  }
149
195
  `;
150
196
 
@@ -187,7 +233,7 @@ export default class ColorPicker extends ShadowComponent {
187
233
  return '#' + hex;
188
234
  }
189
235
  },
190
- rgba: {
236
+ rgb: {
191
237
  detect: (value) => /^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(value),
192
238
  parse: (value) => {
193
239
  const match = value.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);
@@ -210,7 +256,7 @@ export default class ColorPicker extends ShadowComponent {
210
256
  }
211
257
  }
212
258
  },
213
- hsla: {
259
+ hsl: {
214
260
  detect: (value) => /^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(value),
215
261
  parse: (value) => {
216
262
  const match = value.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);
package/color-picker-fixed.png DELETED
Binary file