kempo-ui 0.0.29 → 0.0.30

package/.github/copilot-instructions.md

@@ -147,3 +147,19 @@ export default class MyComponent extends HybridComponent {
 - Wrap dependent components inside a parent `ktf-test-framework` element. Children find it via `closest('ktf-test-framework')` and call its methods. The framework can query its subtree to orchestrate children.
 
 - Avoid `window` globals and global custom events for coordination. If broadcast is needed, scope events to the framework element; reserve window events for global, non-visual concerns (e.g., settings changes).
+
+## Development Workflow
+
+### Local Development Server
+- **DO NOT** start a development server - one is already running
+- Default port: **8083**
+- Base URL: `http://localhost:8083`
+- Documentation URLs follow the directory/file structure in `docs/` (e.g., `docs/components/color-picker.html` → `http://localhost:8083/components/color-picker.html`)
+- Use this server for all testing and verification
+
+### Testing and Verification
+- **ALWAYS** verify changes using the live documentation on the running server
+- Use Chrome DevTools Protocol (chrome-devtools-mcp) for interactive testing
+- **DO NOT** create one-off test files or framework-less tests
+- Test components in their natural documentation environment
+- Validate both functionality and visual appearance

package/dist/components/Accordion.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists,boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
 		:host {
 			display: block;
 			border: 1px solid var(--c_border, #ccc);

package/dist/components/ColorPicker.js

@@ -0,0 +1,34 @@
+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"}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue)return"#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,e]of Object.entries(this.constructor.formats))if(e.detect(t)){const a=e.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`
+			<div id="container">
+				<select
+					id="format"
+				>${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
+					id="color"
+					type="color"
+					value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
+					@change=${this.onColorInputChange}
+				/>
+			</div>
+		`}static styles=css`
+		#container {
+			display: flex;
+			align-items: stretch;
+		}
+		#format {
+			width: 7rem;
+		}
+		#text {
+			flex: 1 1 auto;
+		}
+		#color {
+			width: 3rem;
+			height: 100% !important;
+		}
+	`;static namedColors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};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,e,r,s=t.slice(1),o=s.length,d=1,n=!1;return 3===o||4===o?(a=parseInt(s[0]+s[0],16),e=parseInt(s[1]+s[1],16),r=parseInt(s[2]+s[2],16),4===o&&(d=parseInt(s[3]+s[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(s.slice(0,2),16),e=parseInt(s.slice(2,4),16),r=parseInt(s.slice(4,6),16),8===o&&(d=parseInt(s.slice(6,8),16)/255,n=!0)),{r:a,g:e,b:r,a:d,hasAlpha:n}},toString:(t,a,e,r)=>{let s=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(e=Math.round(e))).toString(16).padStart(6,"0");if(r<1){s+=Math.round(255*r).toString(16).padStart(2,"0")}return"#"+s}},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,e,r)=>(t=Math.round(t),a=Math.round(a),e=Math.round(e),r<1?`rgba(${t}, ${a}, ${e}, ${r})`:`rgb(${t}, ${a}, ${e})`)},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 e=parseFloat(a[1])/360,r=parseFloat(a[2])/100,s=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const d=!!a[4];let n,h,l;if(0===r)n=h=l=s;else{const t=(t,a,e)=>(e<0&&(e+=1),e>1&&(e-=1),e<1/6?t+6*(a-t)*e:e<.5?a:e<2/3?t+(a-t)*(2/3-e)*6:t),a=s<.5?s*(1+r):s+r-s*r,o=2*s-a;n=t(o,a,e+1/3),h=t(o,a,e),l=t(o,a,e-1/3)}return{r:Math.round(255*n),g:Math.round(255*h),b:Math.round(255*l),a:o,hasAlpha:d}},toString:(t,a,e,r)=>{t/=255,a/=255,e/=255;const s=Math.max(t,a,e),o=Math.min(t,a,e);let d,n,h=(s+o)/2;if(s===o)d=n=0;else{const r=s-o;switch(n=h>.5?r/(2-s-o):r/(s+o),s){case t:d=(a-e)/r+(a<e?6:0);break;case a:d=(e-t)/r+2;break;case e:d=(t-a)/r+4}d/=6}return d=Math.round(360*d),n=Math.round(100*n),h=Math.round(100*h),r<1?`hsla(${d}, ${n}%, ${h}%, ${r})`:`hsl(${d}, ${n}%, ${h}%)`}},named:{detect:t=>t.toLowerCase()in ColorPicker.namedColors,parse:t=>({...this.constructor.formats.hex.parse(ColorPicker.namedColors[t.toLowerCase()]),hasAlpha:!1}),toString:(t,a,e,r)=>this.constructor.formats.hex.toString(t,a,e,r)},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 e,r,s,o=parseFloat(a[1]),d=parseFloat(a[2])/100,n=parseFloat(a[3])/100,h=a[4]?parseFloat(a[4]):1,l=1-d-n;if(l>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=d+l*(1-a),h=d+l*a;t<1/6?(e=d+l,r=h,s=d):t<2/6?(e=n,r=d+l,s=d):t<.5?(e=d,r=d+l,s=h):t<4/6?(e=d,r=n,s=d+l):t<5/6?(e=h,r=d,s=d+l):(e=d+l,r=d,s=n)}else e=r=s=d;const f=!!a[4];return{r:Math.round(255*e),g:Math.round(255*r),b:Math.round(255*s),a:h,hasAlpha:f}},toString:(t,a,e,r)=>{t/=255,a/=255,e/=255;const s=Math.max(t,a,e),o=Math.min(t,a,e),d=s-o;let n=0;if(0!==d){switch(s){case t:n=(a-e)/d%6;break;case a:n=(e-t)/d+2;break;case e:n=(t-a)/d+4}n=Math.round(60*n),n<0&&(n+=360)}const h=Math.round(100*o),l=Math.round(100*(1-s));return r<1?`hwb(${n} ${h}% ${l}% / ${r})`:`hwb(${n} ${h}% ${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 e=parseFloat(a[1])/100,r=parseFloat(a[2]),s=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,d=(100*e+16)/116,n=d+r/500,h=d-s/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),f=1*(d>.206893034?d*d*d:(d-16/116)/7.787),i=1.08883*(h>.206893034?h*h*h:(h-16/116)/7.787),c=3.2404542*l-1.5371385*f-.4985314*i,u=-.969266*l+1.8760108*f+.041556*i,p=.0556434*l-.2040259*f+1.0572252*i,b=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,M=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,g=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,b))),g:Math.round(255*Math.max(0,Math.min(1,M))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:m}},toString:(t,a,e,r)=>{a/=255,e/=255;const s=(.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*(e=e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*e)/1,d=(.0193339*t+.119192*a+.9503041*e)/1.08883,n=s>.008856?Math.pow(s,1/3):7.787*s+16/116,h=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=d>.008856?Math.pow(d,1/3):7.787*d+16/116,f=Math.round(100*(116*h-16))/100,i=Math.round(500*(n-h)*100)/100,c=Math.round(200*(h-l)*100)/100;return r<1?`lab(${f}% ${i} ${c} / ${r})`:`lab(${f}% ${i} ${c})`}},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 e=parseFloat(a[1]),r=parseFloat(a[2]),s=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,d=(100*(e/100)+16)/116,n=d+r*Math.cos(s*Math.PI/180)/500,h=d-r*Math.sin(s*Math.PI/180)/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),f=1*(d>.206893034?d*d*d:(d-16/116)/7.787),i=1.08883*(h>.206893034?h*h*h:(h-16/116)/7.787),c=3.2404542*l-1.5371385*f-.4985314*i,u=-.969266*l+1.8760108*f+.041556*i,p=.0556434*l-.2040259*f+1.0572252*i,b=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,M=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,g=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,b))),g:Math.round(255*Math.max(0,Math.min(1,M))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:m}},toString:(t,a,e,r)=>{a/=255,e/=255;const s=(.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*(e=e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*e)/1,d=(.0193339*t+.119192*a+.9503041*e)/1.08883,n=s>.008856?Math.pow(s,1/3):7.787*s+16/116,h=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=(116*h-16)/100,f=500*(n-h),i=200*(h-(d>.008856?Math.pow(d,1/3):7.787*d+16/116)),c=Math.sqrt(f*f+i*i);let u=180*Math.atan2(i,f)/Math.PI;u<0&&(u+=360);const p=Math.round(100*l*100)/100,b=Math.round(100*c)/100,M=Math.round(100*u)/100;return r<1?`lch(${p}% ${b} ${M} / ${r})`:`lch(${p}% ${b} ${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 e=parseFloat(a[1])/100,r=parseFloat(a[2]),s=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,d=e+.3963377774*r+.2158037573*s,n=e-.1055613458*r-.0638541728*s,h=e-.0894841775*r-1.291485548*s,l=4.0767416621*d-3.3077115913*n+.2309699292*h,f=-1.2684380046*d+2.6097574011*n-.3413193965*h,i=-.0041960863*d-.7034186147*n+1.707614701*h,c=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,u=f<=.0031308?12.92*f:1.055*Math.pow(f,1/2.4)-.055,p=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,c))),g:Math.round(255*Math.max(0,Math.min(1,u))),b:Math.round(255*Math.max(0,Math.min(1,p))),a:o,hasAlpha:b}},toString:(t,a,e,r)=>{a/=255,e/=255;const s=.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*(e=e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*e,d=.0883024619*t+.2817188376*a+.6299787005*e,n=Math.pow(s,1/3),h=Math.pow(o,1/3),l=Math.pow(d,1/3),f=.2104542553*n+.793617785*h-.0040720468*l,i=1.9779984951*n-2.428592205*h+.4505937099*l,c=.0259040371*n+.7827717662*h-.808675766*l,u=Math.round(100*f*100)/100,p=Math.round(100*i)/100,b=Math.round(100*c)/100;return r<1?`oklab(${u}% ${p} ${b} / ${r})`:`oklab(${u}% ${p} ${b})`}},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 e=parseFloat(a[1])/100,r=parseFloat(a[2]),s=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,d=r*Math.cos(s*Math.PI/180),n=r*Math.sin(s*Math.PI/180),h=e+.3963377774*d+.2158037573*n,l=e-.1055613458*d-.0638541728*n,f=e-.0894841775*d-1.291485548*n,i=4.0767416621*h-3.3077115913*l+.2309699292*f,c=-1.2684380046*h+2.6097574011*l-.3413193965*f,u=-.0041960863*h-.7034186147*l+1.707614701*f,p=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,b=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,M=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,p))),g:Math.round(255*Math.max(0,Math.min(1,b))),b:Math.round(255*Math.max(0,Math.min(1,M))),a:o,hasAlpha:g}},toString:(t,a,e,r)=>{a/=255,e/=255;const s=.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*(e=e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*e,d=.0883024619*t+.2817188376*a+.6299787005*e,n=Math.pow(s,1/3),h=Math.pow(o,1/3),l=Math.pow(d,1/3),f=.2104542553*n+.793617785*h-.0040720468*l,i=1.9779984951*n-2.428592205*h+.4505937099*l,c=.0259040371*n+.7827717662*h-.808675766*l,u=Math.sqrt(i*i+c*c);let p=180*Math.atan2(c,i)/Math.PI;p<0&&(p+=360);const b=Math.round(100*f*100)/100,M=Math.round(100*u)/100,g=Math.round(100*p)/100;return r<1?`oklch(${b}% ${M} ${g} / ${r})`:`oklch(${b}% ${M} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);

package/dist/components/Table.js

@@ -1,4 +1,4 @@
-import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import toTitleCase from"../utils/toTitleCase.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}this.updateContainerWidths()}updateContainerWidths(){const e=this.columnSizes.total+"px",t=this.shadowRoot.getElementById("fields"),s=this.shadowRoot.getElementById("top"),i=this.shadowRoot.getElementById("bottom"),r=this.shadowRoot.getElementById("records");t&&(t.style.width=e),s&&(s.style.width=e),i&&(i.style.width=e),r&&(r.style.width=e)}renderFieldsTemplate(){this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=[];return this.enableSelection&&e.push(html`
+import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}this.updateContainerWidths()}updateContainerWidths(){const e=this.columnSizes.total+"px",t=this.shadowRoot.getElementById("fields"),s=this.shadowRoot.getElementById("top"),i=this.shadowRoot.getElementById("bottom"),r=this.shadowRoot.getElementById("records");t&&(t.style.width=e),s&&(s.style.width=e),i&&(i.style.width=e),r&&(r.style.width=e)}renderFieldsTemplate(){this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=[];return this.enableSelection&&e.push(html`
         <div class="field controls cell field-select" style="width: 40px">
           <input 
             type="checkbox" 

package/dist/utils/cookie.js

@@ -0,0 +1 @@
+export const saveCookie=(e,o,t=43200,i="/")=>{const n=new Date(Date.now()+60*t*1e3);document.cookie=`${e}=${o};expires=${n.toUTCString()};path=${i}`};export const getCookie=e=>{const o=document.cookie.split(";").map(e=>e.trim().split("=")),t=o.find(o=>o[0]===e);return t?t[1]:null};export const deleteCookie=e=>{document.cookie=`${e}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`};export default{saveCookie:saveCookie,getCookie:getCookie,deleteCookie:deleteCookie};

package/dist/utils/object.js

@@ -0,0 +1 @@
+import{typeOf}from"./type.js";export const toJson=e=>JSON.stringify(e,(t,n)=>""!==t&&n===e?"<<Circular Reference>>":"undefined"!=typeof Element&&n instanceof Element?n.outerHTML:"function"===typeOf(n)?`<<Function ${t}>>`:n);export const flattenObject=(e,t=100,n=0,o=[])=>{const r=n+1;return null===e?{}:Object.keys(e).reduce((n,c)=>{const s=e[c],l=[...o,c].join(".");return"undefined"!==typeOf(Element)&&s instanceof Element?{...n,[l]:s.outerHTML}:null===s?{...n,[l]:null}:"object"==typeof s?t<=r?{...n,[l]:"<<Max Depth Reached>>"}:{...n,...flattenObject(s,t,r,[...o,c])}:{...n,[l]:s}},{})};export const flattenedObjects=(...e)=>e.map(e=>flattenObject(e));export const objectSummary=(e,t=100)=>{if("object"==typeof e){const n=flattenObject(e),o=[];return Object.keys(n).forEach(e=>{o.push(`${e} = ${objectSummary(n[e])}`)}),o.join(", ").substring(0,t)}return`${e}`.substring(0,t)};export const clone=e=>{const t=typeof e,n="undefined"==typeof window?class{}:window.Element;return e instanceof n?e.outerHTML:null===e?null:["string","number","boolean","undefined","bigint"].includes(t)?e:"symbol"===t?"<<SYMBOL>>":"function"===t?"<<function>>":e instanceof Array?e.map(e=>clone(e)):"object"===t?Object.keys(e).reduce((t,n)=>({...t,[n]:clone(e[n])}),{}):e};export const equalObjs=(...e)=>{if(e.length<2)return!0;const t=toJson(e[0]);for(let n=1;n<e.length;n++)if(t!==toJson(e[n]))return!1;return!0};const pruneVar=e=>void 0===e?[void 0,!0]:"string"==typeof e?[e,""===e]:e instanceof Array?[e,0===e.length]:null===e?[e,!1]:"object"==typeof e?pruneObject(e):[e,!1],pruneObject=e=>{const t={};return Object.keys(e).forEach(n=>{const[o,r]=pruneVar(e[n]);r||(t[n]=o)}),[t,0===Object.keys(t).length]};export const prune=e=>pruneObject(e)[0];export const getAllKeys=(...e)=>[...new Set(e.map(e=>Object.keys(e)).flat())];export const getDifferencesKeys=(...e)=>getAllKeys(...e).map(t=>1!==new Set(e.map(e=>e[t])).size?t:null).filter(e=>null!==e);export const diff=(e,t)=>{const n={};function o(e,t,o){Array.isArray(t)&&Array.isArray(o)?t.length===o.length&&t.every((e,t)=>e===o[t])||(n[e.join(".")]={newValue:t,oldValue:o}):"object"==typeof t&&"object"==typeof o?r([...e],t,o):t!==o&&(n[e.join(".")]={newValue:t,oldValue:o})}function r(e,t,n){for(const r in t)if(t.hasOwnProperty(r)){o([...e,r],t[r],n[r])}}return r([],e,t),n};export const mapObject=(e,t)=>Object.entries(e).reduce((e,[n,o])=>{const[r,c]=t(n,o);return e[r]=c,e},{});export default{toJson:toJson,flattenObject:flattenObject,flattenedObjects:flattenedObjects,objectSummary:objectSummary,clone:clone,equalObjs:equalObjs,pruneVar:pruneVar,pruneObject:pruneObject,prune:prune,getAllKeys:getAllKeys,getDifferencesKeys:getDifferencesKeys,diff:diff,mapObject:mapObject};

package/dist/utils/string.js

@@ -0,0 +1 @@
+export const camelToDash=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();export const dashToCamel=e=>e.replace(/-([a-z])/g,(e,a)=>a.toUpperCase());export const isCamelCase=e=>/[a-z][A-Z]/.test(e);export const getCase=e=>isCamelCase(e)?{camel:e,dash:camelToDash(e)}:{camel:dashToCamel(e),dash:e};export const escapeHTML=e=>e.replace(/[&<>"'/]/g,e=>{switch(e){case"&":return"&amp;";case"<":return"&lt;";case">":return"&gt;";case'"':return"&quot;";case"'":return"&#39;";case"/":return"&#x2F;";default:return e}});export const unescapeHTML=e=>e.replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F;/g,e=>{switch(e){case"&amp;":return"&";case"&lt;":return"<";case"&gt;":return">";case"&quot;":return'"';case"&#39;":return"'";case"&#x2F;":return"/";default:return e}});export const trim=(e,a)=>e.replace(new RegExp(`^[${a}]+|[${a}]+$`,"g"),"");export const compoundKey=e=>trim(e.join("."),".");export const toTitleCase=e=>e.replace(/([A-Z])/g," $1").split(/[\s_-]+/).filter(e=>e.length>0).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(" ");export default{camelToDash:camelToDash,dashToCamel:dashToCamel,isCamelCase:isCamelCase,getCase:getCase,escapeHTML:escapeHTML,unescapeHTML:unescapeHTML,trim:trim,compoundKey:compoundKey,toTitleCase:toTitleCase};

package/dist/utils/type.js

@@ -0,0 +1 @@
+export const typeOf=e=>null===e?"null":e instanceof Array?"array":"undefined"!=typeof Element&&e instanceof Element?"element":typeof e;export const isType=(e,t)=>typeOf(e)===t;export default{typeOf:typeOf,isType:isType};

package/dist/utils/wait.js

@@ -0,0 +1 @@
+const wait=e=>new Promise(i=>new Timeout(i,e)),waitFrmaes=(e=1)=>new Promise(i=>{let n=0;requestAnimationFrame(function t(){n++,n>=e?i():requestAnimationFrame(t)})});

package/docs/components/color-picker.html

@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ColorPicker Component - Kempo UI</title>
+  <link rel="stylesheet" href="../kempo.min.css">
+  <link rel="stylesheet" href="../kempo-hljs.css">
+  <link rel="icon" href="../manifest.json">
+  <script type="module" src="../init-1.js"></script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <nav-component></nav-component>
+
+  <main>
+    <h1>ColorPicker Component</h1>
+    <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>
+
+    <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 pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#colorFormats">Supported Color Formats</a><br />
+        <a href="#alphaHandling">Alpha Transparency</a><br />
+        <a href="#formatSelection">Format Selection</a><br />
+        <a href="#javascriptUsage">JavaScript Usage</a><br />
+        
+        <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+        <a href="#staticMembers">Static Members</a><br />
+      </div>
+    </k-accordion-panel>
+    </k-accordion>
+
+    <h2 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h2>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="colorFormats"><a href="#colorFormats" class="no-link">Supported Color Formats</a></h2>
+    <p>The ColorPicker supports all modern CSS color formats with automatic detection and conversion:</p>
+
+    <h3>Hex Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ff0000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ff000080"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="#ff0000"></k-color-picker>
+          <k-color-picker value="#ff000080"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>RGB/RGBA Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"rgb(255, 0, 0)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"rgba(255, 0, 0, 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="rgb(255, 0, 0)"></k-color-picker>
+          <k-color-picker value="rgba(255, 0, 0, 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>HSL/HSLA Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hsl(0, 100%, 50%)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hsla(0, 100%, 50%, 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="hsl(0, 100%, 50%)"></k-color-picker>
+          <k-color-picker value="hsla(0, 100%, 50%, 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Named Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"red"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"dodgerblue"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="red"></k-color-picker>
+          <k-color-picker value="dodgerblue"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>HWB Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hwb(0 0% 0%)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hwb(240 0% 0% / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="hwb(0 0% 0%)"></k-color-picker>
+          <k-color-picker value="hwb(240 0% 0% / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Lab Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lab(50% 50 50)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lab(50% 50 50 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="lab(50% 50 50)"></k-color-picker>
+          <k-color-picker value="lab(50% 50 50 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>LCH Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lch(50% 50 0)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lch(50% 50 0 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="lch(50% 50 0)"></k-color-picker>
+          <k-color-picker value="lch(50% 50 0 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>OKLab Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklab(50% 0.1 0.1)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklab(50% 0.1 0.1 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="oklab(50% 0.1 0.1)"></k-color-picker>
+          <k-color-picker value="oklab(50% 0.1 0.1 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>OKLCH Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklch(50% 0.1 0)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklch(50% 0.1 0 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="oklch(50% 0.1 0)"></k-color-picker>
+          <k-color-picker value="oklch(50% 0.1 0 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="alphaHandling"><a href="#alphaHandling" class="no-link">Alpha Transparency</a></h2>
+    <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>
+
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <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">"alphaPicker"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"rgba(255, 0, 0, 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setOpaque"</span>&gt;</span>Set to Blue (preserves alpha)<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">"setTransparent"</span>&gt;</span>Set to Green with Alpha<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'alphaPicker'</span>);
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setOpaque'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    picker.value = <span class="hljs-string">'#0000ff'</span>; <span class="hljs-comment">// Alpha preserved at 0.5</span>
+  });
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setTransparent'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    picker.value = <span class="hljs-string">'rgba(0, 255, 0, 0.3)'</span>; <span class="hljs-comment">// Alpha updated to 0.3</span>
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="alphaPicker" value="rgba(255, 0, 0, 0.5)" class="mb"></k-color-picker>
+          <div class="btn-grp mb">
+            <button id="setOpaque">Set to Blue (preserves alpha)</button>
+            <button id="setTransparent">Set to Green with Alpha</button>
+          </div>
+          <script>
+            const alphaPicker = document.getElementById('alphaPicker');
+            document.getElementById('setOpaque').addEventListener('click', ()=>{
+              alphaPicker.value = '#0000ff'; // Alpha preserved at 0.5
+            });
+            document.getElementById('setTransparent').addEventListener('click', ()=>{
+              alphaPicker.value = 'rgba(0, 255, 0, 0.3)'; // Alpha updated to 0.3
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="formatSelection"><a href="#formatSelection" class="no-link">Format Selection</a></h2>
+    <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>
+
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hsl"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ff0000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"lab"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#00ff00"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker format="hsl" value="#ff0000"></k-color-picker>
+          <k-color-picker format="lab" value="#00ff00"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h2>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <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>
+<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>
+<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>
+<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>
+<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>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jsPicker'</span>);
+  <span class="hljs-keyword">const</span> valueDisplay = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorValue'</span>);
+  
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    picker.value = <span class="hljs-string">'oklch(70% 0.2 180)'</span>;
+  });
+  
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'getColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    valueDisplay.textContent = <span class="hljs-string">`Current color: <span class="hljs-subst">${picker.value}</span>`</span>;
+  });
+  
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeFormat'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    picker.format = <span class="hljs-string">'hex'</span>;
+    valueDisplay.textContent = <span class="hljs-string">`Switched to hex format: <span class="hljs-subst">${picker.value}</span>`</span>;
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="jsPicker" class="mb"></k-color-picker>
+          <div class="btn-grp mb">
+            <button id="setColor">Set Color</button>
+            <button id="getColor">Get Color</button>
+            <button id="changeFormat">Change Format</button>
+          </div>
+          <p id="colorValue">Color value will appear here</p>
+          <script>
+            const jsPicker = document.getElementById('jsPicker');
+            const valueDisplay = document.getElementById('colorValue');
+            
+            document.getElementById('setColor').addEventListener('click', ()=>{
+              jsPicker.value = 'oklch(70% 0.2 180)';
+            });
+            
+            document.getElementById('getColor').addEventListener('click', ()=>{
+              valueDisplay.textContent = `Current color: ${jsPicker.value}`;
+            });
+            
+            document.getElementById('changeFormat').addEventListener('click', ()=>{
+              jsPicker.format = 'hex';
+              valueDisplay.textContent = `Switched to hex format: ${jsPicker.value}`;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new ColorPicker()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>format<i>: string</i></code></h5>
+    <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>
+
+    <h5><code>value<i>: string</i></code></h5>
+    <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>
+
+    <h5><code>red<i>: number</i></code></h5>
+    <p>The red component of the color (0-255).</p>
+
+    <h5><code>green<i>: number</i></code></h5>
+    <p>The green component of the color (0-255).</p>
+
+    <h5><code>blue<i>: number</i></code></h5>
+    <p>The blue component of the color (0-255).</p>
+
+    <h5><code>alpha<i>: number</i></code></h5>
+    <p>The alpha transparency component (0-1).</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>toHexColor(red, green, blue)<i>: string</i></code></h5>
+    <p>Converts RGB values to a hex color string for the native color input.</p>
+
+    <h3 id="staticMembers"><a href="#staticMembers" class="no-link">Static Members</a></h3>
+    <h5><code>namedColors<i>: object</i></code></h5>
+    <p>An object containing 147 named CSS colors mapped to their hex values.</p>
+
+    <h5><code>formats<i>: object</i></code></h5>
+    <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>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/ColorPicker.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+
+</body>
+</html>

package/docs/components/content-slider.html

@@ -192,14 +192,14 @@
     <h2 id="jsRef" class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5>
       <code>new ContentSlider()</code>
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">ShadowComponent</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
       <li><a href="./icon.html">Icon</a></li>
     </ul>
 

package/docs/components/theme-switcher.html

@@ -37,7 +37,7 @@
     </k-accordion>
 
     <h3>Description</h3>
-    <p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
+    <p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./shadow-component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Use the <code>ThemeSwitcher</code> component to allow users to cycle through themes. Clicking the button cycles through auto → light → dark → auto. The component automatically detects the user's system preference when in auto mode.</p>
@@ -75,14 +75,14 @@
     <h2 id="jsRef"><a href="jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5>
       <code>new ThemeSwitcher()</code>
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">ShadowComponent</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
       <li><a href="./icon.html">Icon</a></li>
     </ul>
 
@@ -98,7 +98,7 @@
 }</code></pre>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./component.html">ShadowComponent</a> class.</p>
+    <p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./shadow-component.html">ShadowComponent</a> class.</p>
 
     <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
     <h5><code>static setTheme(theme)<i>: void</i></code></h5>