kempo-ui 0.0.8 → 0.0.10

package/docs/components/tags.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tags - 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>
@@ -35,24 +35,54 @@
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Use the <code>Tags</code> component to allow users to add and remove tags. Tags can be added by typing them into the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking on it.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
-    <k-tags>
-      <label>Tags</label>
-    </k-tags>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-tags>
+            <label>Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
 
     <h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
     <p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can be added.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Allowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
-    <k-tags allowed-tags="tag1,tag2,tag3">
-      <label>Allowed Tags</label>
-    </k-tags>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Allowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-tags allowed-tags="tag1,tag2,tag3">
+            <label>Allowed Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
 
     <h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
     <p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Disallowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
-    <k-tags disallowed-tags="tag1,tag2,tag3">
-      <label>Disallowed Tags</label>
-    </k-tags>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Disallowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-tags disallowed-tags="tag1,tag2,tag3">
+            <label>Disallowed Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
 
     <h2 id="jsRef">JavaScript Reference</h2>
 
@@ -96,9 +126,8 @@
     <p>Fired when the allowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
     <h5><code>disallowedtagschange</code></h5>
     <p>Fired when the disallowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
-
   </main>
-  <script type="module" src="../src/components/Import.js"></script> 
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Tags.js"></script>
 </body>
 </html>

package/docs/components/theme-switcher.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ThemeSwitcher - 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>
@@ -112,9 +112,8 @@
     <h3 id="themeDetection"><a href="#themeDetection" class="no-link">Automatic Theme Detection</a></h3>
     <p>When the theme is set to <code>"auto"</code>, the component automatically detects the user's system preference using <code>prefers-color-scheme</code> media query. The detected theme is applied to the document element as an <code>auto-theme</code> attribute.</p>
     <p>The component also synchronizes theme changes across browser tabs using the storage event, ensuring a consistent user experience.</p>
-
   </main>
-  <script type="module" src="../src/components/Import.js"></script> 
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/ThemeSwitcher.js"></script> 
 </body>
 </html>

package/docs/components/timestamp.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Timestamp - 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>
@@ -33,18 +33,50 @@
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp using the default format or a custom format with tokens.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
-    <k-timestamp timestamp="1633024800000"></k-timestamp>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-timestamp timestamp="1633024800000"></k-timestamp>
+        </k-card>
+      </div>
+    </div>
 
     <h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
     <p>Use the <code>format</code> attribute to specify a custom format using tokens like <code>YYYY</code> (4-digit year), <code>MM</code> (2-digit month), <code>DD</code> (2-digit day), <code>hh</code> (2-digit hour), <code>mm</code> (2-digit minute), and <code>ss</code> (2-digit second).</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"MM/DD/YYYY"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
-    <k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"MM/DD/YYYY"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
+        </k-card>
+      </div>
+    </div>
 
     <h3 id="timeFormat"><a href="#timeFormat" class="no-link">Time Format</a></h3>
     <p>Display time with custom formatting using hour, minute, and second tokens.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hh:mm:ss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
-    <k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hh:mm:ss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
+        </k-card>
+      </div>
+    </div>
+    
+    
 
     <h2 id="jsRef">JavaScript Reference</h2>
 
@@ -67,10 +99,8 @@
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the ShadowComponent class.</p>
-
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/Timestamp.js"></script> 
 </body>
 </html>

package/docs/components/toast.html

@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Toast - 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>
@@ -23,11 +24,13 @@
         <a href="#positions">Different Positions</a><br />
         <a href="#timeouts">Timeouts</a><br />
         <a href="#actionAndClose">Action and Close Buttons</a><br />
+        <a href="#successWarningError">Success, Warning and Error</a><br />
 
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#staticMethods">Static Methods</a><br />
         <a href="#requirements">Requirements</a><br />
+        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
         <a href="#events">Events</a><br />
@@ -41,11 +44,315 @@
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <div class="row -mx">
       <div class="col d-span-6 t-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>Open Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</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">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>Open Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</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 t-span-6 m-span-12 px">
         <button id="example1" class="mb">Open Toast</button>
-        <script type="module" src="./init.js"></script>
+        <script type="module">
+          import Toast from '../src/components/Toast.js';
+          document.getElementById('example1').addEventListener('click', () => {
+            Toast.create("Hello World");
+          });
+        </script>
+      </div>
+    </div>
+
+
+    <h3 id="positions"><a href="#positions" class="no-link">Different Positions</a></h3>
+    <p>Toasts can be positioned in different corners of the screen using the <code>position</code> property.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-topleft"</span>&gt;</span>Top Left<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-topcenter"</span>&gt;</span>Top Center<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-topright"</span>&gt;</span>Top Right<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-bottomleft"</span>&gt;</span>Bottom Left<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-bottomcenter"</span>&gt;</span>Bottom Center<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-bottomright"</span>&gt;</span>Bottom Right<span class="hljs-tag">&lt;/<span class="hljs-name">button</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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-topleft'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello from top left!"</span>, {<br />      <span class="hljs-attr">position</span>: <span class="hljs-string">'top left'</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-topcenter'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello from top center!"</span>, {<br />      <span class="hljs-attr">position</span>: <span class="hljs-string">'top center'</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-topright'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello from top right!"</span>, {<br />      <span class="hljs-attr">position</span>: <span class="hljs-string">'top right'</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-bottomleft'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello from bottom left!"</span>, {<br />      <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom left'</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-bottomcenter'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello from bottom center!"</span>, {<br />      <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom center'</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-bottomright'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello from bottom right!"</span>, {<br />      <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom right'</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 t-span-6 m-span-12 px">
+        <button id="example2-topleft" class="mb">Top Left</button>
+        <button id="example2-topcenter" class="mb">Top Center</button>
+        <button id="example2-topright" class="mb">Top Right</button><br />
+        <button id="example2-bottomleft" class="mb">Bottom Left</button>
+        <button id="example2-bottomcenter" class="mb">Bottom Center</button>
+        <button id="example2-bottomright" class="mb">Bottom Right</button>
+        <script type="module">
+          import Toast from '../src/components/Toast.js';
+          document.getElementById('example2-topleft').addEventListener('click', () => {
+            Toast.create("Hello from top left!", {
+              position: 'top left'
+            });
+          });
+          document.getElementById('example2-topcenter').addEventListener('click', () => {
+            Toast.create("Hello from top center!", {
+              position: 'top center'
+            });
+          });
+          document.getElementById('example2-topright').addEventListener('click', () => {
+            Toast.create("Hello from top right!", {
+              position: 'top right'
+            });
+          });
+          document.getElementById('example2-bottomleft').addEventListener('click', () => {
+            Toast.create("Hello from bottom left!", {
+              position: 'bottom left'
+            });
+          });
+          document.getElementById('example2-bottomcenter').addEventListener('click', () => {
+            Toast.create("Hello from bottom center!", {
+              position: 'bottom center'
+            });
+          });
+          document.getElementById('example2-bottomright').addEventListener('click', () => {
+            Toast.create("Hello from bottom right!", {
+              position: 'bottom right'
+            });
+          });
+        </script>
+      </div>
+    </div>
+
+    <h3 id="timeouts"><a href="#timeouts" class="no-link">Timeouts</a></h3>
+    <p>Toasts can automatically close after a specified timeout (in milliseconds). The default timeout when using <code>Toast.create</code> is <code>5000</code> (ms), or 5 seconds.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-1"</span>&gt;</span>Open 1 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-3"</span>&gt;</span>Open 3 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-10"</span>&gt;</span>Open 10 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"I will timeout in 1 second"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-3'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"I will timeout in 3 second"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-10'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"I will timeout in 10 second"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</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 t-span-6 m-span-12 px">
+        <button id="example3-1" class="mb">Open 1 Second Timeout Toast</button>
+        <button id="example3-3" class="mb">Open 3 Second Timeout Toast</button>
+        <button id="example3-10" class="mb">Open 10 Second Timeout Toast</button>
+        <script type="module">
+          import Toast from '../src/components/Toast.js';
+          document.getElementById('example3-1').addEventListener('click', () => {
+            Toast.create("I will timeout in 1 second", {
+              timeout: 1000
+            });
+          });
+          document.getElementById('example3-3').addEventListener('click', () => {
+            Toast.create("I will timeout in 3 second", {
+              timeout: 3000
+            });
+          });
+          document.getElementById('example3-10').addEventListener('click', () => {
+            Toast.create("I will timeout in 10 second", {
+              timeout: 10000
+            });
+          });
+        </script>
+      </div>
+    </div>
+    
+
+    <h3 id="actionAndClose"><a href="#actionAndClose" class="no-link">Action and Close Buttons</a></h3>
+    <p>Toasts can have action and close buttons that trigger callbacks when clicked.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action"</span>&gt;</span>Open Toast with Action<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-close"</span>&gt;</span>Open Toast with Close Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action-close"</span>&gt;</span>Open Toast with Action and Close Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br />      <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br />      <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br />      }<br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br />      <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br />      <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br />      }<br />    });<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>, {<br />      <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br />      <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br />      <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br />        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// return false to prevent closing</span><br />      },<br />      <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br />      <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />        Toast.create(<span class="hljs-string">"You closed the toast"</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 t-span-6 m-span-12 px">
+        <button id="example4-action" class="mb">Open Toast with Action</button>
+        <button id="example4-close" class="mb">Open Toast with Close Button</button>
+        <button id="example4-action-close" class="mb">Open Toast with Action and Close Button</button>
+        <script type="module">
+          import Toast from '../src/components/Toast.js';
+          document.getElementById('example4-action').addEventListener('click', () => {
+            Toast.create("Hello World", {
+              timeout: 0,
+              action: 'Click Me',
+              actionCallback: () => {
+                Toast.create("You clicked the action");
+              }
+            });
+          });
+          document.getElementById('example4-close').addEventListener('click', () => {
+            Toast.create("Hello World", {
+              timeout: 0,
+              close: '<k-icon name="close"></div>',
+              closeCallback: () => {
+                Toast.create("You closed the toast");
+              }
+            });
+          });
+          document.getElementById('example4-action-close').addEventListener('click', () => {
+            Toast.create("Hello World", {
+              timeout: 0,
+              action: 'Click Me',
+              actionCallback: () => {
+                Toast.create("You clicked the action");
+                return false; // return false to prevent closing
+              },
+              close: '<k-icon name="close"></div>',
+              closeCallback: () => {
+                Toast.create("You closed the toast");
+              }
+            });
+          });
+        </script>
+      </div>
+    </div>
+
+    <h3 id="successWarningError"><a href="#successWarningError" class="no-link">Success, Warning and Error</a></h3>
+    <p>Toasts can be created as a success, warning or error message.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-success"</span>&gt;</span>Success Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-warning"</span>&gt;</span>Warning Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-error"</span>&gt;</span>Error Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-success'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.success(<span class="hljs-string">"It Worked!"</span>);<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-warning'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.warning(<span class="hljs-string">"Be Careful"</span>);<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-error'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.error(<span class="hljs-string">"That's a very bad idea"</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 t-span-6 m-span-12 px">
+        <button id="example5-success" class="mb">Success Toast</button>
+        <button id="example5-warning" class="mb">Warning Toast</button>
+        <button id="example5-error" class="mb">Error Toast</button>
+        <script type="module">
+          import Toast from '../src/components/Toast.js';
+          document.getElementById('example5-success').addEventListener('click', () => {
+            Toast.success("It Worked!");
+          });
+          document.getElementById('example5-warning').addEventListener('click', () => {
+            Toast.warning("Be Careful");
+          });
+          document.getElementById('example5-error').addEventListener('click', () => {
+            Toast.error("That's a very bad idea");
+          });
+        </script>
+      </div>
+    </div>
+
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Toast()</code><br />
+      <code>new Toast(<i>object</i> options)</code>
+    </h5>
+
+    <h4>Parameters</h4>
+    <h5><code>options<i>: object</i></code></h5>
+    <p>An object with the following optional properties:</p>
+    <ul>
+      <li><code>actionCallback<i>: function</i></code> - Function to call when the action button is clicked. If this function returns <code>false</code>, the toast will not close.</li>
+      <li><code>actionHtml<i>: string</i></code> - HTML content for the action button.</li>
+      <li><code>closeCallback<i>: function</i></code> - Function to call when the toast is closed.</li>
+      <li><code>closeHtml<i>: string</i></code> - HTML content for the close button.</li>
+      <li><code>timeout<i>: number</i></code> - Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close).</li>
+    </ul>
+
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>Toast.create(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays a new toast with the specified message and options. Returns the created Toast instance.</p>
+    <p>Options include:</p>
+    <ul>
+      <li><code>position<i>: string</i></code> - Position of the toast on the screen. Default is 'auto', which uses 'bottom center' on mobile and 'top right' on desktop. Valid positions are: 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'.</li>
+      <li><code>removeOnClose<i>: boolean</i></code> - If true, the toast element will be removed from the DOM when closed. Default is true.</li>
+      <li><code>timeout<i>: number</i></code> - Time in milliseconds before the toast automatically closes. Default is 5000ms (5 seconds).</li>
+      <li><code>action<i>: string | HTMLElement</i></code> - Text or HTML element to use for the action button.</li>
+      <li><code>actionCallback<i>: function</i></code> - Function to call when the action button is clicked. If this function returns <code>false</code>, the toast will not close.</li>
+      <li><code>close<i>: string | HTMLElement</i></code> - Text or HTML element to use for the close button.</li>
+      <li><code>closeCallback<i>: function</i></code> - Function to call when the toast is closed.</li>
+      <li><code>icon<i>: string | HTMLElement</i></code> - Text or HTML element to use as an icon in the toast.</li>
+    </ul>
+
+    <h5><code>Toast.success(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays a success toast with a check icon and applies a success background style. Accepts the same options as <code>Toast.create()</code>.</p>
+
+    <h5><code>Toast.warning(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays a warning toast with a warning icon and applies a warning background style. Accepts the same options as <code>Toast.create()</code>.</p>
+
+    <h5><code>Toast.error(message, options)<i>: Toast</i></code></h5>
+    <p>Creates and displays an error toast with an error icon and applies a danger background style. Accepts the same options as <code>Toast.create()</code>.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a> (for success, warning, and error toasts)</li>
+    </ul>
+
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>action-html<i>: string</i></code></h5>
+    <p>HTML content for the action button.</p>
+
+    <h5><code>close-html<i>: string</i></code></h5>
+    <p>HTML content for the close button.</p>
+
+    <h5><code>timeout<i>: number</i></code></h5>
+    <p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close).</p>
+
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the toast is currently open. Default is false.</p>
+
+    <h5><code>has-action<i>: boolean</i></code></h5>
+    <p>Whether the toast has an action button. Automatically set based on slotted content.</p>
+
+    <h5><code>has-close<i>: boolean</i></code></h5>
+    <p>Whether the toast has a close button. Automatically set based on slotted content.</p>
+
+    <h5><code>has-icon<i>: boolean</i></code></h5>
+    <p>Whether the toast has an icon. Automatically set based on slotted content.</p>
+
+    <h5><code>position<i>: string</i></code></h5>
+    <p>Position of the toast on the screen.</p>
+
+    <h5><code>animating<i>: string</i></code></h5>
+    <p>Current animation state ('in', 'out', or empty string).</p>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>actionCallback<i>: function</i></code></h5>
+    <p>Function to call when the action button is clicked.</p>
+
+    <h5><code>closeCallback<i>: function</i></code></h5>
+    <p>Function to call when the toast is closed.</p>
+
+    <h5><code>actionHtml<i>: string</i></code></h5>
+    <p>HTML content for the action button.</p>
+
+    <h5><code>closeHtml<i>: string</i></code></h5>
+    <p>HTML content for the close button.</p>
+
+    <h5><code>timeout<i>: number</i></code></h5>
+    <p>Time in milliseconds before the toast automatically closes.</p>
+
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the toast is currently open.</p>
+
+    <h5><code>hasAction<i>: boolean</i></code></h5>
+    <p>Whether the toast has an action button.</p>
+
+    <h5><code>hasClose<i>: boolean</i></code></h5>
+    <p>Whether the toast has a close button.</p>
+
+    <h5><code>hasIcon<i>: boolean</i></code></h5>
+    <p>Whether the toast has an icon.</p>
+
+    <h5><code>position<i>: string</i></code></h5>
+    <p>Position of the toast on the screen.</p>
+
+    <h5><code>animating<i>: string</i></code></h5>
+    <p>Current animation state.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: void</i></code></h5>
+    <p>Opens the toast. If a timeout is specified, this starts the timer for automatic closing.</p>
+
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the toast and calls the <code>closeCallback</code> if provided.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>open</code></h5>
+    <p>Fired when the toast is opened.</p>
+
+    <h5><code>close</code></h5>
+    <p>Fired when the toast is closed.</p>
+
+    <h5><code>openchange</code></h5>
+    <p>Fired when the toast open state changes (both when opening and closing).</p>
+
+    <h3 id="toastContainer"><a href="#toastContainer" class="no-link">ToastContainer</a></h3>
+    <p>The <code>ToastContainer</code> is an internal component used to position and display toasts. It is automatically created when <code>Toast.create()</code> is called, but can also be used directly.</p>
+    
+    <h5><code>new ToastContainer(position)</code></h5>
+    <p>Creates a new toast container at the specified position.</p>
+    
+    <h5><code>position<i>: string</i></code></h5>
+    <p>The position of the container on the screen. Valid values are: 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'.</p>
+    
+  </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Toast.js"></script>
 </body>
 </html>

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>