npm - kempo-ui - Versions diffs - 0.0.13 → 0.0.15 - Mend

kempo-ui 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/docs/{components → kempo-ui/components}/tree.html RENAMED Viewed

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tree - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="/kempo-ui/kempo-vars.css" />
+  <link rel="stylesheet" href="/kempo-ui/kempo.min.css" />
+  <link rel="stylesheet" href="/kempo-ui/kempo-hljs.css" />
+  <link rel="stylesheet" href="/kempo-ui/styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Tree</h1>
   <main>
     <details class="b r mb">
@@ -34,12 +35,12 @@
     <p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code> property.</p>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myTree"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</span>&gt;</span><br /><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"><br />  <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br />  <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myTree'</span>);<br />  tree.data = {<br />    <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>,<br />    <span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,<br />    <span class="hljs-attr">active</span>: <span class="hljs-literal">true</span>,<br />    <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">'reading'</span>, <span class="hljs-string">'coding'</span>],<br />    <span class="hljs-attr">address</span>: {<br />      <span class="hljs-attr">street</span>: <span class="hljs-string">'123 Main St'</span>,<br />      <span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span><br />    }<br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myTree"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</span>&gt;</span><br /><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"><br />  <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo-ui/src/components/Tree.js'</span>;<br />  <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myTree'</span>);<br />  tree.data = {<br />    <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>,<br />    <span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,<br />    <span class="hljs-attr">active</span>: <span class="hljs-literal">true</span>,<br />    <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">'reading'</span>, <span class="hljs-string">'coding'</span>],<br />    <span class="hljs-attr">address</span>: {<br />      <span class="hljs-attr">street</span>: <span class="hljs-string">'123 Main St'</span>,<br />      <span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span><br />    }<br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-tree id="myTree"></k-tree>
         <script type="module">
-          import Tree from '../src/components/Tree.js';
+          import Tree from '/kempo-ui/src/components/Tree.js';
           const tree = document.getElementById('myTree');
           tree.data = {
             name: 'John Doe',
@@ -59,12 +60,12 @@
     <p>Use the <code>depth</code> attribute to control how many levels of branches are open by default. This example shows depth set to <code>2</code>:</p>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"depthTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</span>&gt;</span><br /><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"><br />  <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br />  <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'depthTree'</span>);<br />  tree.data = {<br />    <span class="hljs-attr">company</span>: <span class="hljs-string">'Tech Corp'</span>,<br />    <span class="hljs-attr">departments</span>: {<br />      <span class="hljs-attr">engineering</span>: {<br />        <span class="hljs-attr">frontend</span>: [<span class="hljs-string">'Alice'</span>, <span class="hljs-string">'Bob'</span>],<br />        <span class="hljs-attr">backend</span>: [<span class="hljs-string">'Charlie'</span>, <span class="hljs-string">'Diana'</span>]<br />      },<br />      <span class="hljs-attr">sales</span>: {<br />        <span class="hljs-attr">team</span>: [<span class="hljs-string">'Eve'</span>, <span class="hljs-string">'Frank'</span>]<br />      }<br />    }<br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"depthTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</span>&gt;</span><br /><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"><br />  <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo-ui/src/components/Tree.js'</span>;<br />  <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'depthTree'</span>);<br />  tree.data = {<br />    <span class="hljs-attr">company</span>: <span class="hljs-string">'Tech Corp'</span>,<br />    <span class="hljs-attr">departments</span>: {<br />      <span class="hljs-attr">engineering</span>: {<br />        <span class="hljs-attr">frontend</span>: [<span class="hljs-string">'Alice'</span>, <span class="hljs-string">'Bob'</span>],<br />        <span class="hljs-attr">backend</span>: [<span class="hljs-string">'Charlie'</span>, <span class="hljs-string">'Diana'</span>]<br />      },<br />      <span class="hljs-attr">sales</span>: {<br />        <span class="hljs-attr">team</span>: [<span class="hljs-string">'Eve'</span>, <span class="hljs-string">'Frank'</span>]<br />      }<br />    }<br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-tree id="depthTree" depth="2"></k-tree>
         <script type="module">
-          import Tree from '../src/components/Tree.js';
+          import Tree from '/kempo-ui/src/components/Tree.js';
           const tree = document.getElementById('depthTree');
           tree.data = {
             company: 'Tech Corp',
@@ -86,13 +87,13 @@
     <p>You can define custom leaf types to handle specific data types. Create a class that extends <code>TreeLeaf</code>, implement a <code>detect</code> static method that checks for specific properties, and a <code>render</code> method, then register it with <code>Tree.addLeaf()</code>.</p>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"customTree"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</span>&gt;</span><br /><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"><br />  <span class="hljs-keyword">import</span> Tree, { TreeLeaf } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br />  <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/lit-all.min.js'</span>;<br /><br />  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DateLeaf</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">TreeLeaf</span> </span>{<br />    render(){<br />      <span class="hljs-keyword">const</span> { month, day, year } = <span class="hljs-keyword">this</span>.value;<br />      <span class="hljs-keyword">return</span> html`<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>&gt;</span>📅 </span><span class="hljs-subst">${month}</span><span class="xml">/</span><span class="hljs-subst">${day}</span><span class="xml">/</span><span class="hljs-subst">${year}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>`</span>;<br />    }<br /><br />    <span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {<br />      <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'object'</span> <br />        &amp;&amp; value !== <span class="hljs-literal">null</span><br />        &amp;&amp; <span class="hljs-string">'month'</span> <span class="hljs-keyword">in</span> value <br />        &amp;&amp; <span class="hljs-string">'day'</span> <span class="hljs-keyword">in</span> value <br />        &amp;&amp; <span class="hljs-string">'year'</span> <span class="hljs-keyword">in</span> value;<br />    };<br />  }<br /><br />  Tree.addLeaf(DateLeaf);<br /><br />  <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customTree'</span>);<br />  tree.data = {<br />    <span class="hljs-attr">event</span>: <span class="hljs-string">'Tech Conference 2025'</span>,<br />    <span class="hljs-attr">startDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br />    <span class="hljs-attr">endDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br />    <span class="hljs-attr">location</span>: <span class="hljs-string">'San Francisco'</span>,<br />    <span class="hljs-attr">attendees</span>: <span class="hljs-number">250</span><br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"customTree"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</span>&gt;</span><br /><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"><br />  <span class="hljs-keyword">import</span> Tree, { TreeLeaf } <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo-ui/src/components/Tree.js'</span>;<br />  <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/lit-all.min.js'</span>;<br /><br />  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DateLeaf</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">TreeLeaf</span> </span>{<br />    render(){<br />      <span class="hljs-keyword">const</span> { month, day, year } = <span class="hljs-keyword">this</span>.value;<br />      <span class="hljs-keyword">return</span> html`<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>&gt;</span>📅 </span><span class="hljs-subst">${month}</span><span class="xml">/</span><span class="hljs-subst">${day}</span><span class="xml">/</span><span class="hljs-subst">${year}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>`</span>;<br />    }<br /><br />    <span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {<br />      <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'object'</span> <br />        &amp;&amp; value !== <span class="hljs-literal">null</span><br />        &amp;&amp; <span class="hljs-string">'month'</span> <span class="hljs-keyword">in</span> value <br />        &amp;&amp; <span class="hljs-string">'day'</span> <span class="hljs-keyword">in</span> value <br />        &amp;&amp; <span class="hljs-string">'year'</span> <span class="hljs-keyword">in</span> value;<br />    };<br />  }<br /><br />  Tree.addLeaf(DateLeaf);<br /><br />  <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customTree'</span>);<br />  tree.data = {<br />    <span class="hljs-attr">event</span>: <span class="hljs-string">'Tech Conference 2025'</span>,<br />    <span class="hljs-attr">startDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br />    <span class="hljs-attr">endDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br />    <span class="hljs-attr">location</span>: <span class="hljs-string">'San Francisco'</span>,<br />    <span class="hljs-attr">attendees</span>: <span class="hljs-number">250</span><br />  };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-tree id="customTree"></k-tree>
         <script type="module">
-          import Tree, { TreeLeaf } from '../src/components/Tree.js';
-          import { html } from '../src/lit-all.min.js';
+          import Tree, { TreeLeaf } from '/kempo-ui/src/components/Tree.js';
+          import { html } from '/kempo-ui/src/lit-all.min.js';
           class DateLeaf extends TreeLeaf {
             render(){
@@ -171,7 +172,8 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Card.js"></script>
-  <script type="module" src="../src/components/Tree.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Card.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Tree.js"></script>
 </body>
 </html>

package/docs/{index.html → kempo-ui/index.html} RENAMED Viewed

@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Kempo UI Documentation</title>
-  <link rel="stylesheet" href="./kempo.min.css">
-  <link rel="stylesheet" href="./kempo-vars.css">
-  <link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" href="kempo.min.css">
+  <link rel="stylesheet" href="kempo-vars.css">
+  <link rel="stylesheet" href="styles.css">
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="./nav.inc.html"></k-import>
+  <k-import src="nav.inc.html"></k-import>
   <main>
     <h1>Kempo UI</h1>
-    <p>Welcome to the Kempo UI component library documentation.</p>
+    <p>A lit-based web component library.</p>
     <h2>Components</h2>
     <div class="row -mx">
@@ -30,18 +30,6 @@
           <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/collapsible.html" class="card mb no-link d-b">
-          <h3 class="tc-primary">Collapsible</h3>
-          <p class="tc-muted">Toggle visibility of content with smooth expand/collapse transitions.</p>
-        </a>
-      </div>
-      <div class="span-12 t-span-6 d-span-4 px">
-        <a href="./components/persistant-collapsible.html" class="card mb no-link d-b">
-          <h3 class="tc-primary">PersistantCollapsible</h3>
-          <p class="tc-muted">Collapsible with localStorage to remember state across sessions.</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>
@@ -221,5 +209,6 @@
     </div>
     <div style="height:33vh"></div>
   </main>
+  <script type="module" src="src/components/Import.js"></script>
 </body>
 </html>

package/docs/kempo-ui/kempo-vars.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ /* Define Kempo Vars Here */

package/docs/kempo-ui/nav.inc.html ADDED Viewed

@@ -0,0 +1,67 @@
+<nav
+  class="d-f bg-primary fixed"
+>
+  <button
+    id="toggleNavSideMenu"
+    class="link"
+  >
+    <k-icon name="menu"></k-icon>
+  </button>
+  <a href="/kempo-ui/">Home</a>
+  <div class="flex"></div>
+  <k-theme-switcher></k-theme-switcher>
+</nav>
+<div style="width: 100%; height: 4rem;"></div>
+<k-side-menu
+  id="navSideMenu"
+>
+  <h1>Kempo Docs</h1>
+  <menu>
+    <a href="/kempo-ui/" class="h5 pl0 mb">Home</a>
+    <div class="pl mb">
+      <h3>Components</h3>
+      <a href="/kempo-ui/components/accordion.html">Accordion</a>
+      <a href="/kempo-ui/components/card.html">Card</a>
+      <a href="/kempo-ui/components/content-slider.html">Content Slider</a>
+      <a href="/kempo-ui/components/dialog.html">Dialog</a>
+      <a href="/kempo-ui/components/focus-capture.html">FocusCapture</a>
+      <a href="/kempo-ui/components/icon.html">Icon</a>
+      <a href="/kempo-ui/components/import.html">Import</a>
+      <a href="/kempo-ui/components/photo-viewer.html">Photo Viewer</a>
+      <a href="/kempo-ui/components/resize.html">Resize</a>
+      <a href="/kempo-ui/components/show-more.html">Show More</a>
+      <a href="/kempo-ui/components/side-menu.html">Side Menu</a>
+      <a href="/kempo-ui/components/sortable.html">Sortable</a>
+      <a href="/kempo-ui/components/split.html">Split</a>
+      <a href="/kempo-ui/components/table.html">Table</a>
+      <a href="/kempo-ui/components/tabs.html">Tabs</a>
+      <a href="/kempo-ui/components/tags.html">Tags</a>
+      <a href="/kempo-ui/components/toast.html">Toast</a>
+      <a href="/kempo-ui/components/theme-switcher.html">Theme Switcher</a>
+      <a href="/kempo-ui/components/timestamp.html">Timestamp</a>
+      <a href="/kempo-ui/components/toggle.html">Toggle</a>
+      <a href="/kempo-ui/components/tree.html">Tree</a>
+    </div>
+    <h5 class="mb0">Base Components</h5>
+    <div class="pl mb">
+      <a href="/kempo-ui/components/shadow-component.html">Shadow Component</a>
+      <a href="/kempo-ui/components/light-component.html">Light Component</a>
+      <a href="/kempo-ui/components/hybrid-component.html">Hybrid Component</a>
+    </div>
+    <h5 class="mb0">Utils</h5>
+    <div class="pl mb">
+      <a href="/kempo-ui/utils/debounce.html">debounce</a>
+      <a href="/kempo-ui/utils/drag.html">drag</a>
+      <a href="/kempo-ui/utils/formatTimestamp.html">formatTimestamp</a>
+      <a href="/kempo-ui/utils/propConverters.html">propConverters</a>
+      <a href="/kempo-ui/utils/toTitleCase.html">toTitleCase</a>
+      <a href="/kempo-ui/utils/watchWindowSize.html">watchWindowSize</a>
+    </div>
+  </menu>
+</k-side-menu>
+<script src="/kempo-ui/src/components/SideMenu.js" type="module"></script>
+<script src="/kempo-ui/src/components/Icon.js" type="module"></script>
+<script src="/kempo-ui/src/components/ThemeSwitcher.js" type="module"></script>
+<script src="/kempo-ui/nav.inc.js" type="module"></script>

package/docs/kempo-ui/utils/debounce.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <base href="/kempo-ui/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>debounce - Kempo UI</title>
+  <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>
+</head>
+<body>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <main>
+    <h1>debounce</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="#parameters">Parameters</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+    <h3>Description</h3>
+    <p>The <code>debounce</code> utility function limits the rate at which a function can be executed. It delays the execution of a function until after a specified timeout has passed since the last time it was invoked.</p>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the debounce function to limit function execution frequency:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> debounce <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/debounce.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handleSearch = debounce(<span class="hljs-function">(<span class="hljs-params">query</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Searching for:'</span>, query);<br />}, <span class="hljs-number">300</span>);<br /><br /><span class="hljs-comment">// Will only execute after 300ms of no calls</span><br />handleSearch(<span class="hljs-string">'test'</span>);</code></pre>
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>func<i>: Function</i></code></h5>
+    <p>The function to debounce.</p>
+    <h5><code>timeout<i>: number</i></code> (optional)</h5>
+    <p>The number of milliseconds to delay execution. Defaults to 300ms.</p>
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    <h4>Search Input Debouncing</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> debouncedSearch = debounce(<span class="hljs-function">(<span class="hljs-params">searchTerm</span>) =&gt;</span> {<br />  <span class="hljs-comment">// API call or expensive search operation</span><br />  performSearch(searchTerm);<br />}, <span class="hljs-number">500</span>);<br /><br />searchInput.addEventListener(<span class="hljs-string">'input'</span>, (e) =&gt; {<br />  debouncedSearch(e.target.value);<br />});</code></pre>
+    <h4>Window Resize Handler</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> debouncedResize = debounce(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />  <span class="hljs-comment">// Expensive layout calculations</span><br />  recalculateLayout();<br />}, <span class="hljs-number">250</span>);<br /><br /><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'resize'</span>, debouncedResize);</code></pre>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+</body>
+</html>

package/docs/{utils → kempo-ui/utils}/drag.html RENAMED Viewed

@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>drag - Kempo UI</title>
-  <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" />
+  <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 type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <main>
     <h1>drag</h1>
@@ -61,17 +61,7 @@
     <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
     <h4>Draggable Element</h4>
-    <pre><code class="hljs javascript">const box = document.querySelector('.box');
-let position = { x: 0, y: 0 };
-drag({
-  element: box,
-  callback: (diff) => {
-    position.x += diff.x;
-    position.y += diff.y;
-    box.style.transform = `translate(${position.x}px, ${position.y}px)`;
-  }
-});</code></pre>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.box'</span>);<br /><span class="hljs-keyword">let</span> position = { <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span> };<br /><br />drag({<br />  <span class="hljs-attr">element</span>: box,<br />  <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =&gt;</span> {<br />    position.x += diff.x;<br />    position.y += diff.y;<br />    box.style.transform = <span class="hljs-string">`translate(<span class="hljs-subst">${position.x}</span>px, <span class="hljs-subst">${position.y}</span>px)`</span>;<br />  }<br />});</code></pre>
     <h4>Resize Handle</h4>
     <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> resizeHandle = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.resize-handle'</span>);<br /><span class="hljs-keyword">const</span> panel = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.panel'</span>);<br /><br /><span class="hljs-title function_">drag</span>({<br />  <span class="hljs-attr">element</span>: resizeHandle,<br />  <span class="hljs-attr">preventScroll</span>: <span class="hljs-literal">true</span>,<br />  <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =&gt;</span> {<br />    <span class="hljs-keyword">const</span> newWidth = panel.offsetWidth + diff.x;<br />    panel.style.width = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(<span class="hljs-number">100</span>, newWidth) + <span class="hljs-string">'px'</span>;<br />  },<br />  <span class="hljs-attr">startCallback</span>: <span class="hljs-function">() =&gt;</span> {<br />    panel.classList.<span class="hljs-title function_">add</span>(<span class="hljs-string">'resizing'</span>);<br />  },<br />  <span class="hljs-attr">endCallback</span>: <span class="hljs-function">() =&gt;</span> {<br />    panel.classList.<span class="hljs-title function_">remove</span>(<span class="hljs-string">'resizing'</span>);<br />  }<br />});</code></pre>
@@ -81,5 +71,6 @@ drag({
   </main>
   <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{utils → kempo-ui/utils}/formatTimestamp.html RENAMED Viewed

@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>formatTimestamp - Kempo UI</title>
-  <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" />
+  <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 type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <main>
     <h1>formatTimestamp</h1>
@@ -34,11 +34,7 @@
     <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">import formatTimestamp from './utils/formatTimestamp.js';
-const timestamp = Date.now();
-const formatted = formatTimestamp(timestamp, 'YYYY-MM-DD');
-console.log(formatted); // "2025-09-19"</code></pre>
+    <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>
@@ -79,32 +75,19 @@ console.log(formatted); // "2025-09-19"</code></pre>
     <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
     <h4>Date Formats</h4>
-    <pre><code class="hljs javascript">const timestamp = 1633024800000;
-formatTimestamp(timestamp, 'YYYY-MM-DD');     // "2021-10-01"
-formatTimestamp(timestamp, 'MM/DD/YYYY');     // "10/01/2021"
-formatTimestamp(timestamp, 'DD-MM-YY');       // "01-10-21"</code></pre>
+    <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, 'hh:mm:ss');       // "00:00:00"
-formatTimestamp(timestamp, 'h:mm');           // "0:00"
-formatTimestamp(timestamp, 'hh:mm:ss.iii');   // "00:00:00.000"</code></pre>
+    <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, 'YYYY-MM-DD hh:mm:ss');
-// "2021-10-01 00:00:00"
-formatTimestamp(timestamp, 'MM/DD/YY at h:mm');
-// "10/01/21 at 0:00"</code></pre>
+    <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">// Uses browser locale when no format specified
-formatTimestamp(timestamp);                   // "10/1/2021, 12:00:00 AM"
-// Force specific locale
-formatTimestamp(timestamp, null, 'de-DE');    // German formatting</code></pre>
+    <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>
   </main>
   <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/kempo-ui/utils/propConverters.html ADDED Viewed

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <base href="/kempo-ui/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>propConverters - Kempo UI</title>
+  <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>
+</head>
+<body>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <main>
+    <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>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+</body>
+</html>

package/docs/{utils → kempo-ui/utils}/toTitleCase.html RENAMED Viewed

@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>toTitleCase - Kempo UI</title>
-  <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" />
+  <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 type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <main>
     <h1>toTitleCase</h1>
@@ -63,5 +63,6 @@
   </main>
   <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>