kempo 2.15.1 → 3.0.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 (62) hide show
  1. package/dist/components/Import.js +1 -1
  2. package/dist/components/Tabs.js +1 -1
  3. package/docs/components/_template.html +3 -1
  4. package/docs/components/accordion.html +3 -1
  5. package/docs/components/card.html +3 -1
  6. package/docs/components/component.html +3 -1
  7. package/docs/components/content-slider.html +3 -1
  8. package/docs/components/dialog.html +3 -1
  9. package/docs/components/directory-viewer.html +3 -1
  10. package/docs/components/focus-capture.html +3 -1
  11. package/docs/components/import.html +3 -1
  12. package/docs/components/lazy-component.html +3 -1
  13. package/docs/components/reactive-component.html +3 -1
  14. package/docs/components/reactive-lazy-component.html +3 -1
  15. package/docs/components/resize.html +3 -1
  16. package/docs/components/search.html +3 -1
  17. package/docs/components/show-more.html +3 -1
  18. package/docs/components/side-menu.html +3 -1
  19. package/docs/components/sortable.html +3 -1
  20. package/docs/components/split.html +3 -1
  21. package/docs/components/table.html +3 -1
  22. package/docs/components/tableControls.html +3 -1
  23. package/docs/components/tableCustomFields.html +3 -1
  24. package/docs/components/tableFetchRecords.html +3 -1
  25. package/docs/components/tableFieldSortHide.html +3 -1
  26. package/docs/components/tablePagination.html +3 -1
  27. package/docs/components/tableRecordEditing.html +3 -1
  28. package/docs/components/tableRecordFiltering.html +3 -1
  29. package/docs/components/tableRecordHiding.html +3 -1
  30. package/docs/components/tableRecordSearching.html +3 -1
  31. package/docs/components/tableRecordSelection.html +3 -1
  32. package/docs/components/tableRowControls.html +3 -1
  33. package/docs/components/tableSorting.html +3 -1
  34. package/docs/components/tabs.html +3 -1
  35. package/docs/components/tags.html +3 -1
  36. package/docs/components/theme-switcher.html +3 -1
  37. package/docs/components/timestamp.html +3 -1
  38. package/docs/components/toggle.html +3 -1
  39. package/docs/js/nav.inc.js +4 -0
  40. package/docs/kempo/components/Import.js +1 -1
  41. package/docs/kempo/components/Tabs.js +1 -1
  42. package/docs/nav.inc.html +1 -6
  43. package/docs/styles/_template.html +3 -1
  44. package/docs/styles/borders-spacing.html +3 -1
  45. package/docs/styles/buttons.html +3 -1
  46. package/docs/styles/colors.html +3 -1
  47. package/docs/styles/displays-layouts.html +3 -1
  48. package/docs/styles/embed-1.html +2 -0
  49. package/docs/styles/inputs.html +3 -1
  50. package/docs/styles/tables.html +3 -1
  51. package/docs/styles/typography.html +3 -1
  52. package/docs/utils/_template.html +3 -1
  53. package/docs/utils/cli.html +3 -1
  54. package/docs/utils/cookie.html +3 -1
  55. package/docs/utils/debounce.html +3 -1
  56. package/docs/utils/drag.html +3 -1
  57. package/docs/utils/element.html +3 -1
  58. package/docs/utils/format-timestamp.html +3 -1
  59. package/docs/utils/fuzzy-match.html +1 -1
  60. package/package.json +1 -1
  61. package/src/components/Import.js +27 -8
  62. package/docs/nav-1.inc.html +0 -84
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 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/docs/kempo/components/Tabs.js CHANGED
@@ -1 +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};
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 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/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.1",
3
+ "version": "3.0.0",
4
4
  "type": "module",
5
5
  "description": "A web component library",
6
6
  "exports": {
package/src/components/Import.js CHANGED
@@ -13,18 +13,37 @@ export default class Import extends Component {
13
13
  async render(force){
14
14
  const src = this.src;
15
15
  if(src && await super.render(force)){
16
+ // Get raw text and process replacements first
16
17
  let contents = await (await fetch(src)).text();
17
18
  for (const [name, value] of Object.entries(Import.replacements)) {
18
19
  contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
19
20
  }
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
- });
21
+
22
+ // Now parse into template
23
+ const temp = document.createElement('template');
24
+ temp.innerHTML = contents;
25
+
26
+ // Extract and handle scripts
27
+ const scripts = Array.from(temp.content.querySelectorAll('script[src]'));
28
+ scripts.forEach(script => script.remove());
29
+
30
+ // Set content
31
+ this.innerHTML = temp.innerHTML;
32
+
33
+ // Add scripts back
34
+ for (const script of scripts) {
35
+ const newScript = document.createElement('script');
36
+ Array.from(script.attributes).forEach(attr => {
37
+ newScript.setAttribute(attr.name, attr.value);
38
+ });
39
+ console.log('Adding script with src:', newScript.src); // Debug
40
+ await new Promise((resolve, reject) => {
41
+ newScript.onload = resolve;
42
+ newScript.onerror = reject;
43
+ this.appendChild(newScript);
44
+ });
45
+ }
46
+
28
47
  return true;
29
48
  }
30
49
  return false;