kempo 1.0.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Dustin Poissant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# Kempo
+ 

package/dist/components/Card.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{setProp}from"../utils/element.js";export default class Card extends Component{constructor(r=""){super(),this.registerAttribute("label",r)}attributeChangedCallback(r,e,n){"label"===r&&setProp(this.shadowRoot.getElementById("label"),"innerHTML",n)}get shadowTemplate(){return`\n      <div id="card">\n        <div id="label">${this.label}</div>\n        ${super.shadowTemplate}\n      </div>\n    `}get shadowStyles(){return"\n      :host {\n        display: block;\n      }\n      #card {\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        margin-bottom: var(--spacer);\n        padding: var(--spacer);\n        position: relative;\n        background-color: var(--c_bg);\n      }\n      #label {\n        position: absolute;\n        top: -1.25em;\n        left: 1.25em;\n        background-color: var(--c_bg);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        padding: var(--spacer_h);\n      }\n      :host([label]) {\n        padding-top: calc(1.5 * var(--spacer));\n        margin-top: var(--spacer);\n      }\n      :host([label]) #card {\n        padding-top: calc(1.5 * var(--spacer));\n      }\n      :host(:not([label])) #label {\n        display: none;\n      }\n\n    "}static get renderOnAttributes(){return["label"]}}window.customElements.define("k-card",Card);

package/dist/components/CodeEditor.js

@@ -0,0 +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);

package/dist/components/Component.js

@@ -0,0 +1 @@
+import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render()}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n      <slot></slot>\n    "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}

package/dist/components/Dialog.js

@@ -0,0 +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);

package/dist/components/FocusCapture.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";export default class FocusCapture extends LazyComponent{constructor(){super({delegatesFocus:!0})}render(){super.render(),this.shadowRoot.getElementById("after").addEventListener("focus",(()=>{this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus()}))}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div id="after" tabindex="0"></div>\n    `}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n      }\n    "}}window.customElements.define("k-focus-capture",FocusCapture);

package/dist/components/Icon.js

@@ -0,0 +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);

package/dist/components/Import.js

@@ -0,0 +1 @@
+import Component from"./Component.js";export default class Import extends Component{constructor(){super(),this.registerAttribute("src")}attributeChangedCallback(t,e,r){"src"===t&&e!==r&&this.render(!0)}async render(t){const e=this.src;e&&await super.render(t)&&(this.innerHTML=await(await fetch(e)).text(),this.querySelectorAll("script").forEach((t=>{const e=document.createElement("script");t.getAttribute("type")&&(e.type=t.getAttribute("type")),t.getAttribute("src")&&(e.src=t.getAttribute("src")),t.textContent&&(e.textContent=t.textContent),t.parentElement.replaceChild(e,t)})))}get shadowStyles(){return"\n      :host {\n        display: inline;\n      }\n    "}static get renderOnAttributes(){retur.src}}window.customElements.define("k-import",Import);

package/dist/components/LazyComponent.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{isInView}from"../utils/element.js";export default class LazyComponent extends Component{constructor(e){super(e),new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttribute("unrender",!1)}async connectedCallback(){await this.renderSkelton(),await isInView(this)&&await this.inViewCallback()}async inViewCallback(){await this.render()}async outOfViewCallback(){this.unrender&&await this.renderSkelton()}async renderSkelton(){this.shadowRoot.innerHTML=`<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}}

package/dist/components/ReactiveComponent.js

@@ -0,0 +1 @@
+import Component from"./Component.js";export default class ReactiveComponent extends Component{attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),this.constructor.renderOnChange.includes(e)&&this.render(!0)}static renderOnChange=[]}

package/dist/components/ReactiveLazyComponent.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";export default class ReactiveComponent extends LazyComponent{attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),this.constructor.renderOnChange.includes(e)&&this.render(!0)}static renderOnChange=[]}

package/dist/components/Resize.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import drag from"../utils/drag.js";const startSize=Symbol("startSize"),dragStartHandler=Symbol("dragStartHandler"),dragEndHandler=Symbol("dragEndHandler"),dragSideHandler=Symbol("dragSideHandler"),dragBottomHandler=Symbol("dragBottomHandler"),dragCornerHandler=Symbol("dragCornerHandler"),cleanupFuncs=Symbol("cleanupFuncs");export default class Resize extends Component{constructor(){super(),this[startSize]={width:0,height:0},this[dragStartHandler]=({element:n})=>{const{width:e,height:t}=this.getBoundingClientRect();this[startSize].width=e,this[startSize].height=t,this.resizing=n.id},this[dragEndHandler]=()=>{this.resizing=""},this[dragSideHandler]=({x:n})=>{this.style.width=this[startSize].width+n+"px"},this[dragBottomHandler]=({y:n})=>{this.style.height=this[startSize].height+n+"px"},this[dragCornerHandler]=({x:n,y:e})=>{this.style.width=this[startSize].width+n+"px",this.style.height=this[startSize].height+e+"px"},this[cleanupFuncs]=[],this.registerAttribute("resizing","")}async render(n){return!!await super.render(n)&&(this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("side"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragSideHandler],preventScroll:!0})),this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("bottom"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragBottomHandler],preventScroll:!0})),this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("corner"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragCornerHandler],preventScroll:!0})),!0)}disconnectedCallback(){super.disconnectedCallback(),this[cleanupFuncs].forEach((n=>n()))}get shadowTemplate(){return`\n      <div id="main">\n        ${super.shadowTemplate}\n      </div>\n      <div id="side" class="handle">\n        <svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" /></svg>\n      </div>\n      <div id="bottom" class="handle">\n        <svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" /></svg>\n      </div>\n      <div id="corner" class="handle">\n        <svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" /></svg>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --handle_size: 1rem;\n\n        display: grid;\n        grid-template-columns: 1fr var(--handle_size);\n        grid-template-rows: 1fr var(--handle_size);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        min-width: 10rem;\n        max-width: 100%;\n        min-height: 10rem;\n        max-height: 100%;\n      }\n      :host([dimention="height"]){\n        grid-template-columns: 1fr;\n      }\n      :host([dimention="width"]){\n        grid-template-rows: 1fr;\n      }\n      #main {\n        grid-row: 1;\n        grid-column: 1;\n        overflow: auto;\n      }\n      #side {\n        grid-row: 1;\n        grid-column: 2;\n        cursor: ew-resize;\n      }\n      #bottom {\n        grid-row: 2;\n        grid-column: 1;\n        text-align: center;\n        cursor: ns-resize;\n      }\n      #corner {\n        grid-row: 2;\n        grid-column: 2;\n        overflow: hidden;\n        cursor: nwse-resize;\n      }\n      .handle {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .handle svg {\n        transform: scale(0.5);\n      }\n      #bottom svg {\n        height: var(--handle_size);\n      }\n      #side svg {\n        width: var(--handle_size);\n      }\n      #corner svg {\n        width: var(--handle_size);\n        height: var(--handle_size);\n      }\n      :host(:not([resizing=""])) #main {\n        pointer-events: none;\n      }\n      :host([resizing="side"]) #side,\n      :host([resizing="corner"]) #side,\n      :host([resizing="corner"]) #corner,\n      :host([resizing="corner"]) #bottom,\n      :host([resizing="bottom"]) #bottom {\n        background-color: var(--c_highlight);\n      }\n      :host([dimention="height"]) #side,\n      :host([dimention="height"]) #corner,\n      :host([dimention="width"]) #bottom,\n      :host([dimention="width"]) #corner {\n        display: none;\n      }\n    `}}window.customElements.define("k-resize",Resize);

package/dist/components/Search.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch("/search.json")).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);

package/dist/components/ShowMore.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class ShowMore extends LazyComponent{constructor(){super(),this.registerAttribute("opened",!1),this.registerProp("_toggleClickHandler",(()=>this.toggle()))}async render(n){await super.render(n),onEvent(this.shadowRoot.getElementById("toggle"),"click",this._toggleClickHandler)}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened?this.less():this.more()}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n        <button\n          id="toggle"\n          class="no-btn"\n        >\n          <span id="more">\n            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n          </span>\n          <span id="less">\n            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n          </span>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --closed_height: 7rem;\n        \n        display: block;\n      }\n      :host(:not([opened])) #content{\n        height: var(--closed_height);\n        overflow-y: hidden;\n      }\n      :host(:not([opened])) #content {\n        margin-bottom: calc(var(--closed_height) * -0.9);\n      }\n      :host(:not([opened]))  #toggle {\n        padding-top: calc(var(--closed_height) - 2rem);\n        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n      }\n      #toggle {\n        width: 100%;\n        padding: var(--spacer_h);\n        text-align: center;\n        background: var(--c_bg);\n      }\n      :host([opened]) #more,\n      :host(:not([opened])) #less {\n        display: none;\n      }\n    `}}window.customElements.define("k-show-more",ShowMore);

package/dist/components/SideMenu.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";import"./Icon.js";import"./FocusCapture.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export class SideMenu extends LazyComponent{constructor(){super(),this.registerAttribute("opened",!1),this.registerAttribute("overlayClose",!0),this.registerProps({_overlayClick:()=>{this.overlayClose&&this.close()}})}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("overlay"),"click",this._overlayClick)}attributeChangedCallback(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===n&&dispatchEvent(this,"true"===t?"change open":"change close")}render(n){super.render(n),onEvent(this.shadowRoot.getElementById("overlay"),"click",this._overlayClick)}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),dispatchEvent(this,"toggle")}get shadowTemplate(){return`\n      <k-focus-capture>\n        <div id="container">\n          <button id="overlay" class="no-btn">\n            <k-icon id="overlay-x" name="close"></k-icon>\n          </button>\n          <div id="menu">\n            ${super.shadowTemplate}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --bg: var(--c_bg);\n        --width: 20rem;\n\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        max-width: 100%;\n        height: 100vh;\n        z-index: 100;\n        pointer-events: none;\n      }\n      :host([opened]) {\n        pointer-events: auto;\n      }\n      k-focus-capture {\n        width: 100%;\n        height: 100%;\n      }\n      #container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        transition: opacity var(--animation_ms, 256ms);\n      }\n      :host([opened]) #container {\n        opacity: 1;\n      }\n      #overlay {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        background: var(--overlay, rgba(0, 0, 0, 0.5));\n      }\n      #overlay-x {\n        position: absolute;\n        top: var(--spacer_h);\n        right: var(--spacer_h);\n        font-size: 1.75rem;\n        cursor: pointer;\n        color: var(--tc_light);\n      }\n      :host([overlay-close="false"]) #overlay-x {\n        display: none;\n      }\n      :host([overlay-close="false"]) #overlay {\n        cursor: default;\n      }\n      #menu {\n        position: absolute;\n        width: var(--width);\n        max-width: calc(100vw - 6rem);\n        height: 100vh;\n        overflow-y: auto;\n        left: calc(var(--width) * -1);\n        top: 0;\n        background: var(--bg);\n        transition: left var(--animation_ms, 256ms);\n        padding: var(--menu_padding, var(--spacer))\n      }\n      :host([opened]) #menu {\n        left: 0;\n      }\n      :host([side="right"]) #menu {\n        left: auto;\n        transition: right var(--animation_ms, 256ms);\n        right: calc(var(--width) * -1);\n      }\n      :host([opened][side="right"]) #menu {\n        right: 0;\n      }\n      :host([side="right"]) #overlay-x {\n        right: auto;\n        left: var(--spacer_h);\n      }\n    `}static get observedAttributes(){return["opened",...super.observedAttributes]}}window.customElements.define("k-side-menu",SideMenu);

package/dist/components/Split.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import drag from"../utils/drag.js";import{dispatchEvent}from"../utils/element.js";const dragStartWidth=Symbol(),dragStartCallback=Symbol(),dragEndCallback=Symbol(),dragCallback=Symbol(),dragCleanup=Symbol();export default class Split extends Component{constructor(t,e){super(),this[dragStartWidth]=0,this[dragStartCallback]=()=>{this.resizing=!0,this[dragStartWidth]=Math.round(this.shadowRoot.getElementById("left").getBoundingClientRect().width),dispatchEvent(this,"resizestart",{startSize:this[dragStartWidth]})},this[dragCallback]=({x:t})=>{const e=`${this[dragStartWidth]+t}px`;this.setSize(e),dispatchEvent(this,"resize",{size:e})},this[dragEndCallback]=({x:t})=>{this.resizing=!1;const e=`${this[dragStartWidth]+t}px`;this.setSize(e),dispatchEvent(this,"resizeend",{size:e})},this[dragCleanup]=()=>{},this.registerAttribute("resizing",!1)}async connectedCallback(){super.connectedCallback(),this[dragCleanup]=drag({element:this.shadowRoot.getElementById("divider-handle"),callback:this[dragCallback],startCallback:this[dragStartCallback],endCallback:this[dragEndCallback]})}disconnectedCallback(){super.disconnectedCallback(),this[dragCleanup]()}setSize(t){this.style.setProperty("--left_width",t)}get shadowTemplate(){return`\n      <div\n        id="left"\n        class="pane"\n      >\n        ${super.shadowTemplate}\n      </div>\n      <div id="divider-handle">\n        <div id="divider-border"></div>\n      </div>\n      <div\n        id="right"\n        class="pane"\n      >\n        <slot name="right"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --left_width: calc( (100% - var(--handle_width)) / 2);\n        --handle_width: 0.5rem;\n        --min_pane_width: 6rem;\n\n        height: 100%;\n        display: flex;\n        align-items: stretch;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .pane, #divider-handle {\n        display: inline-block;\n      }\n      .pane {\n        min-width: var(--min_pane_width);\n        max-width: calc(100% - var(--min_pane_width));\n        max-height: 100%;\n        overflow: hidden;\n      }\n      #left {\n        flex: 0 0 var(--left_width);\n      }\n      #divider-handle {\n        display: flex;\n        justify-content: center;\n        width: var(--handle_width);\n        cursor: ew-resize;\n      }\n      :host([resizing]) #divider-handle {\n        background-color: var(--tc_primary);\n      }\n      :host([resizing]) .pane {\n        pointer-events: none;\n        user-select: none;\n      }\n      #divider-border {\n        width: 1px;\n        height: 100%;\n        border-left: 1px solid var(--c_border);\n      }\n      #right {\n        flex: 1 1;\n      }\n      \n    `}}window.customElements.define("k-split",Split);

package/dist/components/Tabs.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n      <button id="button">\n        ${super.shadowTemplate}\n      </button>\n    `}get shadowStyles(){return"\n      :host {\n        margin-bottom: -1px;\n      }\n      #button {\n        padding: var(--spacer_h);\n        background-color: transparent;\n        border: none;\n        cursor: inherit;\n        box-shadow: none;\n        color: inherit;\n      }\n      :host(:not([active])) #button {\n        cursor: pointer;\n      }\n      :host([active]){\n        border-bottom: 2px solid var(--c_primary);\n        margin-bottom: -1px;\n      }\n      :host([active]) #button {\n        color: var(--tc_primary);\n      }\n    "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        height: 100%;\n        max-height: 100%;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      :host([active]) {\n        display: block;\n      }\n      :host(:not([active])) {\n        display: none;\n      }\n    `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="tabs">\n          <slot name="tabs"></slot>\n        </div>\n        <div id="contents">\n          ${super.shadowTemplate}\n        </div>\n      </div>\n      \n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        overflow: hidden;\n      }\n      #wrapper {\n        display: flex;\n        flex-direction: column;\n        max-height: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      #tabs {\n        display: flex;\n        border-bottom: 1px solid var(--c_border);\n        padding: 0;\n        margin-top: calc(0 - var(--spacer));\n        align-items: flex-start;\n      }\n      #contents {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        max-height: 100%;\n        overflow: hidden\n      }\n    `}static observedAttributes=[...super.observedAttributes,"active"]}window.customElements.define("k-tabs",Tabs);export class TabSpacer extends Component{constructor(){super(),this.slot="tabs"}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        flex: 1 1 auto;\n        height: 1px;\n      }\n    `}}window.customElements.define("k-tab-spacer",TabSpacer);

package/dist/components/ThemeSwitcher.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||(e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),e}}ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);

package/dist/components/Timestamp.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends Component{constructor(t){super(),this.registerAttribute("timestamp",0),t&&(this.timestamp=t)}attributeChangedCallback(t,e,m){"timestamp"==t&&(this.innerHTML=m?formatTimestamp(m,"en-US"):"")}static observedAttributes=["timestamp"]}window.customElements.define("k-timestamp",Timestamp);

package/dist/components/WebSnippetEditor.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{escapeHTML,unescapeHTML}from"../utils/string.js";import"./Split.js";import"./Tabs.js";import"./CodeEditor.js";const changeHandler=Symbol();export default class WebSnippetEditor extends Component{constructor(){super(),this[changeHandler]=()=>{this.renderResults()},this.registerAttributes({useKempo:!1,showHtml:!0,showCss:!0,showJs:!0,scripts:""})}async render(){await super.render();const t=this.querySelector('pre[for="html"]'),e=this.shadowRoot.getElementById("html");e.addEventListener("change",this[changeHandler]),e.value=escapeHTML(t?t.textContent:"<div>\n  \n</div>");const n=this.querySelector('pre[for="css"]'),s=this.shadowRoot.getElementById("css");s.addEventListener("change",this[changeHandler]),s.value=n?n.textContent:"div {\n  \n}";const o=this.querySelector('pre[for="js"]'),a=this.shadowRoot.getElementById("js");a.addEventListener("change",this[changeHandler]),a.value=o?o.textContent:"",this.renderResults()}renderResults(){const t=this.shadowRoot.getElementById("html").value,e=this.shadowRoot.getElementById("css").value,n=this.shadowRoot.getElementById("js").value,s=this.shadowRoot.getElementById("results");s.innerHTML="";const o=document.createElement("iframe");o.frameBorder="0",s.appendChild(o);const a=o.contentDocument||o.contentWindow.document;a.body.innerHTML=`\n      ${this.useKempo?'<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />':""}\n      <style>\n        body, html {\n          background-color: transparent;\n        }\n        body {\n          overflow-y: auto;\n          padding: var(--spacer_q, 4px);\n        }\n        ${e}\n      </style>\n      ${t}\n    `,this.useKempo&&this.scripts&&this.scripts.split(",").forEach((t=>{const e=document.createElement("script");e.type="module",e.src=t,a.head.appendChild(e)}));const r=document.createElement("script");r.textContent=n,a.head.appendChild(r)}get shadowTemplate(){return`\n      <k-split id="split">\n        <k-tabs class="ml">\n          ${this.showHtml?'<k-tab for="html">HTML</k-tab>':""}\n          ${this.showCss?'<k-tab for="css">CSS</k-tab>':""}\n          ${this.showJs?'<k-tab for="js">JS</k-tab>':""}\n          <k-tab-content name="html">\n            <k-code-editor\n              id="html"\n              language="xml"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n          <k-tab-content name="css">\n            <k-code-editor\n              id="css"\n              language="css"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n          <k-tab-content name="js">\n            <k-code-editor\n              id="js"\n              language="js"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n        </k-tabs>\n        <div\n          id="results"\n          slot="right"\n        ></div>\n      </k-split>\n    `}get shadowStyles(){return"\n      :host {\n        --min-height: auto;\n        --height: auto;\n        --max-height: auto;\n        display: block;\n      }\n      k-tab-content {\n        min-height: var(--min-height);\n        height: var(--height);\n        max-height: var(--max-height);\n      }\n      k-code-editor {\n        max-height: calc(100% - (2 * var(--spacer)));\n      }\n      #results,\n      iframe {\n        width: 100%;\n        height: 100%;\n        background-color: transparent;\n      }\n    "}}window.customElements.define("k-web-snippet-editor",WebSnippetEditor);

package/dist/index.js

@@ -0,0 +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};

package/dist/kempo-hljs.css

@@ -0,0 +1 @@
+:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}

package/dist/kempo-styles.css

@@ -0,0 +1 @@
+/* Reset*/*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--spacer_h) var(--spacer);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--spacer_h) var(--spacer);margin-bottom:var(--spacer);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}

package/dist/kempo-vars.css

@@ -0,0 +1 @@
+:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_border_width:2px}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}

package/dist/kempo.css

@@ -0,0 +1 @@
+:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#f0f0f0;--btn_bg__hover:#e9e9e9;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333);--link_decoration:underline;--input_border_width:2px}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}@import './kempo-styles.css';

package/dist/kempo.js

@@ -0,0 +1 @@
+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"},lookFor=new Set(Object.keys(components));window.kempo=Object.assign({},{pathToRoot:"./",pathToKempoFromRoot:"./kempo/",pathToIconsFromRoot:"./kempo/icons/",autoLoadComponents:()=>{lookFor.forEach((async e=>{if(document.querySelector(e)){const o=`${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[e]}.js`;console.log(o),import(o),lookFor.delete(e)}}))},_darkModeQuery:window.matchMedia("(prefers-color-scheme: dark)"),_theme:"auto",_themeListener:e=>{"auto"===window.kempo._theme&&document.documentElement.setAttribute("theme",e.matches?"dark":"light")},setTheme:e=>{window.kempo._theme=e,"auto"===window.kempo._theme?document.documentElement.setAttribute("theme",window.kempo._darkModeQuery.matches?"dark":"light"):document.documentElement.setAttribute("theme",e)}},window.kempo||{}),window.kempo.autoLoadComponents(),window.kempo._darkModeQuery.addEventListener("change",window.kempo._themeListener),window.kempo.setTheme(document.documentElement.getAttribute("theme")||"auto");

package/dist/utils/cli.js

@@ -0,0 +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};

package/dist/utils/cookie.js

@@ -0,0 +1 @@
+const saveCookie=(e,o,t=43200,i="/")=>{const n=new Date(Date.now()+60*t*1e3);document.cookie=`${e}=${o};expires=${n.toUTCString()};path=${i}`},getCookie=e=>{const o=document.cookie.split(";").map((e=>e.trim().split("="))),t=o.find((o=>o[0]===e));return t?t[1]:null},deleteCookie=e=>{document.cookie=`${e}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`};export{saveCookie,getCookie,deleteCookie};

package/dist/utils/debounce.js

@@ -0,0 +1 @@
+function debounce(e,t=300){let u;return(...o)=>{clearTimeout(u),u=setTimeout((()=>{e.apply(this,o)}),t)}}export default debounce;

package/dist/utils/drag.js

@@ -0,0 +1 @@
+export default(e={})=>{let t,o,n;const{element:s=(()=>{}),callback:a=(()=>{}),startCallback:v=(()=>{}),moveCallback:i=(()=>{}),endCallback:r=(()=>{}),preventScroll:d=!1}=e,u=s=>{d&&s.preventDefault(),clearTimeout(n);const v=s.pageX||s.touches[0].pageX,r=s.pageY||s.touches[0].pageY,u={x:v-t,y:r-o,...e};a(u),i(u)},c=({pageX:s,pageY:v})=>{clearTimeout(n);const i={x:s-t,y:v-o,...e};a(i),r(i),m()},p=s=>{clearTimeout(n),t=s.pageX||s.touches[0].pageX,o=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};v(a),window.addEventListener("mousemove",u,{passive:!d}),window.addEventListener("mouseup",c,{passive:!d}),window.addEventListener("touchmove",u,{passive:!d}),window.addEventListener("touchend",c,{passive:!d})},m=()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",c)};return s.addEventListener("mousedown",p,{passive:!d}),s.addEventListener("touchstart",p,{passive:!d}),()=>{s.removeEventListener("mousedown",p),m()}};

package/dist/utils/element.js

@@ -0,0 +1 @@
+import waitFrames from"./waitFrames.js";export const onEvent=(t,e,n,o=document)=>{t instanceof EventTarget?e.toLowerCase().split(" ").forEach((e=>{t.addEventListener(e,n)})):t instanceof NodeList||t instanceof Array?t.forEach((t=>onEvent(t,e,n))):"string"==typeof t&&o.querySelectorAll(t).forEach((t=>onEvent(t,e,n)))};export const offEvent=(t,e,n,o=document)=>{t instanceof EventTarget?e.toLowerCase().split(" ").forEach((e=>{t.removeEventListener(e,n)})):t instanceof NodeList||t instanceof Array?t.forEach((t=>offEvent(t,e,n))):"string"==typeof t&&o.querySelectorAll(t).forEach((t=>offEvent(t,e,n)))};export const dispatchEvent=(t,e,n,o=document)=>{t instanceof EventTarget?e.toLowerCase().split(" ").forEach((e=>{t.dispatchEvent(new CustomEvent(e,{detail:n}))})):t instanceof NodeList||t instanceof Array?t.forEach((t=>dispatchEvent(t,e,handler))):"string"==typeof t&&o.querySelectorAll(t).forEach((t=>dispatchEvent(t,e,handler)))};export const isInView=async t=>{await waitFrames(2);const e=t.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight,o=window.innerWidth||document.documentElement.clientWidth;if(e.bottom<0||e.top>n||e.right<0||e.left>o)return!1;for(;t;){const e=getComputedStyle(t);if("none"===e.display||"hidden"===e.visibility)return!1;t=t.parentElement}return!0};export const firstFocusable=t=>t.querySelector('a[href]:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])');export const setProp=(t,e,n,o=document)=>{t instanceof HTMLElement?t[e]=n:t instanceof NodeList||t instanceof Array?[...t].forEach((t=>dispatchEvent(t,e,n))):"string"==typeof t&&dispatchEvent(o.querySelectorAll(t),e,n)};

package/dist/utils/formatTimestamp.js

@@ -0,0 +1 @@
+export default(i,t)=>Intl.DateTimeFormat(t||navigator.language,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",millisecond:"3-digit"}).format(new Date(parseInt(i)));

package/dist/utils/fuzzyMatch.js

@@ -0,0 +1 @@
+export const fuzzyMatch=(t,r)=>{const e=((t,r)=>{const e=t.length,n=r.length,a=Array.from({length:e+1},(()=>Array(n+1).fill(0)));for(let h=0;h<=e;h++)for(let e=0;e<=n;e++)a[h][e]=0===h?e:0===e?h:Math.min(a[h-1][e-1]+(t.charAt(h-1)===r.charAt(e-1)?0:1),a[h][e-1]+1,a[h-1][e]+1);return a[e][n]})(t.toLowerCase(),r.toLowerCase());if(0===e)return 10;const n=Math.max(0,10-e/3),a=Math.min((t.length-e)/t.length,1);return Math.round(5*n+5*a)};export const fuzzyMatchArray=(t,r)=>{const e=t.map((t=>fuzzyMatch(t,r))).filter((t=>0!==t));if(0===e.length)return 0;return e.reduce(((t,r)=>t+r),0)/e.length};

package/dist/utils/getPreferredTheme.js

@@ -0,0 +1 @@
+export default()=>window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";

package/dist/utils/loadCss.js

@@ -0,0 +1 @@
+export default(e,n="stylesheet")=>new Promise(((o,t)=>{const r=document.createElement("link");r.rel=n,r.href=e,r.onload=o,r.onerror=t,document.head.appendChild(r)}));

package/dist/utils/loadScript.js

@@ -0,0 +1 @@
+export default(e,o="module")=>new Promise(((t,d)=>{const n=document.createElement("script");n.type=o,n.src=e,n.onload=t,n.onerror=d,document.head.appendChild(n)}));

package/dist/utils/object.js

@@ -0,0 +1 @@
+import{typeOf,isType}from"./type.js";export const toJson=e=>JSON.stringify(e,((t,n)=>""!==t&&n===e?"<<Circular Reference>>":"undefined"!=typeof Element&&n instanceof Element?n.outerHTML:"function"===typeOf(n)?`<<Function ${t}>>`:n));export const flattenObject=(e,t=100,n=0,o=[])=>{const r=n+1;return null===e?{}:Object.keys(e).reduce(((n,c)=>{const s=e[c],l=[...o,c].join(".");return"undefined"!==typeOf(Element)&&s instanceof Element?{...n,[l]:s.outerHTML}:null===s?{...n,[l]:null}:"object"==typeof s?t<=r?{...n,[l]:"<<Max Depth Reached>>"}:{...n,...flattenObject(s,t,r,[...o,c])}:{...n,[l]:s}}),{})};export const flattenedObjects=(...e)=>e.map((e=>flattenObject(e)));export const objectSummary=(e,t=100)=>{if("object"==typeof e){const n=flattenObject(e),o=[];return Object.keys(n).forEach((e=>{o.push(`${e} = ${objectSummary(n[e])}`)})),o.join(", ").substring(0,t)}return`${e}`.substring(0,t)};export const clone=e=>{const t=typeof e,n="undefined"==typeof window?class{}:window.Element;return e instanceof n?e.outerHTML:null===e?null:["string","number","boolean","undefined","bigint"].includes(t)?e:"symbol"===t?"<<SYMBOL>>":"function"===t?"<<function>>":e instanceof Array?e.map((e=>clone(e))):"object"===t?Object.keys(e).reduce(((t,n)=>({...t,[n]:clone(e[n])})),{}):e};export const equalObjs=(...e)=>{if(e.length<2)return!0;const t=toJson(e[0]);for(let n=1;n<e.length;n++)if(t!==toJson(e[n]))return!1;return!0};const pruneVar=e=>void 0===e?[void 0,!0]:"string"==typeof e?[e,""===e]:e instanceof Array?[e,0===e.length]:null===e?[e,!1]:"object"==typeof e?pruneObject(e):[e,!1],pruneObject=e=>{const t={};return Object.keys(e).forEach((n=>{const[o,r]=pruneVar(e[n]);r||(t[n]=o)})),[t,0===Object.keys(t).length]};export const prune=e=>pruneObject(e)[0];export const getAllKeys=(...e)=>[...new Set(e.map((e=>Object.keys(e))).flat())];export const getDifferencesKeys=(...e)=>getAllKeys(...e).map((t=>1!==new Set(e.map((e=>e[t]))).size?t:null)).filter((e=>null!==e));export const diff=(e,t)=>{const n={};function o(e,t,o){Array.isArray(t)&&Array.isArray(o)?t.length===o.length&&t.every(((e,t)=>e===o[t]))||(n[e.join(".")]={newValue:t,oldValue:o}):"object"==typeof t&&"object"==typeof o?r([...e],t,o):t!==o&&(n[e.join(".")]={newValue:t,oldValue:o})}function r(e,t,n){for(const r in t)if(t.hasOwnProperty(r)){o([...e,r],t[r],n[r])}}return r([],e,t),n};

package/dist/utils/string.js

@@ -0,0 +1 @@
+export const camelToDash=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();export const dashToCamel=e=>e.replace(/-([a-z])/g,((e,t)=>t.toUpperCase()));export const isCamelCase=e=>/[a-z][A-Z]/.test(e);export const getCase=e=>isCamelCase(e)?{camel:e,dash:camelToDash(e)}:{camel:dashToCamel(e),dash:e};export const escapeHTML=e=>e.replace(/[&<>"'/]/g,(e=>{switch(e){case"&":return"&amp;";case"<":return"&lt;";case">":return"&gt;";case'"':return"&quot;";case"'":return"&#39;";case"/":return"&#x2F;";default:return e}}));export const unescapeHTML=e=>e.replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F;/g,(e=>{switch(e){case"&amp;":return"&";case"&lt;":return"<";case"&gt;":return">";case"&quot;":return'"';case"&#39;":return"'";case"&#x2F;":return"/";default:return e}}));export const trim=(e,t)=>e.replace(new RegExp(`^[${t}]+|[${t}]+$`,"g"),"");export const compoundKey=e=>trim(e.join("."),".");

package/dist/utils/toFunction.js

@@ -0,0 +1 @@
+export default t=>{if("function"==typeof t)return t;if("string"==typeof t){const n=t.split(".");let o=window;for(const t of n)if(o=o[t],void 0===o)break;if("function"==typeof o)return o;try{return new Function(t)}catch(t){console.error("Failed to create function from string:",t)}}return()=>t};

package/dist/utils/type.js

@@ -0,0 +1 @@
+export const typeOf=e=>null===e?"null":e instanceof Array?"array":"undefined"!=typeof Element&&e instanceof Element?"element":typeof e;export const isType=(e,n)=>typeOf(e)===n;

package/dist/utils/waitFrames.js

@@ -0,0 +1 @@
+export default(e=1)=>new Promise((t=>{let n=0;requestAnimationFrame((function i(){n++,n>=e?t():requestAnimationFrame(i)}))}));

package/docs/components/_template.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Template - 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">Template</h1>
+  <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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Card - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../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">Card</h1>
+  <main>
+    <p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
+    <k-card>
+      This is a card
+    </k-card>
+
+    <h3>Labels</h3>
+    <p>A label gives some text in a box on the top border of the card, helping identify the purpose of the contents.</p>
+    <k-card label="I'm a Label">
+      This is a card
+    </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>
+</html>

package/docs/components/codeeditor.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code Editor - 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">Code Editor</h1>
+  <main>
+    <p>Use the <code>&lt;k-code-editor></code> to create a code text editor. Put your initial code within the the tag, for HTML you should escape the open tags (<code>&lt;</code> should be <code>&amp;lt;</code>) so the code is not treated as real HTML.</p>
+    <p>This is a very simple code editor, it is not intended to be full featured, just the basics, it's like a textarea with line numbers and highlighting. If you want a full featured editor please use <a href="https://ace.c9.io/" target="_blank">Ace Editor</a>, <a href="https://codemirror.net/" target="_blank">Code Mirror</a>, or <a href="https://microsoft.github.io/monaco-editor/" target="_blank">Monaco</a></p>
+    <k-code-editor>
+&lt;k-code-editor>
+  &lt;!-- Init Code Here !-->
+&lt;/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>
+</html>

package/docs/components/component.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component - 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">Component</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#attributes">Attributes</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p><code>Component</code> is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components" target="_blank">Web Component</a> (JS Class) from which all <b>Kempo</b> components are created, it handles the creation of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" target="_blank">Shadow DOM</a> from the <a href="#shadowTemplate">shadowTemplate</a> and <a href="#shadowStyles">shadowStyles</a>, along with creating utility methods for creating attributes and methods.</p>
+
+    <h3 id="requirements">Requirements</h3>
+    <ul>
+      <li><a href="">getCase Utility Function</a></li>
+    </ul>
+
+    <h3 id="constructor">Constructor</h3>
+    <h6>Extends <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a></h6>
+    <h5>
+      <code>super()</code><br />
+      <code>super(<i>Object shadowOptions</i>)</code>
+    </h5>
+    <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>
+    
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-comment">// Your Constructor</span><br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h3 id="attributes">Attributes</h3>
+    <h5><code>rendered</code> <i>Boolean</i></h5>
+    <p>A <b class="tc-damger">READ ONLY</b> boolean that indicates if this element has been rendered.</p>
+    
+    <h3>Properties</h3>
+    <h5 id="shadowTemplate"><code>shadowTemplate</code> <i>String</i></h5>
+    <p>A string of <b class="tc-primary">HTML</b> that is used to render the markup of the component. This <b class="tc-success">should be</b> overwritten in your component with your own markup, but make sure to use the <code>super.shadowTemplate</code> to get the default slot.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-comment">/* Other things */</span><br />  <span class="hljs-keyword">get</span> shadowTemplate(){<br />    <span class="hljs-keyword">return</span> <span class="hljs-comment">/*html*/</span><span class="hljs-string">`<br />      <span class="hljs-subst">${<span class="hljs-keyword">super</span>.shadowTemplate}</span><br />      &lt;p&gt;This is my component&lt;/p&gt;<br />    `</span>;<br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h5 id="shadowStyles"><code>shadowStyles</code> <i>String</i></h5>
+    <p>A string of <b class="tc-primary">CSS</b> that styles the Shadow DOM (from the <code>shadowTemplate</code>).</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-comment">/* Other things */</span><br />  <span class="hljs-keyword">get</span> shadowStyles(){<br />    <span class="hljs-keyword">return</span> <span class="hljs-comment">/*css*/</span><span class="hljs-string">`<br />      :host {<br />        /* Style this element */<br />      }<br />      p {<br />        /* Style Shadow DOM Elements */<br />      }<br />    `</span>;<br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h3 id="methods">Methods</h3>
+    <h5><code>async render(<i>Boolean</i> force = false)</code></h5>
+    <p>This method renders the Shadow DOM if it has not already been rendered, and sets the <code>rendered</code> attribute to <code>true</code>.</p>
+    <p>This <b class="tc-success">should be</b> overwritten in your component with your own function, but make sure to use the <code>super.render(force)</code> to render the Shadow DOM.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-keyword">async</span> render(force){<br />    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br />      <span class="hljs-comment">/* The Shadow DOM is ready, do your stuff here<br />        This is often attaching event handlers to Shadow DOM elements<br />      */</span><br />      <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br />    }<br />    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h5><code>registerAttribute(<i>String</i> name, <i>Any</i> defaultValue = '')</code></h5>
+    <p>This method creates an attribute (dash case), that can also be accessed as a member with camel case. This is typically done in the constructor.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.registerAttribute(<span class="hljs-string">'my-att'</span>, <span class="hljs-string">'hello'</span>);<br />    <span class="hljs-comment">// this can now be accessed by using this.myAtt</span><br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h5><code>registerAttributes(<i>Object</i> attributes)</code></h5>
+    <p>This is the same as <code>registerAttribute</code>, except it takes the attributes as key-value-pairs allowing you to register multiple attributes at once.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.registerAttributes({<br />      <span class="hljs-string">'myAttr1'</span>: <span class="hljs-string">'value1'</span>,<br />      <span class="hljs-string">'myAttr2'</span>: <span class="hljs-string">'value2'</span> <br />    });<br />    <span class="hljs-comment">// this can now be accessed by using this.myAttr1 and this.myAttr2</span><br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h5><code>registerProp(<i>String</i> name, <i>Any</i> defaultValue)</code></h5>
+    <p>This method creates a property. This is typically done in the constructor.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.registerProp(<span class="hljs-string">'myProp'</span>, [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>]);<br />    <span class="hljs-comment">// this can now be accessed by using this.myProp</span><br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+    <h5><code>registerProps(<i>Object</i> properties)</code></h5>
+    <p>This is the same as <code>registerProp</code>, except it takes the props as key-value-pairs allowing you to register multiple props at once.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br />  <span class="hljs-keyword">constructor</span>(){<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.registerProps({<br />      <span class="hljs-attr">myProp1</span>: [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>],<br />      <span class="hljs-attr">myProp2</span>: <span class="hljs-number">5</span><br />    });<br />    <span class="hljs-comment">// these props can now be accessed by using this.myProp1 and this.myProp2</span><br />  }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
+
+  </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>