kempo-ui 0.0.34 → 0.0.36

package/docs/src/components/ColorPicker.js

@@ -1,15 +1,21 @@
-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`
+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(),this.syncInputs(t.has("format")))}syncInputs(t=!1){const a=this.shadowRoot?.querySelector("#text"),s=this.shadowRoot?.querySelector("#color"),r=this.shadowRoot?.querySelector("#format"),e=this.shadowRoot?.activeElement;a&&(t||e!==a)&&(a.value=this.value),s&&e!==s&&(s.value=this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)),r&&e!==r&&(r.value=this.format)}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),this.forwardEvent(t)}onTextInputChange(t){this.value=t.target.value,this.forwardEvent(t)}onTextInput(t){this.value=t.target.value,this.forwardEvent(t)}onColorInput(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),this.forwardEvent(t)}onFormatChange(t){this.format=t.target.value,this.forwardEvent(t)}onFormatInput(t){this.format=t.target.value,this.forwardEvent(t)}forwardEvent=t=>{this.dispatchEvent(new t.constructor(t.type,t))};render(){return html`
 			<div id="container">
 				<select
 					id="format"
 					value="${this.format}"
-					@change=${t=>this.format=t.target.value}
+					@change=${this.onFormatChange}
+					@input=${this.onFormatInput}
+					@focus=${this.forwardEvent}
+					@blur=${this.forwardEvent}
 				>${this.constructor.formats?Object.keys(this.constructor.formats).map(t=>html`<option value="${t}" ?selected=${this.format===t}>${t.toUpperCase()}</option>`):null}</select>
 				<input
 					id="text"
 					type="text"
 					value="${this.value}"
 					@change=${this.onTextInputChange}
+					@input=${this.onTextInput}
+					@focus=${this.forwardEvent}
+					@blur=${this.forwardEvent}
 				/>
 				<div id="color-wrapper">
 					<input
@@ -17,6 +23,9 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 						type="color"
 						value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
 						@change=${this.onColorInputChange}
+						@input=${this.onColorInput}
+						@focus=${this.forwardEvent}
+						@blur=${this.forwardEvent}
 					/>
 				</div>
 			</div>
@@ -42,4 +51,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			aspect-ratio: 1;
 			height: 100%;
 		}
-	`;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);
+	`;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}},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,r)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),r<1?`rgba(${t}, ${a}, ${s}, ${r})`:`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,r=parseFloat(a[2])/100,e=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,i,d;if(0===r)n=i=d=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),i=t(o,a,s),d=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*i),b:Math.round(255*d),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,i=(e+o)/2;if(e===o)h=n=0;else{const r=e-o;switch(n=i>.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),i=Math.round(100*i),r<1?`hsla(${h}, ${n}%, ${i}%, ${r})`:`hsl(${h}, ${n}%, ${i}%)`}},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,i=a[4]?parseFloat(a[4]):1,d=1-h-n;if(d>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+d*(1-a),i=h+d*a;t<1/6?(s=h+d,r=i,e=h):t<2/6?(s=n,r=h+d,e=h):t<.5?(s=h,r=h+d,e=i):t<4/6?(s=h,r=n,e=h+d):t<5/6?(s=i,r=h,e=h+d):(s=h+d,r=h,e=n)}else s=r=e=h;const l=!!a[4];return{r:Math.round(255*s),g:Math.round(255*r),b:Math.round(255*e),a:i,hasAlpha:l}},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 i=Math.round(100*o),d=Math.round(100*(1-e));return r<1?`hwb(${n} ${i}% ${d}% / ${r})`:`hwb(${n} ${i}% ${d}%)`}},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,i=h-e/200,d=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),u=1.08883*(i>.206893034?i*i*i:(i-16/116)/7.787),p=3.2404542*d-1.5371385*l-.4985314*u,c=-.969266*d+1.8760108*l+.041556*u,M=.0556434*d-.2040259*l+1.0572252*u,m=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,f=c<=.0031308?12.92*c:1.055*Math.pow(c,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,m))),g:Math.round(255*Math.max(0,Math.min(1,f))),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=(.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,i=o>.008856?Math.pow(o,1/3):7.787*o+16/116,d=h>.008856?Math.pow(h,1/3):7.787*h+16/116,l=Math.round(100*(116*i-16))/100,u=Math.round(500*(n-i)*100)/100,p=Math.round(200*(i-d)*100)/100;return r<1?`lab(${l}% ${u} ${p} / ${r})`:`lab(${l}% ${u} ${p})`}},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,i=h-r*Math.sin(e*Math.PI/180)/200,d=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),u=1.08883*(i>.206893034?i*i*i:(i-16/116)/7.787),p=3.2404542*d-1.5371385*l-.4985314*u,c=-.969266*d+1.8760108*l+.041556*u,M=.0556434*d-.2040259*l+1.0572252*u,m=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,f=c<=.0031308?12.92*c:1.055*Math.pow(c,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,m))),g:Math.round(255*Math.max(0,Math.min(1,f))),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=(.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,i=o>.008856?Math.pow(o,1/3):7.787*o+16/116,d=(116*i-16)/100,l=500*(n-i),u=200*(i-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),p=Math.sqrt(l*l+u*u);let c=180*Math.atan2(u,l)/Math.PI;c<0&&(c+=360);const M=Math.round(100*d*100)/100,m=Math.round(100*p)/100,f=Math.round(100*c)/100;return r<1?`lch(${M}% ${m} ${f} / ${r})`:`lch(${M}% ${m} ${f})`}},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,i=s-.0894841775*r-1.291485548*e,d=4.0767416621*h-3.3077115913*n+.2309699292*i,l=-1.2684380046*h+2.6097574011*n-.3413193965*i,u=-.0041960863*h-.7034186147*n+1.707614701*i,p=d<=.0031308?12.92*d:1.055*Math.pow(d,1/2.4)-.055,c=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,p))),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,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),i=Math.pow(o,1/3),d=Math.pow(h,1/3),l=.2104542553*n+.793617785*i-.0040720468*d,u=1.9779984951*n-2.428592205*i+.4505937099*d,p=.0259040371*n+.7827717662*i-.808675766*d,c=Math.round(100*l*100)/100,M=Math.round(100*u)/100,m=Math.round(100*p)/100;return r<1?`oklab(${c}% ${M} ${m} / ${r})`:`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,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),i=s+.3963377774*h+.2158037573*n,d=s-.1055613458*h-.0638541728*n,l=s-.0894841775*h-1.291485548*n,u=4.0767416621*i-3.3077115913*d+.2309699292*l,p=-1.2684380046*i+2.6097574011*d-.3413193965*l,c=-.0041960863*i-.7034186147*d+1.707614701*l,M=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,m=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,f=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const $=!!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,f))),a:o,hasAlpha:$}},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),i=Math.pow(o,1/3),d=Math.pow(h,1/3),l=.2104542553*n+.793617785*i-.0040720468*d,u=1.9779984951*n-2.428592205*i+.4505937099*d,p=.0259040371*n+.7827717662*i-.808675766*d,c=Math.sqrt(u*u+p*p);let M=180*Math.atan2(p,u)/Math.PI;M<0&&(M+=360);const m=Math.round(100*l*100)/100,f=Math.round(100*c)/100,$=Math.round(100*M)/100;return r<1?`oklch(${m}% ${f} ${$} / ${r})`:`oklch(${m}% ${f} ${$})`}}}}window.customElements.define("k-color-picker",ColorPicker);

package/docs/src/components/ThemeSwitcher.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=e=>{"theme"===e.key&&(this.currentTheme=e.newValue||"auto",document.documentElement.setAttribute("theme",this.currentTheme))};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import theme from"../utils/theme.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=theme.get()}handleClick=()=>{const e=theme.get();"auto"===e&&theme.set("light"),"light"===e&&theme.set("dark"),"dark"===e&&theme.set("auto")};connectedCallback(){super.connectedCallback(),this.unsubscribe=theme.subscribe(e=>{this.currentTheme=e})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}static styles=css`
 		:host {
 			--padding: var(--spacer);
 			display: flex;
@@ -20,4 +20,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		button.no-btn {
 			padding: var(--padding);
 		}
-	`;static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),window.dispatchEvent(new StorageEvent("storage",{key:"theme",newValue:e}))}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),customElements.define("k-theme-switcher",ThemeSwitcher);
+	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-switcher",ThemeSwitcher);

package/docs/src/utils/context.js

@@ -0,0 +1 @@
+const contexts={},getContext=e=>(contexts[e]||(contexts[e]={value:void 0,subscribers:new Set}),contexts[e]);export const createContext=(e="global",t)=>{const s=getContext(e);return void 0!==t&&void 0===s.value&&(s.value=t),{get:()=>s.value,set:e=>{s.value=e,s.subscribers.forEach(t=>t(e))},subscribe:e=>(s.subscribers.add(e),e(s.value),()=>s.subscribers.delete(e)),unsubscribe:e=>s.subscribers.delete(e)}};export default createContext;

package/docs/src/utils/theme.js

@@ -0,0 +1 @@
+import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme());themeContext.subscribe(e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme};

package/docs/utils/context.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Context Utility - Kempo UI</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <main>
+    <h1>Context Utility</h1>
+    
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Usage</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#api">API Methods</a><br />
+          <a href="#examples">Examples</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>createContext</code> utility provides a simple way to create global or named shared state that components can subscribe to. It enables reactive state management with automatic subscriber notifications on value changes.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and create a context to manage shared state:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-comment">// Create a named context with initial value</span><br /><span class="hljs-keyword">const</span> userContext = createContext(<span class="hljs-string">'user'</span>, { <span class="hljs-attr">name</span>: <span class="hljs-string">'Guest'</span> });<br /><br /><span class="hljs-comment">// Subscribe to changes</span><br />userContext.subscribe(<span class="hljs-function">(<span class="hljs-params">user</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'User changed:'</span>, user);<br />});<br /><br /><span class="hljs-comment">// Update the context value</span><br />userContext.set({ <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span> });</code></pre>
+
+    <h3 id="api"><a href="#api" class="no-link">API Methods</a></h3>
+
+    <h4><code>createContext(name, initialValue)</code></h4>
+    <p>Creates or retrieves a context with the specified name.</p>
+    <h5><code>name<i>: string</i></code> (optional)</h5>
+    <p>The name of the context. Defaults to <code>'global'</code>. Using the same name returns the same context instance.</p>
+    <h5><code>initialValue<i>: any</i></code> (optional)</h5>
+    <p>The initial value for the context. Only set if the context doesn't already have a value.</p>
+    <h5>Returns: <code>Object</code></h5>
+    <p>An object with the following methods:</p>
+
+    <h4><code>get()</code></h4>
+    <p>Returns the current value of the context.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> currentValue = userContext.get();</code></pre>
+
+    <h4><code>set(value)</code></h4>
+    <p>Updates the context value and notifies all subscribers.</p>
+    <pre><code class="hljs javascript">userContext.set({ <span class="hljs-attr">name</span>: <span class="hljs-string">'Jane Doe'</span>, <span class="hljs-attr">role</span>: <span class="hljs-string">'admin'</span> });</code></pre>
+
+    <h4><code>subscribe(callback)</code></h4>
+    <p>Subscribes to context changes. The callback is immediately invoked with the current value, then called again whenever the value changes.</p>
+    <h5><code>callback<i>: Function</i></code></h5>
+    <p>Function to call when the context value changes. Receives the new value as an argument.</p>
+    <h5>Returns: <code>Function</code></h5>
+    <p>An unsubscribe function to remove the subscription.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> unsubscribe = userContext.subscribe(<span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'New value:'</span>, value);<br />});<br /><br /><span class="hljs-comment">// Later, stop listening</span><br />unsubscribe();</code></pre>
+
+    <h4><code>unsubscribe(callback)</code></h4>
+    <p>Removes a subscriber callback from the context.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> <span class="hljs-built_in">console</span>.log(value);<br />userContext.subscribe(handler);<br />userContext.unsubscribe(handler);</code></pre>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+
+    <h4>Theme Management</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-keyword">const</span> themeContext = createContext(<span class="hljs-string">'theme'</span>, <span class="hljs-string">'light'</span>);<br /><br /><span class="hljs-comment">// Components can subscribe to theme changes</span><br />themeContext.subscribe(<span class="hljs-function">(<span class="hljs-params">theme</span>) =&gt;</span> {<br />  <span class="hljs-built_in">document</span>.body.className = theme;<br />});<br /><br /><span class="hljs-comment">// Toggle theme from anywhere</span><br /><span class="hljs-keyword">const</span> toggleTheme = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />  <span class="hljs-keyword">const</span> current = themeContext.get();<br />  themeContext.set(current === <span class="hljs-string">'light'</span> ? <span class="hljs-string">'dark'</span> : <span class="hljs-string">'light'</span>);<br />};</code></pre>
+
+    <h4>Component State Sharing</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-keyword">const</span> cartContext = createContext(<span class="hljs-string">'cart'</span>, []);<br /><br /><span class="hljs-comment">// Add item from one component</span><br /><span class="hljs-keyword">const</span> addToCart = <span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> items = cartContext.get();<br />  cartContext.set([...items, item]);<br />};<br /><br /><span class="hljs-comment">// Display cart in another component</span><br />cartContext.subscribe(<span class="hljs-function">(<span class="hljs-params">items</span>) =&gt;</span> {<br />  <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.cart-count'</span>).textContent = items.length;<br />});</code></pre>
+
+    <h4>Global vs Named Contexts</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-comment">// Use default global context</span><br /><span class="hljs-keyword">const</span> globalCtx = createContext();<br />globalCtx.set({ <span class="hljs-attr">appReady</span>: <span class="hljs-literal">true</span> });<br /><br /><span class="hljs-comment">// Named contexts are isolated</span><br /><span class="hljs-keyword">const</span> userCtx = createContext(<span class="hljs-string">'user'</span>);<br /><span class="hljs-keyword">const</span> settingsCtx = createContext(<span class="hljs-string">'settings'</span>);<br /><br /><span class="hljs-comment">// Same name returns the same context instance</span><br /><span class="hljs-keyword">const</span> userCtx2 = createContext(<span class="hljs-string">'user'</span>);<br /><span class="hljs-built_in">console</span>.log(userCtx === userCtx2); <span class="hljs-comment">// true</span></code></pre>
+
+    <h4>Working Example</h4>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML & JavaScript">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"context-demo"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Current count: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"count-display"</span>&gt;</span>0<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"increment"</span>&gt;</span>Increment<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"decrement"</span>&gt;</span>Decrement<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"reset"</span>&gt;</span>Reset<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript">
+<span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/context.js'</span>;
+
+<span class="hljs-keyword">const</span> counterContext = createContext(<span class="hljs-string">'counter'</span>, <span class="hljs-number">0</span>);
+
+<span class="hljs-comment">// Subscribe to updates</span>
+counterContext.subscribe(<span class="hljs-function">(<span class="hljs-params">count</span>) =&gt;</span> {
+  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'count-display'</span>).textContent = count;
+});
+
+<span class="hljs-comment">// Button handlers</span>
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'increment'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+    counterContext.<span class="hljs-title function_">set</span>(counterContext.<span class="hljs-title function_">get</span>() + <span class="hljs-number">1</span>);
+  });
+
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'decrement'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+    counterContext.<span class="hljs-title function_">set</span>(counterContext.<span class="hljs-title function_">get</span>() - <span class="hljs-number">1</span>);
+  });
+
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'reset'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+    counterContext.<span class="hljs-title function_">set</span>(<span class="hljs-number">0</span>);
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div id="context-demo">
+            <p>Current count: <strong id="count-display">0</strong></p>
+            <button id="increment" class="primary">Increment</button>
+            <button id="decrement">Decrement</button>
+            <button id="reset" class="danger">Reset</button>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+  <script type="module">
+    import createContext from '../src/utils/context.js';
+
+    const counterContext = createContext('counter-demo', 0);
+
+    counterContext.subscribe(count => {
+      document.getElementById('count-display').textContent = count;
+    });
+
+    document.getElementById('increment').addEventListener('click', () => {
+      counterContext.set(counterContext.get() + 1);
+    });
+
+    document.getElementById('decrement').addEventListener('click', () => {
+      counterContext.set(counterContext.get() - 1);
+    });
+
+    document.getElementById('reset').addEventListener('click', () => {
+      counterContext.set(0);
+    });
+  </script>
+</body>
+</html>

package/docs/utils/theme.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Theme Utility - Kempo UI</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <main>
+    <h1>Theme Utility</h1>
+    
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Usage</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#api">API Methods</a><br />
+          <a href="#examples">Examples</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>theme</code> utility provides a centralized way to manage the application's theme state. It handles theme persistence via localStorage, automatic system preference detection, and reactive updates across components. This utility works independently of the ThemeSwitcher component, allowing any part of your application to read, set, or subscribe to theme changes.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the theme utility to manage application themes:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-comment">// Get current theme</span><br /><span class="hljs-keyword">const</span> currentTheme = theme.get(); <span class="hljs-comment">// 'auto', 'light', or 'dark'</span><br /><br /><span class="hljs-comment">// Set theme</span><br />theme.set(<span class="hljs-string">'dark'</span>);<br /><br /><span class="hljs-comment">// Subscribe to theme changes</span><br /><span class="hljs-keyword">const</span> unsubscribe = theme.subscribe(<span class="hljs-function">(<span class="hljs-params">newTheme</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Theme changed to:'</span>, newTheme);<br />});</code></pre>
+
+    <h3 id="api"><a href="#api" class="no-link">API Methods</a></h3>
+
+    <h4><code>theme.get()</code></h4>
+    <p>Returns the current theme value.</p>
+    <h5>Returns: <code>string</code></h5>
+    <p>One of: <code>'auto'</code>, <code>'light'</code>, or <code>'dark'</code></p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> currentTheme = theme.get();<br /><span class="hljs-built_in">console</span>.log(currentTheme); <span class="hljs-comment">// 'auto', 'light', or 'dark'</span></code></pre>
+
+    <h4><code>theme.set(value)</code></h4>
+    <p>Sets the theme and automatically persists it to localStorage and updates the DOM.</p>
+    <h5><code>value<i>: string</i></code></h5>
+    <p>The theme to set. Must be one of: <code>'auto'</code>, <code>'light'</code>, or <code>'dark'</code></p>
+    <pre><code class="hljs javascript">theme.set(<span class="hljs-string">'dark'</span>);</code></pre>
+
+    <h4><code>theme.subscribe(callback)</code></h4>
+    <p>Subscribes to theme changes. The callback is immediately invoked with the current theme, then called again whenever the theme changes.</p>
+    <h5><code>callback<i>: Function</i></code></h5>
+    <p>Function to call when the theme changes. Receives the new theme value as an argument.</p>
+    <h5>Returns: <code>Function</code></h5>
+    <p>An unsubscribe function to remove the subscription.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> unsubscribe = theme.subscribe(<span class="hljs-function">(<span class="hljs-params">newTheme</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Theme is now:'</span>, newTheme);<br />});<br /><br /><span class="hljs-comment">// Later, stop listening</span><br />unsubscribe();</code></pre>
+
+    <h4><code>theme.getCalculated()</code></h4>
+    <p>Returns the effective theme, resolving <code>'auto'</code> to either <code>'light'</code> or <code>'dark'</code> based on the user's system preference.</p>
+    <h5>Returns: <code>string</code></h5>
+    <p>Either <code>'light'</code> or <code>'dark'</code></p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> effectiveTheme = theme.getCalculated();<br /><span class="hljs-built_in">console</span>.log(effectiveTheme); <span class="hljs-comment">// Always 'light' or 'dark'</span></code></pre>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+
+    <h4>Reading Theme Without Component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-comment">// Get theme anywhere in your app</span><br /><span class="hljs-keyword">const</span> currentTheme = theme.get();<br /><span class="hljs-keyword">const</span> isDark = theme.getCalculated() === <span class="hljs-string">'dark'</span>;<br /><br /><span class="hljs-keyword">if</span>(isDark){<br />  <span class="hljs-comment">// Apply dark-specific logic</span><br />}</code></pre>
+
+    <h4>Component Subscribing to Theme</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { LitElement, html } <span class="hljs-keyword">from</span> <span class="hljs-string">'lit'</span>;<br /><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">LitElement</span> {<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">theme</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br />  };<br /><br />  <span class="hljs-title function_">connectedCallback</span>() {<br />    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">connectedCallback</span>();<br />    <span class="hljs-variable language_">this</span>.<span class="hljs-property">unsubscribe</span> = theme.<span class="hljs-title function_">subscribe</span>(<span class="hljs-function">(<span class="hljs-params">t</span>) =&gt;</span> {<br />      <span class="hljs-variable language_">this</span>.<span class="hljs-property">theme</span> = t;<br />    });<br />  }<br /><br />  <span class="hljs-title function_">disconnectedCallback</span>() {<br />    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">disconnectedCallback</span>();<br />    <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">unsubscribe</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">unsubscribe</span>();<br />  }<br /><br />  <span class="hljs-title function_">render</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`&lt;p&gt;Current theme: ${this.theme}&lt;/p&gt;`</span>;<br />  }<br />}</code></pre>
+
+    <h4>Setting Theme Programmatically</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-comment">// Set theme based on user preference from API</span><br /><span class="hljs-keyword">const</span> userPreferences = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetchUserPreferences</span>();<br />theme.<span class="hljs-title function_">set</span>(userPreferences.<span class="hljs-property">theme</span>);<br /><br /><span class="hljs-comment">// Toggle between light and dark</span><br /><span class="hljs-keyword">const</span> <span class="hljs-title function_">toggleTheme</span> = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />  <span class="hljs-keyword">const</span> current = theme.<span class="hljs-title function_">get</span>();<br />  <span class="hljs-keyword">if</span>(current === <span class="hljs-string">'dark'</span>) theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'light'</span>);<br />  <span class="hljs-keyword">else</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'dark'</span>);<br />};</code></pre>
+
+    <h4>Working Example</h4>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML & JavaScript">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"theme-demo"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Current theme: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"theme-display"</span>&gt;</span>auto<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Calculated: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"calculated-display"</span>&gt;</span>dark<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"set-auto"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"set-light"</span>&gt;</span>Light<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"set-dark"</span>&gt;</span>Dark<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript">
+<span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/theme.js'</span>;
+
+<span class="hljs-comment">// Subscribe to updates</span>
+theme.subscribe(<span class="hljs-function">(<span class="hljs-params">t</span>) =&gt;</span> {
+  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'theme-display'</span>).textContent = t;
+  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'calculated-display'</span>).textContent = 
+    theme.<span class="hljs-title function_">getCalculated</span>();
+});
+
+<span class="hljs-comment">// Button handlers</span>
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'set-auto'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'auto'</span>));
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'set-light'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'light'</span>));
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'set-dark'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'dark'</span>));
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div id="theme-demo">
+            <p>Current theme: <strong id="theme-display">auto</strong></p>
+            <p>Calculated: <strong id="calculated-display">dark</strong></p>
+            <button id="set-auto">Auto</button>
+            <button id="set-light" class="primary">Light</button>
+            <button id="set-dark" class="danger">Dark</button>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Automatic Features</h3>
+    <h4>localStorage Persistence</h4>
+    <p>The theme utility automatically saves the current theme to <code>localStorage</code> with the key <code>'theme'</code>. This means the user's theme preference persists across page reloads and browser sessions.</p>
+
+    <h4>DOM Attribute Updates & Kempo CSS Integration</h4>
+    <p>Whenever the theme changes, it's automatically applied to <code>document.documentElement</code> as a <code>theme</code> attribute. This sets the <code>color-scheme</code> property which enables Kempo CSS's <code>light-dark()</code> function to work correctly.</p>
+    <p>Kempo CSS provides theme-aware CSS custom properties that automatically adapt to light and dark modes. See the <a href="https://dustinpoissant.github.io/kempo-css/" target="_blank" rel="noopener noreferrer">Kempo CSS documentation</a> for details on available color variables and theming.</p>
+
+    <h4>System Preference Detection</h4>
+    <p>When the theme is set to <code>'auto'</code>, the utility monitors the system's <code>prefers-color-scheme</code> media query and updates the <code>auto-theme</code> attribute on the document element. The <code>getCalculated()</code> method resolves the actual theme based on this preference.</p>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+  <script type="module">
+    import theme from '../src/utils/theme.js';
+
+    theme.subscribe(t => {
+      document.getElementById('theme-display').textContent = t;
+      document.getElementById('calculated-display').textContent = theme.getCalculated();
+    });
+
+    document.getElementById('set-auto').addEventListener('click', () => theme.set('auto'));
+    document.getElementById('set-light').addEventListener('click', () => theme.set('light'));
+    document.getElementById('set-dark').addEventListener('click', () => theme.set('dark'));
+  </script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/ColorPicker.js

@@ -75,6 +75,29 @@ export default class ColorPicker extends ShadowComponent {
 		
 		if(changedProperties.has('red') || changedProperties.has('green') || changedProperties.has('blue') || changedProperties.has('alpha') || changedProperties.has('format')){
 			this.updateFormValue();
+			this.syncInputs(changedProperties.has('format'));
+		}
+	}
+	
+	syncInputs(formatChanged = false){
+		const textInput = this.shadowRoot?.querySelector('#text');
+		const colorInput = this.shadowRoot?.querySelector('#color');
+		const formatSelect = this.shadowRoot?.querySelector('#format');
+		const activeElement = this.shadowRoot?.activeElement;
+		
+		// Always update text input if format changed, otherwise only if not focused
+		if(textInput && (formatChanged || activeElement !== textInput)){
+			textInput.value = this.value;
+		}
+		
+		// Update color input if it's not focused
+		if(colorInput && activeElement !== colorInput){
+			colorInput.value = this.constructor.formats.hex.toString(this.red || 0, this.green || 0, this.blue || 0, 1);
+		}
+		
+		// Update format select if it's not focused
+		if(formatSelect && activeElement !== formatSelect){
+			formatSelect.value = this.format;
 		}
 	}
 	
@@ -137,11 +160,42 @@ export default class ColorPicker extends ShadowComponent {
 			this.blue = parsed.b;
 			this.alpha = 1;
 		}
+		this.forwardEvent(event);
 	}
 	onTextInputChange(event){
 		this.value = event.target.value;
+		this.forwardEvent(event);
+	}
+	onTextInput(event){
+		this.value = event.target.value;
+		this.forwardEvent(event);
+	}
+	onColorInput(event){
+		const parsed = this.constructor.formats.hex.parse(event.target.value);
+		if (parsed) {
+			this.red = parsed.r;
+			this.green = parsed.g;
+			this.blue = parsed.b;
+			this.alpha = 1;
+		}
+		this.forwardEvent(event);
+	}
+	onFormatChange(event){
+		this.format = event.target.value;
+		this.forwardEvent(event);
+	}
+	onFormatInput(event){
+		this.format = event.target.value;
+		this.forwardEvent(event);
 	}
 	
+	/*
+	  Event Forwarding
+	*/
+	forwardEvent = (event) => {
+		this.dispatchEvent(new event.constructor(event.type, event));
+	};
+	
 	/* Rendering */
 	render(){
 		return html`
@@ -149,7 +203,10 @@ export default class ColorPicker extends ShadowComponent {
 				<select
 					id="format"
 					value="${this.format}"
-					@change=${(e) => this.format = e.target.value}
+					@change=${this.onFormatChange}
+					@input=${this.onFormatInput}
+					@focus=${this.forwardEvent}
+					@blur=${this.forwardEvent}
 				>${
 					this.constructor.formats ? Object.keys(this.constructor.formats).map(formatName => html`<option value="${formatName}" ?selected=${this.format === formatName}>${formatName.toUpperCase()}</option>`) : null
 				}</select>
@@ -158,6 +215,9 @@ export default class ColorPicker extends ShadowComponent {
 					type="text"
 					value="${this.value}"
 					@change=${this.onTextInputChange}
+					@input=${this.onTextInput}
+					@focus=${this.forwardEvent}
+					@blur=${this.forwardEvent}
 				/>
 				<div id="color-wrapper">
 					<input
@@ -165,6 +225,9 @@ export default class ColorPicker extends ShadowComponent {
 						type="color"
 						value="${this.constructor.formats.hex.toString(this.red || 0, this.green || 0, this.blue || 0, 1)}"
 						@change=${this.onColorInputChange}
+						@input=${this.onColorInput}
+						@focus=${this.forwardEvent}
+						@blur=${this.forwardEvent}
 					/>
 				</div>
 			</div>