kempo 1.0.2 → 1.1.1

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: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={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</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)})}static error(n,e,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${n}</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/components/Toggle.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol(),keyDownHandler=Symbol();export default class Toggle extends Component{constructor(){super(),this[clickHandler]=()=>{this.toggle()},this[keyDownHandler]=({code:n})=>{["Space","Enter"].includes(n)&&this.toggle()},this.registerAttributes({value:!1}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),onEvent(this,"click",this[clickHandler]),onEvent(this,"keydown",this[keyDownHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler]),offEvent(this,"keydown",this[keyDownHandler])}attributeChangedCallback(n,e,a){"value"===n&&dispatchEvent(this,"change",{value:a})}on(){this.value=!0,dispatchEvent(this,"on",{value:!0})}off(){this.value=!1,dispatchEvent(this,"on",{value:!1})}toggle(){this.value?this.off():this.on(),dispatchEvent(this,"toggle",{value:this.value})}get shadowTemplate(){return`\n      <div id="switch">\n        <div id="handle"></div>\n      </div>\n      <label id="label">\n        ${super.shadowTemplate}\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --switch_height: 2rem;\n        --switch_width: 3rem;\n        --switch_border: 1px solid var(--c_border);\n        --switch_background__off: var(--c_bg__alt);\n        --switch_background__on: var(--c_success);\n        --handle_size__off: 1rem;\n        --handle_size__on: 1.5rem;\n        --handle_border: 1px solid var(--c_border);\n        --handle_background__off: var(--c_border);\n        --handle_background__on: white;\n\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        margin-bottom: var(--spacer);\n        border-radius: 999rem;\n      }\n      #switch {\n        display: flex;\n        align-items: center;\n        width: var(--switch_width);\n        height: var(--switch_height);\n        border: var(--switch_border);\n        background: var(--switch_background__off);\n        border-radius: 999rem;\n        margin-right: var(--spacer);\n      }\n      #handle {\n        --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);\n        width: var(--handle_size__off);\n        height: var(--handle_size__off);\n        border: var(--handle_border);\n        background: var(--handle_background__off);\n        border-radius: 999rem;\n        transform: translateX(var(--margin));\n        transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);\n      }\n      :host([value="true"]) #switch {\n        background: var(--switch_background__on);\n      }\n      :host([value="true"]) #handle {\n        --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);\n        --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));\n        width: var(--handle_size__on);\n        height: var(--handle_size__on);\n        background: var(--handle_background__on);\n        transform: translateX(var(--d));\n      }\n      #label {\n        display: block;\n        flex: 1 1 auto;\n        padding: 0;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value"]}window.customElements.define("k-toggle",Toggle);

package/dist/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

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

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toggle - 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" />
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Toggle</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <ul>
+        <li><a href="#basicUsage">Basic Usage</a></li>
+        <li><a href="#onByDefault">On By Default</a></li>
+        <li><a href="#customStyles">Custom Styles</a></li>
+        <li><a href="#javascriptUsage">JavaScript Usage</a></li>
+        <li>
+          <a href="#classReference">Class Reference</a>
+          <ul>
+            <li><a href="#constructor">Constructor</a></li>
+            <li><a href="#requirements">Requirements</a></li>
+            <li><a href="#attributes">Attributes</a></li>
+            <li><a href="#properties">Properties</a></li>
+            <li><a href="#methods">Methods</a></li>
+          </ul>
+        </li>
+      </ul>
+    </details>
+
+    <h3 id="basicUsage">Basic Usage</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle>Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="onByDefault">On By Default</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle value="true">Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customStyles">Custom Styles</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --switch_height: 3rem;<br />    --switch_width: 5rem;<br />    --switch_border: none;<br />    --switch_background__off: var(--c_danger);<br />    --switch_background__on: var(--c_success);<br />    --handle_size__off: 2rem;<br />    --handle_size__on: calc(3rem - 2px);<br />    --handle_border: none;<br />    --handle_background__off: #ddd;<br />    --handle_background__on: white;<br />  "</span><br />&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle 
+            style="
+              --switch_height: 3rem;
+              --switch_width: 5rem;
+              --switch_border: none;
+              --switch_background__off: var(--c_danger);
+              --switch_background__on: var(--c_success);
+              --handle_size__off: 2rem;
+              --handle_size__on: calc(3rem - 2px);
+              --handle_border: none;
+              --handle_background__off: #ddd;
+              --handle_background__on: white;
+            "
+          >Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="javascriptUsage">JavaScript Usage</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tog1"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOn"</span>&gt;</span>Turn On<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOff"</span>&gt;</span>Turn Off<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle"</span>&gt;</span>Toggle<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>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">const</span> $tog1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'tog1'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOn'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.on();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOff'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.off();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'toggle'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.toggle();<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle id="tog1">Toggle Me</k-toggle>
+          <button id="turnOn">Turn On</button>
+          <button id="turnOff">Turn Off</button>
+          <button id="toggle">Toggle</button>
+          <script>
+            const $tog1 = document.getElementById('tog1');
+            document.getElementById('turnOn').addEventListener('click', ()=>{
+              $tog1.on();
+            });
+            document.getElementById('turnOff').addEventListener('click', ()=>{
+              $tog1.off();
+            });
+            document.getElementById('toggle').addEventListener('click', ()=>{
+              $tog1.toggle();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="classReference">Class Reference</h2>
+
+    <h3 id="constructor">Constructor</h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5>
+      <code>new Toggle()</code>
+    </h5>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Toggle <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-keyword">const</span> myToggle = <span class="hljs-keyword">new</span> Toggle();<br /><span class="hljs-built_in">document</span>.body.appendChild(myToggle);</code></pre>
+
+    <h3 id="attributes">Attributes</h3>
+
+    <h5><code>value</code></h5>
+    <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
+    <pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(myToggle.value); <span class="hljs-comment">// true or false</span></code></pre>
+    <p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
+
+    <h3 id="methods">Methods</h3>
+    <h5><code>on(): <i>undefined</i></code></h5>
+    <p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>
+
+    <h5><code>off(): <i>undefined</i></code></h5>
+    <p>Set's the <code>value</code> to <code>false</code>, dispatches a <code><i>change</i></code> and an <code><i>off</i></code> event. The switch visual changes to the <b>off</b> state.</p>
+
+    <h5><code>toggle(): <i>undefined</i></code></h5>
+    <p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
+
+    
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+  <script type="module" src="../kempo/components/Toggle.js"></script> 
+</body>
+</html>

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/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: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={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</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)})}static error(n,e,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${n}</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/components/Toggle.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol(),keyDownHandler=Symbol();export default class Toggle extends Component{constructor(){super(),this[clickHandler]=()=>{this.toggle()},this[keyDownHandler]=({code:n})=>{["Space","Enter"].includes(n)&&this.toggle()},this.registerAttributes({value:!1}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),onEvent(this,"click",this[clickHandler]),onEvent(this,"keydown",this[keyDownHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler]),offEvent(this,"keydown",this[keyDownHandler])}attributeChangedCallback(n,e,a){"value"===n&&dispatchEvent(this,"change",{value:a})}on(){this.value=!0,dispatchEvent(this,"on",{value:!0})}off(){this.value=!1,dispatchEvent(this,"on",{value:!1})}toggle(){this.value?this.off():this.on(),dispatchEvent(this,"toggle",{value:this.value})}get shadowTemplate(){return`\n      <div id="switch">\n        <div id="handle"></div>\n      </div>\n      <label id="label">\n        ${super.shadowTemplate}\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --switch_height: 2rem;\n        --switch_width: 3rem;\n        --switch_border: 1px solid var(--c_border);\n        --switch_background__off: var(--c_bg__alt);\n        --switch_background__on: var(--c_success);\n        --handle_size__off: 1rem;\n        --handle_size__on: 1.5rem;\n        --handle_border: 1px solid var(--c_border);\n        --handle_background__off: var(--c_border);\n        --handle_background__on: white;\n\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        margin-bottom: var(--spacer);\n        border-radius: 999rem;\n      }\n      #switch {\n        display: flex;\n        align-items: center;\n        width: var(--switch_width);\n        height: var(--switch_height);\n        border: var(--switch_border);\n        background: var(--switch_background__off);\n        border-radius: 999rem;\n        margin-right: var(--spacer);\n      }\n      #handle {\n        --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);\n        width: var(--handle_size__off);\n        height: var(--handle_size__off);\n        border: var(--handle_border);\n        background: var(--handle_background__off);\n        border-radius: 999rem;\n        transform: translateX(var(--margin));\n        transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);\n      }\n      :host([value="true"]) #switch {\n        background: var(--switch_background__on);\n      }\n      :host([value="true"]) #handle {\n        --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);\n        --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));\n        width: var(--handle_size__on);\n        height: var(--handle_size__on);\n        background: var(--handle_background__on);\n        transform: translateX(var(--d));\n      }\n      #label {\n        display: block;\n        flex: 1 1 auto;\n        padding: 0;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value"]}window.customElements.define("k-toggle",Toggle);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

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/nav-1.inc.html

@@ -50,6 +50,7 @@
       <a href="../components/sidemenu.html">Side Menu</a>
       <a href="../components/split.html">Split</a>
       <a href="../components/tabs.html">Tabs</a>
+      <a href="../components/toggle.html">Toggle</a>
       <a href="../components/websnippeteditor.html">Web Snippet Editor</a>
     </div>
   </menu>

package/docs/nav.inc.html

@@ -50,6 +50,7 @@
       <a href="./components/sidemenu.html">Side Menu</a>
       <a href="./components/split.html">Split</a>
       <a href="./components/tabs.html">Tabs</a>
+      <a href="./components/toggle.html">Toggle</a>
       <a href="./components/websnippeteditor.html">Web Snippet Editor</a>
     </div>
   </menu>

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>