kempo-ui 0.0.8 → 0.0.9

package/docs/components/content-slider.html

@@ -211,6 +211,7 @@
     <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
     
   </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/ContentSlider.js"></script> 
 </body>

package/docs/components/dialog.html

@@ -22,10 +22,12 @@
         <a href="#titles">Titles</a><br />
         <a href="#actionButtons">Action Buttons</a><br />
         <a href="#jsUsage">JavaScript Usage</a><br />
+        <a href="#confirmDialog">Confirm Dialog</a><br />
         
         <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="#staticMethods">Static Methods</a><br />
@@ -34,7 +36,7 @@
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Create dialogs using the <code>k-dialog</code> component. Open the dialog by calling the <code>open()</code> method, and close it by calling the <code>close()</code> method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"doument.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
     <button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
     <k-dialog id="d1">
       <p class="p">Hello World</p>
@@ -88,9 +90,239 @@
 
     <h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
     <h5>Create Dialog</h5>
-    <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">"d7"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</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">"d7"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.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>
     <button id="d7" class="mb">Open Dialog</button>
-    <script type="module" src="./init.js"></script> 
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d7').addEventListener('click', () => {
+        Dialog.create('Hello World');
+      });
+    </script>
+
+    <h5>Dialog with Title</h5>
+    <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">"d7b"</span>&gt;</span>Open Dialog with Title<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7b'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.create(<span class="hljs-string">'This is the dialog content'</span>, {<br />      <span class="hljs-attr">title</span>: <span class="hljs-string">'My Dialog Title'</span><br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <button id="d7b" class="mb">Open Dialog with Title</button>
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d7b').addEventListener('click', () => {
+        Dialog.create('This is the dialog content', {
+          title: 'My Dialog Title'
+        });
+      });
+    </script>
+
+    <h5>Error Dialog</h5>
+    <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">"d8"</span>&gt;</span>Open Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.error(<span class="hljs-string">"Oh no, don't do that!"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <button id="d8" class="mb">Open Dialog</button>
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d8').addEventListener('click', () => {
+        Dialog.error("Oh no, don't do that!");
+      });
+    </script>
+
+    <h3 id="confirmDialog"><a href="#confirmDialog" class="no-link">Confirm Dialog</a></h3>
+    <p>Use the <code>Dialog.confirm</code> static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.</p>
+    <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">"d9"</span>&gt;</span>Open Confirm Dialog<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> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {<br />      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br />    });<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <button id="d9" class="mb">Open Confirm Dialog</button>
+    <script type="module">
+      import Dialog from '../src/components/Dialog.js';
+      document.getElementById('d9').addEventListener('click', () => {
+        Dialog.confirm("Are you sure you want to proceed?", response => {
+          console.log("User response:", response);
+        });
+      });
+    </script>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Dialog()</code><br />
+      <code>new Dialog(<i>object</i> options)</code>
+    </h5>
+
+    <h4>Parameters</h4>
+    <h5><code>options<i>: object</i></code></h5>
+    <p>An object containing the initial configuration for the dialog. The options object can contain the following properties:</p>
+    <ul>
+      <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
+      <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
+      <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
+      <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
+    </ul>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
+      <li><a href="./focus-capture.html">FocusCapture</a></li>
+    </ul>
+
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the dialog is opened.</p>
+    
+    <h5><code>close-btn<i>: boolean</i></code></h5>
+    <p>Whether to show the close button. Default is <code>true</code>.</p>
+    
+    <h5><code>overlay-close<i>: boolean</i></code></h5>
+    <p>Whether clicking the overlay closes the dialog. Default is <code>true</code>.</p>
+    
+    <h5><code>confirm-text<i>: string</i></code></h5>
+    <p>Text for the confirm button.</p>
+    
+    <h5><code>confirm-classes<i>: string</i></code></h5>
+    <p>Classes for the confirm button. Default is <code>'success ml'</code>.</p>
+    
+    <h5><code>cancel-text<i>: string</i></code></h5>
+    <p>Text for the cancel button.</p>
+    
+    <h5><code>cancel-classes<i>: string</i></code></h5>
+    <p>Classes for the cancel button.</p>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>confirmAction<i>: function</i></code></h5>
+    <p>Action to perform on confirm. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
+    
+    <h5><code>cancelAction<i>: function</i></code></h5>
+    <p>Action to perform on cancel. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
+    
+    <h5><code>closeCallback<i>: function</i></code></h5>
+    <p>Callback to execute when the dialog is closed.</p>
+    
+    <h5><code>previousFocus<i>: HTMLElement</i></code></h5>
+    <p>Reference to the element that had focus before the dialog was opened.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: void</i></code></h5>
+    <p>Opens the dialog and sets focus to the first focusable element or an element with the <code>autofocus</code> attribute.</p>
+    
+    <h5><code>close()<i>: void</i></code></h5>
+    <p>Closes the dialog and calls the <code>closeCallback</code>.</p>
+    
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Toggles the dialog open or closed.</p>
+    
+    <h5><code>focus()<i>: void</i></code></h5>
+    <p>Focuses the first focusable element in the dialog and saves the previously focused element.</p>
+    
+    <h5><code>blur()<i>: void</i></code></h5>
+    <p>Returns focus to the element that had focus before the dialog was opened.</p>
+
+    <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <h5><code>Dialog.create(contents, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a new dialog with the specified contents and options. Returns the created Dialog instance.</p>
+    <p>If <code>contents</code> is plain text (no HTML tags), it will automatically be wrapped in a <code>&lt;p class="p"&gt;</code> tag. If it contains HTML, it will be inserted as-is. If it's an HTMLElement or DocumentFragment, it will be appended directly.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>contents<i>: string | HTMLElement | DocumentFragment</i></code> - The content to display in the dialog. Plain text will be wrapped in a paragraph tag automatically.</li>
+      <li><code>options<i>: object</i></code> - Configuration options for the dialog.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string | HTMLElement</i> - The title to display in the dialog header. Will be wrapped in an <code>&lt;h5&gt;</code> tag with the <code>title</code> slot.</li>
+      <li><code>titleClasses</code>: <i>string</i> - CSS classes for the title element. Default is <code>'pyh px m0'</code>.</li>
+      <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened. Default is <code>true</code>.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
+      <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
+      <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
+      <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
+      <li><code>removeOnClose</code>: <i>boolean</i> - Whether to remove the dialog from the DOM when closed. Default is <code>true</code>.</li>
+      <li><code>closeExisting</code>: <i>boolean</i> - Whether to close existing dialogs before opening this one. Default is <code>true</code>.</li>
+      <li><code>width</code>: <i>string</i> - CSS width value for the dialog.</li>
+      <li><code>minWidth</code>: <i>string</i> - CSS min-width value for the dialog.</li>
+      <li><code>maxWidth</code>: <i>string</i> - CSS max-width value for the dialog.</li>
+      <li><code>height</code>: <i>string</i> - CSS height value for the dialog.</li>
+      <li><code>minHeight</code>: <i>string</i> - CSS min-height value for the dialog.</li>
+      <li><code>maxHeight</code>: <i>string</i> - CSS max-height value for the dialog.</li>
+    </ul>
+    
+    <h5><code>Dialog.confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>).</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called with the user's response (<code>true</code> for confirm, <code>false</code> for cancel).</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Confirm'</code>.</li>
+      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button. Default is <code>'Yes'</code>.</li>
+      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button. Default is <code>'success ml'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button. Default is <code>'No'</code>.</li>
+      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button. Default is <code>'danger'</code>.</li>
+      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button. Default is <code>false</code>.</li>
+      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog. Default is <code>false</code>.</li>
+    </ul>
+    
+    <h5><code>Dialog.alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an alert dialog with the specified text and options.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Alert'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+    
+    <h5><code>Dialog.error(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens an error dialog with the specified text and options. The title is displayed in red.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The error message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Error'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+    
+    <h5><code>Dialog.success(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    <p>Creates and opens a success dialog with the specified text and options. The title is displayed in green.</p>
+    
+    <h6>Parameters</h6>
+    <ul>
+      <li><code>text<i>: string</i></code> - The success message to display in the dialog.</li>
+      <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
+      <li><code>options<i>: object</i></code> - Configuration options.</li>
+    </ul>
+    
+    <h6>Options</h6>
+    <ul>
+      <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Success'</code>.</li>
+      <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
+    </ul>
+
+  </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Dialog.js"></script> 
   <script>
     document.querySelectorAll('.openDialog').forEach( $btn => {

package/docs/components/icon.html

@@ -61,7 +61,7 @@
     </div>
 
     <h3 id="explicitSource"><a href="#explicitSource" class="no-link">Explicitly Set the Source</a></h3>
-    <p>You can use any svg file that is publically available (on your site or any other public domain) buy using the <code>src</code> attribute instead of <code>name</code>. The code will attempt to ensure compatability.</p>
+    <p>You can use any SVG file that is publicly available (on your site or any other public domain) by using the <code>src</code> attribute instead of <code>name</code>. The Icon component will automatically fix the SVG to ensure compatibility by removing width/height attributes and setting fill colors to <code>currentColor</code> so the icon adapts to the current text color.</p>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
@@ -98,7 +98,7 @@
     <pre><code class="hljs xml"><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> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br />  Icon.pathToIcons = <span class="hljs-string">'./pathTo/icons'</span>;<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <h3 id="addingIcons"><a href="#addingIcons" class="no-link">Adding Icons</a></h3>
-    <p>Add your SVGs to the directory, remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of <code>currentColor</code>, this will allow the icon to adapt to the font color where it is rendered.</p>
+    <p>Add your SVGs to the directory. The Icon component will automatically remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag and set the fill of all objects (path, rect, circle) to <code>currentColor</code>. This allows the icon to adapt to the font color where it is rendered and ensures consistent sizing. However, you can manually prepare your icons this way for better performance.</p>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Before">

package/docs/components/toast.html

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Card.js

@@ -11,7 +11,7 @@ export default class Card extends ShadowComponent {
 
 	constructor() {
 		super();
-		this.label = '';
+		this.label = null;
 	}
 
 	/*
@@ -38,12 +38,9 @@ export default class Card extends ShadowComponent {
 			border-radius: var(--radius);
 			padding: var(--spacer_h);
 		}
-		:host([label]) {
-			padding-top: calc(1.5 * var(--spacer));
-			margin-top: var(--spacer);
-		}
 		:host([label]) #card {
 			padding-top: calc(1.5 * var(--spacer));
+			margin-top: var(--spacer);
 		}
 		:host(:not([label])) #label {
 			display: none;

package/src/components/Dialog.js

@@ -227,13 +227,13 @@ export default class Dialog extends ShadowComponent {
 		return html`
 			<button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
 			<div id="wrapper">
-				<div
-					id="dialog"
-					role="dialog"
-					aria-modal="true"
-					aria-labelledby="title"
-				>
-					<k-focus-capture>
+				<k-focus-capture>
+					<div
+						id="dialog"
+						role="dialog"
+						aria-modal="true"
+						aria-labelledby="title"
+					>
 						<div
 							id="header"
 							class="${this.hasTitle() ? 'has-title' : ''}"
@@ -264,8 +264,8 @@ export default class Dialog extends ShadowComponent {
 								` : ''}
 							</div>
 						` : ''}
-					</k-focus-capture>
-				</div>
+					</div>
+				</k-focus-capture>
 			</div>
 		`;
 	}
@@ -280,7 +280,9 @@ export default class Dialog extends ShadowComponent {
 
 		const {
 			removeOnClose = true,
-			closeCallback = () => {}
+			closeCallback = () => {},
+			title = '',
+			titleClasses = 'pyh px m0'
 		} = options;
 
 		const dialog = new Dialog();
@@ -297,11 +299,33 @@ export default class Dialog extends ShadowComponent {
 			}
 		});
 
+		// Set title if provided
+		if(title) {
+			const titleElement = document.createElement('h5');
+			titleElement.slot = 'title';
+			titleElement.className = titleClasses;
+			if(title instanceof HTMLElement) {
+				titleElement.appendChild(title);
+			} else {
+				titleElement.innerHTML = title;
+			}
+			dialog.appendChild(titleElement);
+		}
+
 		// Set content
 		if(contents instanceof HTMLElement || contents instanceof DocumentFragment) {
 			dialog.appendChild(contents);
 		} else if(contents) {
-			dialog.innerHTML = contents;
+			// Check if content is plain text (no HTML tags)
+			const hasHtmlTags = /<[^>]+>/.test(contents);
+			if(hasHtmlTags) {
+				dialog.innerHTML += contents;
+			} else {
+				const p = document.createElement('p');
+				p.className = 'p';
+				p.textContent = contents;
+				dialog.appendChild(p);
+			}
 		}
 
 		// Set CSS custom properties for dimensions
@@ -319,11 +343,8 @@ export default class Dialog extends ShadowComponent {
 	}
 
 	static confirm(text, responseCallback, options = {}) {
-		const title = options.title || 'Confirm';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+		return Dialog.create(text, {
+			title: options.title || 'Confirm',
 			closeBtn: false,
 			overlayClose: false,
 			confirmText: 'Yes',
@@ -336,36 +357,29 @@ export default class Dialog extends ShadowComponent {
 		});
 	}
 
-	static alert(text, responseCallback, options = {}) {
-		const title = options.title || 'Alert';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+	static alert(text, responseCallback = () => {}, options = {}) {
+		return Dialog.create(text, {
+			title: options.title || 'Alert',
 			closeCallback: responseCallback,
 			cancelText: 'Ok',
 			...options
 		});
 	}
 
-	static error(text, responseCallback, options = {}) {
-		const title = options.title || 'Error';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0 tc-danger">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+	static error(text, responseCallback = () => {}, options = {}) {
+		return Dialog.create(text, {
+			title: options.title || 'Error',
+			titleClasses: 'pyh px m0 tc-danger',
 			closeCallback: responseCallback,
 			cancelText: 'Ok',
 			...options
 		});
 	}
 
-	static success(text, responseCallback, options = {}) {
-		const title = options.title || 'Success';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0 tc-success">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+	static success(text, responseCallback = () => {}, options = {}) {
+		return Dialog.create(text, {
+			title: options.title || 'Success',
+			titleClasses: 'pyh px m0 tc-success',
 			closeCallback: responseCallback,
 			cancelText: 'Ok',
 			...options

package/src/components/Icon.js

@@ -69,10 +69,6 @@ export default class Icon extends ShadowComponent {
 		if (changedProperties.has('src') || changedProperties.has('name')) {
 			this.loadIcon();
 		}
-
-		if (changedProperties.has('iconContent')) {
-			this.fixSVG();
-		}
 	}
 
 	/*
@@ -88,30 +84,41 @@ export default class Icon extends ShadowComponent {
 		}
 		
 		if (svg) {
-			this.iconContent = svg;
+			this.iconContent = this.fixSVG(svg);
 		} else {
 			// Check for slotted fallback content first
 			const slottedContent = this.innerHTML.trim();
 			if (slottedContent) {
-				this.iconContent = slottedContent;
+				this.iconContent = this.fixSVG(slottedContent);
 			} else {
 				this.iconContent = Icon.fallback;
 			}
 		}
 	}
 
-	fixSVG() {
-		// Use setTimeout to ensure DOM is updated
-		setTimeout(() => {
-			const $svg = this.querySelector('svg');
-			if ($svg) {
-				$svg.removeAttribute('width');
-				$svg.removeAttribute('height');
-				$svg.querySelectorAll('path, rect, circle').forEach($path => {
-					$path.setAttribute('fill', 'currentColor');
-				});
-			}
-		}, 0);
+	fixSVG(svgString) {
+		if(!svgString) return svgString;
+		
+		// Parse the SVG string and fix attributes
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(svgString, 'image/svg+xml');
+		const $svg = doc.querySelector('svg');
+		
+		if($svg) {
+			// Remove width and height attributes
+			$svg.removeAttribute('width');
+			$svg.removeAttribute('height');
+			
+			// Set fill to currentColor on all paths, rects, and circles
+			$svg.querySelectorAll('path, rect, circle').forEach($el => {
+				$el.setAttribute('fill', 'currentColor');
+			});
+			
+			// Return the fixed SVG as a string
+			return new XMLSerializer().serializeToString($svg);
+		}
+		
+		return svgString;
 	}
 
 	/*

package/scripts/fix-docs-paths.js

@@ -1,62 +0,0 @@
-import fs from 'fs/promises';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const docsComponentsDir = path.join(__dirname, '..', 'docs', 'components');
-const docsUtilsDir = path.join(__dirname, '..', 'docs', 'utils');
-
-async function fixComponentHtmlFile(filePath) {
-  let content = await fs.readFile(filePath, 'utf-8');
-  let modified = false;
-
-  // Replace the inline script block with script src to init.js
-  const scriptPattern = /<script type="module">\s*import.*?(ShadowComponent|Import|Icon).*?<\/script>/s;
-  if (scriptPattern.test(content)) {
-    content = content.replace(
-      scriptPattern,
-      '<script type="module" src="./init.js"></script>'
-    );
-    modified = true;
-  }
-
-  // Fix the backtick-n issue in stylesheets
-  if (content.includes('`n')) {
-    content = content.replace(/`n/g, '\n');
-    modified = true;
-  }
-
-  if (modified) {
-    await fs.writeFile(filePath, content, 'utf-8');
-    console.log(`Fixed: ${path.basename(filePath)}`);
-    return true;
-  }
-  return false;
-}
-
-async function fixAllFilesInDirectory(dir, dirName) {
-  const files = await fs.readdir(dir);
-  let fixedCount = 0;
-
-  for (const file of files) {
-    if (file.endsWith('.html')) {
-      const filePath = path.join(dir, file);
-      const fixed = await fixComponentHtmlFile(filePath);
-      if (fixed) fixedCount++;
-    }
-  }
-
-  console.log(`\nFixed ${fixedCount} HTML files in ${dirName}/`);
-}
-
-async function fixAllComponentFiles() {
-  console.log('Fixing components...');
-  await fixAllFilesInDirectory(docsComponentsDir, 'docs/components');
-  
-  console.log('\nFixing utils...');
-  await fixAllFilesInDirectory(docsUtilsDir, 'docs/utils');
-}
-
-fixAllComponentFiles().catch(console.error);