kempo-ui 0.0.9 → 0.0.10

package/docs/components/toggle.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.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 type="module" src="./init.js"></script>
 </head>
@@ -143,8 +143,6 @@
     <p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
 
   </main>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
-  <script type="module" src="../src/components/Toggle.js"></script> 
+  <div style="height:33vh"></div><script type="module" src="../src/components/Toggle.js"></script> 
 </body>
 </html>

package/docs/components/tree.html

@@ -4,8 +4,8 @@
   <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="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <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" />
   <script type="module" src="./init.js"></script>
 </head>
@@ -33,24 +33,28 @@
     <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>
+        <k-card label="HTML">
+          <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>
+        </k-card>
       </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';
-          const tree = document.getElementById('myTree');
-          tree.data = {
-            name: 'John Doe',
-            age: 30,
-            active: true,
-            hobbies: ['reading', 'coding'],
-            address: {
-              street: '123 Main St',
-              city: 'New York'
-            }
-          };
-        </script>
+        <k-card label="Output">
+          <k-tree id="myTree"></k-tree>
+          <script type="module">
+            import Tree from '../src/components/Tree.js';
+            const tree = document.getElementById('myTree');
+            tree.data = {
+              name: 'John Doe',
+              age: 30,
+              active: true,
+              hobbies: ['reading', 'coding'],
+              address: {
+                street: '123 Main St',
+                city: 'New York'
+              }
+            };
+          </script>
+        </k-card>
       </div>
     </div>
 
@@ -58,26 +62,30 @@
     <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>
+        <k-card label="HTML">
+          <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>
+        </k-card>
       </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';
-          const tree = document.getElementById('depthTree');
-          tree.data = {
-            company: 'Tech Corp',
-            departments: {
-              engineering: {
-                frontend: ['Alice', 'Bob'],
-                backend: ['Charlie', 'Diana']
-              },
-              sales: {
-                team: ['Eve', 'Frank']
+        <k-card label="Output">
+          <k-tree id="depthTree" depth="2"></k-tree>
+          <script type="module">
+            import Tree from '../src/components/Tree.js';
+            const tree = document.getElementById('depthTree');
+            tree.data = {
+              company: 'Tech Corp',
+              departments: {
+                engineering: {
+                  frontend: ['Alice', 'Bob'],
+                  backend: ['Charlie', 'Diana']
+                },
+                sales: {
+                  team: ['Eve', 'Frank']
+                }
               }
-            }
-          };
-        </script>
+            };
+          </script>
+        </k-card>
       </div>
     </div>
 
@@ -85,40 +93,44 @@
     <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>
+        <k-card label="HTML">
+          <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>
+        </k-card>
       </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';
-
-          class DateLeaf extends TreeLeaf {
-            render(){
-              const { month, day, year } = this.value;
-              return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
+        <k-card label="Output">
+          <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';
+
+            class DateLeaf extends TreeLeaf {
+              render(){
+                const { month, day, year } = this.value;
+                return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
+              }
+
+              static detect = value => {
+                return typeof value === 'object' 
+                  && value !== null
+                  && 'month' in value 
+                  && 'day' in value 
+                  && 'year' in value;
+              };
             }
 
-            static detect = value => {
-              return typeof value === 'object' 
-                && value !== null
-                && 'month' in value 
-                && 'day' in value 
-                && 'year' in value;
+            Tree.addLeaf(DateLeaf);
+
+            const tree = document.getElementById('customTree');
+            tree.data = {
+              event: 'Tech Conference 2025',
+              startDate: { month: 10, day: 15, year: 2025 },
+              endDate: { month: 10, day: 17, year: 2025 },
+              location: 'San Francisco',
+              attendees: 250
             };
-          }
-
-          Tree.addLeaf(DateLeaf);
-
-          const tree = document.getElementById('customTree');
-          tree.data = {
-            event: 'Tech Conference 2025',
-            startDate: { month: 10, day: 15, year: 2025 },
-            endDate: { month: 10, day: 17, year: 2025 },
-            location: 'San Francisco',
-            attendees: 250
-          };
-        </script>
+          </script>
+        </k-card>
       </div>
     </div>
 

package/docs/src/components/Card.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Card extends ShadowComponent{static properties={label:{type:String,reflect:!0}};constructor(){super(),this.label=""}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Card extends ShadowComponent{static properties={label:{type:String,reflect:!0}};constructor(){super(),this.label=null}static styles=css`
 		:host {
 			display: block;
 		}
@@ -20,11 +20,11 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			padding: var(--spacer_h);
 		}
 		:host([label]) {
-			padding-top: calc(1.5 * var(--spacer));
-			margin-top: var(--spacer);
+			padding-top: 0.1px; /* Prevent Collapsing Margins */
 		}
 		:host([label]) #card {
 			padding-top: calc(1.5 * var(--spacer));
+			margin-top: var(--spacer);
 		}
 		:host(:not([label])) #label {
 			display: none;

package/docs/src/components/Dialog.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=t=>t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=t=>{const{target:e}=t,o=e.id||e.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(t),t.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(t),t.defaultPrevented||this.close())};handleKeydown=t=>{27===t.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),t.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const t=this.updateComplete||this.requestUpdate();t&&t.then?t.then(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()}):setTimeout(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const t=firstFocusable(this.shadowRoot);t&&(this.previousFocus=document.activeElement,t.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=e=>e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=e=>{const{target:t}=e,o=t.id||t.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(e),e.defaultPrevented||this.close())};handleKeydown=e=>{27===e.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const e=this.updateComplete||this.requestUpdate();e&&e.then?e.then(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()}):setTimeout(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
 		:host {
 			position: fixed;
 			top: 0;
@@ -77,13 +77,13 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 	`;render(){return html`
 			<button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
 			<div id="wrapper">
-				<div
-					id="dialog"
-					role="dialog"
-					aria-modal="true"
-					aria-labelledby="title"
-				>
-					<k-focus-capture>
+				<k-focus-capture>
+					<div
+						id="dialog"
+						role="dialog"
+						aria-modal="true"
+						aria-labelledby="title"
+					>
 						<div
 							id="header"
 							class="${this.hasTitle()?"has-title":""}"
@@ -114,7 +114,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 								`:""}
 							</div>
 						`:""}
-					</k-focus-capture>
-				</div>
+					</div>
+				</k-focus-capture>
 			</div>
-		`}static create(t="",e={}){!1!==e.closeExisting&&document.querySelectorAll("k-dialog").forEach(t=>t.close());const{removeOnClose:o=!0,closeCallback:s=()=>{}}=e,i=new Dialog;return Object.assign(i,{opened:!0,...e,closeCallback:(...t)=>{o&&i.remove(),s(...t)}}),t instanceof HTMLElement||t instanceof DocumentFragment?i.appendChild(t):t&&(i.innerHTML=t),e.width&&i.style.setProperty("--width",e.width),e.minWidth&&i.style.setProperty("--min_width",e.minWidth),e.maxWidth&&i.style.setProperty("--max_width",e.maxWidth),e.height&&i.style.setProperty("--height",e.height),e.minHeight&&i.style.setProperty("--min_height",e.minHeight),e.maxHeight&&i.style.setProperty("--max_height",e.maxHeight),document.body.appendChild(i),i.open(),i}static confirm(t,e,o={}){const s=o.title||"Confirm";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1),...o})}static alert(t,e,o={}){const s=o.title||"Alert";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static error(t,e,o={}){const s=o.title||"Error";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-danger">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static success(t,e,o={}){const s=o.title||"Success";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-success">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);
+		`}static create(e="",t={}){!1!==t.closeExisting&&document.querySelectorAll("k-dialog").forEach(e=>e.close());const{removeOnClose:o=!0,closeCallback:s=()=>{},title:i="",titleClasses:l="pyh px m0"}=t,n=new Dialog;if(Object.assign(n,{opened:!0,...t,closeCallback:(...e)=>{o&&n.remove(),s(...e)}}),i){const e=document.createElement("h5");e.slot="title",e.className=l,i instanceof HTMLElement?e.appendChild(i):e.innerHTML=i,n.appendChild(e)}if(e instanceof HTMLElement||e instanceof DocumentFragment)n.appendChild(e);else if(e){if(/<[^>]+>/.test(e))n.innerHTML+=e;else{const t=document.createElement("p");t.className="p",t.textContent=e,n.appendChild(t)}}return t.width&&n.style.setProperty("--width",t.width),t.minWidth&&n.style.setProperty("--min_width",t.minWidth),t.maxWidth&&n.style.setProperty("--max_width",t.maxWidth),t.height&&n.style.setProperty("--height",t.height),t.minHeight&&n.style.setProperty("--min_height",t.minHeight),t.maxHeight&&n.style.setProperty("--max_height",t.maxHeight),document.body.appendChild(n),n.open(),n}static confirm(e,t,o={}){return Dialog.create(e,{title:o.title||"Confirm",closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>t(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>t(!1),...o})}static alert(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Alert",closeCallback:t,cancelText:"Ok",...o})}static error(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Error",titleClasses:"pyh px m0 tc-danger",closeCallback:t,cancelText:"Ok",...o})}static success(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Success",titleClasses:"pyh px m0 tc-success",closeCallback:t,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);

package/docs/src/components/Icon.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;for(let t=0;t<Icon.pathToIcons.length&&!o;t++)try{o=await e(Icon.pathToIcons[t])}catch(t){}t(o||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon(),t.has("iconContent")&&this.fixSVG()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=t;else{const t=this.innerHTML.trim();this.iconContent=t||Icon.fallback}}fixSVG(){setTimeout(()=>{const t=this.querySelector("svg");t&&(t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}))},0)}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;for(let t=0;t<Icon.pathToIcons.length&&!o;t++)try{o=await e(Icon.pathToIcons[t])}catch(t){}t(o||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):Icon.fallback}}fixSVG(t){if(!t)return t;const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return e?(e.removeAttribute("width"),e.removeAttribute("height"),e.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(e)):t}static styles=css`
 		:host {
 			display: inline-block;
 			vertical-align: bottom;

package/docs/src/components/Toggle.js

@@ -1,4 +1,11 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
+      <div id="switch">
+        <div id="handle"></div>
+      </div>
+      <label id="label">
+        <slot></slot>
+      </label>
+    `}static styles=css`
     :host {
       --switch_height: 2rem;
       --switch_width: 3rem;
@@ -19,11 +26,6 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       outline: none;
     }
 
-    :host(:focus) {
-      outline: 2px solid var(--c_primary, blue);
-      outline-offset: 2px;
-    }
-
     #switch {
       display: flex;
       align-items: center;
@@ -33,6 +35,12 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       background: var(--switch_background__off);
       border-radius: 999rem;
       margin-right: var(--spacer);
+      box-shadow: 0 0 0 transparent;
+      will-change: box-shadow;
+      transition: box-shadow var(--animation_ms, 256ms);
+    }
+    :host(:focus) #switch {
+      box-shadow: var(--focus_shadow);
     }
 
     #handle {
@@ -64,11 +72,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       flex: 1 1 auto;
       padding: 0;
     }
-  `;constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
-      <div id="switch">
-        <div id="handle"></div>
-      </div>
-      <label id="label">
-        <slot></slot>
-      </label>
-    `}}window.customElements.define("k-toggle",Toggle);
+  `}window.customElements.define("k-toggle",Toggle);

package/docs/src/components/Tree.js

@@ -6,12 +6,12 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"..
 			<div class="tree-root">
 				${Tree.renderValue(this.data,null,0,this.depth)}
 			</div>
-		`:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,r=0){const a=Tree.leafs.find(t=>t.detect(e));if(a){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const r=new a(e).render();if(r instanceof Node)s.appendChild(r);else{const e=document.createElement("span");render(r,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const a=new TreeBranch;return a.value=e,a.key=t,a.currentDepth=s,a.maxDepth=r,a}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
+		`:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,a=0){const r=Tree.leafs.find(t=>t.detect(e));if(r){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const a=new r(e).render();if(a instanceof Node)s.appendChild(a);else{const e=document.createElement("span");render(a,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const r=new TreeBranch;return r.value=e,r.key=t,r.currentDepth=s,r.maxDepth=a,r}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
 			<div>
-				<div class="branch-label" @click=${this.toggle}>
+				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
 					<k-icon name="chevron-right" class="toggle-icon ${this.opened?"opened":""}"></k-icon>
 					${e}${t}
-				</div>
+				</button>
 				${this.opened?html`
 					<div class="pl">
 						${this.value?(Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)).map(([e,t])=>Tree.renderValue(t,e,this.currentDepth+1,this.maxDepth)):""}
@@ -23,11 +23,19 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"..
 			display: block;
 		}
 		.branch-label{
+			display: block;
+			width: 100%;
 			cursor: pointer;
 		}
 		.branch-label:hover{
 			background-color: var(--c_bg__alt, #f5f5f5);
 		}
+		.branch-label:focus{
+			box-shadow: none;
+		}
+		.branch-label:focus-visible{
+			box-shadow: var(--focus_shadow);
+		}
 		.toggle-icon{
 			transition: transform var(--animation_ms, 200ms);
 		}

package/docs/utils/debounce.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>debounce - Kempo UI</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="./init.js"></script>
 </head>
@@ -32,14 +32,7 @@
 
     <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">import debounce from './utils/debounce.js';
-
-const handleSearch = debounce((query) => {
-  console.log('Searching for:', query);
-}, 300);
-
-// Will only execute after 300ms of no calls
-handleSearch('test');</code></pre>
+    <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>
@@ -50,22 +43,10 @@ handleSearch('test');</code></pre>
     <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
     
     <h4>Search Input Debouncing</h4>
-    <pre><code class="hljs javascript">const debouncedSearch = debounce((searchTerm) => {
-  // API call or expensive search operation
-  performSearch(searchTerm);
-}, 500);
-
-searchInput.addEventListener('input', (e) => {
-  debouncedSearch(e.target.value);
-});</code></pre>
+    <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">const debouncedResize = debounce(() => {
-  // Expensive layout calculations
-  recalculateLayout();
-}, 250);
-
-window.addEventListener('resize', debouncedResize);</code></pre>
+    <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>

package/docs/utils/drag.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>drag - Kempo UI</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="./init.js"></script>
 </head>
@@ -60,17 +60,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>

package/docs/utils/formatTimestamp.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>formatTimestamp - Kempo UI</title>
-  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="./init.js"></script>
 </head>
@@ -33,11 +33,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>
@@ -78,30 +74,16 @@ 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>