kempo 2.15.1 → 3.0.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 n=Array.from(r.content.querySelectorAll("script[src]"));n.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of n){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),console.log("Adding script with src:",t.src),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return"\n      :host {\n        display: contents;\n      }\n    "}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/Tabs.js

@@ -1 +1 @@
-import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n      <button id="button">\n        ${super.shadowTemplate}\n      </button>\n    `}get shadowStyles(){return"\n      :host {\n        margin-bottom: -1px;\n      }\n      #button {\n        padding: var(--spacer_h);\n        background-color: transparent;\n        border: none;\n        cursor: inherit;\n        box-shadow: none;\n        color: inherit;\n      }\n      :host(:not([active])) #button {\n        cursor: pointer;\n      }\n      :host([active]){\n        border-bottom: 2px solid var(--c_primary);\n        margin-bottom: -1px;\n      }\n      :host([active]) #button {\n        color: var(--tc_primary);\n      }\n    "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        height: 100%;\n        max-height: 100%;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      :host([active]) {\n        display: block;\n      }\n      :host(:not([active])) {\n        display: none;\n      }\n    `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`);const t=this.shadowRoot.getElementById("tabs");t.addEventListener("scroll",this.updateScrollIndicators.bind(this)),this.updateScrollIndicators(),new ResizeObserver((()=>this.updateScrollIndicators())).observe(t)}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),n=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,o=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),n.classList.toggle("visible",o)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="tabs-container">\n          <div id="scroll-left" class="scroll-indicator"></div>\n          <div id="tabs">\n            <slot name="tabs"></slot>\n          </div>\n          <div id="scroll-right" class="scroll-indicator"></div>\n        </div>\n        <div id="contents">\n          ${super.shadowTemplate}\n        </div>\n      </div>\n      \n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        overflow: hidden;\n      }\n      #wrapper {\n        display: flex;\n        flex-direction: column;\n        max-height: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      #tabs-container {\n        position: relative;\n        display: flex;\n        border-bottom: 1px solid var(--c_border);\n      }\n      #tabs {\n        display: flex;\n        padding: 0;\n        margin-top: calc(0 - var(--spacer));\n        align-items: stretch;\n        overflow-x: auto;\n        overflow-y: hidden;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        flex: 1;\n      }\n      #tabs::-webkit-scrollbar {\n        display: none;\n      }\n      #tabs ::slotted(*) {\n        display: flex;\n        align-items: center;\n      }\n      .scroll-indicator {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 32px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 0.2s;\n        z-index: 1;\n      }\n      .scroll-indicator.visible {\n        opacity: 1;\n      }\n      #scroll-left {\n        left: 0;\n        background: linear-gradient(to right, var(--c_bg, white) 0%, transparent 100%);\n      }\n      #scroll-right {\n        right: 0;\n        background: linear-gradient(to left, var(--c_bg, white) 0%, transparent 100%);\n      }\n      #contents {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        max-height: 100%;\n        overflow: hidden;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"active"]}window.customElements.define("k-tabs",Tabs);export class TabSpacer extends Component{constructor(){super(),this.slot="tabs"}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        flex: 1 1 auto;\n        height: 1px;\n      }\n    `}}window.customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};
+import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n      <button id="button">\n        ${super.shadowTemplate}\n      </button>\n    `}get shadowStyles(){return"\n      :host {\n        margin-bottom: -1px;\n        flex: 0 0 auto;  /* Important: prevent shrinking and growing */\n      }\n      #button {\n        padding: var(--spacer_h);\n        background-color: transparent;\n        border: none;\n        cursor: inherit;\n        box-shadow: none;\n        color: inherit;\n        white-space: nowrap;  /* Prevent text wrapping */\n      }\n      :host(:not([active])) #button {\n        cursor: pointer;\n      }\n      :host([active]){\n        border-bottom: 2px solid var(--c_primary);\n        margin-bottom: -1px;\n      }\n      :host([active]) #button {\n        color: var(--tc_primary);\n      }\n    "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        height: 100%;\n        max-height: 100%;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      :host([active]) {\n        display: block;\n      }\n      :host(:not([active])) {\n        display: none;\n      }\n    `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`);const t=this.shadowRoot.getElementById("tabs");t.addEventListener("scroll",this.updateScrollIndicators.bind(this)),this.updateScrollIndicators(),new ResizeObserver((()=>this.updateScrollIndicators())).observe(t);const e=this.shadowRoot.getElementById("scroll-left"),n=this.shadowRoot.getElementById("scroll-right");e.addEventListener("click",(()=>{t.scrollBy({left:-200,behavior:"smooth"})})),n.addEventListener("click",(()=>{t.scrollBy({left:200,behavior:"smooth"})}))}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),n=this.shadowRoot.getElementById("scroll-right"),o=t.scrollLeft>0,s=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",o),n.classList.toggle("visible",s)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const o=this.getTab(n);o&&(o.active=!0);const s=this.getContent(n);s&&(s.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="tabs-container">\n          <div id="scroll-left" class="scroll-indicator">\n            <svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">\n              <path d="M12 15L7 10L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>\n            </svg>\n          </div>\n          <div id="tabs">\n            <slot name="tabs"></slot>\n          </div>\n          <div id="scroll-right" class="scroll-indicator">\n            <svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">\n              <path d="M8 15L13 10L8 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>\n            </svg>\n          </div>\n        </div>\n        <div id="contents">\n          ${super.shadowTemplate}\n        </div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      #wrapper {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        min-width: 0;\n      }\n      #tabs-container {\n        position: relative;\n        border-bottom: 1px solid var(--c_border);\n      }\n      #tabs {\n        display: flex;\n        overflow-x: auto;\n        overflow-y: hidden;\n      }\n      #tabs ::slotted(*) {\n        flex: 0 0 auto;\n      }\n      .scroll-indicator {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 72px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 0.2s;\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        padding-bottom: 2px;\n      }\n      .scroll-indicator .arrow {\n        color: var(--tc_base);\n        z-index: 1;\n      }\n      .scroll-indicator.visible {\n        opacity: 1;\n      }\n      #scroll-left {\n        left: 0;\n        background: linear-gradient(90deg, \n          var(--c_bg) 0%,\n          var(--c_bg) 30%,\n          transparent 100%\n        );\n      }\n      #scroll-right {\n        right: 0;\n        justify-content: flex-end;\n        background: linear-gradient(-90deg, \n          var(--c_bg) 0%,\n          var(--c_bg) 30%,\n          transparent 100%\n        );\n      }\n    `}static observedAttributes=[...super.observedAttributes,"active"]}window.customElements.define("k-tabs",Tabs);export class TabSpacer extends Component{constructor(){super(),this.slot="tabs"}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        flex: 1 1 auto;\n        height: 1px;\n      }\n    `}}window.customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};

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>
 

package/docs/components/tableRecordSelection.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 Selection</h1>
   <main>
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>