kempo 2.2.0 → 2.3.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/mode-auto.svg

@@ -0,0 +1 @@
+<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/ContentSlider.js

@@ -0,0 +1,192 @@
+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(_content = [], {
+    index = 0,
+    controls = true,
+    globalControls = false,
+    keyboardControls = true,
+    loop = false
+  } = {}){
+    super();
+
+    /* Private Members */
+    this[content] = [..._content];
+
+    /* Private Methods */
+    this[prevClickHandler] = () => this.previous();
+    this[nextClickHandler] = () => this.next();
+    this[keydownHandler] = (event) => {
+      if(event.code === 'ArrowLeft'){
+        event.preventDefault();
+        dispatchEvent(this, 'keyleft');
+        this.previous();
+      } else if(event.code === 'ArrowRight'){
+        event.preventDefault();
+        dispatchEvent(this, 'keyright');
+        this.next();
+      }
+    }
+
+    /* Init */
+    this.registerAttributes({
+      index,
+      controls,
+      keyboardControls,
+      globalControls,
+      loop
+    });
+    this.tabIndex = 0;
+  }
+
+  /* Lifecycle Callback */
+  connectedCallback(){
+    super.connectedCallback();
+    this[content] = [...this.querySelectorAll(':scope > *')];
+  }
+  async render(force){
+    if(await super.render(force)){
+      if(this.keyboardControls){ // add keyboard controls
+        if(this.globalControls){
+          onEvent(window, 'keydown', this[keydownHandler]);
+        } else {
+          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();
+      return true;
+    }
+    return false;
+  }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'index' && oV !== nV){
+      const newIndex = parseInt(nV);
+      const validNew = Math.max(Math.min(this[content].length-1, newIndex), 0);
+      if(newIndex !== validNew){
+        this.index = validNew;
+      } else {
+        dispatchEvent(this, 'change', {
+          index: validNew
+        });
+        this.renderContent();
+      }
+    } else if(n === 'keyboard-controls' && oV !== nV){
+      if(this.keyboardControls){ // add keyboard controls
+        if(this.globalControls){
+          onEvent(window, 'keydown', this[keydownHandler]);
+        } else {
+          onEvent(this, 'keydown', this[keydownHandler]);
+          onEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
+        }
+      } else { // remove keyboard controls
+        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]);
+  }
+
+  /* Public Methods */
+  previous(){
+    let newIndex = this.index - 1;
+    if(this.loop){
+      if(newIndex < 0) newIndex = this[content].length - 1;
+    }
+    dispatchEvent(this, 'previous', {index: newIndex});
+    this.index = newIndex;
+  }
+  next(){
+    let newIndex = this.index + 1;
+    if(this.loop){
+      if(newIndex >= this[content].length) newIndex = 0;
+    }
+    dispatchEvent(this, 'next', {index: newIndex});
+    this.index = newIndex;
+  }
+  goto(newIndex){
+    dispatchEvent(this, 'goto', {index: newIndex});
+    this.index = newIndex;
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="content">
+        ${super.shadowTemplate}
+      </div>
+      <div id="controls">
+        <button
+          id="prev"
+          class="no-btn"
+        >
+          <slot name="prev">
+            <k-icon name="chevron-left"></k-icon>
+          </slot>
+        </button>
+        <button
+          id="next"
+          class="no-btn"
+        >
+          <slot name="next">
+            <k-icon name="chevron-right"></k-icon>
+          </slot>
+        </button>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+        position: relative;
+        outline: none;
+      }
+      #prev,
+      #next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 2rem;
+      }
+      #next {
+        right: 0;
+      }
+      :host(:not([controls="true"])) #controls {
+        display: none;
+      }
+    `;
+  }
+
+  /* Static Members */
+  static observedAttributes = [
+    ...LazyComponent.observedAttributes,
+    'index',
+    'keyboard-controls',
+    'global-controls'
+  ];
+}
+window.customElements.define('k-content-slider', ContentSlider);

package/src/components/DirectoryViewer.js

@@ -3,12 +3,13 @@ import Component from './Component.js';
 import './Icon.js';
 import {
   onEvent,
-  offEvent
+  offEvent,
+  dispatchEvent
 } from '../utils/element.js';
 import watchDirectoryHandle from '../utils/watchDirectoryHandle.js';
 
 const handle = Symbol(),
-      selectDirectoryClickHandler = Symbol(),
+      loadDirectoryClickHandler = Symbol(),
       openToggleClickHandler = Symbol(),
       fileSelectedHandler = Symbol(),
       watchId = Symbol(),
@@ -24,7 +25,7 @@ export default class DirectoryViewer extends LazyComponent {
     this[filters] = [];
 
     /* Private Methods */
-    this[selectDirectoryClickHandler] = () => this.selectDirectory();
+    this[loadDirectoryClickHandler] = () => this.loadDirectory();
     this[openToggleClickHandler] = () => {
       if(!this.root){
         this.toggleOpen();
@@ -51,7 +52,7 @@ export default class DirectoryViewer extends LazyComponent {
   async render(force){
     if(await super.render(force)){
       onEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
-      onEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+      onEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
       onEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
       this.renderDirectory();
       return true;
@@ -95,7 +96,7 @@ export default class DirectoryViewer extends LazyComponent {
   disconnectedCallback(){
     super.disconnectedCallback();
     offEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
-    offEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+    offEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
     offEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
   }
   attributeChangedCallback(n, oV, nV){
@@ -119,11 +120,15 @@ export default class DirectoryViewer extends LazyComponent {
 
 
   /* Public Methods */
-  async selectDirectory(){
+  async loadDirectory(){
     if(window.showDirectoryPicker){
       this[handle] = await window.showDirectoryPicker();
       if(this[handle]){
         this.hasHandle = true;
+        dispatchEvent(this, 'directoryloaded', {
+          dirHandle: this[handle],
+          dirComponent: this
+        });
         this.renderDirectory();
       }
     }
@@ -200,7 +205,7 @@ export default class DirectoryViewer extends LazyComponent {
   get shadowTemplate(){
     return /*html*/`
       <button
-        id="selectDirectory"
+        id="loadDirectory"
       >
         <slot name="selectButton">
           <k-icon name="folder-create"></k-icon> Select Directory
@@ -223,7 +228,7 @@ export default class DirectoryViewer extends LazyComponent {
   get shadowStyles(){
     return /*css*/`
       ${super.shadowStyles}
-      :host([has-handle]) #selectDirectory,
+      :host([has-handle]) #loadDirectory,
       :host([opened]) #folder-closed,
       :host(:not([opened])) #folder-opened,
       :host(:not([has-handle])) #folder-closed,

package/src/components/ShowMore.js

@@ -6,17 +6,37 @@ import {
   dispatchEvent
 } from '../utils/element.js';
 
+const toggleClickHandler = Symbol();
 export default class ShowMore extends LazyComponent {
   constructor(){
     super();
 
+    this[toggleClickHandler] = () => this.toggle();
+
     this.registerAttribute('opened', false);
-    this.registerProp('_toggleClickHandler', () => this.toggle());
   }
+  
+  /* Lifecycle Callbacks */
   async render(force){
     await super.render(force);
-    onEvent(this.shadowRoot.getElementById('toggle'), 'click', this._toggleClickHandler);
+    onEvent(this.shadowRoot.getElementById('toggle'), 'click', this[toggleClickHandler]);
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('toggle'), 'click', this[toggleClickHandler]);
   }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'opened' && oV !== nV){
+      if(this.opened){
+        dispatchEvent(this, 'change opened');
+      } else {
+        dispatchEvent(this, 'change closed');
+      }
+    }
+  }
+
+  /* Public Methods */
   more(){
     this.opened = true;
   }
@@ -24,7 +44,7 @@ export default class ShowMore extends LazyComponent {
     this.opened = false;
   }
   toggle(){
-    this.opened?this.less():this.more();
+    this.opened = !this.opened;
   }
 
   get shadowTemplate(){

package/src/components/ThemeSwitcher.js

@@ -15,7 +15,10 @@ export default class ThemeSwitcher extends Component {
       this.currentTheme =  ThemeSwitcher.getCurrentTheme();
     }
     this[clickHandler] = () => {
-      ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()==='light'?'dark':'light');
+      const current = ThemeSwitcher.getCurrentTheme();
+      if(current === 'auto') ThemeSwitcher.setTheme('light');
+      if(current === 'light') ThemeSwitcher.setTheme('dark');
+      if(current === 'dark') ThemeSwitcher.setTheme('auto');
     }
     this.registerAttribute('currentTheme', ThemeSwitcher.getCurrentTheme());
   }
@@ -27,6 +30,10 @@ export default class ThemeSwitcher extends Component {
     }
     return false;
   }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('toggle'), 'click', this[clickHandler]);
+  }
 
   get shadowTemplate(){
     return /*html*/`
@@ -34,13 +41,20 @@ export default class ThemeSwitcher extends Component {
         id="toggle"
         class="no-btn"
       >
+        <k-icon
+          id="autoMode"
+          name="mode-auto"
+          class="mode"
+        ></k-icon>
         <k-icon
           id="lightMode"
           name="light-mode"
+          class="mode"
         ></k-icon>
         <k-icon
           id="darkMode"
           name="dark-mode"
+          class="mode"
         ></k-icon>
       </button>
     `;
@@ -55,10 +69,14 @@ export default class ThemeSwitcher extends Component {
       #toggle {
         padding: var(--padding);
       }
-      :host([current-theme="dark"]) #darkMode,
-      :host([current-theme="light"]) #lightMode {
+      .mode {
         display: none;
       }
+      :host([current-theme="auto"]) #autoMode,
+      :host([current-theme="light"]) #lightMode,
+      :host([current-theme="dark"]) #darkMode {
+        display: block;
+      }
     `;
   }
 

package/src/kempo-hljs.css

@@ -18,6 +18,7 @@
   --c_deletion: #2b91af;
   --c_caret: black;
 }
+[auto-theme="dark"]:not([theme="light"]),
 [theme="dark"] {
   --c_text: #DCDCDC;
   --c_keyword: #569CD6;

package/src/utils/element.js

@@ -22,10 +22,13 @@ export const offEvent = (element, events, handler, scope = document) => {
     scope.querySelectorAll(element).forEach( el => offEvent(el, events, handler));
   }
 }
-export const dispatchEvent = (element, events, detail, scope = document) => {
+export const dispatchEvent = (element, events, detail, {
+  scope = document,
+  bubbles = false
+}={}) => {
   if(element instanceof EventTarget){
     events.toLowerCase().split(' ').forEach( event => {
-      element.dispatchEvent(new CustomEvent(event, { detail } ));
+      element.dispatchEvent(new CustomEvent(event, { bubbles, detail } ));
     });
   } else if(element instanceof NodeList || element instanceof Array){
     element.forEach( el => dispatchEvent(el, events, handler));