kempo 2.15.2 → 3.1.0

package/dist/components/Import.js

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

package/dist/components/PhotoViewer.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const openHandler=Symbol(),closeHandler=Symbol(),overlayHandler=Symbol(),prevHandler=Symbol(),nextHandler=Symbol(),keyboardHandler=Symbol(),imgKeyboardHandler=Symbol();export default class PhotoViewer extends Component{constructor(e="",n="",t={}){super();const{keyboardControls:o=!0,global:s=!1}=t;this.registerAttributes({src:e,alt:n,fullscreen:!1,keyboardControls:o,global:s})}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),this.rendered&&"src"===e&&n!==t?(this.shadowRoot.getElementById("img").src=t,this.shadowRoot.getElementById("fullscreen-img").src=t):this.rendered&&"alt"===e&&n!==t?(this.shadowRoot.getElementById("img").alt=t,this.shadowRoot.getElementById("fullscreen-img").alt=t):this.rendered&&"fullscreen"===e&&n!==t&&(dispatchEvent(this,"fullscreenchange "+(t?" fullscreen":" fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(t?document.addEventListener("keydown",this[keyboardHandler]):document.removeEventListener("keydown",this[keyboardHandler])))}async render(e){if(await super.render(e)){const e=this.shadowRoot.getElementById("img");e.src=this.src,e.alt=this.alt;const n=this.shadowRoot.getElementById("fullscreen-img");n.src=this.src,n.alt=this.alt;const t=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(t&&!t.assignedNodes().length){this.shadowRoot.querySelector("slot:not([name])").assignedNodes().forEach((e=>{const n=e.cloneNode(!0);this.appendChild(n).slot="fullscreen-caption"}))}return onEvent(e,"click",this[openHandler]),onEvent(e,"keydown",this[imgKeyboardHandler]),onEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),onEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.updateNavigationState(),!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("img"),"click",this[openHandler]),offEvent(this.shadowRoot.getElementById("img"),"keydown",this[imgKeyboardHandler]),offEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),offEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.keyboardControls&&document.removeEventListener("keydown",this[keyboardHandler])}[imgKeyboardHandler]=e=>{"Enter"!==e.key||this.fullscreen||this.open()};[openHandler]=()=>{this.open()};[closeHandler]=()=>{this.close()};[overlayHandler]=e=>{e.target===e.currentTarget&&this.close()};[prevHandler]=e=>{e.stopPropagation();const n=this.getPrevSibling();n&&(this.close(),n.open())};[nextHandler]=e=>{e.stopPropagation();const n=this.getNextSibling();n&&(this.close(),n.open())};[keyboardHandler]=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[0===n?e.length-1:n-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[n===e.length-1?0:n+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter((e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName)).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach((n=>n.classList.toggle("d-n",!e)))}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}get shadowTemplate(){return'\n      <div id="wrapper">\n        <img id="img" tabindex="0" />\n        <div class="caption">\n          <slot></slot>\n        </div>\n        <div id="fullscreen-overlay">\n          <button id="close" class="no-btn">\n            <slot name="close">\n              <k-icon name="close"></k-icon>\n            </slot>\n          </button>\n          <button id="prev" class="nav-btn no-btn">\n            <slot name="prev">\n              <k-icon name="chevron-left"></k-icon>\n            </slot>\n          </button>\n          <button id="next" class="nav-btn no-btn">\n            <slot name="next">\n              <k-icon name="chevron-right"></k-icon>\n            </slot>\n          </button>\n          <div class="content">\n            <img id="fullscreen-img" />\n            <div class="caption">\n              <slot name="fullscreen-caption"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #wrapper {\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      #img {\n        max-width: 100%;\n        height: auto;\n        cursor: pointer;\n        outline: none;\n        border-radius: var(--img_radius, 0);\n      }\n      #img:focus {\n        box-shadow: var(--focus_shadow);\n      }\n      #fullscreen-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 9999;\n        background: rgba(0,0,0,0.9);\n        padding: 2rem;\n        display: none;\n      }\n      :host([fullscreen]) #fullscreen-overlay {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .content {\n        position: relative;\n        max-width: 100%;\n        max-height: 90vh;\n      }\n      #fullscreen-img {\n        max-height: 75vh;\n        max-width: 100%;\n        object-fit: contain;\n        cursor: default;\n      }\n      #close {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n      }\n      .nav-btn {\n        position: fixed;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 1rem;\n        opacity: 0.7;\n        font-size: 3rem;\n        -webkit-text-stroke: 1px black;\n        text-stroke: 1px black;\n        text-shadow: 0 0 3px rgba(0,0,0,0.8);\n      }\n      .nav-btn::slotted(*),\n      .nav-btn k-icon {\n        filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));\n      }\n      .nav-btn:hover {\n        opacity: 1;\n      }\n      #prev {\n        left: 1rem;\n      }\n      #next {\n        right: 1rem;\n      }\n      .caption {\n        text-align: center;\n        max-width: 600px;\n        width: fit-content;\n        margin: 1rem auto 0;\n      }\n      #fullscreen-overlay .caption {\n        color: white;\n      }\n      :host([fullscreen]) .caption {\n        color: white;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"src","alt","fullscreen","keyboard-controls","global"]}window.customElements.define("k-photo-viewer",PhotoViewer);

package/dist/kempo-vars.css

@@ -1 +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_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--c_input_border:var(--c_border);--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}: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)}[auto-theme="dark"]:not([theme="light"]),[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:var(--c_bg__alt);--input_tc:var(--tc);--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;--date_picker_icon_filter:invert(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_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--c_input_border:var(--c_border);--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}:root,[theme="light"]{color-scheme:light;--c_bg:rgb(249, 249, 249);--c_bg__inv:rgb(51, 51, 51);--c_bg__alt:rgb(238, 238, 238);--c_overscroll:rgb(255, 255, 255);--c_border:rgb(204, 204, 204);--c_border__inv:var(--d_c_bg_border);--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--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:rgb(221, 221, 221);--btn_bg__hover:rgb(204, 204, 204);--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)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:rgb(51, 51, 51);--c_bg__inv:rgb(249, 249, 249);--c_bg__alt:rgb(34, 34, 34);--c_overscroll:rgb(0, 0, 0);--c_border:rgb(119, 119, 119);--c_border__inv:rgb(204, 204, 204);--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--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:rgb(138, 180, 248);--tc_secondary:rgb(187, 102, 255);--tc_success:rgb(102, 187, 102);--tc_warning:rgb(255, 153, 51);--tc_danger:rgb(255, 85, 119);--btn_bg:rgb(170, 170, 170);--btn_bg__hover:rgb(187, 187, 187);--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:var(--c_bg__alt);--input_tc:var(--tc);--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;--date_picker_icon_filter:invert(1)}

package/docs/components/_template.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">Template</h1>
   <main>
     <details

package/docs/components/accordion.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">Accordion</h1>
   <main>
     <details

package/docs/components/card.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">Card</h1>
   <main>
     <details class="b r mb">

package/docs/components/component.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">Component</h1>
   <main>
     <details

package/docs/components/content-slider.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">Content Slider</h1>
   <main>
     <details

package/docs/components/dialog.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>
   <main>
     <h1 class="ta-center">Dialog</h1>
 

package/docs/components/directory-viewer.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">Directory Viewer</h1>
   <main>
     <details class="b r mb">

package/docs/components/focus-capture.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">FocusCapture</h1>
   <main>
     <details class="b r mb">

package/docs/components/import.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">Import</h1>
   <main>
     <details class="b r mb">

package/docs/components/lazy-component.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">LazyComponent</h1>
   <main>
     <details class="b r mb">

package/docs/components/reactive-component.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">ReactiveComponent</h1>
   <main>
     <details class="b r mb">

package/docs/components/reactive-lazy-component.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">ReactiveLazyComponent</h1>
   <main>
     <details class="b r mb">

package/docs/components/resize.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">Resize</h1>
   <main>
     <details class="b r mb">

package/docs/components/search.html

@@ -8,14 +8,16 @@
   <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">Search</h1>
   <main>
     <details class="b r mb">

package/docs/components/show-more.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>
   <main>
     <h1 class="ta-center">Show More</h1>
     <details class="b r mb">

package/docs/components/side-menu.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">SideMenu</h1>
   <main>
     <details class="b r mb">

package/docs/components/sortable.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">Sortable</h1>
   <main>
     <details

package/docs/components/split.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">Split</h1>
   <main>
     <details class="b r mb">

package/docs/components/table.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -54,7 +56,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table</h1>
   <main>
     <details

package/docs/components/tableControls.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Top and Bottom Controls</h1>
   <main>
 

package/docs/components/tableCustomFields.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Custom Fields</h1>
   <main>
 

package/docs/components/tableFetchRecords.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Fetch Records</h1>
   <main>
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>

package/docs/components/tableFieldSortHide.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Field Sort and Hide</h1>
   <main>
 

package/docs/components/tablePagination.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Pagination</h1>
   <main>
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>

package/docs/components/tableRecordEditing.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Editing</h1>
   <main>
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>

package/docs/components/tableRecordFiltering.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Filerting</h1>
   <main>
 

package/docs/components/tableRecordHiding.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Hiding</h1>
   <main>
 

package/docs/components/tableRecordSearching.html

@@ -9,8 +9,10 @@
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <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>
@@ -53,7 +55,7 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
+  <k-import src="../nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Searching</h1>
   <main>