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

kempo-ui 0.0.13 → 0.0.15

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

Files changed (181) hide show

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

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Tabs</h1>
   <main>
     <details class="b r mb">
@@ -169,7 +170,7 @@
     <p>Fired when the active tab changes. Detail contains <code>{ tab }</code> with the name of the new active tab.</p>
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Tabs.js"></script>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Tabs.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

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

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tags - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Tags</h1>
   <main>
     <details class="b r mb">
@@ -99,7 +100,7 @@
     <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>
-  <script type="module" src="../src/components/Tags.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Tags.js"></script>
 </body>
 </html>

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

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ThemeSwitcher - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">ThemeSwitcher</h1>
   <main>
     <details class="b r mb">
@@ -115,7 +116,7 @@
     <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>
-  <script type="module" src="../src/components/ThemeSwitcher.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/ThemeSwitcher.js"></script>
 </body>
 </html>

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

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Timestamp - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Timestamp</h1>
   <main>
     <details class="b r mb">
@@ -71,7 +72,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Timestamp.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Timestamp.js"></script>
 </body>
 </html>

package/docs/kempo-ui/components/toast.html ADDED Viewed

@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <base href="/kempo-ui/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toast - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+</head>
+<body>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <h1 class="ta-center">Toast</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#positions">Different Positions</a><br />
+        <a href="#timeouts">Timeouts</a><br />
+        <a href="#actionAndClose">Action and Close Buttons</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="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+        <a href="#events">Events</a><br />
+        <a href="#toastContainer">ToastContainer</a><br />
+      </div>
+    </details>
+    <h3>Description</h3>
+    <p>The Toast component provides a way to display short-lived notifications to users. Toasts appear in a corner of the screen, can be configured with different positions, and can optionally include action and close buttons. Toasts can be set to automatically close after a specified timeout or remain until manually dismissed.</p>
+    <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>
+      </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">
+          import Toast from '/kempo-ui/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">
+      </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 '/kempo-ui/src/components/Toast.js';
+          document.getElementById('example2-topleft').addEventListener('click', () => {
+            Toast.create("Hello Top Left", {
+              position: "top left"
+            });
+          });
+          document.getElementById('example2-topcenter').addEventListener('click', () => {
+            Toast.create("Hello Top Center", {
+              position: "top center"
+            });
+          });
+          document.getElementById('example2-topright').addEventListener('click', () => {
+            Toast.create("Hello Top Right", {
+              position: "top right"
+            });
+          });
+          document.getElementById('example2-bottomleft').addEventListener('click', () => {
+            Toast.create("Hello Bottom Left", {
+              position: "bottom left"
+            });
+          });
+          document.getElementById('example2-bottomcenter').addEventListener('click', () => {
+            Toast.create("Hello Bottom Center", {
+              position: "bottom center"
+            });
+          });
+          document.getElementById('example2-bottomright').addEventListener('click', () => {
+            Toast.create("Hello 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 '/kempo-ui/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 '/kempo-ui/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 '/kempo-ui/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="./component.html">Component</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>ShadowComponent (configure <code>ShadowComponent.stylesheetPath</code> as needed for your server)</li>
+      <li><a href="./icon.html">Icon</a></li>
+    </ul>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>actionHtml<i>: string</i></code></h5>
+    <p>HTML content for the action button. Syncs to <code>action-html</code> attribute.</p>
+    <h5><code>closeHtml<i>: string</i></code></h5>
+    <p>HTML content for the close button. Syncs to <code>close-html</code> attribute.</p>
+    <h5><code>timeout<i>: number</i></code></h5>
+    <p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close). Syncs to <code>timeout</code> attribute.</p>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the toast is currently open. Default is false. Syncs to <code>opened</code> attribute.</p>
+    <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>
+    <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="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Toast.js"></script>
+</body>
+</html>

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

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Toggle</h1>
   <main>
     <details class="b r mb">
@@ -145,7 +146,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Toggle.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Toggle.js"></script>
 </body>
 </html>