kempo 2.15.2 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/components/Import.js +1 -1
  2. package/dist/components/PhotoViewer.js +1 -0
  3. package/dist/kempo-vars.css +1 -1
  4. package/docs/components/_template.html +3 -1
  5. package/docs/components/accordion.html +3 -1
  6. package/docs/components/card.html +3 -1
  7. package/docs/components/component.html +3 -1
  8. package/docs/components/content-slider.html +3 -1
  9. package/docs/components/dialog.html +3 -1
  10. package/docs/components/directory-viewer.html +3 -1
  11. package/docs/components/focus-capture.html +3 -1
  12. package/docs/components/import.html +3 -1
  13. package/docs/components/lazy-component.html +3 -1
  14. package/docs/components/reactive-component.html +3 -1
  15. package/docs/components/reactive-lazy-component.html +3 -1
  16. package/docs/components/resize.html +3 -1
  17. package/docs/components/search.html +3 -1
  18. package/docs/components/show-more.html +3 -1
  19. package/docs/components/side-menu.html +3 -1
  20. package/docs/components/sortable.html +3 -1
  21. package/docs/components/split.html +3 -1
  22. package/docs/components/table.html +3 -1
  23. package/docs/components/tableControls.html +3 -1
  24. package/docs/components/tableCustomFields.html +3 -1
  25. package/docs/components/tableFetchRecords.html +3 -1
  26. package/docs/components/tableFieldSortHide.html +3 -1
  27. package/docs/components/tablePagination.html +3 -1
  28. package/docs/components/tableRecordEditing.html +3 -1
  29. package/docs/components/tableRecordFiltering.html +3 -1
  30. package/docs/components/tableRecordHiding.html +3 -1
  31. package/docs/components/tableRecordSearching.html +3 -1
  32. package/docs/components/tableRecordSelection.html +3 -1
  33. package/docs/components/tableRowControls.html +3 -1
  34. package/docs/components/tableSorting.html +3 -1
  35. package/docs/components/tabs.html +3 -1
  36. package/docs/components/tags.html +3 -1
  37. package/docs/components/theme-switcher.html +3 -1
  38. package/docs/components/timestamp.html +3 -1
  39. package/docs/components/toggle.html +3 -1
  40. package/docs/js/nav.inc.js +4 -0
  41. package/docs/kempo/components/Import.js +1 -1
  42. package/docs/kempo/components/PhotoViewer.js +1 -0
  43. package/docs/kempo/kempo-vars.css +1 -1
  44. package/docs/nav.inc.html +1 -6
  45. package/docs/styles/_template.html +3 -1
  46. package/docs/styles/borders-spacing.html +3 -1
  47. package/docs/styles/buttons.html +3 -1
  48. package/docs/styles/colors.html +3 -1
  49. package/docs/styles/displays-layouts.html +3 -1
  50. package/docs/styles/embed-1.html +2 -0
  51. package/docs/styles/inputs.html +3 -1
  52. package/docs/styles/tables.html +3 -1
  53. package/docs/styles/typography.html +3 -1
  54. package/docs/utils/_template.html +3 -1
  55. package/docs/utils/cli.html +3 -1
  56. package/docs/utils/cookie.html +3 -1
  57. package/docs/utils/debounce.html +3 -1
  58. package/docs/utils/drag.html +3 -1
  59. package/docs/utils/element.html +3 -1
  60. package/docs/utils/format-timestamp.html +3 -1
  61. package/docs/utils/fuzzy-match.html +1 -1
  62. package/package.json +1 -1
  63. package/src/components/Import.js +19 -24
  64. package/src/components/PhotoViewer.js +358 -0
  65. package/src/kempo-vars.css +42 -42
  66. package/docs/nav-1.inc.html +0 -84
package/docs/components/tableRecordSelection.html CHANGED
@@ -9,8 +9,10 @@
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module" src="../kempo/components/Table.js"></script>
11
11
  <script type="module">
12
+ import Import from '../kempo/components/Import.js';
12
13
  import Icon from '../kempo/components/Icon.js';
13
14
  import Search from '../kempo/components/Search.js';
15
+ Import.addReplacement('root', '../');
14
16
  Icon.pathToIcons = ['../icons'];
15
17
  Search.searchDataUrl = '../search.json';
16
18
  </script>
@@ -53,7 +55,7 @@
53
55
  </script>
54
56
  </head>
55
57
  <body>
56
- <k-import src="../nav-1.inc.html"></k-import>
58
+ <k-import src="../nav.inc.html"></k-import>
57
59
  <h1 class="ta-center">Table - Record Selection</h1>
58
60
  <main>
59
61
  <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
package/docs/components/tableRowControls.html CHANGED
@@ -9,8 +9,10 @@
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module" src="../kempo/components/Table.js"></script>
11
11
  <script type="module">
12
+ import Import from '../kempo/components/Import.js';
12
13
  import Icon from '../kempo/components/Icon.js';
13
14
  import Search from '../kempo/components/Search.js';
15
+ Import.addReplacement('root', '../');
14
16
  Icon.pathToIcons = ['../icons'];
15
17
  Search.searchDataUrl = '../search.json';
16
18
  </script>
@@ -53,7 +55,7 @@
53
55
  </script>
54
56
  </head>
55
57
  <body>
56
- <k-import src="../nav-1.inc.html"></k-import>
58
+ <k-import src="../nav.inc.html"></k-import>
57
59
  <h1 class="ta-center">Table - Row Controls</h1>
58
60
  <main>
59
61
 
package/docs/components/tableSorting.html CHANGED
@@ -9,8 +9,10 @@
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module" src="../kempo/components/Table.js"></script>
11
11
  <script type="module">
12
+ import Import from '../kempo/components/Import.js';
12
13
  import Icon from '../kempo/components/Icon.js';
13
14
  import Search from '../kempo/components/Search.js';
15
+ Import.addReplacement('root', '../');
14
16
  Icon.pathToIcons = ['../icons'];
15
17
  Search.searchDataUrl = '../search.json';
16
18
  </script>
@@ -53,7 +55,7 @@
53
55
  </script>
54
56
  </head>
55
57
  <body>
56
- <k-import src="../nav-1.inc.html"></k-import>
58
+ <k-import src="../nav.inc.html"></k-import>
57
59
  <h1 class="ta-center">Table - Sorting</h1>
58
60
  <main>
59
61
 
package/docs/components/tabs.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Tabs</h1>
19
21
  <main>
20
22
  <details class="b r mb">
package/docs/components/tags.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Tags</h1>
19
21
  <main>
20
22
  <details class="b r mb">
package/docs/components/theme-switcher.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">ThemeSwitcher</h1>
19
21
  <main>
20
22
  <details class="b r mb">
package/docs/components/timestamp.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Timestamp</h1>
19
21
  <main>
20
22
  <details class="b r mb">
package/docs/components/toggle.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Toggle</h1>
19
21
  <main>
20
22
  <details class="b r mb">
package/docs/js/nav.inc.js ADDED
@@ -0,0 +1,4 @@
1
+ document.getElementById('open-side-menu').addEventListener('click', async () => {
2
+ await window.customElements.whenDefined('k-side-menu');
3
+ document.getElementById('side-menu').open();
4
+ })
package/docs/kempo/components/Import.js CHANGED
@@ -1 +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);
1
+ 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/docs/kempo/components/PhotoViewer.js ADDED
@@ -0,0 +1 @@
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/docs/kempo/kempo-vars.css CHANGED
@@ -1 +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)}
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/nav.inc.html CHANGED
@@ -66,12 +66,7 @@
66
66
  </div>
67
67
  </menu>
68
68
  </k-side-menu>
69
- <script>
70
- document.getElementById('open-side-menu').addEventListener('click', async () => {
71
- await window.customElements.whenDefined('k-side-menu');
72
- document.getElementById('side-menu').open();
73
- });
74
- </script>
69
+ <script src="%%root%%js/nav.inc.js" type="module"></script>
75
70
  <script src="%%root%%kempo/components/SideMenu.js" type="module"></script>
76
71
  <script src="%%root%%kempo/components/Icon.js" type="module"></script>
77
72
  <script src="%%root%%kempo/components/ThemeSwitcher.js" type="module"></script>
package/docs/styles/_template.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Template</h1>
19
21
  <main>
20
22
 
package/docs/styles/borders-spacing.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Borders and Spacing</h1>
19
21
  <main style="margin-bottom: 33vh">
20
22
  <h3>Borders</h3>
package/docs/styles/buttons.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Buttons</h1>
19
21
  <main>
20
22
  <h3>What is a button?</h3>
package/docs/styles/colors.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Colors</h1>
19
21
  <main>
20
22
  <h3>Background</h3>
package/docs/styles/displays-layouts.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Displays and Layouts</h1>
19
21
  <main style="margin-bottom: 33vh">
20
22
  <h3>Display</h3>
package/docs/styles/embed-1.html CHANGED
@@ -6,8 +6,10 @@
6
6
  <title>Template - Components - Kempo Docs - A Web Components Solution</title>
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <script type="module">
9
+ import Import from '../kempo/components/Import.js';
9
10
  import Icon from '../kempo/components/Icon.js';
10
11
  import Search from '../kempo/components/Search.js';
12
+ Import.addReplacement('root', '../');
11
13
  Icon.pathToIcons = ['../icons'];
12
14
  Search.searchDataUrl = '../search.json';
13
15
  </script>
package/docs/styles/inputs.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Inputs</h1>
19
21
  <main>
20
22
  <h3>Inputs</h3>
package/docs/styles/tables.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Table</h1>
19
21
  <main>
20
22
  <div class="row -mx mb">
package/docs/styles/typography.html CHANGED
@@ -6,14 +6,16 @@
6
6
  <title>Typography - Kempo - A Web Components Solution</title>
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <script type="module">
9
+ import Import from '../kempo/components/Import.js';
9
10
  import Icon from '../kempo/components/Icon.js';
10
11
  import Search from '../kempo/components/Search.js';
12
+ Import.addReplacement('root', '../');
11
13
  Icon.pathToIcons = ['../icons'];
12
14
  Search.searchDataUrl = '../search.json';
13
15
  </script>
14
16
  </head>
15
17
  <body>
16
- <k-import src="../nav-1.inc.html"></k-import>
18
+ <k-import src="../nav.inc.html"></k-import>
17
19
  <h1 class="ta-center">Typography</h1>
18
20
  <main style="margin-bottom: 33vh">
19
21
  <h3>Paragraphs</h3>
package/docs/utils/_template.html CHANGED
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Template</h1>
19
21
  <main>
20
22
  <details
package/docs/utils/cli.html CHANGED
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">CLI</h1>
20
22
  <main>
21
23
  <details class="b r mb">
package/docs/utils/cookie.html CHANGED
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Cookie</h1>
20
22
  <main>
21
23
  <details class="b r mb">
package/docs/utils/debounce.html CHANGED
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Debounce</h1>
20
22
  <main>
21
23
  <details class="b r mb">
package/docs/utils/drag.html CHANGED
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Drag</h1>
20
22
  <main>
21
23
  <details class="b r mb">
package/docs/utils/element.html CHANGED
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Element</h1>
20
22
  <main>
21
23
  <details class="b r mb">
package/docs/utils/format-timestamp.html CHANGED
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">formatTimestamp</h1>
20
22
  <main>
21
23
  <details class="b r mb">
package/docs/utils/fuzzy-match.html CHANGED
@@ -13,7 +13,7 @@
13
13
  </script>
14
14
  </head>
15
15
  <body>
16
- <k-import src="../nav-1.inc.html"></k-import>
16
+ <k-import src="../nav.inc.html"></k-import>
17
17
  <h1 class="ta-center">Fuzzy Match Utility Documentation</h1>
18
18
  <main>
19
19
  <details class="b r mb">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo",
3
- "version": "2.15.2",
3
+ "version": "3.1.0",
4
4
  "type": "module",
5
5
  "description": "A web component library",
6
6
  "exports": {
package/src/components/Import.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import Component from './Component.js';
2
-
3
2
  export default class Import extends Component {
4
3
  constructor(src = ''){
5
4
  super();
@@ -17,36 +16,32 @@ export default class Import extends Component {
17
16
  for (const [name, value] of Object.entries(Import.replacements)) {
18
17
  contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
19
18
  }
20
- this.innerHTML = contents;
21
- this.querySelectorAll('script').forEach( $badScript => {
22
- const $goodScript = document.createElement('script');
23
- if($badScript.getAttribute('type')) $goodScript.type = $badScript.getAttribute('type');
24
- if($badScript.getAttribute('src')) $goodScript.src = $badScript.getAttribute('src');
25
- if($badScript.textContent) $goodScript.textContent = $badScript.textContent;
26
- $badScript.parentElement.replaceChild($goodScript, $badScript);
27
- });
19
+ const temp = document.createElement('template');
20
+ temp.innerHTML = contents;
21
+ const scripts = Array.from(temp.content.querySelectorAll('script[src]'));
22
+ scripts.forEach(script => script.remove());
23
+ this.innerHTML = temp.innerHTML;
24
+ for (const script of scripts) {
25
+ const newScript = document.createElement('script');
26
+ Array.from(script.attributes).forEach(attr => {
27
+ newScript.setAttribute(attr.name, attr.value);
28
+ });
29
+ await new Promise((resolve, reject) => {
30
+ newScript.onload = resolve;
31
+ newScript.onerror = reject;
32
+ this.appendChild(newScript);
33
+ });
34
+ }
28
35
  return true;
29
36
  }
30
37
  return false;
31
38
  }
32
-
33
39
  get shadowStyles(){
34
- return /*css*/`
35
- :host {
36
- display: contents;
37
- }
38
- `;
40
+ return /*css*/`:host{display:contents;}`;
39
41
  }
40
-
41
- /* Static Members */
42
- static replacements = {
43
- root: './'
44
- };
42
+ static replacements = {root: './'};
45
43
  static addReplacement(name, value){
46
- this.replacements = {
47
- ...this.replacements,
48
- [name]: value,
49
- };
44
+ this.replacements = {...this.replacements,[name]: value};
50
45
  }
51
46
  static observedAttributes = [...super.observedAttributes, 'src'];
52
47
  }