kempo-ui 0.3.5 → 0.3.7

package/docs-src/utils/formatTimestamp.page.html

@@ -0,0 +1,76 @@
+<page pageName="formatTimestamp" title="formatTimestamp - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>formatTimestamp</h1>
+    
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#parameters">Parameters</a><br />
+        <a href="#formatTokens">Format Tokens</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>formatTimestamp</code> utility function formats timestamps using custom format tokens or locale-specific formatting.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the formatTimestamp function to format dates:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> formatTimestamp <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/formatTimestamp.js'</span>;<br /><br /><span class="hljs-keyword">const</span> timestamp = <span class="hljs-built_in">Date</span>.now();<br /><span class="hljs-keyword">const</span> formatted = formatTimestamp(timestamp, <span class="hljs-string">'YYYY-MM-DD'</span>);<br /><span class="hljs-built_in">console</span>.log(formatted); <span class="hljs-comment">// "2025-09-19"</span></code></pre>
+
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>timestamp<i>: number|string</i></code></h5>
+    <p>The timestamp to format (milliseconds since epoch).</p>
+    <h5><code>format<i>: string</i></code> (optional)</h5>
+    <p>The format string using tokens. If not provided, uses locale-specific formatting.</p>
+    <h5><code>forceLocale<i>: string</i></code> (optional)</h5>
+    <p>The locale to use for formatting when no format is specified.</p>
+
+    <h3 id="formatTokens"><a href="#formatTokens" class="no-link">Format Tokens</a></h3>
+    <h5><code>YYYY</code></h5>
+    <p>4-digit year (e.g., 2025)</p>
+    <h5><code>YY</code></h5>
+    <p>2-digit year (e.g., 25)</p>
+    <h5><code>MM</code></h5>
+    <p>2-digit month (01-12)</p>
+    <h5><code>M</code></h5>
+    <p>1-digit month (1-12)</p>
+    <h5><code>DD</code></h5>
+    <p>2-digit day (01-31)</p>
+    <h5><code>D</code></h5>
+    <p>1-digit day (1-31)</p>
+    <h5><code>hh</code></h5>
+    <p>2-digit hour (00-23)</p>
+    <h5><code>h</code></h5>
+    <p>1-digit hour (0-23)</p>
+    <h5><code>mm</code></h5>
+    <p>2-digit minute (00-59)</p>
+    <h5><code>m</code></h5>
+    <p>1-digit minute (0-59)</p>
+    <h5><code>ss</code></h5>
+    <p>2-digit second (00-59)</p>
+    <h5><code>s</code></h5>
+    <p>1-digit second (0-59)</p>
+    <h5><code>iiii, iii, ii, i</code></h5>
+    <p>Milliseconds with different padding</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Date Formats</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> timestamp = <span class="hljs-number">1633024800000</span>;<br /><br />formatTimestamp(timestamp, <span class="hljs-string">'YYYY-MM-DD'</span>);     <span class="hljs-comment">// "2021-10-01"</span><br />formatTimestamp(timestamp, <span class="hljs-string">'MM/DD/YYYY'</span>);     <span class="hljs-comment">// "10/01/2021"</span><br />formatTimestamp(timestamp, <span class="hljs-string">'DD-MM-YY'</span>);       <span class="hljs-comment">// "01-10-21"</span></code></pre>
+
+    <h4>Time Formats</h4>
+    <pre><code class="hljs javascript">formatTimestamp(timestamp, <span class="hljs-string">'hh:mm:ss'</span>);       <span class="hljs-comment">// "00:00:00"</span><br />formatTimestamp(timestamp, <span class="hljs-string">'h:mm'</span>);           <span class="hljs-comment">// "0:00"</span><br />formatTimestamp(timestamp, <span class="hljs-string">'hh:mm:ss.iii'</span>);   <span class="hljs-comment">// "00:00:00.000"</span></code></pre>
+
+    <h4>Combined Formats</h4>
+    <pre><code class="hljs javascript">formatTimestamp(timestamp, <span class="hljs-string">'YYYY-MM-DD hh:mm:ss'</span>); <br /><span class="hljs-comment">// "2021-10-01 00:00:00"</span><br /><br />formatTimestamp(timestamp, <span class="hljs-string">'MM/DD/YY at h:mm'</span>);<br /><span class="hljs-comment">// "10/01/21 at 0:00"</span></code></pre>
+
+    <h4>Locale Formatting</h4>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// Uses browser locale when no format specified</span><br />formatTimestamp(timestamp);                   <span class="hljs-comment">// "10/1/2021, 12:00:00 AM"</span><br /><br /><span class="hljs-comment">// Force specific locale</span><br />formatTimestamp(timestamp, <span class="hljs-literal">null</span>, <span class="hljs-string">'de-DE'</span>);    <span class="hljs-comment">// German formatting</span></code></pre>
+  </content>
+</page>

package/docs-src/utils/object.page.html

@@ -0,0 +1,76 @@
+<page pageName="Object Utilities" title="Object Utilities - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <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>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/docs-src/utils/propConverters.page.html

@@ -0,0 +1,73 @@
+<page pageName="propConverters" title="propConverters - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>propConverters</h1>
+    
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#boolTrueFalse">boolTrueFalse</a><br />
+        <a href="#boolExists">boolExists</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The <code>propConverters</code> module provides Lit Element property converters for handling boolean attributes in web components. These converters manage the conversion between JavaScript boolean values and HTML attribute strings.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the converters in your Lit Element component properties:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { boolTrueFalse, boolExists } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/propConverters.js'</span>;<br /><br /><span class="hljs-keyword">static</span> properties = {<br />  <span class="hljs-attr">enabled</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Boolean</span>, <span class="hljs-attr">reflect</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">converter</span>: boolTrueFalse },<br />  <span class="hljs-attr">visible</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Boolean</span>, <span class="hljs-attr">reflect</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">converter</span>: boolExists }<br />};</code></pre>
+
+    <h3 id="boolTrueFalse"><a href="#boolTrueFalse" class="no-link">boolTrueFalse</a></h3>
+    <p>Converts between boolean values and explicit "true"/"false" string attributes.</p>
+    
+    <h4>Behavior</h4>
+    <ul>
+      <li><strong>fromAttribute:</strong> "true" → true, "false" → false, null → undefined</li>
+      <li><strong>toAttribute:</strong> true → "true", false → "false"</li>
+    </ul>
+
+    <h4>HTML Usage</h4>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">enabled</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">enabled</span>=<span class="hljs-string">"false"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span></code></pre>
+
+    <h3 id="boolExists"><a href="#boolExists" class="no-link">boolExists</a></h3>
+    <p>Converts between boolean values and attribute presence/absence.</p>
+    
+    <h4>Behavior</h4>
+    <ul>
+      <li><strong>fromAttribute:</strong> attribute present → true, attribute absent → false</li>
+      <li><strong>toAttribute:</strong> true → "", false → null (removes attribute)</li>
+    </ul>
+
+    <h4>HTML Usage</h4>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">visible</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span>        <span class="hljs-comment">&lt;!-- visible = true --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span>              <span class="hljs-comment">&lt;!-- visible = false --&gt;</span></code></pre>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Component with Both Converters</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { LitElement, html } <span class="hljs-keyword">from</span> <span class="hljs-string">'lit'</span>;<br /><span class="hljs-keyword">import</span> { boolTrueFalse, boolExists } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/propConverters.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">autoplay</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Boolean</span>, <span class="hljs-attr">reflect</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">converter</span>: boolTrueFalse },<br />    <span class="hljs-attr">hidden</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Boolean</span>, <span class="hljs-attr">reflect</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">converter</span>: boolExists },<br />    <span class="hljs-attr">loop</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Boolean</span>, <span class="hljs-attr">reflect</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">converter</span>: boolTrueFalse }<br />  };<br /><br />  <span class="hljs-keyword">constructor</span>() {<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.autoplay = <span class="hljs-literal">false</span>;<br />    <span class="hljs-keyword">this</span>.hidden = <span class="hljs-literal">false</span>;<br />    <span class="hljs-keyword">this</span>.loop = <span class="hljs-literal">false</span>;<br />  }<br /><br />  render() {<br />    <span class="hljs-keyword">return</span> html`<span class="xml"><br />      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> ?<span class="hljs-attr">hidden</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.hidden}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br />        Content </span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.autoplay ? <span class="hljs-string">'with'</span> : <span class="hljs-string">'without'</span>}</span><span class="xml"> autoplay<br />        </span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.loop ? <span class="hljs-string">'(looping)'</span> : <span class="hljs-string">''</span>}</span><span class="xml"><br />      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    `</span>;<br />  }<br />}</code></pre>
+
+    <h4>HTML Usage Examples</h4>
+    <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Using boolTrueFalse converter --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">loop</span>=<span class="hljs-string">"false"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Using boolExists converter --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">hidden</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Combined usage --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">loop</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">hidden</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span></code></pre>
+
+    <h4>When to Use Each Converter</h4>
+    <p><strong>Use boolTrueFalse when:</strong></p>
+    <ul>
+      <li>You need explicit true/false values in HTML</li>
+      <li>The attribute value is important for clarity</li>
+      <li>Working with form controls or interactive elements</li>
+    </ul>
+
+    <p><strong>Use boolExists when:</strong></p>
+    <ul>
+      <li>Following HTML standards (like hidden, disabled attributes)</li>
+      <li>The presence of the attribute is what matters</li>
+      <li>Creating more semantic HTML</li>
+    </ul>
+  </content>
+</page>

package/docs-src/utils/string.page.html

@@ -0,0 +1,66 @@
+<page pageName="String Utilities" title="String Utilities - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <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>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/docs-src/utils/theme.page.html

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

package/docs-src/utils/toTitleCase.page.html

@@ -0,0 +1,52 @@
+<page pageName="toTitleCase" title="toTitleCase - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>toTitleCase</h1>
+    
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#parameters">Parameters</a><br />
+        <a href="#returnValue">Return Value</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>toTitleCase</code> utility function converts strings to title case format. It handles camelCase, snake_case, kebab-case, and regular text, converting them into properly capitalized title case with spaces between words.</p>
+    <p><strong>Note:</strong> This function is now part of the string utilities module.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the toTitleCase function to convert strings to title case:</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 /><span class="hljs-keyword">const</span> result = <span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'helloWorld'</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// "Hello World"</span></code></pre>
+
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>str<i>: string</i></code></h5>
+    <p>The string to convert to title case. Can be in any format (camelCase, snake_case, kebab-case, or regular text).</p>
+
+    <h3 id="returnValue"><a href="#returnValue" class="no-link">Return Value</a></h3>
+    <h5><code><i>string</i></code></h5>
+    <p>The input string converted to title case with proper spacing and capitalization.</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Converting camelCase</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'firstName'</span>);     <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customerAddress'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'userId'</span>);         <span class="hljs-comment">// "User Id"</span></code></pre>
+
+    <h4>Converting snake_case</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'first_name'</span>);     <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customer_address'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'user_id'</span>);         <span class="hljs-comment">// "User Id"</span></code></pre>
+
+    <h4>Converting kebab-case</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'first-name'</span>);     <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customer-address'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'user-id'</span>);         <span class="hljs-comment">// "User Id"</span></code></pre>
+
+    <h4>Converting regular text</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'hello world'</span>);     <span class="hljs-comment">// "Hello World"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'the quick brown fox'</span>); <span class="hljs-comment">// "The Quick Brown Fox"</span></code></pre>
+
+    <h4>Practical Use Case: Table Column Headers</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> columns = [<span class="hljs-string">'firstName'</span>, <span class="hljs-string">'lastName'</span>, <span class="hljs-string">'emailAddress'</span>];<br /><br /><span class="hljs-keyword">const</span> headers = columns.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">col</span> =&gt;</span> <span class="hljs-title function_">toTitleCase</span>(col));<br /><span class="hljs-comment">// ["First Name", "Last Name", "Email Address"]</span></code></pre>
+  </content>
+</page>

package/docs-src/utils/type.page.html

@@ -0,0 +1,31 @@
+<page pageName="Type Utilities" title="Type Utilities - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>Type 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="#typeOf">typeOf</a><br />
+          <a href="#isType">isType</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The type utilities module provides functions for checking and identifying JavaScript value types, including enhanced type detection for arrays, elements, and null values.</p>
+
+    <h3 id="typeOf"><a href="#typeOf" class="no-link">typeOf</a></h3>
+    <p>Returns the type of a value as a string, with enhanced detection for arrays, DOM elements, and null.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { typeOf } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/type.js'</span>;<br /><br />typeOf(<span class="hljs-string">'hello'</span>); <span class="hljs-comment">// "string"</span><br />typeOf(<span class="hljs-number">42</span>); <span class="hljs-comment">// "number"</span><br />typeOf([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]); <span class="hljs-comment">// "array"</span><br />typeOf(<span class="hljs-literal">null</span>); <span class="hljs-comment">// "null"</span><br />typeOf(document.body); <span class="hljs-comment">// "element" (in browser)</span></code></pre>
+
+    <h3 id="isType"><a href="#isType" class="no-link">isType</a></h3>
+    <p>Checks if a value is of a specific type.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { isType } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/type.js'</span>;<br /><br />isType(<span class="hljs-string">'hello'</span>, <span class="hljs-string">'string'</span>); <span class="hljs-comment">// true</span><br />isType([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>], <span class="hljs-string">'array'</span>); <span class="hljs-comment">// true</span><br />isType(<span class="hljs-literal">null</span>, <span class="hljs-string">'null'</span>); <span class="hljs-comment">// true</span><br />isType(<span class="hljs-number">42</span>, <span class="hljs-string">'string'</span>); <span class="hljs-comment">// false</span></code></pre>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>