kempo-ui 0.0.6 → 0.0.8

package/docs/components/tableCustomFields.html

@@ -6,14 +6,10 @@
   <title>Custom Fields - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableFetchRecords.html

@@ -6,14 +6,10 @@
   <title>Table - Fetch Records - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableFieldSortHide.html

@@ -6,14 +6,10 @@
   <title>Field Sort and Hide - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tablePagination.html

@@ -6,14 +6,10 @@
   <title>Pagination - Table - 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" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableRecordEditing.html

@@ -6,14 +6,10 @@
   <title>Record Editing - Table - 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" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableRecordFiltering.html

@@ -6,14 +6,10 @@
   <title>Record Filtering - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableRecordHiding.html

@@ -6,14 +6,10 @@
   <title>Row Controls - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableRecordSearching.html

@@ -6,14 +6,10 @@
   <title>Record Searching - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableRecordSelection.html

@@ -6,14 +6,10 @@
   <title>Record Selection - Table - 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" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableRowControls.html

@@ -6,14 +6,10 @@
   <title>Row Controls - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tableSorting.html

@@ -6,14 +6,10 @@
   <title>Sorting - Table - Kempo Docs</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" />
   <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
   <script type="module" src="../src/components/Table.js"></script>
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){

package/docs/components/tabs.html

@@ -5,15 +5,9 @@
   <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="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/tags.html

@@ -5,15 +5,9 @@
   <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" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/theme-switcher.html

@@ -5,15 +5,9 @@
   <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" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/timestamp.html

@@ -5,15 +5,9 @@
   <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" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/toast.html

@@ -5,15 +5,9 @@
   <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" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>
@@ -51,269 +45,7 @@
       </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 '/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 '/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 '/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="./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="../src/components/Import.js"></script>
+        <script type="module" src="./init.js"></script>
   <script type="module" src="../src/components/Toast.js"></script>
 </body>
 </html>