kempo 1.0.1 → 1.1.0

package/dist/components/Component.js

@@ -1 +1 @@
-import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render()}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n      <slot></slot>\n    "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}
+import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render(!0)}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n      <slot></slot>\n    "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}

package/dist/components/Toggle.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol(),keyDownHandler=Symbol();export default class Toggle extends Component{constructor(){super(),this[clickHandler]=()=>{this.toggle()},this[keyDownHandler]=({code:n})=>{["Space","Enter"].includes(n)&&this.toggle()},this.registerAttributes({value:!1}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),onEvent(this,"click",this[clickHandler]),onEvent(this,"keydown",this[keyDownHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler]),offEvent(this,"keydown",this[keyDownHandler])}attributeChangedCallback(n,e,a){"value"===n&&dispatchEvent(this,"change",{value:a})}on(){this.value=!0,dispatchEvent(this,"on",{value:!0})}off(){this.value=!1,dispatchEvent(this,"on",{value:!1})}toggle(){this.value?this.off():this.on(),dispatchEvent(this,"toggle",{value:this.value})}get shadowTemplate(){return`\n      <div id="switch">\n        <div id="handle"></div>\n      </div>\n      <label id="label">\n        ${super.shadowTemplate}\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --switch_height: 2rem;\n        --switch_width: 3rem;\n        --switch_border: 1px solid var(--c_border);\n        --switch_background__off: var(--c_bg__alt);\n        --switch_background__on: var(--c_success);\n        --handle_size__off: 1rem;\n        --handle_size__on: 1.5rem;\n        --handle_border: 1px solid var(--c_border);\n        --handle_background__off: var(--c_border);\n        --handle_background__on: white;\n\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        margin-bottom: var(--spacer);\n        border-radius: 999rem;\n      }\n      #switch {\n        display: flex;\n        align-items: center;\n        width: var(--switch_width);\n        height: var(--switch_height);\n        border: var(--switch_border);\n        background: var(--switch_background__off);\n        border-radius: 999rem;\n        margin-right: var(--spacer);\n      }\n      #handle {\n        --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);\n        width: var(--handle_size__off);\n        height: var(--handle_size__off);\n        border: var(--handle_border);\n        background: var(--handle_background__off);\n        border-radius: 999rem;\n        transform: translateX(var(--margin));\n        transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);\n      }\n      :host([value="true"]) #switch {\n        background: var(--switch_background__on);\n      }\n      :host([value="true"]) #handle {\n        --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);\n        --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));\n        width: var(--handle_size__on);\n        height: var(--handle_size__on);\n        background: var(--handle_background__on);\n        transform: translateX(var(--d));\n      }\n      #label {\n        display: block;\n        flex: 1 1 auto;\n        padding: 0;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value"]}window.customElements.define("k-toggle",Toggle);

package/dist/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.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 Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import WebSnippetEditor from"./components/WebSnippetEditor.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 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";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.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 Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.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 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";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

package/docs/components/toggle.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toggle - 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">Toggle</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <ul>
+        <li><a href="#basicUsage">Basic Usage</a></li>
+        <li><a href="#onByDefault">On By Default</a></li>
+        <li><a href="#customStyles">Custom Styles</a></li>
+        <li><a href="#javascriptUsage">JavaScript Usage</a></li>
+        <li>
+          <a href="#classReference">Class Reference</a>
+          <ul>
+            <li><a href="#constructor">Constructor</a></li>
+            <li><a href="#requirements">Requirements</a></li>
+            <li><a href="#attributes">Attributes</a></li>
+            <li><a href="#properties">Properties</a></li>
+            <li><a href="#methods">Methods</a></li>
+          </ul>
+        </li>
+      </ul>
+    </details>
+
+    <h3 id="basicUsage">Basic Usage</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle>Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="onByDefault">On By Default</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle value="true">Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customStyles">Custom Styles</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --switch_height: 3rem;<br />    --switch_width: 5rem;<br />    --switch_border: none;<br />    --switch_background__off: var(--c_danger);<br />    --switch_background__on: var(--c_success);<br />    --handle_size__off: 2rem;<br />    --handle_size__on: calc(3rem - 2px);<br />    --handle_border: none;<br />    --handle_background__off: #ddd;<br />    --handle_background__on: white;<br />  "</span><br />&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle 
+            style="
+              --switch_height: 3rem;
+              --switch_width: 5rem;
+              --switch_border: none;
+              --switch_background__off: var(--c_danger);
+              --switch_background__on: var(--c_success);
+              --handle_size__off: 2rem;
+              --handle_size__on: calc(3rem - 2px);
+              --handle_border: none;
+              --handle_background__off: #ddd;
+              --handle_background__on: white;
+            "
+          >Toggle Me</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="javascriptUsage">JavaScript Usage</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tog1"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOn"</span>&gt;</span>Turn On<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOff"</span>&gt;</span>Turn Off<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle"</span>&gt;</span>Toggle<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">const</span> $tog1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'tog1'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOn'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.on();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOff'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.off();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'toggle'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    $tog1.toggle();<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle id="tog1">Toggle Me</k-toggle>
+          <button id="turnOn">Turn On</button>
+          <button id="turnOff">Turn Off</button>
+          <button id="toggle">Toggle</button>
+          <script>
+            const $tog1 = document.getElementById('tog1');
+            document.getElementById('turnOn').addEventListener('click', ()=>{
+              $tog1.on();
+            });
+            document.getElementById('turnOff').addEventListener('click', ()=>{
+              $tog1.off();
+            });
+            document.getElementById('toggle').addEventListener('click', ()=>{
+              $tog1.toggle();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="classReference">Class Reference</h2>
+
+    <h3 id="constructor">Constructor</h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5>
+      <code>new Toggle()</code>
+    </h5>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Toggle <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-keyword">const</span> myToggle = <span class="hljs-keyword">new</span> Toggle();<br /><span class="hljs-built_in">document</span>.body.appendChild(myToggle);</code></pre>
+
+    <h3 id="attributes">Attributes</h3>
+
+    <h5><code>value</code></h5>
+    <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
+    <pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(myToggle.value); <span class="hljs-comment">// true or false</span></code></pre>
+    <p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
+
+    <h3 id="methods">Methods</h3>
+    <h5><code>on(): <i>undefined</i></code></h5>
+    <p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>
+
+    <h5><code>off(): <i>undefined</i></code></h5>
+    <p>Set's the <code>value</code> to <code>false</code>, dispatches a <code><i>change</i></code> and an <code><i>off</i></code> event. The switch visual changes to the <b>off</b> state.</p>
+
+    <h5><code>toggle(): <i>undefined</i></code></h5>
+    <p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
+
+    
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    Icon.pathToIcons = '../kempo/icons';
+  </script>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+  <script type="module" src="../kempo/components/Toggle.js"></script> 
+</body>
+</html>

package/docs/kempo/components/Component.js

@@ -1 +1 @@
-import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render()}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n      <slot></slot>\n    "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}
+import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render(!0)}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n      <slot></slot>\n    "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}

package/docs/kempo/components/Toggle.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol(),keyDownHandler=Symbol();export default class Toggle extends Component{constructor(){super(),this[clickHandler]=()=>{this.toggle()},this[keyDownHandler]=({code:n})=>{["Space","Enter"].includes(n)&&this.toggle()},this.registerAttributes({value:!1}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),onEvent(this,"click",this[clickHandler]),onEvent(this,"keydown",this[keyDownHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler]),offEvent(this,"keydown",this[keyDownHandler])}attributeChangedCallback(n,e,a){"value"===n&&dispatchEvent(this,"change",{value:a})}on(){this.value=!0,dispatchEvent(this,"on",{value:!0})}off(){this.value=!1,dispatchEvent(this,"on",{value:!1})}toggle(){this.value?this.off():this.on(),dispatchEvent(this,"toggle",{value:this.value})}get shadowTemplate(){return`\n      <div id="switch">\n        <div id="handle"></div>\n      </div>\n      <label id="label">\n        ${super.shadowTemplate}\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --switch_height: 2rem;\n        --switch_width: 3rem;\n        --switch_border: 1px solid var(--c_border);\n        --switch_background__off: var(--c_bg__alt);\n        --switch_background__on: var(--c_success);\n        --handle_size__off: 1rem;\n        --handle_size__on: 1.5rem;\n        --handle_border: 1px solid var(--c_border);\n        --handle_background__off: var(--c_border);\n        --handle_background__on: white;\n\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        margin-bottom: var(--spacer);\n        border-radius: 999rem;\n      }\n      #switch {\n        display: flex;\n        align-items: center;\n        width: var(--switch_width);\n        height: var(--switch_height);\n        border: var(--switch_border);\n        background: var(--switch_background__off);\n        border-radius: 999rem;\n        margin-right: var(--spacer);\n      }\n      #handle {\n        --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);\n        width: var(--handle_size__off);\n        height: var(--handle_size__off);\n        border: var(--handle_border);\n        background: var(--handle_background__off);\n        border-radius: 999rem;\n        transform: translateX(var(--margin));\n        transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);\n      }\n      :host([value="true"]) #switch {\n        background: var(--switch_background__on);\n      }\n      :host([value="true"]) #handle {\n        --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);\n        --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));\n        width: var(--handle_size__on);\n        height: var(--handle_size__on);\n        background: var(--handle_background__on);\n        transform: translateX(var(--d));\n      }\n      #label {\n        display: block;\n        flex: 1 1 auto;\n        padding: 0;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value"]}window.customElements.define("k-toggle",Toggle);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.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 Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import WebSnippetEditor from"./components/WebSnippetEditor.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 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";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.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 Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.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 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";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

package/docs/nav-1.inc.html

@@ -50,6 +50,7 @@
       <a href="../components/sidemenu.html">Side Menu</a>
       <a href="../components/split.html">Split</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>

package/docs/nav.inc.html

@@ -50,6 +50,7 @@
       <a href="./components/sidemenu.html">Side Menu</a>
       <a href="./components/split.html">Split</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>

package/docs/src/icons/arrow-down-double.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

package/docs/src/icons/arrow-up-double.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>

package/docs/src/icons/close.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/docs/src/icons/compare.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>

package/docs/src/icons/dark-mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>

package/docs/src/icons/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

package/docs/src/icons/filter-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z"/></svg>

package/docs/src/icons/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>

package/docs/src/icons/light-mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>

package/docs/src/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

package/docs/src/icons/pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M28.25 38V10H36v28ZM12 38V10h7.75v28Z"/></svg>

package/docs/src/icons/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M16 37.85v-28l22 14Z"/></svg>

package/docs/src/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/docs/src/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

package/docs/src/icons/storage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-160v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80-440v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80 280v-160h720v160H120Zm80-40h80v-80h-80v80Z"/></svg>

package/docs/src/icons/trash-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>

package/package.json

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

package/scripts/build.js

@@ -3,14 +3,14 @@ import fse from 'fs-extra';
 import { minify } from 'terser';
 
 console.log('Loading utils');
-const components = (await fs.readdir('./kempo/components/')).map(f=>f.substring(0,f.length-3));
+const components = (await fs.readdir('./src/components/')).map(f=>f.substring(0,f.length-3));
 let complete = 0;
 
 console.log('Loading Component Source Code');
 process.stdout.write(`0/${components.length} = 0%`);
 const componentCode = {};
 await Promise.all(components.map( async component => {
-  componentCode[component] = await fs.readFile(`./kempo/components/${component}.js`, 'utf-8');
+  componentCode[component] = await fs.readFile(`./src/components/${component}.js`, 'utf-8');
   process.stdout.write("\r");
   complete++;
   process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
@@ -42,14 +42,14 @@ await Promise.all(components.map( async component => {
 process.stdout.write("\n");
 
 console.log('Loading Utils');
-const utils = (await fs.readdir('./kempo/utils/')).map(f=>f.substring(0,f.length-3));
+const utils = (await fs.readdir('./src/utils/')).map(f=>f.substring(0,f.length-3));
 complete = 0;
 
 console.log('Loading Utils Source Code');
 process.stdout.write(`0/${utils.length} = 0%`);
 const utilCode = {};
 await Promise.all(utils.map( async util => {
-  utilCode[util] = await fs.readFile(`./kempo/utils/${util}.js`, 'utf-8');
+  utilCode[util] = await fs.readFile(`./src/utils/${util}.js`, 'utf-8');
   process.stdout.write("\r");
   complete++;
   process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
@@ -94,38 +94,38 @@ console.log('Saving minified main entry file');
 await fs.writeFile('./dist/index.js', minifiedMain, 'utf-8');
 
 console.log('Loading kempo.js');
-const kempoJS = await fs.readFile('./kempo/kempo.js', 'utf-8');
+const kempoJS = await fs.readFile('./src/kempo.js', 'utf-8');
 console.log('Minifying kempo.js');
 const minifiedKempoJs = (await minify(kempoJS)).code;
 console.log('Saving minfiied kempo.js');
 await fs.writeFile('./dist/kempo.js', minifiedKempoJs, 'utf-8');
 
 console.log('Loading kempo-vars.css');
-const kempoVarsCSS = await fs.readFile('./kempo/kempo-vars.css', 'utf-8');
+const kempoVarsCSS = await fs.readFile('./src/kempo-vars.css', 'utf-8');
 console.log('Minifying kempo-vars.css');
 const minifiedKempoVarsCSS = kempoVarsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
 console.log('Saving kempo-vars.css');
 await fs.writeFile('./dist/kempo-vars.css', minifiedKempoVarsCSS, 'utf-8');
 
 console.log('Loading kempo-styles.css');
-const kempoStylesCSS = await fs.readFile('./kempo/kempo-styles.css', 'utf-8');
+const kempoStylesCSS = await fs.readFile('./src/kempo-styles.css', 'utf-8');
 console.log('Minifying kempo-styles.css');
 const miniefiedKempoStylesCSS = kempoStylesCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
 console.log('Saving kempo-styles.css');
 await fs.writeFile('./dist/kempo-styles.css', miniefiedKempoStylesCSS, 'utf-8');
 
 console.log('Loading kempo-hljs.css');
-const kempoHljsCSS = await fs.readFile('./kempo/kempo-hljs.css', 'utf-8');
+const kempoHljsCSS = await fs.readFile('./src/kempo-hljs.css', 'utf-8');
 console.log('Minifying kempo-hljs.css');
 const minifiedKempoHljsCSS = kempoHljsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
 console.log('Saving kempo-hljs.css');
 await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
 
-console.log('Copying dist/ to docs/kempo/');
-await fse.ensureDir('./docs/kempo/icons'); // will also ensure docs/kempo
+console.log('Copying dist/ to docs/src/');
+await fse.ensureDir('./docs/src/icons'); // will also ensure docs/kempo
 await fse.copy('./dist', './docs/kempo')
 
-console.log('Copying icons/ to docs/kempo/icons/');
-await fse.copy('./icons', './docs/kempo/icons')
+console.log('Copying icons/ to docs/src/icons/');
+await fse.copy('./icons', './docs/src/icons')
 
 console.log('Build Complete');

package/scripts/docs.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import cli from '../kempo/utils/cli.js';
+import cli from '../src/utils/cli.js';
 
 const {
  port = 8083

package/{kempo → src}/components/Component.js

@@ -9,7 +9,7 @@ export default class Component extends HTMLElement {
     this.registerAttribute('rendered', false);
   }
   async connectedCallback(){
-    this.render();
+    this.render(true);
   };
   async disconnectedCallback(){};
   async attributeChangedCallback(){};

package/src/components/Toggle.js

@@ -0,0 +1,134 @@
+import Component from './Component.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const clickHandler = Symbol(),
+      keyDownHandler = Symbol();
+export default class Toggle extends Component {
+  constructor(){
+    super();
+
+    this[clickHandler] = () => {
+      this.toggle();
+    }
+    this[keyDownHandler] = ({code}) => {
+      if(['Space', 'Enter'].includes(code)){
+        this.toggle();
+      }
+    }
+
+    this.registerAttributes({
+      value: false
+    });
+
+    this.tabIndex = 0;
+  }
+  connectedCallback(){
+    super.connectedCallback();
+    onEvent(this, 'click', this[clickHandler]);
+    onEvent(this, 'keydown', this[keyDownHandler]);
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this, 'click', this[clickHandler]);
+    offEvent(this, 'keydown', this[keyDownHandler]);
+  }
+  attributeChangedCallback(n, oV, nV){
+    if(n === 'value'){
+      dispatchEvent(this, 'change', { value: nV });
+    }
+  }
+
+  on(){
+    this.value = true;
+    dispatchEvent(this, 'on', { value: true });
+  }
+  off(){
+    this.value = false;
+    dispatchEvent(this, 'on', { value: false });
+  }
+  toggle(){
+    if(this.value) this.off();
+    else this.on();
+    dispatchEvent(this, 'toggle', { value: this.value });
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="switch">
+        <div id="handle"></div>
+      </div>
+      <label id="label">
+        ${super.shadowTemplate}
+      </label>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        --switch_height: 2rem;
+        --switch_width: 3rem;
+        --switch_border: 1px solid var(--c_border);
+        --switch_background__off: var(--c_bg__alt);
+        --switch_background__on: var(--c_success);
+        --handle_size__off: 1rem;
+        --handle_size__on: 1.5rem;
+        --handle_border: 1px solid var(--c_border);
+        --handle_background__off: var(--c_border);
+        --handle_background__on: white;
+
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-bottom: var(--spacer);
+        border-radius: 999rem;
+      }
+      #switch {
+        display: flex;
+        align-items: center;
+        width: var(--switch_width);
+        height: var(--switch_height);
+        border: var(--switch_border);
+        background: var(--switch_background__off);
+        border-radius: 999rem;
+        margin-right: var(--spacer);
+      }
+      #handle {
+        --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);
+        width: var(--handle_size__off);
+        height: var(--handle_size__off);
+        border: var(--handle_border);
+        background: var(--handle_background__off);
+        border-radius: 999rem;
+        transform: translateX(var(--margin));
+        transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);
+      }
+      :host([value="true"]) #switch {
+        background: var(--switch_background__on);
+      }
+      :host([value="true"]) #handle {
+        --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);
+        --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));
+        width: var(--handle_size__on);
+        height: var(--handle_size__on);
+        background: var(--handle_background__on);
+        transform: translateX(var(--d));
+      }
+      #label {
+        display: block;
+        flex: 1 1 auto;
+        padding: 0;
+      }
+    `
+  }
+
+  static observedAttributes = [
+    ...Component.observedAttributes,
+    'value'
+  ];
+}
+window.customElements.define('k-toggle', Toggle);

package/test/index.js

@@ -1,7 +1,7 @@
 import express from 'express';
 import fs from 'fs/promises';
 import path from 'path';
-import cli from '../kempo/utils/cli.js';
+import cli from '../src/utils/cli.js';
 
 const {
  port = 8084

package/test/tests/utils/cli.test.js

@@ -1,4 +1,4 @@
-import cli from '../../kempo/utils/cli.js';
+import cli from '../../src/utils/cli.js';
 
 export const name = 'CLI Tests';
 export const description = 'The CLI function returns an object that contains the key-value pairs of command line arguments passed into the scripts, it supports short codes and flags (they will simply have a true value).';