kempo-ui 0.0.7 → 0.0.8

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>

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>
@@ -96,148 +90,7 @@
     <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>
     <button id="d7" class="mb">Open Dialog</button>
-    <script type="module">
-      import Dialog from '/src/components/Dialog.js';
-      document.getElementById('d7').addEventListener('click', () => {
-        Dialog.create('<p>Hello World</p>');
-      });
-    </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>
-    <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="./ShadowComponent.html">ShadowComponent</a></h6>
-    <h5>
-      <code>new Dialog()</code>
-    </h5>
-
-    <h4>Parameters</h4>
-    <p>The Dialog constructor takes no parameters. Configuration is done through attributes or properties after instantiation.</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></li>
-    </ul>
-
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</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>
-    <h5><code>confirmAction<i>: function</i></code></h5>
-    <p>Action to perform when the confirm button is clicked. Not reflected as an attribute.</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>
-    <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>
-
-    <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>
-    <h5><code>close()<i>: void</i></code></h5>
-    <p>Closes the dialog.</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>
-    <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>
-    <h6>Options</h6>
-    <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>
-    <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>
-    <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>
-    </ul>
-    <h5><code>alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
-    <p>Creates and opens an alert 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: "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>
-    </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>
-    </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>
-    <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>
-    </ul>
-
-  </main>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script> 
+    <script type="module" src="./init.js"></script> 
   <script type="module" src="../src/components/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>

package/docs/components/import.html

@@ -7,12 +7,7 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.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>

package/docs/components/init.js

@@ -0,0 +1,7 @@
+import Import from '../src/components/Import.js';
+import Icon from '../src/components/Icon.js';
+import ShadowComponent from '../src/components/ShadowComponent.js';
+
+Import.replacements.root = '../';
+Icon.pathToIcons = ['../icons'];
+ShadowComponent.stylesheetPath = '../kempo.min.css';

package/docs/components/light-component.html

@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>LightComponent - 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/persistant-collapsible.html

@@ -7,14 +7,7 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <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>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/photo-viewer.html

@@ -7,14 +7,7 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <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>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/components/resize.html

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Resize - 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/shadow-component.html

@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ShadowComponent - 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/show-more.html

@@ -5,15 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Show More - 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/side-menu.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.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>

package/docs/components/sortable.html

@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sortable - 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/split.html

@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Split - 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/table.html

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

package/docs/components/tableControls.html

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