kempo-ui 0.0.28 → 0.0.30

package/docs/index.html

@@ -61,6 +61,12 @@
           <p class="tc-muted">Container component with optional labels and border styling.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./components/color-picker.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">ColorPicker</h3>
+          <p class="tc-muted">Advanced color selection supporting all CSS color formats with alpha transparency.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./components/content-slider.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Content Slider</h3>
@@ -226,9 +232,33 @@
         </a>
       </div>
       <div class="span-12 t-span-6 d-span-4 px">
-        <a href="./utils/toTitleCase.html" class="card mb no-link d-b">
-          <h3 class="tc-primary">toTitleCase</h3>
-          <p class="tc-muted">Convert strings from various formats to Title Case.</p>
+        <a href="./utils/string.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">string</h3>
+          <p class="tc-muted">Collection of functions for string manipulation and conversion.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/type.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">type</h3>
+          <p class="tc-muted">Functions for checking and identifying JavaScript value types.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/object.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">object</h3>
+          <p class="tc-muted">Functions for manipulating and analyzing JavaScript objects.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/cookie.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">cookie</h3>
+          <p class="tc-muted">Functions for managing browser cookies.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/wait.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">wait</h3>
+          <p class="tc-muted">Functions for creating delays and waiting for animation frames.</p>
         </a>
       </div>
     </div>

package/docs/init-1.js

@@ -1,4 +1,4 @@
 window.kempo = {
 	pathToStylesheet: '../kempo.min.css',
-	pathToIcons: ['../icons']
+	pathsToIcons: ['../icons']
 };

package/docs/nav-1.inc.html

@@ -33,6 +33,7 @@
       <h3>Components</h3>
       <a href="../components/accordion.html">Accordion</a>
       <a href="../components/card.html">Card</a>
+      <a href="../components/color-picker.html">ColorPicker</a>
       <a href="../components/content-slider.html">Content Slider</a>
       <a href="../components/dialog.html">Dialog</a>
       <a href="../components/focus-capture.html">FocusCapture</a>
@@ -63,11 +64,15 @@
 
     <h5 class="mb0">Utils</h5>
     <div class="pl mb">
+      <a href="../utils/cookie.html">cookie</a>
       <a href="../utils/debounce.html">debounce</a>
       <a href="../utils/drag.html">drag</a>
       <a href="../utils/formatTimestamp.html">formatTimestamp</a>
+      <a href="../utils/object.html">object</a>
       <a href="../utils/propConverters.html">propConverters</a>
-      <a href="../utils/toTitleCase.html">toTitleCase</a>
+      <a href="../utils/string.html">string</a>
+      <a href="../utils/type.html">type</a>
+      <a href="../utils/wait.html">wait</a>
     </div>
   </menu>
 </k-side-menu>

package/docs/nav.inc.html

@@ -34,6 +34,7 @@
       <h3>Components</h3>
       <a href="./components/accordion.html">Accordion</a>
       <a href="./components/card.html">Card</a>
+      <a href="./components/color-picker.html">ColorPicker</a>
       <a href="./components/content-slider.html">Content Slider</a>
       <a href="./components/dialog.html">Dialog</a>
       <a href="./components/focus-capture.html">FocusCapture</a>
@@ -64,11 +65,15 @@
 
     <h5 class="mb0">Utils</h5>
     <div class="pl mb">
+      <a href="./utils/cookie.html">cookie</a>
       <a href="./utils/debounce.html">debounce</a>
       <a href="./utils/drag.html">drag</a>
       <a href="./utils/formatTimestamp.html">formatTimestamp</a>
+      <a href="./utils/object.html">object</a>
       <a href="./utils/propConverters.html">propConverters</a>
-      <a href="./utils/toTitleCase.html">toTitleCase</a>
+      <a href="./utils/string.html">string</a>
+      <a href="./utils/type.html">type</a>
+      <a href="./utils/wait.html">wait</a>
     </div>
   </menu>
 </k-side-menu>

package/docs/src/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/docs/src/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/docs/src/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/docs/src/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/docs/src/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/docs/src/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/docs/src/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/docs/src/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/utils/cookie.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Cookie Utilities - 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>Cookie Utilities</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>Functions</h6>
+					<a href="#saveCookie">saveCookie</a><br />
+					<a href="#getCookie">getCookie</a><br />
+					<a href="#deleteCookie">deleteCookie</a><br />
+				</div>
+			</k-accordion-panel>
+		</k-accordion>
+
+		<h3>Description</h3>
+		<p>The cookie utilities module provides functions for managing browser cookies, including saving, retrieving, and
+			deleting cookie values.</p>
+
+		<h3>Working Example</h3>
+		<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">"cookie-example"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"saved-message"</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">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cookie-form"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"cookie-value"</span>&gt;</span>Value to save:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cookie-value"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookie-value"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter a value"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span>&gt;</span>Save to Cookie<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"delete-btn"</span>&gt;</span>Delete Cookie<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>&gt;</span><span class="javascript">
+<span class="hljs-keyword">import</span> { saveCookie, getCookie, deleteCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;
+
+<span class="hljs-comment">// Load saved value on page load</span>
+<span class="hljs-keyword">const</span> savedValue = getCookie(<span class="hljs-string">'example'</span>);
+<span class="hljs-keyword">if</span> (savedValue) {
+  document.getElementById(<span class="hljs-string">'saved-message'</span>).textContent = 
+    `Saved value from cookie: ${savedValue}`;
+}
+
+<span class="hljs-comment">// Handle form submission</span>
+document.getElementById(<span class="hljs-string">'cookie-form'</span>).addEventListener(<span class="hljs-string">'submit'</span>, (e) => {
+  e.preventDefault();
+  <span class="hljs-keyword">const</span> value = document.getElementById(<span class="hljs-string">'cookie-value'</span>).value;
+  saveCookie(<span class="hljs-string">'example'</span>, value);
+  <span class="hljs-comment">// Page will refresh due to form submission</span>
+  window.location.reload();
+});
+
+<span class="hljs-comment">// Delete cookie when delete button is clicked</span>
+document.getElementById(<span class="hljs-string">'delete-btn'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {
+  deleteCookie(<span class="hljs-string">'example'</span>);
+  window.location.reload();
+});
+</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="cookie-example">
+						<p id="saved-message"></p>
+						<form id="cookie-form">
+							<label for="cookie-value">"example" Cookie value:</label>
+							<input type="text" id="cookie-value" name="cookie-value" class="mb" placeholder="Enter a value">
+							<div class="d-f">
+								<div class="flex"></div>
+								<button id="delete-btn" class="danger mr" type="button">Delete Cookie</button>
+								<button type="submit" class="primary">Save to Cookie</button>
+							</div>
+						</form>
+					</div>
+				</k-card>
+			</div>
+		</div>
+
+		<h3 id="saveCookie"><a href="#saveCookie" class="no-link">saveCookie</a></h3>
+		<p>Saves a cookie with an optional expiration time and path.</p>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { saveCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br /><span class="hljs-comment">// Save a cookie that expires in 30 minutes</span><br />saveCookie(<span class="hljs-string">'userId'</span>, <span class="hljs-string">'12345'</span>);<br /><br /><span class="hljs-comment">// Save a cookie that expires in 1 hour</span><br />saveCookie(<span class="hljs-string">'session'</span>, <span class="hljs-string">'abc123'</span>, <span class="hljs-number">60</span>);</code></pre>
+
+		<h3 id="getCookie"><a href="#getCookie" class="no-link">getCookie</a></h3>
+		<p>Retrieves the value of a cookie by name.</p>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { getCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br /><span class="hljs-keyword">const</span> userId = getCookie(<span class="hljs-string">'userId'</span>); <span class="hljs-comment">// "12345" or null if not found</span></code></pre>
+
+		<h3 id="deleteCookie"><a href="#deleteCookie" class="no-link">deleteCookie</a></h3>
+		<p>Deletes a cookie by setting its expiration to a past date.</p>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { deleteCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br />deleteCookie(<span class="hljs-string">'userId'</span>);</code></pre>
+
+	</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 { saveCookie, getCookie, deleteCookie } from '../src/utils/cookie.js';
+
+		// Load saved value on page load
+		const savedValue = getCookie('example');
+		const messageElement = document.getElementById('saved-message');
+		if (savedValue && messageElement) {
+			messageElement.textContent = `Saved value from cookie: ${savedValue}`;
+		}
+
+		// Handle form submission
+		const form = document.getElementById('cookie-form');
+		if (form) {
+			form.addEventListener('submit', (e) => {
+				e.preventDefault();
+				const value = document.getElementById('cookie-value').value;
+				saveCookie('example', value);
+				// Page will refresh due to form submission
+				window.location.reload();
+			});
+		}
+
+		// Delete cookie when delete button is clicked
+		const deleteBtn = document.getElementById('delete-btn');
+		if (deleteBtn) {
+			deleteBtn.addEventListener('click', () => {
+				deleteCookie('example');
+				window.location.reload();
+			});
+		}
+	</script>
+</body>
+</html>

package/docs/utils/object.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Object Utilities - 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>Object Utilities</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>Functions</h6>
+          <a href="#toJson">toJson</a><br />
+          <a href="#flattenObject">flattenObject</a><br />
+          <a href="#flattenedObjects">flattenedObjects</a><br />
+          <a href="#objectSummary">objectSummary</a><br />
+          <a href="#clone">clone</a><br />
+          <a href="#equalObjs">equalObjs</a><br />
+          <a href="#prune">prune</a><br />
+          <a href="#getAllKeys">getAllKeys</a><br />
+          <a href="#getDifferencesKeys">getDifferencesKeys</a><br />
+          <a href="#diff">diff</a><br />
+          <a href="#mapObject">mapObject</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The object utilities module provides functions for manipulating, transforming, and analyzing JavaScript objects, including JSON serialization, flattening, cloning, comparison, and more.</p>
+
+    <h3 id="toJson"><a href="#toJson" class="no-link">toJson</a></h3>
+    <p>Converts an object to JSON string with special handling for circular references, DOM elements, and functions.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { toJson } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">name</span>: <span class="hljs-string">'test'</span>, <span class="hljs-attr">func</span>: () => {} };<br />toJson(obj); <span class="hljs-comment">// '{"name":"test","func":"&lt;&lt;Function func&gt;&gt;"}'</span></code></pre>
+
+    <h3 id="flattenObject"><a href="#flattenObject" class="no-link">flattenObject</a></h3>
+    <p>Flattens a nested object into a single-level object with dot-notation keys.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { flattenObject } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">user</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">30</span> } };<br />flattenObject(obj); <span class="hljs-comment">// { "user.name": "John", "user.age": 30 }</span></code></pre>
+
+    <h3 id="flattenedObjects"><a href="#flattenedObjects" class="no-link">flattenedObjects</a></h3>
+    <p>Flattens multiple objects and returns them as an array.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { flattenedObjects } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br />flattenedObjects({<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>}, {<span class="hljs-attr">b</span>: <span class="hljs-number">2</span>}); <span class="hljs-comment">// [{ "a": 1 }, { "b": 2 }]</span></code></pre>
+
+    <h3 id="objectSummary"><a href="#objectSummary" class="no-link">objectSummary</a></h3>
+    <p>Creates a summary string representation of an object.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { objectSummary } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">30</span> };<br />objectSummary(obj); <span class="hljs-comment">// "name = John, age = 30"</span></code></pre>
+
+    <h3 id="clone"><a href="#clone" class="no-link">clone</a></h3>
+    <p>Creates a deep clone of an object with special handling for different types.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { clone } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">items</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>] };<br />clone(obj); <span class="hljs-comment">// { items: [1, 2, 3] } (new array)</span></code></pre>
+
+    <h3 id="equalObjs"><a href="#equalObjs" class="no-link">equalObjs</a></h3>
+    <p>Checks if multiple objects are equal by comparing their JSON representations.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { equalObjs } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br />equalObjs({<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>}, {<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>}); <span class="hljs-comment">// true</span><br />equalObjs({<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>}, {<span class="hljs-attr">a</span>: <span class="hljs-number">2</span>}); <span class="hljs-comment">// false</span></code></pre>
+
+    <h3 id="prune"><a href="#prune" class="no-link">prune</a></h3>
+    <p>Removes empty/undefined properties from an object recursively.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { prune } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">empty</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">nested</span>: { <span class="hljs-attr">value</span>: <span class="hljs-literal">null</span> } };<br />prune(obj); <span class="hljs-comment">// { name: "John" }</span></code></pre>
+
+    <h3 id="getAllKeys"><a href="#getAllKeys" class="no-link">getAllKeys</a></h3>
+    <p>Gets all unique keys from multiple objects.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { getAllKeys } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br />getAllKeys({<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span>}, {<span class="hljs-attr">b</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">4</span>}); <span class="hljs-comment">// ["a", "b", "c"]</span></code></pre>
+
+    <h3 id="getDifferencesKeys"><a href="#getDifferencesKeys" class="no-link">getDifferencesKeys</a></h3>
+    <p>Gets keys that have different values across multiple objects.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { getDifferencesKeys } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br />getDifferencesKeys({<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span>}, {<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">3</span>}); <span class="hljs-comment">// ["b"]</span></code></pre>
+
+    <h3 id="diff"><a href="#diff" class="no-link">diff</a></h3>
+    <p>Computes the differences between two objects.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { diff } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj1 = { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> };<br /><span class="hljs-keyword">const</span> obj2 = { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">3</span> };<br />diff(obj1, obj2); <span class="hljs-comment">// { "b": { newValue: 2, oldValue: 3 } }</span></code></pre>
+
+    <h3 id="mapObject"><a href="#mapObject" class="no-link">mapObject</a></h3>
+    <p>Maps over an object's entries using a function that returns [newKey, newValue].</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { mapObject } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> };<br />mapObject(obj, (k, v) => [`new_${k}`, v * <span class="hljs-number">2</span>]); <span class="hljs-comment">// { new_a: 2, new_b: 4 }</span></code></pre>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+</body>
+</html>

package/docs/utils/string.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>String Utilities - 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>String Utilities</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>Functions</h6>
+          <a href="#camelToDash">camelToDash</a><br />
+          <a href="#dashToCamel">dashToCamel</a><br />
+          <a href="#isCamelCase">isCamelCase</a><br />
+          <a href="#getCase">getCase</a><br />
+          <a href="#escapeHTML">escapeHTML</a><br />
+          <a href="#unescapeHTML">unescapeHTML</a><br />
+          <a href="#trim">trim</a><br />
+          <a href="#compoundKey">compoundKey</a><br />
+          <a href="#toTitleCase">toTitleCase</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The string utilities module provides a collection of functions for manipulating and transforming strings, including case conversions, HTML escaping, and key manipulation.</p>
+
+    <h3 id="camelToDash"><a href="#camelToDash" class="no-link">camelToDash</a></h3>
+    <p>Converts camelCase strings to dash-case.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { camelToDash } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />camelToDash(<span class="hljs-string">'camelCase'</span>); <span class="hljs-comment">// "camel-case"</span></code></pre>
+
+    <h3 id="dashToCamel"><a href="#dashToCamel" class="no-link">dashToCamel</a></h3>
+    <p>Converts dash-case strings to camelCase.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { dashToCamel } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />dashToCamel(<span class="hljs-string">'dash-case'</span>); <span class="hljs-comment">// "dashCase"</span></code></pre>
+
+    <h3 id="isCamelCase"><a href="#isCamelCase" class="no-link">isCamelCase</a></h3>
+    <p>Checks if a string is in camelCase format.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { isCamelCase } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />isCamelCase(<span class="hljs-string">'camelCase'</span>); <span class="hljs-comment">// true</span><br />isCamelCase(<span class="hljs-string">'dash-case'</span>); <span class="hljs-comment">// false</span></code></pre>
+
+    <h3 id="getCase"><a href="#getCase" class="no-link">getCase</a></h3>
+    <p>Returns an object with both camel and dash versions of the string.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { getCase } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />getCase(<span class="hljs-string">'camelCase'</span>); <span class="hljs-comment">// { camel: "camelCase", dash: "camel-case" }</span><br />getCase(<span class="hljs-string">'dash-case'</span>); <span class="hljs-comment">// { camel: "dashCase", dash: "dash-case" }</span></code></pre>
+
+    <h3 id="escapeHTML"><a href="#escapeHTML" class="no-link">escapeHTML</a></h3>
+    <p>Escapes HTML special characters in a string.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { escapeHTML } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />escapeHTML(<span class="hljs-string">'&lt;script&gt;'</span>); <span class="hljs-comment">// "&amp;lt;script&amp;gt;"</span></code></pre>
+
+    <h3 id="unescapeHTML"><a href="#unescapeHTML" class="no-link">unescapeHTML</a></h3>
+    <p>Unescapes HTML entities in a string.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { unescapeHTML } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />unescapeHTML(<span class="hljs-string">'&amp;lt;script&amp;gt;'</span>); <span class="hljs-comment">// "&lt;script&gt;"</span></code></pre>
+
+    <h3 id="trim"><a href="#trim" class="no-link">trim</a></h3>
+    <p>Trims specified characters from the start and end of a string.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { trim } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />trim(<span class="hljs-string">'.key.value.'</span>, <span class="hljs-string">'.'</span>); <span class="hljs-comment">// "key.value"</span></code></pre>
+
+    <h3 id="compoundKey"><a href="#compoundKey" class="no-link">compoundKey</a></h3>
+    <p>Joins an array of keys into a compound key string.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { compoundKey } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />compoundKey([<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>]); <span class="hljs-comment">// "a.b.c"</span></code></pre>
+
+    <h3 id="toTitleCase"><a href="#toTitleCase" class="no-link">toTitleCase</a></h3>
+    <p>Converts strings to title case format, handling camelCase, snake_case, kebab-case, and regular text.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { toTitleCase } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />toTitleCase(<span class="hljs-string">'helloWorld'</span>); <span class="hljs-comment">// "Hello World"</span><br />toTitleCase(<span class="hljs-string">'hello-world'</span>); <span class="hljs-comment">// "Hello World"</span><br />toTitleCase(<span class="hljs-string">'hello_world'</span>); <span class="hljs-comment">// "Hello World"</span></code></pre>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+</body>
+</html>