kempo-ui 0.0.7 → 0.0.9

package/dist/src/components/Icon.js

@@ -7,4 +7,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
 			height: 1.35em;
 			vertical-align: middle;
 		}
-	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["/icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);
+	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["./icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);

package/dist/src/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="/kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="./kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}

package/dist/src/components/Tree.js

@@ -0,0 +1,37 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";export default class Tree extends ShadowComponent{static properties={data:{type:Object},depth:{type:Number,reflect:!0},editable:{type:Boolean,converter:boolExists,attribute:"editable",reflect:!0}};constructor(){super(),this.data=null,this.depth=0,this.editable=!1}render(){return this.data?"object"==typeof this.data&&null!==this.data?html`
+				<div class="tree-root">
+					${(Array.isArray(this.data)?this.data.map((e,t)=>[t,e]):Object.entries(this.data)).map(([e,t])=>Tree.renderValue(t,e,1,this.depth))}
+				</div>
+			`:html`
+			<div class="tree-root">
+				${Tree.renderValue(this.data,null,0,this.depth)}
+			</div>
+		`:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,r=0){const a=Tree.leafs.find(t=>t.detect(e));if(a){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const r=new a(e).render();if(r instanceof Node)s.appendChild(r);else{const e=document.createElement("span");render(r,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const a=new TreeBranch;return a.value=e,a.key=t,a.currentDepth=s,a.maxDepth=r,a}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
+			<div>
+				<div class="branch-label" @click=${this.toggle}>
+					<k-icon name="chevron-right" class="toggle-icon ${this.opened?"opened":""}"></k-icon>
+					${e}${t}
+				</div>
+				${this.opened?html`
+					<div class="pl">
+						${this.value?(Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)).map(([e,t])=>Tree.renderValue(t,e,this.currentDepth+1,this.maxDepth)):""}
+					</div>
+				`:""}
+			</div>
+		`}static styles=css`
+		:host{
+			display: block;
+		}
+		.branch-label{
+			cursor: pointer;
+		}
+		.branch-label:hover{
+			background-color: var(--c_bg__alt, #f5f5f5);
+		}
+		.toggle-icon{
+			transition: transform var(--animation_ms, 200ms);
+		}
+		.toggle-icon.opened{
+			transform: rotate(90deg);
+		}
+	`}window.customElements.define("k-tree-branch",TreeBranch);export class TreeLeaf{constructor(e=null){this.value=e}render(){return html`${this.value}`}static detect=()=>!1}export class StringLeaf extends TreeLeaf{render(){return html`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberLeaf extends TreeLeaf{render(){return html`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanLeaf extends TreeLeaf{render(){return html`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}Tree.addLeaf(UndefinedLeaf,NullLeaf,BooleanLeaf,NumberLeaf,StringLeaf);

package/docs/components/accordion.html

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/card.html

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Card - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/collapsible.html

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Collapsible - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/content-slider.html

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Content Slider - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>
@@ -217,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

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dialog - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import ShadowComponent from '../src/components/ShadowComponent.js';
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    ShadowComponent.stylesheetPath = '../kempo.min.css';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>
@@ -28,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 />
@@ -40,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>
@@ -94,20 +90,32 @@
 
     <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">
-      import Dialog from '/src/components/Dialog.js';
+      import Dialog from '../src/components/Dialog.js';
       document.getElementById('d7').addEventListener('click', () => {
-        Dialog.create('<p>Hello World</p>');
+        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">"&lt;p&gt;Oh no, don't do that!&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">"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';
+      import Dialog from '../src/components/Dialog.js';
       document.getElementById('d8').addEventListener('click', () => {
         Dialog.error("Oh no, don't do that!");
       });
@@ -115,10 +123,10 @@
 
     <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>
+    <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';
+      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);
@@ -129,62 +137,102 @@
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5>
-      <code>new Dialog()</code>
+      <code>new Dialog()</code><br />
+      <code>new Dialog(<i>object</i> options)</code>
     </h5>
 
     <h4>Parameters</h4>
-    <p>The Dialog constructor takes no parameters. Configuration is done through attributes or properties after instantiation.</p>
+    <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="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <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. Syncs with the <code>opened</code> attribute.</p>
-    <h5><code>closeBtn<i>: boolean</i></code></h5>
-    <p>Whether to show the close button. Syncs with the <code>close-btn</code> attribute.</p>
-    <h5><code>overlayClose<i>: boolean</i></code></h5>
-    <p>Whether clicking the overlay closes the dialog. Syncs with the <code>overlay-close</code> attribute.</p>
-    <h5><code>confirmText<i>: string</i></code></h5>
-    <p>Text for the confirm button. Syncs with the <code>confirm-text</code> attribute.</p>
-    <h5><code>confirmClasses<i>: string</i></code></h5>
-    <p>Classes for the confirm button. Syncs with the <code>confirm-classes</code> attribute.</p>
-    <h5><code>cancelText<i>: string</i></code></h5>
-    <p>Text for the cancel button. Syncs with the <code>cancel-text</code> attribute.</p>
-    <h5><code>cancelClasses<i>: string</i></code></h5>
-    <p>Classes for the cancel button. Syncs with the <code>cancel-classes</code> attribute.</p>
+    <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 when the confirm button is clicked. Not reflected as an attribute.</p>
+    <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 when the cancel button is clicked. Not reflected as an attribute.</p>
+    <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. Not reflected as an attribute.</p>
-    <h5><code>previousFocus<i>: Element</i></code></h5>
-    <p>Reference to the element that had focus before the dialog was opened. Not reflected as an attribute.</p>
+    <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.</p>
+    <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.</p>
+    <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.</p>
+    <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>create(contents, options)<i>: Dialog</i></code></h5>
-    <p>Creates and opens a new dialog with the specified contents and options.</p>
+    <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>opened</code>: <i>boolean</i> - Whether the dialog is initially opened.</li>
+      <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>
@@ -194,50 +242,87 @@
       <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>confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
-    <p>Creates and opens a confirmation dialog with the specified text and options. The responseCallback receives a boolean indicating the user's choice.</p>
+    
+    <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: "Confirm").</li>
-      <li><code>confirmText</code>: <i>string</i> - Text for the confirm button (default: "Yes").</li>
-      <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button (default: "success ml").</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the cancel button (default: "No").</li>
-      <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button (default: "danger").</li>
-      <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button (default: false).</li>
-      <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog (default: false).</li>
+      <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>alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
+    
+    <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: "Alert").</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</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>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>
-    <h5><code>error(text, responseCallback, options)<i>: Dialog</i></code></h5>
-    <p>Creates and opens an error dialog with the specified text and options.</p>
+    
     <h6>Options</h6>
     <ul>
-      <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Error").</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</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>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>success(text, responseCallback, options)<i>: Dialog</i></code></h5>
-    <p>Creates and opens a success dialog with the specified text and options.</p>
+    
+    <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: "Success").</li>
-      <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</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>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/Import.js"></script> 
   <script type="module" src="../src/components/Dialog.js"></script> 
   <script>
     document.querySelectorAll('.openDialog').forEach( $btn => {

package/docs/components/focus-capture.html

@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FocusCapture - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/hybrid-component.html

@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/icon.html

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