kempo 2.2.0 → 2.4.0

package/dist/components/ContentSlider.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const content=Symbol(),prevClickHandler=Symbol(),nextClickHandler=Symbol(),keydownHandler=Symbol();export default class ContentSlider extends LazyComponent{constructor(n=[],{index:t=0,controls:e=!0,globalControls:o=!1,keyboardControls:s=!0,loop:i=!1}={}){super(),this[content]=[...n],this[prevClickHandler]=()=>this.previous(),this[nextClickHandler]=()=>this.next(),this[keydownHandler]=n=>{"ArrowLeft"===n.code?(n.preventDefault(),dispatchEvent(this,"keyleft"),this.previous()):"ArrowRight"===n.code&&(n.preventDefault(),dispatchEvent(this,"keyright"),this.next())},this.registerAttributes({index:t,controls:e,keyboardControls:s,globalControls:o,loop:i}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),this[content]=[...this.querySelectorAll(":scope > *")]}async render(n){return!!await super.render(n)&&(this.keyboardControls&&(this.globalControls?onEvent(window,"keydown",this[keydownHandler]):(onEvent(this,"keydown",this[keydownHandler]),onEvent(this.shadowRoot,"keydown",this[keydownHandler]))),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevClickHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextClickHandler]),this.renderContent(),!0)}attributeChangedCallback(n,t,e){if(super.attributeChangedCallback(n,t,e),"index"===n&&t!==e){const n=parseInt(e),t=Math.max(Math.min(this[content].length-1,n),0);n!==t?this.index=t:(dispatchEvent(this,"change",{index:t}),this.renderContent())}else"keyboard-controls"===n&&t!==e&&(this.keyboardControls?this.globalControls?onEvent(window,"keydown",this[keydownHandler]):(onEvent(this,"keydown",this[keydownHandler]),onEvent(this.shadowRoot,"keydown",this[keydownHandler])):offEvent(this.globalControls?window:this.shadowRoot,"keydown",this[keydownHandler]))}renderContent(){this.innerHTML="",this.appendChild(this[content][this.index])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevClickHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextClickHandler]),offEvent(window,"keydown",this[keydownHandler]),offEvent(this.shadowRoot,"keydown",this[keydownHandler]),offEvent(this,"keydown",this[keydownHandler])}previous(){let n=this.index-1;this.loop&&n<0&&(n=this[content].length-1),dispatchEvent(this,"previous",{index:n}),this.index=n}next(){let n=this.index+1;this.loop&&n>=this[content].length&&(n=0),dispatchEvent(this,"next",{index:n}),this.index=n}goto(n){dispatchEvent(this,"goto",{index:n}),this.index=n}get shadowTemplate(){return`\n      <div id="content">\n        ${super.shadowTemplate}\n      </div>\n      <div id="controls">\n        <button\n          id="prev"\n          class="no-btn"\n        >\n          <slot name="prev">\n            <k-icon name="chevron-left"></k-icon>\n          </slot>\n        </button>\n        <button\n          id="next"\n          class="no-btn"\n        >\n          <slot name="next">\n            <k-icon name="chevron-right"></k-icon>\n          </slot>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        position: relative;\n        outline: none;\n      }\n      #prev,\n      #next {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        font-size: 2rem;\n      }\n      #next {\n        right: 0;\n      }\n      :host(:not([controls="true"])) #controls {\n        display: none;\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"index","keyboard-controls","global-controls"]}window.customElements.define("k-content-slider",ContentSlider);

package/dist/components/DirectoryViewer.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),selectDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[selectDirectoryClickHandler]=()=>this.selectDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async selectDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="selectDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #selectDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);
+import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/dist/components/ShowMore.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class ShowMore extends LazyComponent{constructor(){super(),this.registerAttribute("opened",!1),this.registerProp("_toggleClickHandler",(()=>this.toggle()))}async render(n){await super.render(n),onEvent(this.shadowRoot.getElementById("toggle"),"click",this._toggleClickHandler)}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened?this.less():this.more()}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n        <button\n          id="toggle"\n          class="no-btn"\n        >\n          <span id="more">\n            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n          </span>\n          <span id="less">\n            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n          </span>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --closed_height: 7rem;\n        \n        display: block;\n      }\n      :host(:not([opened])) #content{\n        height: var(--closed_height);\n        overflow-y: hidden;\n      }\n      :host(:not([opened])) #content {\n        margin-bottom: calc(var(--closed_height) * -0.9);\n      }\n      :host(:not([opened]))  #toggle {\n        padding-top: calc(var(--closed_height) - 2rem);\n        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n      }\n      #toggle {\n        width: 100%;\n        padding: var(--spacer_h);\n        text-align: center;\n        background: var(--c_bg);\n      }\n      :host([opened]) #more,\n      :host(:not([opened])) #less {\n        display: none;\n      }\n    `}}window.customElements.define("k-show-more",ShowMore);
+import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const toggleClickHandler=Symbol();export default class ShowMore extends LazyComponent{constructor(){super(),this[toggleClickHandler]=()=>this.toggle(),this.registerAttribute("opened",!1)}async render(e){await super.render(e),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&(this.opened?dispatchEvent(this,"change opened"):dispatchEvent(this,"change closed"))}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened=!this.opened}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n        <button\n          id="toggle"\n          class="no-btn"\n        >\n          <span id="more">\n            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n          </span>\n          <span id="less">\n            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n          </span>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --closed_height: 7rem;\n        \n        display: block;\n      }\n      :host(:not([opened])) #content{\n        height: var(--closed_height);\n        overflow-y: hidden;\n      }\n      :host(:not([opened])) #content {\n        margin-bottom: calc(var(--closed_height) * -0.9);\n      }\n      :host(:not([opened]))  #toggle {\n        padding-top: calc(var(--closed_height) - 2rem);\n        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n      }\n      #toggle {\n        width: 100%;\n        padding: var(--spacer_h);\n        text-align: center;\n        background: var(--c_bg);\n      }\n      :host([opened]) #more,\n      :host(:not([opened])) #less {\n        display: none;\n      }\n    `}}window.customElements.define("k-show-more",ShowMore);

package/dist/components/ThemeSwitcher.js

@@ -1 +1 @@
-import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";import"./Icon.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);
+import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";import"./Icon.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler])}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="autoMode"\n          name="mode-auto"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n          class="mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      .mode {\n        display: none;\n      }\n      :host([current-theme="auto"]) #autoMode,\n      :host([current-theme="light"]) #lightMode,\n      :host([current-theme="dark"]) #darkMode {\n        display: block;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);

package/dist/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Card:Card,Component:Component,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
+import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/dist/kempo-hljs.css

@@ -1 +1 @@
-:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}
+:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}

package/dist/utils/element.js

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

package/docs/components/_template.html

@@ -30,6 +30,8 @@
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
 
+    <h2 id="jsRef">JavaScript Refrerence</h2>
+
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
     <h6>Extends <a href="./component.html">Component</a></h6>
     <h5>

package/docs/components/content-slider.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Content Slider - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Content Slider</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#keyboardControls">Keyboard Controls</a><br />
+        <a href="#globalControls">Global Controls</a><br />
+        <a href="#controls">Controls</a><br />
+        <a href="#loop">Loop</a><br />
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#attributes">Attributes</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>description</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-content-slider
+          class="bg-alt"
+          style="height: 10rem"
+        >
+          <div><p>Slide 1</p></div>
+          <div><p>Slide 2</p></div>
+          <div><p>Slide 3</p></div>
+          <div><p>Slide 4</p></div>
+        </k-content-slider>
+      </div>
+    </div>
+
+    <h3 id="keyboardControls"><a href="#keyboardControls" class="no-link">Keyboard Controls</a></h3>
+    <p>By default the <code>keyboard-controls</code> attribute is set to <code>"true"</code>, which allows the left and right keyboard buttons to change the slides when the component is focused. Set it to <code>"false"</code> to disable this functionality.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-content-slider
+          class="bg-alt"
+          style="height: 10rem"
+          keyboard-controls="false"
+        >
+          <div><p>Slide 1</p></div>
+          <div><p>Slide 2</p></div>
+          <div><p>Slide 3</p></div>
+          <div><p>Slide 4</p></div>
+        </k-content-slider>
+      </div>
+    </div>
+
+    <h3 id="globalControls"><a href="#globalControls" class="no-link">Global Controls</a></h3>
+    <p>Use the <code>global-controls="true"</code> attribute to enable global controls (next and back arrows) anywhere in the window, even when this component is not focused. This is suggested when there is only one content slider on a page and it is of prominance (large slider on top of the page).</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">global-controls</span>=<span class="hljs-string">"true"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-content-slider
+          class="bg-alt"
+          style="height: 10rem"
+          global-controls="true"
+        >
+          <div><p>Slide 1</p></div>
+          <div><p>Slide 2</p></div>
+          <div><p>Slide 3</p></div>
+          <div><p>Slide 4</p></div>
+        </k-content-slider>
+      </div>
+    </div>
+
+    <h3 id="controls"><a href="#controls" class="no-link">Controls</a></h3>
+    <p>By default the <code>controls</code> attribute is set to <code>"true"</code>, this shows the previous and next buttons. To hide them set <code>controls="false"</code>.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-content-slider
+          class="bg-alt"
+          style="height: 10rem"
+          controls="false"
+        >
+          <div><p>Slide 1</p></div>
+          <div><p>Slide 2</p></div>
+          <div><p>Slide 3</p></div>
+          <div><p>Slide 4</p></div>
+        </k-content-slider>
+      </div>
+    </div>
+
+    <h3 id="loop"><a href="#loop" class="no-link">Loop</a></h3>
+    <p>To make the slider loop (go back to the beginning after it hits the last slide) use the <code>loop="true"</code> attribute.</p>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />  <span class="hljs-attr">loop</span>=<span class="hljs-string">"true"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-spane-12 p">
+        <k-content-slider
+          class="bg-alt"
+          style="height: 10rem"
+          loop="true"
+        >
+          <div><p>Slide 1</p></div>
+          <div><p>Slide 2</p></div>
+          <div><p>Slide 3</p></div>
+          <div><p>Slide 4</p></div>
+        </k-content-slider>
+      </div>
+    </div>
+
+    <h2 id="jsRef">JavaScript Refrerence</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
+    <h5>
+      <code>new ContentSlider()</code><br />
+      <code>new ContentSlider(<i>&lt;Array>HTMLElement</i> content)</code><br/>
+      <code>new ContentSlider(<i>&lt;Array>HTMLElement</i> content, <i>Object</i> init_attrs)</code>
+    </h5>
+
+    <h4>Paramters</h4>
+    <h5><code>content<i>: &lt;Array>HTMLElement></i></code></h5>
+    <p>An array of <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a>s that will be the contents of this slider.</p>
+    <h5><code>init_attrs<i>: Object</i></code></h5>
+    <p>An options object that may contain the initial values of the attributes (see attributes below).</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="">LazyComponent Class</a></li>
+      <li><a href="">elements.js Util</a></li>
+    </ul>
+
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>index<i>: number</i></code></h5>
+    <p>The index of the currently active slide (base <code>0</code>). The default value is <code>0</code>.</p>
+
+    <h5><code>controls<i>: boolean</i></code></h5>
+    <p>A boolean that indicates if the control buttons should be shown. The default value is <code>true</code>.</p>
+
+    <h5><code>keyboardControls<i>: boolean</i></code></h5>
+    <p>A boolean that indicates if the left and right arrows should be used to control the slider. The default value is <code>true</code>.</p>
+
+    <h5><code>globalControls<i>: boolean</i></code></h5>
+    <p>A boolean that indicates if the left and right arrows should be used to control the slider even when it is not focused (the listener is on the window). The default value is <code>false</code>.</p>
+
+    <h5><code>loop<i>: boolean</i></code></h5>
+    <p>A boolean that indicates index should loop. When true, after the last side it will go back to the first, and when on the first slide the previous slide will be the last. The default value is <code>false</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>previous()<i>: undefined</i></code></h5>
+    <p>Goes to the previous slide.</p>
+
+    <h5><code>next()<i>: undefined</i></code></h5>
+    <p>Goes to the next slide.</p>
+    
+    <h5><code>goto(<i>number<i> index)<i>: undefined</i></code></h5>
+    <p>Goes to the specified slide. If the index is more than the number of slides the last side will be shown. If the index is below 0, the first slide will be shown.</p>
+    
+  </main>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+  <script type="module" src="../kempo/components/ContentSlider.js"></script> 
+</body>
+</html>

package/docs/components/directory-viewer.html

@@ -3,13 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Template - Components - Kempo Docs - A Web Components Solution</title>
+  <title>Directory Viewer - Components - Kempo Docs - A Web Components Solution</title>
   <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
-  <h1 class="ta-center">DirectoryViewer</h1>
+  <h1 class="ta-center">Directory Viewer</h1>
   <main>
     <details
       class="b r mb"
@@ -46,7 +46,7 @@
 
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./lazycomponent.html">LazyComponent</a></h6>
+    <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
     <h5>
       <code>new DirectoryViewer()</code><br />
     </h5>

package/docs/components/show-more.html

@@ -69,7 +69,6 @@
   <div style="height:33vh"></div>
   
   <script type="module" src="../kempo/components/Import.js"></script> 
-  <script type="module" src="../kempo/components/ShowMore.js"></script> 
-  <script type="module" src="../kempo/components/WebSnippetEditor.js"></script> 
+  <script type="module" src="../kempo/components/ShowMore.js"></script>
 </body>
 </html>

package/docs/kempo/components/ContentSlider.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const content=Symbol(),prevClickHandler=Symbol(),nextClickHandler=Symbol(),keydownHandler=Symbol();export default class ContentSlider extends LazyComponent{constructor(n=[],{index:t=0,controls:e=!0,globalControls:o=!1,keyboardControls:s=!0,loop:i=!1}={}){super(),this[content]=[...n],this[prevClickHandler]=()=>this.previous(),this[nextClickHandler]=()=>this.next(),this[keydownHandler]=n=>{"ArrowLeft"===n.code?(n.preventDefault(),dispatchEvent(this,"keyleft"),this.previous()):"ArrowRight"===n.code&&(n.preventDefault(),dispatchEvent(this,"keyright"),this.next())},this.registerAttributes({index:t,controls:e,keyboardControls:s,globalControls:o,loop:i}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),this[content]=[...this.querySelectorAll(":scope > *")]}async render(n){return!!await super.render(n)&&(this.keyboardControls&&(this.globalControls?onEvent(window,"keydown",this[keydownHandler]):(onEvent(this,"keydown",this[keydownHandler]),onEvent(this.shadowRoot,"keydown",this[keydownHandler]))),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevClickHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextClickHandler]),this.renderContent(),!0)}attributeChangedCallback(n,t,e){if(super.attributeChangedCallback(n,t,e),"index"===n&&t!==e){const n=parseInt(e),t=Math.max(Math.min(this[content].length-1,n),0);n!==t?this.index=t:(dispatchEvent(this,"change",{index:t}),this.renderContent())}else"keyboard-controls"===n&&t!==e&&(this.keyboardControls?this.globalControls?onEvent(window,"keydown",this[keydownHandler]):(onEvent(this,"keydown",this[keydownHandler]),onEvent(this.shadowRoot,"keydown",this[keydownHandler])):offEvent(this.globalControls?window:this.shadowRoot,"keydown",this[keydownHandler]))}renderContent(){this.innerHTML="",this.appendChild(this[content][this.index])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevClickHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextClickHandler]),offEvent(window,"keydown",this[keydownHandler]),offEvent(this.shadowRoot,"keydown",this[keydownHandler]),offEvent(this,"keydown",this[keydownHandler])}previous(){let n=this.index-1;this.loop&&n<0&&(n=this[content].length-1),dispatchEvent(this,"previous",{index:n}),this.index=n}next(){let n=this.index+1;this.loop&&n>=this[content].length&&(n=0),dispatchEvent(this,"next",{index:n}),this.index=n}goto(n){dispatchEvent(this,"goto",{index:n}),this.index=n}get shadowTemplate(){return`\n      <div id="content">\n        ${super.shadowTemplate}\n      </div>\n      <div id="controls">\n        <button\n          id="prev"\n          class="no-btn"\n        >\n          <slot name="prev">\n            <k-icon name="chevron-left"></k-icon>\n          </slot>\n        </button>\n        <button\n          id="next"\n          class="no-btn"\n        >\n          <slot name="next">\n            <k-icon name="chevron-right"></k-icon>\n          </slot>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        position: relative;\n        outline: none;\n      }\n      #prev,\n      #next {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        font-size: 2rem;\n      }\n      #next {\n        right: 0;\n      }\n      :host(:not([controls="true"])) #controls {\n        display: none;\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"index","keyboard-controls","global-controls"]}window.customElements.define("k-content-slider",ContentSlider);

package/docs/kempo/components/DirectoryViewer.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),selectDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[selectDirectoryClickHandler]=()=>this.selectDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async selectDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="selectDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #selectDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);
+import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/docs/kempo/components/ShowMore.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class ShowMore extends LazyComponent{constructor(){super(),this.registerAttribute("opened",!1),this.registerProp("_toggleClickHandler",(()=>this.toggle()))}async render(n){await super.render(n),onEvent(this.shadowRoot.getElementById("toggle"),"click",this._toggleClickHandler)}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened?this.less():this.more()}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n        <button\n          id="toggle"\n          class="no-btn"\n        >\n          <span id="more">\n            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n          </span>\n          <span id="less">\n            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n          </span>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --closed_height: 7rem;\n        \n        display: block;\n      }\n      :host(:not([opened])) #content{\n        height: var(--closed_height);\n        overflow-y: hidden;\n      }\n      :host(:not([opened])) #content {\n        margin-bottom: calc(var(--closed_height) * -0.9);\n      }\n      :host(:not([opened]))  #toggle {\n        padding-top: calc(var(--closed_height) - 2rem);\n        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n      }\n      #toggle {\n        width: 100%;\n        padding: var(--spacer_h);\n        text-align: center;\n        background: var(--c_bg);\n      }\n      :host([opened]) #more,\n      :host(:not([opened])) #less {\n        display: none;\n      }\n    `}}window.customElements.define("k-show-more",ShowMore);
+import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const toggleClickHandler=Symbol();export default class ShowMore extends LazyComponent{constructor(){super(),this[toggleClickHandler]=()=>this.toggle(),this.registerAttribute("opened",!1)}async render(e){await super.render(e),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&(this.opened?dispatchEvent(this,"change opened"):dispatchEvent(this,"change closed"))}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened=!this.opened}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n        <button\n          id="toggle"\n          class="no-btn"\n        >\n          <span id="more">\n            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n          </span>\n          <span id="less">\n            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n          </span>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --closed_height: 7rem;\n        \n        display: block;\n      }\n      :host(:not([opened])) #content{\n        height: var(--closed_height);\n        overflow-y: hidden;\n      }\n      :host(:not([opened])) #content {\n        margin-bottom: calc(var(--closed_height) * -0.9);\n      }\n      :host(:not([opened]))  #toggle {\n        padding-top: calc(var(--closed_height) - 2rem);\n        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n      }\n      #toggle {\n        width: 100%;\n        padding: var(--spacer_h);\n        text-align: center;\n        background: var(--c_bg);\n      }\n      :host([opened]) #more,\n      :host(:not([opened])) #less {\n        display: none;\n      }\n    `}}window.customElements.define("k-show-more",ShowMore);

package/docs/kempo/components/ThemeSwitcher.js

@@ -1 +1 @@
-import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";import"./Icon.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      :host([current-theme="dark"]) #darkMode,\n      :host([current-theme="light"]) #lightMode {\n        display: none;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);
+import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";import"./Icon.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler])}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="autoMode"\n          name="mode-auto"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="lightMode"\n          name="light-mode"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="dark-mode"\n          class="mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      .mode {\n        display: none;\n      }\n      :host([current-theme="auto"]) #autoMode,\n      :host([current-theme="light"]) #lightMode,\n      :host([current-theme="dark"]) #darkMode {\n        display: block;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Card:Card,Component:Component,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
+import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/docs/kempo/kempo-hljs.css

@@ -1 +1 @@
-:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}
+:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}

package/docs/kempo/utils/element.js

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

package/docs/nav-1.inc.html

@@ -35,12 +35,13 @@
     <h5 class="mb0">Components</h5>
     <div class="pl mb">
       <a href="../components/component.html">Component</a>
-      <a href="../components/lazycomponent.html">LazyComponent</a>
+      <a href="../components/lazy-component.html">LazyComponent</a>
       <a href="../components/reactivecomponent.html">ReactiveComponent</a>
-      <a href="../components/reactivelazycomponent.html">ReactiveLazyComponent</a>
+      <a href="../components/reactivelazy-component.html">ReactiveLazyComponent</a>
       <a href="../components/focuscapture.html">FocusCapture</a>
       <hr />
       <a href="../components/card.html">Card</a>
+      <a href="../components/content-slider.html">Content Slider</a>
       <a href="../components/dialog.html">Dialog</a>
       <a href="../components/directory-viewer.html">Directory Viewer</a>
       <a href="../components/icon.html">Icon</a>

package/docs/nav.inc.html

@@ -35,13 +35,13 @@
     <h5 class="mb0">Components</h5>
     <div class="pl mb">
       <a href="./components/component.html">Component</a>
-      <a href="./components/lazycomponent.html">LazyComponent</a>
+      <a href="./components/lazy-component.html">LazyComponent</a>
       <a href="./components/reactivecomponent.html">ReactiveComponent</a>
-      <a href="./components/reactivelazycomponent.html">ReactiveLazyComponent</a>
+      <a href="./components/reactivelazy-component.html">ReactiveLazyComponent</a>
       <a href="./components/focuscapture.html">FocusCapture</a>
       <hr />
-      <a href="./components/codeeditor.html">Code Editor</a>
       <a href="./components/card.html">Card</a>
+      <a href="./components/content-slider.html">Content Slider</a>
       <a href="./components/dialog.html">Dialog</a>
       <a href="./components/directory-viewer.html">Directory Viewer</a>
       <a href="./components/icon.html">Icon</a>
@@ -53,7 +53,6 @@
       <a href="./components/table.html">Table</a>
       <a href="./components/tabs.html">Tabs</a>
       <a href="./components/toggle.html">Toggle</a>
-      <a href="./components/websnippeteditor.html">Web Snippet Editor</a>
     </div>
   </menu>
 </k-side-menu>

package/docs/search.json

@@ -9,7 +9,7 @@
       "parent"
     ]
   },
-  "/components/lazycomponent.html": {
+  "/components/lazy-component.html": {
     "name": "Components > LazyComponent",
     "terms": [
       "lazy",
@@ -20,6 +20,14 @@
       "parent"
     ]
   },
+  "/components/content-slider.html": {
+    "name": "Components > Content Slider",
+    "terms": [
+      "content",
+      "slider",
+      "photos"
+    ]
+  },
   "/components/directoryviewer.html": {
     "name": "Components > DirectoryViewer",
     "terms": [

package/icons/arrow-back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>

package/icons/arrow-forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>