kempo 1.1.0 → 1.1.2

package/dist/components/CodeEditor.js

@@ -1 +1 @@
-import Component from"./Component.js";import hljs from"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e=this.language?hljs.highlight(this.value,{language:this.language}):hljs.highlightAuto(this.value),this.shadowRoot.getElementById("editor").innerHTML=e.value.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);
+import Component from"./Component.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e="undefined"!=typeof hljs?this.language?hljs.highlight(this.value,{language:this.language}).value:hljs.highlightAuto(this.value).value:this.value,this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);

package/dist/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:n=!1,closeBtn:e=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:c="",cancelAction:l=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:n,closeBtn:e,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:l,closeCallback:r,previousFocus:null,_clickHandler:n=>{const{target:{id:e}}=n;"overlay"==e&&this.overlayClose||"close"==e?this.close():"cancel"==e?(this.cancelAction(n),n.defaultPrevented||this.close()):"confirm"==e&&(this.confirmAction(n),n.defaultPrevented||this.close())},_keydownHandler:({keyCode:n})=>{27===n&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const n=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);n&&n.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const n=firstFocusable(this.shadowRoot);n&&(this.previousFocus=document.activeElement,n.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 0;\n        width: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(n="",e={}){const t=new Dialog({opened:!0,...e});onEvent(t,"close",t.remove),n instanceof HTMLElement||n instanceof DocumentFragment?t.appendChild(n):n instanceof NodeList?n.forEach((n=>t.appendChild(n))):t.innerHTML=n,document.body.appendChild(t)}static confirm(n,e,t){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">Confirm Event Deletion</h5>\n      <p class="p">${n}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1)})}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:l="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:l}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);

package/dist/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){return!!await super.render(t)&&(this.src?(this.innerHTML=await(await fetch(this.src)).text(),this.fixSVG()):this.name?(this.innerHTML=await(await fetch(`${Icon.pathToIcons}/${this.name}.svg`)).text(),this.fixSVG()):(this.rendered=!1,this.innerHTML=""),!0)}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons"}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await fetch(`${Icon.pathToIcons}/${this.name}.svg`);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons";static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" 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  '}window.customElements.define("k-icon",Icon);

package/dist/utils/cli.js

@@ -1 +1 @@
-const args={};let win={};"undefined"!=typeof window?win=window:"undefined"!=typeof global&&(win=global),win.log=(...e)=>{args.debug&&console.log(...e)};export default(e={d:"debug"})=>{let s="",t=[];const n=()=>{s&&(0===t.length?args[s]=!0:1===t.length?args[s]=t[0]:args[s]=t)};for(let g=2;g<process.argv.length;g++){const o=process.argv[g];o.startsWith("-")?(n(),o.startsWith("--")?s=o.slice(2):(s=o.slice(1),e[s]&&(s=e[s])),t=[]):t.push(o)}return n(),args};
+import{spawn}from"child_process";const args={};let win={};"undefined"!=typeof window?win=window:"undefined"!=typeof global&&(win=global),win.log=(...e)=>{args.debug&&console.log(...e)};export const getArgs=(e={d:"debug"})=>{let s="",o=[];const r=()=>{s&&(0===o.length?args[s]=!0:1===o.length?"false"===o[0]?args[s]=!1:args[s]=o[0]:args[s]=o)};for(let t=2;t<process.argv.length;t++){const n=process.argv[t];n.startsWith("-")?(r(),n.startsWith("--")?s=n.slice(2):(s=n.slice(1),e[s]&&(s=e[s])),o=[]):o.push(n)}return r(),args};export const runChildProcess=e=>new Promise(((s,o)=>{const[r,...t]=e.split(" ");spawn(r,t).on("close",(e=>{0===e?s(`child process exited with code ${e}`):o(new Error(`child process exited with code ${e}`))}))}));export const runChildNodeProcess=(e,s={})=>{const o=`node ${e} ${Object.entries(s).flatMap((([e,s])=>!0===s?[`--${e}`]:[`--${e}`,s])).join(" ")}`;return runChildProcess(o)};

package/docs/components/_template.html

@@ -13,10 +13,6 @@
   <main>
     
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/components/card.html

@@ -25,10 +25,6 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
 </body>

package/docs/components/codeeditor.html

@@ -19,10 +19,6 @@
 </k-code-editor>
     </k-code-editor>
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/CodeEditor.js"></script> 
 </body>

package/docs/components/component.html

@@ -79,10 +79,6 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/components/dialog.html

@@ -66,21 +66,37 @@
       <p class="p">Ranch is gross</p>
     </k-dialog>
 
+    <h3>JavaScript Usage</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">'/kempo/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 '/kempo/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">'/kempo/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 '/kempo/components/Dialog.js';
+      document.getElementById('d8').addEventListener('click', () => {
+        Dialog.error("Oh no, don't do that!");
+      });
+    </script>
+
 
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Dialog.js"></script> 
   <script>
     document.querySelectorAll('.openDialog').forEach( $btn => {
       $btn.addEventListener('click', () => {
         const $dialog = document.getElementById($btn.dataset.dialog);
-        console.log($dialog);
         if($dialog) $dialog.open();
       });
     });

package/docs/components/icon.html

@@ -43,6 +43,24 @@
       </div>
     </div>
 
+    <h3>Fallback Icon</h3>
+    <p>Put an SVG inside of the <code>k-icon</code> to be the fallback if one is not found that matches the provided name or source. Otherwise a <k-icon></k-icon> will be the fallback icon.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <k-icon name="invalid"></k-icon>
+          <k-icon name="invalid">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
+          </k-icon>
+        </k-card>
+      </div>
+    </div>
+
     <h3>Changing the icon directory location</h3>
     <p>To change the location of the directory holding the icons import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location, do this before icons are loaded (for example in the head of the document).</p>
     <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">'/kempo/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>
@@ -63,10 +81,6 @@
     </div>
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
 </body>

package/docs/components/import.html

@@ -24,10 +24,6 @@
     </k-card>
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
 </body>

package/docs/components/lazycomponent.html

@@ -41,10 +41,6 @@
     <p>This class <b class="tc-danger">can not</b> be instatiated directly, but rather <b class="tc-success">should be</b> extended, optionally passing in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options" target="_blank">shadowOptions</a>.</p>
     
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/components/resize.html

@@ -97,10 +97,6 @@
     
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Resize.js"></script> 
 </body>

package/docs/components/show-more.html

@@ -6,10 +6,6 @@
   <title>ShowMore - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/components/sidemenu.html

@@ -87,10 +87,6 @@
     </div>
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/SideMenu.js"></script> 
 </body>

package/docs/components/split.html

@@ -59,10 +59,6 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
   <script type="module" src="../kempo/components/Split.js"></script> 

package/docs/components/tabs.html

@@ -23,10 +23,6 @@
     </k-tabs>
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Tabs.js"></script> 
 </body>

package/docs/components/toggle.html

@@ -146,10 +146,6 @@
     
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Toggle.js"></script> 
 </body>

package/docs/components/websnippeteditor.html

@@ -32,10 +32,6 @@ document.getElementById('hello').addEventListener('click', () => {
     </k-web-snippet-editor>
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/WebSnippetEditor.js"></script> 
 </body>

package/docs/index.html

@@ -8,10 +8,6 @@
 </head>
 <body>
   <k-import src="./nav.inc.html"></k-import>
-  <script type="module">
-    import Icon from './kempo/components/Icon.js';
-    Icon.pathToIcons = './kempo/icons';
-  </script>
   <script type="module" src="./kempo/components/Import.js"></script>
 </body>
 </html>

package/docs/kempo/components/CodeEditor.js

@@ -1 +1 @@
-import Component from"./Component.js";import hljs from"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e=this.language?hljs.highlight(this.value,{language:this.language}):hljs.highlightAuto(this.value),this.shadowRoot.getElementById("editor").innerHTML=e.value.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);
+import Component from"./Component.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e="undefined"!=typeof hljs?this.language?hljs.highlight(this.value,{language:this.language}).value:hljs.highlightAuto(this.value).value:this.value,this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);

package/docs/kempo/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:n=!1,closeBtn:e=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:c="",cancelAction:l=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:n,closeBtn:e,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:l,closeCallback:r,previousFocus:null,_clickHandler:n=>{const{target:{id:e}}=n;"overlay"==e&&this.overlayClose||"close"==e?this.close():"cancel"==e?(this.cancelAction(n),n.defaultPrevented||this.close()):"confirm"==e&&(this.confirmAction(n),n.defaultPrevented||this.close())},_keydownHandler:({keyCode:n})=>{27===n&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const n=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);n&&n.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const n=firstFocusable(this.shadowRoot);n&&(this.previousFocus=document.activeElement,n.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 0;\n        width: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(n="",e={}){const t=new Dialog({opened:!0,...e});onEvent(t,"close",t.remove),n instanceof HTMLElement||n instanceof DocumentFragment?t.appendChild(n):n instanceof NodeList?n.forEach((n=>t.appendChild(n))):t.innerHTML=n,document.body.appendChild(t)}static confirm(n,e,t){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">Confirm Event Deletion</h5>\n      <p class="p">${n}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1)})}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:l="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:l}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);

package/docs/kempo/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){return!!await super.render(t)&&(this.src?(this.innerHTML=await(await fetch(this.src)).text(),this.fixSVG()):this.name?(this.innerHTML=await(await fetch(`${Icon.pathToIcons}/${this.name}.svg`)).text(),this.fixSVG()):(this.rendered=!1,this.innerHTML=""),!0)}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons"}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await fetch(`${Icon.pathToIcons}/${this.name}.svg`);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons";static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" 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  '}window.customElements.define("k-icon",Icon);

package/docs/kempo/utils/cli.js

@@ -1 +1 @@
-const args={};let win={};"undefined"!=typeof window?win=window:"undefined"!=typeof global&&(win=global),win.log=(...e)=>{args.debug&&console.log(...e)};export default(e={d:"debug"})=>{let s="",t=[];const n=()=>{s&&(0===t.length?args[s]=!0:1===t.length?args[s]=t[0]:args[s]=t)};for(let g=2;g<process.argv.length;g++){const o=process.argv[g];o.startsWith("-")?(n(),o.startsWith("--")?s=o.slice(2):(s=o.slice(1),e[s]&&(s=e[s])),t=[]):t.push(o)}return n(),args};
+import{spawn}from"child_process";const args={};let win={};"undefined"!=typeof window?win=window:"undefined"!=typeof global&&(win=global),win.log=(...e)=>{args.debug&&console.log(...e)};export const getArgs=(e={d:"debug"})=>{let s="",o=[];const r=()=>{s&&(0===o.length?args[s]=!0:1===o.length?"false"===o[0]?args[s]=!1:args[s]=o[0]:args[s]=o)};for(let t=2;t<process.argv.length;t++){const n=process.argv[t];n.startsWith("-")?(r(),n.startsWith("--")?s=n.slice(2):(s=n.slice(1),e[s]&&(s=e[s])),o=[]):o.push(n)}return r(),args};export const runChildProcess=e=>new Promise(((s,o)=>{const[r,...t]=e.split(" ");spawn(r,t).on("close",(e=>{0===e?s(`child process exited with code ${e}`):o(new Error(`child process exited with code ${e}`))}))}));export const runChildNodeProcess=(e,s={})=>{const o=`node ${e} ${Object.entries(s).flatMap((([e,s])=>!0===s?[`--${e}`]:[`--${e}`,s])).join(" ")}`;return runChildProcess(o)};

package/docs/styles/_template.html

@@ -13,10 +13,6 @@
   <main>
     
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/styles/borders-spacing.html

@@ -184,10 +184,6 @@
 
 
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/styles/buttons.html

@@ -103,10 +103,6 @@
     </div>
   </main>
   <div style="height:33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Card.js"></script> 
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>

package/docs/styles/colors.html

@@ -55,10 +55,6 @@
     <h3>* Notes</h3>
     <p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></p>
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
 </body>

package/docs/styles/displays-layouts.html

@@ -147,10 +147,6 @@
     <h3>* Notes</h3>
     <p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></p>
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/styles/embed-1.html

@@ -26,10 +26,6 @@
       col d-span-3 t-span-6 m-span-12
     </div>
   </div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/docs/styles/inputs.html

@@ -79,10 +79,6 @@
       </div>
     </div>
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
 </body>

package/docs/styles/tables.html

@@ -132,10 +132,6 @@
     </div>
   </main>
   <div style="height: 33vh"></div>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
   <script type="module" src="../kempo/components/Card.js"></script> 
   <script type="module" src="../kempo/components/Resize.js"></script> 

package/docs/styles/typography.html

@@ -107,10 +107,6 @@
       </div>
     </div>
   </main>
-  <script type="module">
-    import Icon from '../kempo/components/Icon.js';
-    Icon.pathToIcons = '../kempo/icons';
-  </script>
   <script type="module" src="../kempo/components/Import.js"></script> 
 </body>
 </html>

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "kempo",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",
   "scripts": {
     "test": "node ./scrips/test.js",
     "build": "node ./scripts/build.js",
-    "docs": "node ./scripts/build.js && node ./scripts/docs.js"
+    "docs": "node ./scripts/docs.js",
+    "docs-src": "node ./scripts/docs.js -s"
   },
   "author": "Dustin Poissant",
   "license": "MIT",

package/scripts/build.js

@@ -93,13 +93,6 @@ const minifiedMain = (await minify(main)).code;
 console.log('Saving minified main entry file');
 await fs.writeFile('./dist/index.js', minifiedMain, 'utf-8');
 
-console.log('Loading kempo.js');
-const kempoJS = await fs.readFile('./src/kempo.js', 'utf-8');
-console.log('Minifying kempo.js');
-const minifiedKempoJs = (await minify(kempoJS)).code;
-console.log('Saving minfiied kempo.js');
-await fs.writeFile('./dist/kempo.js', minifiedKempoJs, 'utf-8');
-
 console.log('Loading kempo-vars.css');
 const kempoVarsCSS = await fs.readFile('./src/kempo-vars.css', 'utf-8');
 console.log('Minifying kempo-vars.css');
@@ -121,11 +114,11 @@ const minifiedKempoHljsCSS = kempoHljsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*
 console.log('Saving kempo-hljs.css');
 await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
 
-console.log('Copying dist/ to docs/src/');
-await fse.ensureDir('./docs/src/icons'); // will also ensure docs/kempo
+console.log('Copying dist/ to docs/');
+await fse.ensureDir('./docs/icons'); // will also ensure docs/kempo
 await fse.copy('./dist', './docs/kempo')
 
-console.log('Copying icons/ to docs/src/icons/');
-await fse.copy('./icons', './docs/src/icons')
+console.log('Copying icons/ to docs/icons/');
+await fse.copy('./icons', './docs/icons')
 
 console.log('Build Complete');

package/scripts/docs.js

@@ -1,14 +1,42 @@
 import express from 'express';
-import cli from '../src/utils/cli.js';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import {
+  getArgs,
+  runChildNodeProcess
+} from '../src/utils/cli.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const options = getArgs({
+  p: 'port',
+  b: 'build',
+  s: 'src'
+});
 
 const {
- port = 8083
-} = cli();
+  port = 8083,
+  build = true,
+  src = false
+} = options;
+
+console.log(port, build, src);
+
+if(build){
+  runChildNodeProcess(join(__dirname, 'build.js'));
+}
 
 const app = express();
 
+if(src){
+  app.use('/kempo', express.static('src'));
+  app.use('/icons', express.static('icons'));
+}
 app.use(express.static('docs'));
 
+
+
 app.listen(port, () => {
   console.log(`Docs Running on: http://localhost:${port}`);
 });

package/src/components/CodeEditor.js

@@ -1,5 +1,4 @@
 import Component from './Component.js';
-import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js';
 import {
   escapeHTML
 } from '../utils/string.js';
@@ -45,15 +44,19 @@ export default class CodeEditor extends Component {
       this.dispatchEvent(new CustomEvent('change'));
     }
     let result;
-    if(this.language){
-      result = hljs.highlight(
-        this.value,
-        { language: this.language }
-      )
+    if(typeof(hljs) !== 'undefined'){
+      if(this.language){
+        result = (hljs.highlight(
+          this.value,
+          { language: this.language }
+        )).value;
+      } else {
+        result = (hljs.highlightAuto(this.value)).value;
+      }
     } else {
-      result = hljs.highlightAuto(this.value);
+      result = this.value;
     }
-    this.shadowRoot.getElementById('editor').innerHTML = result.value.split('\n').map(p=>`<div class="line">${p}</div>`).join('');
+    this.shadowRoot.getElementById('editor').innerHTML = result.split('\n').map(p=>`<div class="line">${p}</div>`).join('');
     this[lastValue] = this.value;
   }
 

package/src/components/Dialog.js

@@ -156,8 +156,11 @@ export default class Dialog extends Component {
       ${super.shadowStyles}
       :host {
         display: inline;
-        height: 0;
-        width: 0;
+        height: 1px;
+        width: 1px;
+        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/
+        top: 0;
+        left: 0;
       }
       :host(:not([opened])){
         display: none;
@@ -251,11 +254,14 @@ export default class Dialog extends Component {
     } else {
       $dialog.innerHTML = contents;
     }
-    document.body.appendChild($dialog);
+    document.body.prepend($dialog);
+    $dialog.open();
   }
-  static confirm(text, responseCallback, options){
+  static confirm(text, responseCallback, options = {
+    title: 'Confirm'
+  }){
     Dialog.create(`
-      <h5 slot="title" class="pyh px m0">Confirm Event Deletion</h5>
+      <h5 slot="title" class="pyh px m0">${options.title}</h5>
       <p class="p">${text}</p>
     `, {
       ...options,
@@ -273,5 +279,16 @@ export default class Dialog extends Component {
       }
     });
   }
+  static error(text, responseCallback, options = {
+    title: 'Error'
+  }){
+    Dialog.create(`
+      <h5 slot="title" class="pyh px m0 tc-danger">${options.title}</h5>
+      <p class="p">${text}</p>
+    `, {
+      ...options,
+      cancelText: 'Ok'
+    });
+  }
 }
 window.customElements.define('k-dialog', Dialog);

package/src/components/Icon.js

@@ -11,14 +11,20 @@ export default class Icon extends Component {
   async render(force){
     if(await super.render(force)){
       if(this.src){
-        this.innerHTML = await (await fetch(this.src)).text();
-        this.fixSVG();
+        const response = await fetch(this.src);
+        if(response.status === 200){
+          this.innerHTML = await (response).text();
+          this.fixSVG();
+        } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else if(this.name){
-        this.innerHTML = await (await fetch(`${Icon.pathToIcons}/${this.name}.svg`)).text();
-        this.fixSVG();
+        const response = await fetch(`${Icon.pathToIcons}/${this.name}.svg`);
+        if(response.status === 200){
+          this.innerHTML = await (response).text();
+          this.fixSVG();
+        } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else {
         this.rendered = false;
-        this.innerHTML = '';
+        if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       }
       return true;
     }
@@ -56,5 +62,8 @@ export default class Icon extends Component {
   ];
 
   static pathToIcons = '/icons';
+  static fallback = /*html*/`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" 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>
+  `;
 }
 window.customElements.define('k-icon', Icon);

package/src/utils/cli.js

@@ -1,3 +1,5 @@
+import { spawn } from 'child_process';
+
 const args = {};
 let win = {};
 if(typeof(window) !== 'undefined'){
@@ -11,7 +13,7 @@ win.log = (...messages) => {
   }
 }
 
-export default (shortMap = {
+export const getArgs =  (shortMap = {
   d: 'debug'
 }) => {
   let name = '';
@@ -21,7 +23,11 @@ export default (shortMap = {
       if(values.length === 0){ // flag
         args[name] = true;
       } else if(values.length === 1){ // single value
-        args[name] = values[0];
+        if(values[0] === 'false'){
+          args[name] = false;
+        } else {
+          args[name] = values[0];
+        }
       } else { // multiple values
         args[name] = values;
       }
@@ -52,3 +58,28 @@ export default (shortMap = {
   save();
   return args;
 }
+
+export const runChildProcess = (command) => new Promise((resolve, reject) => {
+  const [cmd, ...args] = command.split(' ');
+  const child = spawn(cmd, args);
+
+  child.on('close', (code) => {
+      if (code === 0) {
+          resolve(`child process exited with code ${code}`);
+      } else {
+          reject(new Error(`child process exited with code ${code}`));
+      }
+  });
+});
+
+export const runChildNodeProcess = (scriptPath, argsObj = {}) => {
+  const args = Object.entries(argsObj).flatMap(([key, value]) => {
+      if (value === true) {
+          return [`--${key}`];
+      } else {
+          return [`--${key}`, value];
+      }
+  });
+  const command = `node ${scriptPath} ${args.join(' ')}`;
+  return runChildProcess(command);
+};

package/docs/kempo/components/Collapse.js

@@ -1 +0,0 @@
-import ReactiveLazyComponent from"./ReactiveLazyComponent.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const toggleClickHandler=Symbol("toggleClickHandler");export default class Collapse extends ReactiveLazyComponent{constructor(){super(),this[toggleClickHandler]=()=>{this.toggle(),this.shadowRoot.getElementById("toggle").focus()},this.registerAttribute("opened",!1)}async render(e){return!!super.render(e)&&(onEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler]),!0)}disconnectedCallback(){offEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler]),super.disconnectedCallback()}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),"opened"===e&&dispatchEvent(this,n?"change opened":"change closed")}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"toggle")}get shadowTemplate(){return`\n      <button\n        id="toggle"\n        class="no-btn p"\n      >\n        <slot name="${this.opened?"closeText":"openText"}">${this.opened?"Hide Content":"Show Content"}</slot>\n      </button>\n      ${this.renderIf(this.opened,`\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n      `)}\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #toggle {\n        width: 100%;\n      }\n    `}static renderOnChange=["opened"];static observedAttributes=this.renderOnChange}window.customElements.define("k-collapse",Collapse);

package/docs/src/icons/arrow-down-double.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

package/docs/src/icons/arrow-up-double.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>

package/docs/src/icons/close.svg

@@ -1,2 +0,0 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/docs/src/icons/compare.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>

package/docs/src/icons/dark-mode.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>

package/docs/src/icons/delete.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

package/docs/src/icons/filter-off.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z"/></svg>

package/docs/src/icons/filter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>

package/docs/src/icons/light-mode.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>

package/docs/src/icons/menu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

package/docs/src/icons/pause.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M28.25 38V10H36v28ZM12 38V10h7.75v28Z"/></svg>

package/docs/src/icons/play.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M16 37.85v-28l22 14Z"/></svg>

package/docs/src/icons/search.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/docs/src/icons/settings.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

package/docs/src/icons/storage.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-160v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80-440v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80 280v-160h720v160H120Zm80-40h80v-80h-80v80Z"/></svg>

package/docs/src/icons/trash-x.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>

package/src/kempo.js

@@ -1,48 +0,0 @@
-const components = {
-  'k-card': 'Card',
-  'k-code-editor': 'CodeEditor',
-  'k-dialog': 'Dialog',
-  'k-icon': 'Icon',
-  'k-import': 'Import',
-  'k-resize': 'Resize',
-  'k-search': 'Search',
-  'k-show-more': 'ShowMore',
-  'k-side-menu': 'SideMenu',
-  'k-split': 'Split',
-  'k-tabs': 'Tabs',
-  'k-web-snippet-editor': 'WebSnippetEditor'
-}
-const lookFor = new Set(Object.keys(components));
-window.kempo = Object.assign({}, {
-  pathToRoot: './',
-  pathToKempoFromRoot: './kempo/',
-  pathToIconsFromRoot: './kempo/icons/',
-  autoLoadComponents: () => {
-    lookFor.forEach( async component => {
-      if(document.querySelector(component)){
-        const path = `${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[component]}.js`;
-        console.log(path);
-        import(path);
-        lookFor.delete(component);
-      }
-    });
-  },
-  _darkModeQuery: window.matchMedia('(prefers-color-scheme: dark)'),
-  _theme: 'auto',
-  _themeListener: (e) => {
-    if(window.kempo._theme === 'auto'){
-      document.documentElement.setAttribute('theme', e.matches?'dark':'light');
-    }
-  },
-  setTheme: (theme) => {
-    window.kempo._theme = theme;
-    if(window.kempo._theme === 'auto'){
-      document.documentElement.setAttribute('theme', window.kempo._darkModeQuery.matches?'dark':'light');
-    } else {
-      document.documentElement.setAttribute('theme', theme);
-    }
-  }
-}, window.kempo || {});
-window.kempo.autoLoadComponents();
-window.kempo._darkModeQuery.addEventListener('change', window.kempo._themeListener);
-window.kempo.setTheme(document.documentElement.getAttribute('theme') || 'auto');