kempo-ui 0.0.3 → 0.0.5

package/docs/components/tabs.html

@@ -7,8 +7,10 @@
   <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>
@@ -29,9 +31,9 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</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 />
       </div>
     </details>
 
@@ -135,17 +137,24 @@
 
     <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>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5><code>new Tabs()</code></h5>
+    
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>active<i>: string</i></code></h5>
-    <p>The name of the active tab.</p>
-    <h5><code>fixed-height<i>: boolean</i></code></h5>
-    <p>When true, the tabs component will fill its container height and enable content scrolling.</p>
+    <p>The name of the active tab. Syncs to <code>active</code> attribute.</p>
+    <h5><code>fixedHeight<i>: boolean</i></code></h5>
+    <p>Whether the tabs component uses fixed height mode. Syncs to <code>fixed-height</code> attribute.</p>
+    <h5><code>contents<i>: TabContent[]</i></code></h5>
+    <p>Returns an array of all tab content elements.</p>
+    <h5><code>tabs<i>: Tab[]</i></code></h5>
+    <p>Returns an array of all tab elements.</p>
+    
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>getActiveTab()<i>: Tab</i></code></h5>
     <p>Returns the currently active tab.</p>
@@ -155,6 +164,14 @@
     <p>Returns the currently active tab content.</p>
     <h5><code>getContent(id)<i>: TabContent</i></code></h5>
     <p>Returns the tab content with the specified id.</p>
+    <h5><code>updateActiveElements()<i>: void</i></code></h5>
+    <p>Updates the active state of tabs and content based on the current active property.</p>
+    <h5><code>updateScrollIndicators()<i>: void</i></code></h5>
+    <p>Updates the visibility of scroll indicators based on tab overflow.</p>
+    
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>tab</code></h5>
+    <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>

package/docs/components/tags.html

@@ -7,8 +7,10 @@
   <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>
@@ -28,14 +30,14 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</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 />
       </div>
     </details>
 
     <h3>Description</h3>
-    <p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a href="./component.html">Component</a> class.</p>
+    <p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a href="./shadow-component.html">ShadowComponent</a> class.</p>
 
     <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>
@@ -61,23 +63,23 @@
     <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>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5>
       <code>new Tags()</code>
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>value<i>: string</i></code></h5>
-    <p>A comma-separated list of tags.</p>
+    <p>A comma-separated list of tags. Syncs with the <code>value</code> attribute.</p>
     <h5><code>allowedTags<i>: string</i></code></h5>
-    <p>A comma-separated list of allowed tags. If specified, only these tags can be added.</p>
+    <p>A comma-separated list of allowed tags. If specified, only these tags can be added. Syncs with the <code>allowed-tags</code> attribute.</p>
     <h5><code>disallowedTags<i>: string</i></code></h5>
-    <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added.</p>
+    <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the <code>disallowed-tags</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>addTag(tag)<i>: void</i></code></h5>
@@ -86,6 +88,20 @@
     <p>Removes a tag from the list of tags.</p>
     <h5><code>validateTags()<i>: string</i></code></h5>
     <p>Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.</p>
+    <h5><code>renderTags()<i>: Promise&lt;void&gt;</i></code></h5>
+    <p>Re-renders the tag elements in the component.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>change</code></h5>
+    <p>Fired when the value changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
+    <h5><code>addtag</code></h5>
+    <p>Fired when a tag is added. Detail contains <code>{ tag }</code>.</p>
+    <h5><code>removetag</code></h5>
+    <p>Fired when a tag is removed. Detail contains <code>{ tag }</code>.</p>
+    <h5><code>allowedtagschange</code></h5>
+    <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> 

package/docs/components/theme-switcher.html

@@ -7,8 +7,10 @@
   <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>
@@ -27,7 +29,6 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#cssCustomProperties">CSS Custom Properties</a><br />
         <a href="#methods">Methods</a><br />
@@ -85,13 +86,9 @@
       <li><a href="./icon.html">Icon</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <h5><code>current-theme<i>: string</i></code></h5>
-    <p>Reflects the current theme state. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This attribute is automatically updated when the theme changes.</p>
-
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>currentTheme<i>: string</i></code></h5>
-    <p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed.</p>
+    <p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed. Syncs to <code>current-theme</code> attribute.</p>
 
     <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
     <h5><code>--padding<i>: length</i></code></h5>

package/docs/components/timestamp.html

@@ -7,8 +7,10 @@
   <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>
@@ -27,59 +29,53 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</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 />
       </div>
     </details>
 
     <h3>Description</h3>
-    <p>The <code>Timestamp</code> component displays a formatted timestamp. It extends the <a href="./component.html">Component</a> class.</p>
+    <p>The <code>Timestamp</code> component displays a formatted timestamp using custom format tokens. It extends the ShadowComponent class for encapsulated styling.</p>
 
     <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 based on the provided locale or the user's current locale if no locale is provided.</p>
+    <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>
 
     <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 for the timestamp. The format should be a string like <code>YYYY-MM-DD hh:mm:ss:iiii</code>.</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">"YYYY-MM-DD 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="YYYY-MM-DD hh:mm:ss"></k-timestamp>
+    <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>
+
+    <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>
 
     <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 Timestamp(timestamp, format, locale)</code>
-    </h5>
-
-    <h4>Parameters</h4>
-    <h5><code>timestamp<i>: number</i></code></h5>
-    <p>The timestamp to be formatted and displayed.</p>
-    <h5><code>format<i>: string</i></code></h5>
-    <p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
-    <h5><code>locale<i>: string</i></code></h5>
-    <p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
+    <h6>Extends ShadowComponent</h6>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li>ShadowComponent</li>
       <li><a href="../utils/formatTimestamp.js">formatTimestamp Utility Function</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>timestamp<i>: number</i></code></h5>
-    <p>The timestamp to be formatted and displayed.</p>
+    <p>The timestamp to be formatted and displayed. Syncs to <code>timestamp</code> attribute.</p>
     <h5><code>format<i>: string</i></code></h5>
-    <p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
+    <p>The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided, uses the default format. Syncs to <code>format</code> attribute.</p>
     <h5><code>locale<i>: string</i></code></h5>
-    <p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
+    <p>The locale to be used for formatting the timestamp. Syncs to <code>locale</code> attribute.</p>
 
     <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 <a href="./component.html">Component</a> class.</p>
+    <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>

package/docs/components/toast.html

@@ -9,8 +9,10 @@
   <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>
 </head>
 <body>
@@ -32,7 +34,6 @@
         <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 />
@@ -46,12 +47,12 @@
     <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">'/kempo/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">
-          import Toast from '/kempo/components/Toast.js';
+          import Toast from '/src/components/Toast.js';
           document.getElementById('example1').addEventListener('click', () => {
             Toast.create("Hello World");
           });
@@ -74,7 +75,7 @@
         <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/components/Toast.js';
+          import Toast from '/src/components/Toast.js';
           document.getElementById('example2-topleft').addEventListener('click', () => {
             Toast.create("Hello Top Left", {
               position: "top left"
@@ -113,14 +114,14 @@
     <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">'/kempo/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>
+        <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/components/Toast.js';
+          import Toast from '/src/components/Toast.js';
           document.getElementById('example3-1').addEventListener('click', () => {
             Toast.create("I will timeout in 1 second", {
               timeout: 1000
@@ -145,14 +146,14 @@
     <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">'/kempo/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>
+        <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/components/Toast.js';
+          import Toast from '/src/components/Toast.js';
           document.getElementById('example4-action').addEventListener('click', () => {
             Toast.create("Hello World", {
               timeout: 0,
@@ -193,14 +194,14 @@
     <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">'/kempo/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>
+        <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/components/Toast.js';
+          import Toast from '/src/components/Toast.js';
           document.getElementById('example5-success').addEventListener('click', () => {
             Toast.success("It Worked!");
           });
@@ -261,41 +262,29 @@
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li>ShadowComponent (configure <code>ShadowComponent.stylesheetPath</code> as needed for your server)</li>
+      <li><a href="./icon.html">Icon</a></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>
+    <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>close-html<i>: string</i></code></h5>
-    <p>HTML content for the close button.</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).</p>
+    <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.</p>
+    <p>Whether the toast is currently open. Default is false. Syncs to <code>opened</code> attribute.</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>
-
     <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>
@@ -323,6 +312,8 @@
     <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>
-  <script type="module" src="../src/components/Import.js"></script> 
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Toast.js"></script>
 </body>
 </html>

package/docs/components/toggle.html

@@ -9,8 +9,10 @@
   <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>
 </head>
 <body>
@@ -29,7 +31,6 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</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 />
       </div>
@@ -132,9 +133,9 @@
       <li><a href="./component.html">Component</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>value<i>: boolean</i></code></h5>
-    <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
+    <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>. Syncs to <code>value</code> attribute.</p>
     <p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>

package/docs/icons/error.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="error" d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>

package/docs/icons/warning.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="warning" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>