kempo 2.11.3 → 2.12.1

package/dist/components/Card.js

@@ -1 +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);
+import Component from"./Component.js";import{setProp}from"../utils/element.js";export default class Card extends Component{constructor(e=""){super(),this.registerAttribute("label",e)}attributeChangedCallback(e,r,n){"label"===e&&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 observedAttributes=[...super.observedAttributes,"label"]}window.customElements.define("k-card",Card);

package/dist/components/Collapsible.js

@@ -0,0 +1 @@
+import Component from".//Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol("clickHandler");export default class Collapsible extends Component{constructor(e=!1){super(),this[clickHandler]=()=>{this.toggle()},this.registerAttributes({opened:e})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&dispatchEvent(this,"openedchanged "+("true"===t?"open":"close"))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"openedtoggled")}get shadowTemplate(){return`\n      <div id="labelContainer">\n        <div id="label">\n          <slot name="label"></slot>\n        </div>\n        <div id="labelIcon">\n          <slot name="labelIcon">\n            <k-icon name="chevron-right"></k-icon>\n          </slot>\n        </div>\n      </div>\n      <div id="content">\n        ${super.shadowTemplate}\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #labelContainer {\n        display: flex;\n        cursor: pointer;\n      }\n      #label {\n        flex: 1 1 auto;\n      }\n      #labelIcon {\n        flex: 0 0 none;\n        opacity: 0.5;\n        transform: rotate(90deg);\n        transition: transform var(--animation_ms, 256ms);\n      }\n      #labelContainer:hover #labelIcon {\n        opacity: 1;\n      }\n      :host([opened="true"]) #labelIcon {\n        transform: rotate(-90deg);\n      }\n      :host(:not([opened="true"])) #content {\n        display: none;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-collapsible",Collapsible);

package/dist/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{try{const n=await fetch(t);200===n.status&&e(await n.text())}catch(t){}return n()}))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let c;for(let t=0;t<Icon.pathToIcons.length&&!c;t++)try{c=await e(Icon.pathToIcons[t])}catch(t){}c?t(c):n("Icon not found")}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{const s=(new AbortController).signal;try{const n=await fetch(t,{signal:s});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}})).catch((()=>null))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)try{s=await e(Icon.pathToIcons[t])}catch(t){}t(s||null)}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/dist/components/Import.js

@@ -1 +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);
+import Component from"./Component.js";export default class Import extends Component{constructor(t=""){super(),this.registerAttribute("src",t)}attributeChangedCallback(t,e,r){"src"===t&&e!==r&&this.render(!0)}async render(t){const e=this.src;if(e&&await super.render(t)){let t=await(await fetch(e)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);return this.innerHTML=t,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)})),!0}return!1}get shadowStyles(){return"\n      :host {\n        display: contents;\n      }\n    "}static replacements={root:"./"};static addReplacement(t,e){this.replacements={...this.replacements,[t]:e}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);

package/dist/components/PersistantCollapsible.js

@@ -0,0 +1 @@
+import Collapsible from"./Collapsible.js";import{onEvent,offEvent}from"../utils/element.js";const updateFromStorage=Symbol("updateFromStorage"),storageChangeHandler=Symbol("storageChangeHandler"),changeHandler=Symbol("changeHandler");export default class PersistantCollapsible extends Collapsible{constructor(){super(),this[updateFromStorage]=()=>{this.opened="true"===localStorage.getItem(`PersistantCollapsible-${this.id}`)},this[storageChangeHandler]=e=>{e.key===`PersistantCollapsible-${this.id}`&&this[updateFromStorage]()},this[changeHandler]=()=>{this.id&&localStorage.setItem(`PersistantCollapsible-${this.id}`,this.opened)}}async render(e){return!!await super.render(e)&&(this[updateFromStorage](),onEvent(window,"storage",this[storageChangeHandler]),onEvent(this,"openedchanged",this[changeHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(window,"storage",this[storageChangeHandler]),offEvent(this,"openedchanged",this[changeHandler]),window.removeEventListener("storage",this[storageChangeHandler])}}window.customElements.define("k-p-collapsible",PersistantCollapsible);

package/dist/components/SideMenu.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import"./Icon.js";import"./FocusCapture.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default 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);
+import LazyComponent from"./LazyComponent.js";import"./Icon.js";import"./FocusCapture.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default 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 observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-side-menu",SideMenu);

package/dist/utils/element.js

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

package/docs/components/icon.html

@@ -7,14 +7,16 @@
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module">
+    import Import from '../kempo/components/Import.js';
     import Icon from '../kempo/components/Icon.js';
     import Search from '../kempo/components/Search.js';
+    Import.addReplacement('root', '../');
     Icon.pathToIcons = ['../icons'];
     Search.searchDataUrl = '../search.json';
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Icon</h1>
   <main>
     <details class="b r mb">

package/docs/kempo/components/Card.js

@@ -1 +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);
+import Component from"./Component.js";import{setProp}from"../utils/element.js";export default class Card extends Component{constructor(e=""){super(),this.registerAttribute("label",e)}attributeChangedCallback(e,r,n){"label"===e&&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 observedAttributes=[...super.observedAttributes,"label"]}window.customElements.define("k-card",Card);

package/docs/kempo/components/Collapsible.js

@@ -0,0 +1 @@
+import Component from".//Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol("clickHandler");export default class Collapsible extends Component{constructor(e=!1){super(),this[clickHandler]=()=>{this.toggle()},this.registerAttributes({opened:e})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&dispatchEvent(this,"openedchanged "+("true"===t?"open":"close"))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"openedtoggled")}get shadowTemplate(){return`\n      <div id="labelContainer">\n        <div id="label">\n          <slot name="label"></slot>\n        </div>\n        <div id="labelIcon">\n          <slot name="labelIcon">\n            <k-icon name="chevron-right"></k-icon>\n          </slot>\n        </div>\n      </div>\n      <div id="content">\n        ${super.shadowTemplate}\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #labelContainer {\n        display: flex;\n        cursor: pointer;\n      }\n      #label {\n        flex: 1 1 auto;\n      }\n      #labelIcon {\n        flex: 0 0 none;\n        opacity: 0.5;\n        transform: rotate(90deg);\n        transition: transform var(--animation_ms, 256ms);\n      }\n      #labelContainer:hover #labelIcon {\n        opacity: 1;\n      }\n      :host([opened="true"]) #labelIcon {\n        transform: rotate(-90deg);\n      }\n      :host(:not([opened="true"])) #content {\n        display: none;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-collapsible",Collapsible);

package/docs/kempo/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{try{const n=await fetch(t);200===n.status&&e(await n.text())}catch(t){}return n()}))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let c;for(let t=0;t<Icon.pathToIcons.length&&!c;t++)try{c=await e(Icon.pathToIcons[t])}catch(t){}c?t(c):n("Icon not found")}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{const s=(new AbortController).signal;try{const n=await fetch(t,{signal:s});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}})).catch((()=>null))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)try{s=await e(Icon.pathToIcons[t])}catch(t){}t(s||null)}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/docs/kempo/components/Import.js

@@ -1 +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);
+import Component from"./Component.js";export default class Import extends Component{constructor(t=""){super(),this.registerAttribute("src",t)}attributeChangedCallback(t,e,r){"src"===t&&e!==r&&this.render(!0)}async render(t){const e=this.src;if(e&&await super.render(t)){let t=await(await fetch(e)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);return this.innerHTML=t,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)})),!0}return!1}get shadowStyles(){return"\n      :host {\n        display: contents;\n      }\n    "}static replacements={root:"./"};static addReplacement(t,e){this.replacements={...this.replacements,[t]:e}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);

package/docs/kempo/components/PersistantCollapsible.js

@@ -0,0 +1 @@
+import Collapsible from"./Collapsible.js";import{onEvent,offEvent}from"../utils/element.js";const updateFromStorage=Symbol("updateFromStorage"),storageChangeHandler=Symbol("storageChangeHandler"),changeHandler=Symbol("changeHandler");export default class PersistantCollapsible extends Collapsible{constructor(){super(),this[updateFromStorage]=()=>{this.opened="true"===localStorage.getItem(`PersistantCollapsible-${this.id}`)},this[storageChangeHandler]=e=>{e.key===`PersistantCollapsible-${this.id}`&&this[updateFromStorage]()},this[changeHandler]=()=>{this.id&&localStorage.setItem(`PersistantCollapsible-${this.id}`,this.opened)}}async render(e){return!!await super.render(e)&&(this[updateFromStorage](),onEvent(window,"storage",this[storageChangeHandler]),onEvent(this,"openedchanged",this[changeHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(window,"storage",this[storageChangeHandler]),offEvent(this,"openedchanged",this[changeHandler]),window.removeEventListener("storage",this[storageChangeHandler])}}window.customElements.define("k-p-collapsible",PersistantCollapsible);

package/docs/kempo/components/SideMenu.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import"./Icon.js";import"./FocusCapture.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default 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);
+import LazyComponent from"./LazyComponent.js";import"./Icon.js";import"./FocusCapture.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default 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 observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-side-menu",SideMenu);

package/docs/kempo/utils/element.js

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

package/docs/nav.inc.html

@@ -7,7 +7,7 @@
   >
     <k-icon name="menu"></k-icon>
   </button>
-  <a href="./">Home</a>
+  <a href="%%root%%">Home</a>
   <k-search
     class="flex mr"
     style="min-width:10rem;max-width:24rem"
@@ -21,43 +21,43 @@
 >
   <h1>Kempo Docs</h1>
   <menu>
-    <a href="./" class="h5 pl0 mb">Home</a>
+    <a href="%%root%%" class="h5 pl0 mb">Home</a>
     <h5 class="mb0">Styles</h5>
     <div class="pl mb">
-      <a href="./styles/typography.html">Typography</a>
-      <a href="./styles/displays-layouts.html">Displays and Layouts</a>
-      <a href="./styles/borders-spacing.html">Borders and Spacing</a>
-      <a href="./styles/inputs.html">Inputs</a>
-      <a href="./styles/buttons.html">Buttons</a>
-      <a href="./styles/tables.html">Tables</a>
-      <a href="./styles/colors.html">Colors</a>
+      <a href="%%root%%styles/typography.html">Typography</a>
+      <a href="%%root%%styles/displays-layouts.html">Displays and Layouts</a>
+      <a href="%%root%%styles/borders-spacing.html">Borders and Spacing</a>
+      <a href="%%root%%styles/inputs.html">Inputs</a>
+      <a href="%%root%%styles/buttons.html">Buttons</a>
+      <a href="%%root%%styles/tables.html">Tables</a>
+      <a href="%%root%%styles/colors.html">Colors</a>
     </div>
     <h5 class="mb0">Components</h5>
     <div class="pl mb">
-      <a href="./components/component.html">Component</a>
-      <a href="./components/lazy-component.html">LazyComponent</a>
-      <a href="./components/reactivecomponent.html">ReactiveComponent</a>
-      <a href="./components/reactivelazy-component.html">ReactiveLazyComponent</a>
-      <a href="./components/focuscapture.html">FocusCapture</a>
+      <a href="%%root%%components/component.html">Component</a>
+      <a href="%%root%%components/lazy-component.html">LazyComponent</a>
+      <a href="%%root%%components/reactivecomponent.html">ReactiveComponent</a>
+      <a href="%%root%%components/reactivelazy-component.html">ReactiveLazyComponent</a>
+      <a href="%%root%%components/focuscapture.html">FocusCapture</a>
       <hr />
-      <a href="./components/accordion.html">Accordion</a>
-      <a href="./components/card.html">Card</a>
-      <a href="./components/content-slider.html">Content Slider</a>
-      <a href="./components/dialog.html">Dialog</a>
-      <a href="./components/directory-viewer.html">Directory Viewer</a>
-      <a href="./components/icon.html">Icon</a>
-      <a href="./components/import.html">Import</a>
-      <a href="./components/resize.html">Resize</a>
-      <a href="./components/search.html">Search</a>
-      <a href="./components/show-more.html">Show More</a>
-      <a href="./components/side-menu.html">Side Menu</a>
-      <a href="./components/split.html">Split</a>
-      <a href="./components/table.html">Table</a>
-      <a href="./components/tabs.html">Tabs</a>
-      <a href="./components/tags.html">Tags</a>
-      <a href="./components/theme-switcher.html">Theme Switcher</a>
-      <a href="./components/timestamp.html">Timestamp</a>
-      <a href="./components/toggle.html">Toggle</a>
+      <a href="%%root%%components/accordion.html">Accordion</a>
+      <a href="%%root%%components/card.html">Card</a>
+      <a href="%%root%%components/content-slider.html">Content Slider</a>
+      <a href="%%root%%components/dialog.html">Dialog</a>
+      <a href="%%root%%components/directory-viewer.html">Directory Viewer</a>
+      <a href="%%root%%components/icon.html">Icon</a>
+      <a href="%%root%%components/import.html">Import</a>
+      <a href="%%root%%components/resize.html">Resize</a>
+      <a href="%%root%%components/search.html">Search</a>
+      <a href="%%root%%components/show-more.html">Show More</a>
+      <a href="%%root%%components/side-menu.html">Side Menu</a>
+      <a href="%%root%%components/split.html">Split</a>
+      <a href="%%root%%components/table.html">Table</a>
+      <a href="%%root%%components/tabs.html">Tabs</a>
+      <a href="%%root%%components/tags.html">Tags</a>
+      <a href="%%root%%components/theme-switcher.html">Theme Switcher</a>
+      <a href="%%root%%components/timestamp.html">Timestamp</a>
+      <a href="%%root%%components/toggle.html">Toggle</a>
     </div>
 
     <h5 class="mb0">Utils</h5>
@@ -72,7 +72,7 @@
     document.getElementById('side-menu').open();
   });
 </script>
-<script src="./kempo/components/SideMenu.js" type="module"></script>
-<script src="./kempo/components/Icon.js" type="module"></script>
-<script src="./kempo/components/ThemeSwitcher.js" type="module"></script>
-<script src="./kempo/components/Search.js" type="module"></script>
+<script src="%%root%%kempo/components/SideMenu.js" type="module"></script>
+<script src="%%root%%kempo/components/Icon.js" type="module"></script>
+<script src="%%root%%kempo/components/ThemeSwitcher.js" type="module"></script>
+<script src="%%root%%kempo/components/Search.js" type="module"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.11.3",
+  "version": "2.12.1",
   "type": "module",
   "description": "A web component library",
   "exports": {

package/src/components/Card.js

@@ -57,9 +57,6 @@ export default class Card extends Component {
 
     `;
   }
-
-  static get renderOnAttributes(){
-    return ["label"];
-  }
+  static observedAttributes = [...super.observedAttributes, 'label'];
 }
 window.customElements.define('k-card', Card);

package/src/components/Collapsible.js

@@ -0,0 +1,104 @@
+import Component from './/Component.js';
+import './Icon.js';
+import { onEvent, offEvent, dispatchEvent } from '../utils/element.js';
+
+const clickHandler = Symbol('clickHandler');
+export default class Collapsible extends Component {
+  constructor(opened = false){
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = () => {
+      this.toggle();
+    }
+
+    /* Init */
+    this.registerAttributes({
+      opened
+    });
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force){
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('label'), 'click', this[clickHandler]);
+      return  true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('label'), 'click', this[clickHandler]);
+  }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'opened' && oV !== nV){
+      dispatchEvent(this, `openedchanged ${nV==='true'?'open':'close'}`);
+    }
+  }
+
+  /* Public Methods */
+  open(){
+    this.opened = true;
+  }
+  close(){
+    this.opened = false;
+  }
+  toggle(){
+    this.opened = !this.opened;
+    dispatchEvent(this, 'openedtoggled');
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="labelContainer">
+        <div id="label">
+          <slot name="label"></slot>
+        </div>
+        <div id="labelIcon">
+          <slot name="labelIcon">
+            <k-icon name="chevron-right"></k-icon>
+          </slot>
+        </div>
+      </div>
+      <div id="content">
+        ${super.shadowTemplate}
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+      }
+      #labelContainer {
+        display: flex;
+        cursor: pointer;
+      }
+      #label {
+        flex: 1 1 auto;
+      }
+      #labelIcon {
+        flex: 0 0 none;
+        opacity: 0.5;
+        transform: rotate(90deg);
+        transition: transform var(--animation_ms, 256ms);
+      }
+      #labelContainer:hover #labelIcon {
+        opacity: 1;
+      }
+      :host([opened="true"]) #labelIcon {
+        transform: rotate(-90deg);
+      }
+      :host(:not([opened="true"])) #content {
+        display: none;
+      }
+    `;
+  }
+
+  /* Static Attributes */
+  static observedAttributes = [...super.observedAttributes, 'opened'];
+}
+window.customElements.define('k-collapsible', Collapsible);

package/src/components/Icon.js

@@ -3,17 +3,27 @@ import Component from './Component.js';
 const cache = {};
 
 const getIconByPath = async (path) => {
-  if(!cache[path]){
-    cache[path] = new Promise(async (resolve, reject)=>{
+  if (!cache[path]) {
+    cache[path] = new Promise(async (resolve, reject) => {
+      const controller = new AbortController();
+      const signal = controller.signal;
       try {
-        const response = await fetch(path);
-        if(response.status === 200) resolve(await (response).text());
-      } catch(e){ }
-      return reject();
-    });
-  } 
+        const response = await fetch(path, { signal });
+        if (response.status === 200) {
+          resolve(await response.text());
+        } else if (response.status === 404) {
+          resolve(null);
+        }
+      } catch (e) {
+        if (e.name !== 'AbortError') {
+          reject(e);
+        }
+      }
+    }).catch(() => null);
+  }
   return await cache[path];
-}
+};
+
 const getIconByName = (name) => {
   const tryDir = async (dir) => getIconByPath(`${dir}/${name}.svg`);
 
@@ -27,7 +37,7 @@ const getIconByName = (name) => {
     if(svg){
       resolve(svg);
     } else {
-      reject('Icon not found');
+      resolve(null);
     }
   });
 }
@@ -103,7 +113,7 @@ export default class Icon extends Component {
     '/icons'
   ];
   static fallback = /*html*/`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>
   `;
 }
 window.customElements.define('k-icon', Icon);

package/src/components/Import.js

@@ -1,9 +1,9 @@
 import Component from './Component.js';
 
 export default class Import extends Component {
-  constructor(){
+  constructor(src = ''){
     super();
-    this.registerAttribute('src');
+    this.registerAttribute('src', src);
   }
   attributeChangedCallback(n, oV, nV){
     if(n === 'src' && oV !== nV){
@@ -13,7 +13,11 @@ export default class Import extends Component {
   async render(force){
     const src = this.src;
     if(src && await super.render(force)){
-      this.innerHTML = await (await fetch(src)).text();
+      let contents = await (await fetch(src)).text();
+      for (const [name, value] of Object.entries(Import.replacements)) {
+        contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
+      }
+      this.innerHTML = contents;
       this.querySelectorAll('script').forEach( $badScript => {
         const $goodScript = document.createElement('script');
         if($badScript.getAttribute('type')) $goodScript.type = $badScript.getAttribute('type');
@@ -21,20 +25,29 @@ export default class Import extends Component {
         if($badScript.textContent) $goodScript.textContent = $badScript.textContent;
         $badScript.parentElement.replaceChild($goodScript, $badScript);
       });
-      
+      return true;
     }
+    return false;
   }
 
   get shadowStyles(){
     return /*css*/`
       :host {
-        display: inline;
+        display: contents;
       }
     `;
   }
 
-  static get renderOnAttributes(){
-    retur ['src'];
+  /* Static Members */
+  static replacements = {
+    root: './' 
+  };
+  static addReplacement(name, value){
+    this.replacements = {
+      ...this.replacements,
+      [name]: value,
+    };
   }
+  static observedAttributes = [...super.observedAttributes, 'src'];
 }
 window.customElements.define('k-import', Import);

package/src/components/PersistantCollapsible.js

@@ -0,0 +1,44 @@
+import Collapsible from './Collapsible.js';
+import { onEvent, offEvent } from '../utils/element.js';
+
+const updateFromStorage = Symbol('updateFromStorage'),
+      storageChangeHandler = Symbol('storageChangeHandler'),
+      changeHandler = Symbol('changeHandler');
+export default class PersistantCollapsible extends Collapsible {
+  constructor(){
+    super();
+
+    /* Private Methods */
+    this[updateFromStorage] = () => {
+      this.opened = localStorage.getItem(`PersistantCollapsible-${this.id}`) === 'true';
+    }
+    this[storageChangeHandler] = (event) => {
+      if (event.key === `PersistantCollapsible-${this.id}`) {
+        this[updateFromStorage]();
+      }
+    }
+    this[changeHandler] = () => {
+      if(this.id){
+        localStorage.setItem(`PersistantCollapsible-${this.id}`, this.opened);
+      }
+    }
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force){
+    if(await super.render(force)){
+      this[updateFromStorage]();
+      onEvent(window, 'storage', this[storageChangeHandler]);
+      onEvent(this, 'openedchanged', this[changeHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(window, 'storage', this[storageChangeHandler]);
+    offEvent(this, 'openedchanged', this[changeHandler]);
+    window.removeEventListener('storage', this[storageChangeHandler]);
+  }
+}
+window.customElements.define('k-p-collapsible', PersistantCollapsible);

package/src/components/SideMenu.js

@@ -145,12 +145,6 @@ export default class SideMenu extends LazyComponent {
       }
     `;
   }
-
-  static get observedAttributes(){
-    return [
-      'opened',
-      ...super.observedAttributes
-    ]
-  }
+  static observedAttributes = [...super.observedAttributes, 'opened'];
 }
 window.customElements.define('k-side-menu', SideMenu);

package/src/utils/element.js

@@ -31,9 +31,9 @@ export const dispatchEvent = (element, events, detail, {
       element.dispatchEvent(new CustomEvent(event, { bubbles, detail } ));
     });
   } else if(element instanceof NodeList || element instanceof Array){
-    element.forEach( el => dispatchEvent(el, events, handler));
+    element.forEach( el => dispatchEvent(el, events, detail, { scope, bubbles }));
   } else if(typeof(element) == 'string'){
-    scope.querySelectorAll(element).forEach( el => dispatchEvent(el, events, handler));
+    scope.querySelectorAll(element).forEach( el => dispatchEvent(el, events, detail, { scope, bubbles }));
   }
 }
 export const isInView = async (element) => {