npm - kempo-ui - Versions diffs - 0.0.13 → 0.0.15 - Mend

kempo-ui 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/docs/components/persistant-collapsible.html DELETED Viewed

@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PersistantCollapsible - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <main>
-    <h1 class="ta-center">PersistantCollapsible</h1>
-    <details class="b r mb">
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Examples</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#customLabel">Custom Label</a><br />
-        <a href="#customIcon">Custom Icon</a><br />
-        <h6 class="mt">JavaScript Reference</h6>
-        <a href="#constructor">Constructor</a><br />
-        <a href="#requirements">Requirements</a><br />
-        <a href="#properties">Properties</a><br />
-        <a href="#methods">Methods</a><br />
-      </div>
-    </details>
-    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>The <code>k-p-collapsible</code> component extends the regular <code>k-collapsible</code> with automatic state persistence using localStorage. The component remembers its opened/closed state and restores it when the page is reloaded or reopened.</p>
-    <p><strong>Important:</strong> The component requires an <code>id</code> attribute to function properly, as this is used as the localStorage key.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Persistent Section<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>This content's visibility state will be remembered across page reloads.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-p-collapsible</span>&gt;</span></code></pre>
-    <k-p-collapsible id="example1" class="mb">
-      <span slot="label">Persistent Section</span>
-      <p class="p">This content's visibility state will be remembered across page reloads. Try expanding/collapsing it and then refreshing the page.</p>
-    </k-p-collapsible>
-    <h3 id="customLabel"><a href="#customLabel" class="no-link">Custom Label</a></h3>
-    <p>You can customize the label using the <code>label</code> slot, just like with regular collapsible components.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span> Enable notifications<br />    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span> Auto-save<br />    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-p-collapsible</span>&gt;</span></code></pre>
-    <k-p-collapsible id="example2" class="mb">
-      <h4 slot="label" class="m0">Settings</h4>
-      <div class="p">
-        <label>
-          <input type="checkbox"> Enable notifications
-        </label><br>
-        <label>
-          <input type="checkbox"> Auto-save
-        </label>
-      </div>
-    </k-p-collapsible>
-    <h3 id="customIcon"><a href="#customIcon" class="no-link">Custom Icon</a></h3>
-    <p>Override the default chevron icon using the <code>icon</code> slot.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Advanced Options<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"settings"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Advanced configuration options with persistent state.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-p-collapsible</span>&gt;</span></code></pre>
-    <k-p-collapsible id="example3" class="mb">
-      <span slot="label">Advanced Options</span>
-      <k-icon name="settings" slot="icon"></k-icon>
-      <p class="p">Advanced configuration options with persistent state.</p>
-    </k-p-collapsible>
-    <h2 id="jsRef">JavaScript Reference</h2>
-    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./collapsible.html">Collapsible</a></h6>
-    <h5>
-      <code>new PersistantCollapsible()</code>
-    </h5>
-    <p>Creates a new PersistantCollapsible instance. The constructor takes no parameters.</p>
-    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
-    <ul>
-      <li><a href="./collapsible.html">Collapsible</a></li>
-    </ul>
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <p>Inherits all properties from <a href="./collapsible.html">Collapsible</a>:</p>
-    <h5><code>opened<i>: boolean</i></code></h5>
-    <p>Whether the collapsible is opened. This state is automatically persisted to localStorage. Syncs to <code>opened</code> attribute.</p>
-    <h5><code>id<i>: string</i></code> <strong>(Required)</strong></h5>
-    <p>A unique identifier for the component. This is used as the localStorage key and must be present for persistence to work. Syncs to <code>id</code> attribute.</p>
-    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <p>Inherits all methods from <a href="./collapsible.html">Collapsible</a>:</p>
-    <h5><code>open()<i>: void</i></code></h5>
-    <p>Opens the collapsible and saves the state to localStorage.</p>
-    <h5><code>close()<i>: void</i></code></h5>
-    <p>Closes the collapsible and saves the state to localStorage.</p>
-    <h5><code>toggle()<i>: void</i></code></h5>
-    <p>Toggles the collapsible open or closed and saves the state to localStorage.</p>
-    <h4>Storage Behavior</h4>
-    <p>The component automatically:</p>
-    <ul>
-      <li>Loads its state from localStorage when connected to the DOM</li>
-      <li>Saves its state to localStorage whenever the <code>opened</code> property changes</li>
-      <li>Synchronizes state across browser tabs using storage events</li>
-      <li>Uses the storage key format: <code>PersistantCollapsible-{id}</code></li>
-    </ul>
-  </main>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/PersistantCollapsible.js"></script>
-</body>
-</html>

package/docs/components/toast.html DELETED Viewed

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Toast - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <h1 class="ta-center">Toast</h1>
-  <main>
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Examples</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#positions">Different Positions</a><br />
-        <a href="#timeouts">Timeouts</a><br />
-        <a href="#actionAndClose">Action and Close Buttons</a><br />
-        <h6 class="mt">JavaScript Reference</h6>
-        <a href="#constructor">Constructor</a><br />
-        <a href="#staticMethods">Static Methods</a><br />
-        <a href="#requirements">Requirements</a><br />
-        <a href="#properties">Properties</a><br />
-        <a href="#methods">Methods</a><br />
-        <a href="#events">Events</a><br />
-        <a href="#toastContainer">ToastContainer</a><br />
-      </div>
-    </details>
-    <h3>Description</h3>
-    <p>The Toast component provides a way to display short-lived notifications to users. Toasts appear in a corner of the screen, can be configured with different positions, and can optionally include action and close buttons. Toasts can be set to automatically close after a specified timeout or remain until manually dismissed.</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-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>Open Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br />    Toast.create(<span class="hljs-string">"Hello World"</span>);<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-      </div>
-      <div class="col d-span-6 t-span-6 m-span-12 px">
-        <button id="example1" class="mb">Open Toast</button>
-        <script type="module" src="./init.js"></script>
-  <script type="module" src="../src/components/Toast.js"></script>
-</body>
-</html>

package/docs/init.js DELETED Viewed

@@ -1,7 +0,0 @@
-import Import from './src/components/Import.js';
-import Icon from './src/components/Icon.js';
-import ShadowComponent from './src/components/ShadowComponent.js';
-Import.replacements.root = './';
-Icon.pathToIcons = ['./icons'];
-ShadowComponent.stylesheetPath = './kempo.min.css';

package/docs/kempo-vars.css DELETED Viewed

File without changes

package/docs/kempo.css DELETED Viewed

@@ -1 +0,0 @@

- :root{color-scheme:light;--ff_body:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_heading:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_mono:Consolas,monaco,monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--btn_padding:var(--spacer_h) var(--spacer);--c_bg:light-dark(rgb(249, 249, 249), rgb(51, 51, 51));--c_bg__inv:light-dark(rgb(51, 51, 51), rgb(249, 249, 249));--c_bg__alt:light-dark(rgb(238, 238, 238), rgb(34, 34, 34));--c_overscroll:light-dark(rgb(255, 255, 255), rgb(0, 0, 0));--c_border:light-dark(rgb(204, 204, 204), rgb(119, 119, 119));--c_border__inv:light-dark(var(--d_c_bg_border), rgb(204, 204, 204));--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_input_border:var(--c_border);--c_highlight:light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25));--tc:light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93));--tc_dark:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--tc_light:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_inv:light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93));--tc_muted:light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));--tc_on_primary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_secondary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_success:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_warning:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_danger:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:light-dark(#36f, rgb(138, 180, 248));--tc_secondary:light-dark(#93f, rgb(187, 102, 255));--tc_success:light-dark(#080, rgb(102, 187, 102));--tc_warning:light-dark(#f60, rgb(255, 153, 51));--tc_danger:light-dark(#f03, rgb(255, 85, 119));--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:light-dark(rgb(221, 221, 221), rgb(170, 170, 170));--btn_bg__hover:light-dark(rgb(204, 204, 204), rgb(187, 187, 187));--btn_tc:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--btn_transparent__hover:light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:light-dark(white, var(--c_bg__alt));--input_tc:light-dark(rgba(0, 0, 0, 0.93), var(--tc));--drop_shadow:light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));--date_picker_icon_filter:light-dark(invert(0), invert(1))}[theme=light]{color-scheme:light}[theme=dark]{color-scheme:dark}[theme=auto]{color-scheme:light dark}:root{interpolate-size:allow-keywords}*,::after,::before{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}blockquote,body,code,dd,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,p,pre,ul{margin:0;padding:.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}.container,main{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav>.link,nav>a{display:inline-block;padding:var(--spacer)!important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}.d-b{display:block!important}.d-ib{display:inline-block!important}.d-g{display:grid!important}.d-i{display:inline!important}.d-n{display:none!important}.d-f{display:flex!important;flex-wrap:wrap}.d-if{display:inline-flex!important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-f{display:flex!important;flex-wrap:wrap}.d-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-f{display:flex!important;flex-wrap:wrap}.t-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-f{display:flex!important;flex-wrap:wrap}.m-d-if{display:inline-flex!important;flex-wrap:wrap}}.flex,.flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-if{display:inline-flex!important;flex-wrap:wrap}.d-d-f{display:flex!important;flex-wrap:wrap}.d-flex,.d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-if{display:inline-flex!important;flex-wrap:wrap}.t-d-f{display:flex!important;flex-wrap:wrap}.t-flex,.t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-if{display:inline-flex!important;flex-wrap:wrap}.m-d-f{display:flex!important;flex-wrap:wrap}.m-flex,.m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}.small,small{font-size:var(--fs_small)!important}.large{font-size:var(--fs_large)!important}.h1,.h2,.h3,.h4,.h5,.h6,b,h1,h2,h3,h4,h5,h6,strong{font-weight:var(--fw_bold)}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:var(--ff_heading)}.h1,h1{font-size:var(--fs_h1)}.h2,h2{font-size:var(--fs_h2)}.h3,h3{font-size:var(--fs_h3)}.h4,h4{font-size:var(--fs_h4)}.h5,h5{font-size:var(--fs_h5)}.h6,h6{font-size:var(--fs_h6)}blockquote,dd,dl,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin-bottom:var(--spacer)}dl,ol,ul{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono,code,pre{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.link,a{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms),box-shadow var(--animation_ms);outline:0;border-radius:var(--radius);text-decoration:var(--link_decoration)}.link:hover,a:hover{color:var(--tc_link__hover)}.link:focus-visible,a:focus{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:.75em}dl{padding:0;margin:0}dd,dt{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd+dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}.p,.pt,.py{padding-top:var(--spacer)!important}.p,.pr,.px{padding-right:var(--spacer)!important}.p,.pb,.py{padding-bottom:var(--spacer)!important}.p,.pl,.px{padding-left:var(--spacer)!important}.ph,.pth,.pyh{padding-top:var(--spacer_h)!important}.ph,.prh,.pxh{padding-right:var(--spacer_h)!important}.pbh,.ph,.pyh{padding-bottom:var(--spacer_h)!important}.ph,.plh,.pxh{padding-left:var(--spacer_h)!important}.pq,.ptq,.pyq{padding-top:var(--spacer_q)!important}.pq,.prq,.pxq{padding-right:var(--spacer_q)!important}.pbq,.pq,.pyq{padding-bottom:var(--spacer_q)!important}.plq,.pq,.pxq{padding-left:var(--spacer_q)!important}.p0,.pt0,.py0{padding-top:.1px!important}.p0,.pr0,.px0{padding-right:.1px!important}.p0,.pb0,.py0{padding-bottom:.1px!important}.p0,.pl0,.px0{padding-left:.1px!important}.m,.mt,.my{margin-top:var(--spacer)!important}.m,.mr,.mx{margin-right:var(--spacer)!important}.m,.mb,.my{margin-bottom:var(--spacer)!important}.m,.ml,.mx{margin-left:var(--spacer)!important}.mh,.mth,.myh{margin-top:var(--spacer_h)!important}.mh,.mrh,.mxh{margin-right:var(--spacer_h)!important}.mbh,.mh,.myh{margin-bottom:var(--spacer_h)!important}.mh,.mlh,.mxh{margin-left:var(--spacer_h)!important}.mq,.mtq,.myq{margin-top:var(--spacer_q)!important}.mq,.mrq,.mxq{margin-right:var(--spacer_q)!important}.mbq,.mq,.myq{margin-bottom:var(--spacer_q)!important}.mlq,.mq,.mxq{margin-left:var(--spacer_q)!important}.m0,.mt0,.my0{margin-top:0!important}.m0,.mr0,.mx0{margin-right:0!important}.m0,.mb0,.my0{margin-bottom:0!important}.m0,.ml0,.mx0{margin-left:0!important}.-m,.-mt,.-my{margin-top:calc(-1 * var(--spacer))!important}.-m,.-mr,.-mx{margin-right:calc(-1 * var(--spacer))!important}.-m,.-mb,.-my{margin-bottom:calc(-1 * var(--spacer))!important}.-m,.-ml,.-mx{margin-left:calc(-1 * var(--spacer))!important}.b,.bt,.by{border-top:1px solid var(--c_border)!important}.b,.br,.bx{border-right:1px solid var(--c_border)!important}.b,.bb,.by{border-bottom:1px solid var(--c_border)!important}.b,.bl,.bx{border-left:1px solid var(--c_border)!important}.b0,.bt0,.by0{border-top:none!important}.b0,.br0,.bx0{border-right:none!important}.b0,.bb0,.by0{border-bottom:none!important}.b0,.bl0,.bx0{border-left:none!important}.r,.rl,.rt,.rtl{border-top-left-radius:var(--radius)!important}.r,.rr,.rt,.rtr{border-top-right-radius:var(--radius)!important}.r,.rb,.rbr,.rr{border-bottom-right-radius:var(--radius)!important}.r,.rb,.rbl,.rl{border-bottom-left-radius:var(--radius)!important}.r0,.rl0,.rt0,.rtl0{border-top-left-radius:0!important}.r0,.rr0,.rt0,.rtr0{border-top-right-radius:0!important}.r0,.rb0,.rbr0,.rr0{border-bottom-right-radius:0!important}.r0,.rb0,.rbl0,.rl0{border-bottom-left-radius:0!important}.round{border-radius:9999rem!important}.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2,1fr)}.d-cols-3{grid-template-columns:repeat(3,1fr)}.d-cols-4{grid-template-columns:repeat(4,1fr)}.d-cols-5{grid-template-columns:repeat(5,1fr)}.d-cols-6{grid-template-columns:repeat(6,1fr)}.d-cols-7{grid-template-columns:repeat(7,1fr)}.d-cols-8{grid-template-columns:repeat(8,1fr)}.d-cols-9{grid-template-columns:repeat(9,1fr)}.d-cols-10{grid-template-columns:repeat(10,1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2,1fr)}.t-cols-3{grid-template-columns:repeat(3,1fr)}.t-cols-4{grid-template-columns:repeat(4,1fr)}.t-cols-5{grid-template-columns:repeat(5,1fr)}.t-cols-6{grid-template-columns:repeat(6,1fr)}.t-cols-7{grid-template-columns:repeat(7,1fr)}.t-cols-8{grid-template-columns:repeat(8,1fr)}.t-cols-9{grid-template-columns:repeat(9,1fr)}.t-cols-10{grid-template-columns:repeat(10,1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2,1fr)}.m-cols-3{grid-template-columns:repeat(3,1fr)}.m-cols-4{grid-template-columns:repeat(4,1fr)}.m-cols-5{grid-template-columns:repeat(5,1fr)}.m-cols-6{grid-template-columns:repeat(6,1fr)}.m-cols-7{grid-template-columns:repeat(7,1fr)}.m-cols-8{grid-template-columns:repeat(8,1fr)}.m-cols-9{grid-template-columns:repeat(9,1fr)}.m-cols-10{grid-template-columns:repeat(10,1fr)}}.btn,button:not(.no-btn):not(.no-style),input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:0;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms),box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}.btn:hover,button:not(.no-btn):not(.no-style):hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}.btn:focus,button:not(.no-btn):not(.no-style):focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--btn_box_shadow__hover),var(--focus_shadow);z-index:1}.btn[disabled],button:not(.no-btn):not(.no-style):disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{opacity:.6}.btn.primary,button:not(.no-btn).primary,input[type=button].primary,input[type=reset].primary,input[type=submit].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}.btn.primary:hover,button:not(.no-btn).primary:hover,input[type=button].primary:hover,input[type=reset].primary:hover,input[type=submit].primary:hover{background-color:var(--c_primary__hover)}.btn.secondary,button:not(.no-btn).secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}.btn.secondary:hover,button:not(.no-btn).secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover{background-color:var(--c_secondary__hover)}.btn.success,button:not(.no-btn).success,input[type=button].success,input[type=reset].success,input[type=submit].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}.btn.success:hover,button:not(.no-btn).success:hover,input[type=button].success:hover,input[type=reset].success:hover,input[type=submit].success:hover{background-color:var(--c_success__hover)}.btn.warning,button:not(.no-btn).warning,input[type=button].warning,input[type=reset].warning,input[type=submit].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}.btn.warning:hover,button:not(.no-btn).warning:hover,input[type=button].warning:hover,input[type=reset].warning:hover,input[type=submit].warning:hover{background-color:var(--c_warning__hover)}.btn.danger,button:not(.no-btn).danger,input[type=button].danger,input[type=reset].danger,input[type=submit].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}.btn.danger:hover,button:not(.no-btn).danger:hover,input[type=button].danger:hover,input[type=reset].danger:hover,input[type=submit].danger:hover{background-color:var(--c_danger__hover)}.btn.link,button:not(.no-btn):not(.no-style).link,input[type=button].link,input[type=reset].link,input[type=submit].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp .btn:not(:first-child),.btn-grp button:not(.no-btn):not(:first-child),.btn-grp input[type=button]:not(:first-child),.btn-grp input[type=reset]:not(:first-child),.btn-grp input[type=submit]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.25)}.btn-grp .btn:not(:last-child),.btn-grp button:not(.no-btn):not(:last-child),.btn-grp input[type=button]:not(:last-child),.btn-grp input[type=reset]:not(:last-child),.btn-grp input[type=submit]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:0;transition:box-shadow var(--animation_ms)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):focus,input[type=checkbox]:focus,input[type=radio]:focus,select:focus,textarea:focus{box-shadow:var(--focus_shadow)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):disabled,input[type=checkbox]:disabled,input[type=radio]:disabled,select:disabled,textarea:disabled{opacity:.6}select[multiple],textarea{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type=checkbox],input[type=radio]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:0;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type=color]{padding:0!important;height:2.35em}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:var(--radius,.25rem);cursor:pointer}input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=time]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{filter:var(--date_picker_icon_filter)}.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}td,th{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}td:last-child,th:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.bg-inv .tc-primary,.is-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.bg-inv .tc-secondary,.is-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.bg-inv .tc-success,.is-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.bg-inv .tc-warning,.is-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.bg-inv .tc-danger,.is-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}

package/docs/nav.inc.html DELETED Viewed

@@ -1,69 +0,0 @@
-<nav
-  class="d-f bg-primary fixed"
->
-  <button
-    id="toggleNavSideMenu"
-    class="link"
-  >
-    <k-icon name="menu"></k-icon>
-  </button>
-  <a href="%%root%%">Home</a>
-  <div class="flex"></div>
-  <k-theme-switcher></k-theme-switcher>
-</nav>
-<div style="width: 100%; height: 4rem;"></div>
-<k-side-menu
-  id="navSideMenu"
->
-  <h1>Kempo Docs</h1>
-  <menu>
-    <a href="%%root%%" class="h5 pl0 mb">Home</a>
-    <div class="pl mb">
-      <h3>Components</h3>
-      <a href="%%root%%components/accordion.html">Accordion</a>
-      <a href="%%root%%components/card.html">Card</a>
-      <a href="%%root%%components/collapsible.html">Collapsible</a>
-      <a href="%%root%%components/persistant-collapsible.html">PersistantCollapsible</a>
-      <a href="%%root%%components/content-slider.html">Content Slider</a>
-      <a href="%%root%%components/dialog.html">Dialog</a>
-      <a href="%%root%%components/focus-capture.html">FocusCapture</a>
-      <a href="%%root%%components/icon.html">Icon</a>
-      <a href="%%root%%components/import.html">Import</a>
-      <a href="%%root%%components/photo-viewer.html">Photo Viewer</a>
-      <a href="%%root%%components/resize.html">Resize</a>
-      <a href="%%root%%components/show-more.html">Show More</a>
-      <a href="%%root%%components/side-menu.html">Side Menu</a>
-      <a href="%%root%%components/sortable.html">Sortable</a>
-      <a href="%%root%%components/split.html">Split</a>
-      <a href="%%root%%components/table.html">Table</a>
-      <a href="%%root%%components/tabs.html">Tabs</a>
-      <a href="%%root%%components/tags.html">Tags</a>
-      <a href="%%root%%components/toast.html">Toast</a>
-      <a href="%%root%%components/theme-switcher.html">Theme Switcher</a>
-      <a href="%%root%%components/timestamp.html">Timestamp</a>
-      <a href="%%root%%components/toggle.html">Toggle</a>
-      <a href="%%root%%components/tree.html">Tree</a>
-    </div>
-    <h5 class="mb0">Base Components</h5>
-    <div class="pl mb">
-      <a href="%%root%%components/shadow-component.html">Shadow Component</a>
-      <a href="%%root%%components/light-component.html">Light Component</a>
-      <a href="%%root%%components/hybrid-component.html">Hybrid Component</a>
-    </div>
-    <h5 class="mb0">Utils</h5>
-    <div class="pl mb">
-      <a href="%%root%%utils/debounce.html">debounce</a>
-      <a href="%%root%%utils/drag.html">drag</a>
-      <a href="%%root%%utils/formatTimestamp.html">formatTimestamp</a>
-      <a href="%%root%%utils/propConverters.html">propConverters</a>
-      <a href="%%root%%utils/toTitleCase.html">toTitleCase</a>
-      <a href="%%root%%utils/watchWindowSize.html">watchWindowSize</a>
-    </div>
-  </menu>
-</k-side-menu>
-<script src="%%root%%src/components/SideMenu.js" type="module"></script>
-<script src="%%root%%src/components/Icon.js" type="module"></script>
-<script src="%%root%%src/components/ThemeSwitcher.js" type="module"></script>
-<script src="%%root%%nav.inc.js" type="module"></script>

package/docs/utils/debounce.html DELETED Viewed

@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>debounce - Kempo UI</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <main>
-    <h1>debounce</h1>
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Usage</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#parameters">Parameters</a><br />
-        <a href="#examples">Examples</a><br />
-      </div>
-    </details>
-    <h3>Description</h3>
-    <p>The <code>debounce</code> utility function limits the rate at which a function can be executed. It delays the execution of a function until after a specified timeout has passed since the last time it was invoked.</p>
-    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Import and use the debounce function to limit function execution frequency:</p>
-    <pre><code class="hljs javascript">import debounce from './utils/debounce.js';
-const handleSearch = debounce((query) => {
-  console.log('Searching for:', query);
-}, 300);
-// Will only execute after 300ms of no calls
-handleSearch('test');</code></pre>
-    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
-    <h5><code>func<i>: Function</i></code></h5>
-    <p>The function to debounce.</p>
-    <h5><code>timeout<i>: number</i></code> (optional)</h5>
-    <p>The number of milliseconds to delay execution. Defaults to 300ms.</p>
-    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
-    <h4>Search Input Debouncing</h4>
-    <pre><code class="hljs javascript">const debouncedSearch = debounce((searchTerm) => {
-  // API call or expensive search operation
-  performSearch(searchTerm);
-}, 500);
-searchInput.addEventListener('input', (e) => {
-  debouncedSearch(e.target.value);
-});</code></pre>
-    <h4>Window Resize Handler</h4>
-    <pre><code class="hljs javascript">const debouncedResize = debounce(() => {
-  // Expensive layout calculations
-  recalculateLayout();
-}, 250);
-window.addEventListener('resize', debouncedResize);</code></pre>
-  </main>
-  <div style="height:33vh"></div>
-</body>
-</html>

package/docs/utils/init.js DELETED Viewed

@@ -1,8 +0,0 @@
-import Import from '../src/components/Import.js';
-import Icon from '../src/components/Icon.js';
-import ShadowComponent from '../src/components/ShadowComponent.js';
-Import.replacements.root = '../';
-Icon.pathToIcons = ['../icons'];
-ShadowComponent.stylesheetPath = '../kempo.min.css';

package/docs/utils/propConverters.html DELETED Viewed

@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>propConverters - Kempo UI</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <main>
-    <h1>propConverters</h1>
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Usage</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#boolTrueFalse">boolTrueFalse</a><br />
-        <a href="#boolExists">boolExists</a><br />
-        <a href="#examples">Examples</a><br />
-      </div>
-    </details>
-    <h3>Description</h3>
-    <p>The <code>propConverters</code> module provides Lit Element property converters for handling boolean attributes in web components. These converters manage the conversion between JavaScript boolean values and HTML attribute strings.</p>
-    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Import and use the converters in your Lit Element component properties:</p>
-    <pre><code class="hljs javascript">import { boolTrueFalse, boolExists } from './utils/propConverters.js';
-static properties = {
-  enabled: { type: Boolean, reflect: true, converter: boolTrueFalse },
-  visible: { type: Boolean, reflect: true, converter: boolExists }
-};</code></pre>
-    <h3 id="boolTrueFalse"><a href="#boolTrueFalse" class="no-link">boolTrueFalse</a></h3>
-    <p>Converts between boolean values and explicit "true"/"false" string attributes.</p>
-    <h4>Behavior</h4>
-    <ul>
-      <li><strong>fromAttribute:</strong> "true" → true, "false" → false, null → undefined</li>
-      <li><strong>toAttribute:</strong> true → "true", false → "false"</li>
-    </ul>
-    <h4>HTML Usage</h4>
-    <pre><code class="hljs xml">&lt;my-component enabled="true"&gt;&lt;/my-component&gt;
-&lt;my-component enabled="false"&gt;&lt;/my-component&gt;</code></pre>
-    <h3 id="boolExists"><a href="#boolExists" class="no-link">boolExists</a></h3>
-    <p>Converts between boolean values and attribute presence/absence.</p>
-    <h4>Behavior</h4>
-    <ul>
-      <li><strong>fromAttribute:</strong> attribute present → true, attribute absent → false</li>
-      <li><strong>toAttribute:</strong> true → "", false → null (removes attribute)</li>
-    </ul>
-    <h4>HTML Usage</h4>
-    <pre><code class="hljs xml">&lt;my-component visible&gt;&lt;/my-component&gt;        &lt;!-- visible = true --&gt;
-&lt;my-component&gt;&lt;/my-component&gt;              &lt;!-- visible = false --&gt;</code></pre>
-    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
-    <h4>Component with Both Converters</h4>
-    <pre><code class="hljs javascript">import { LitElement, html } from 'lit';
-import { boolTrueFalse, boolExists } from './utils/propConverters.js';
-class MyComponent extends LitElement {
-  static properties = {
-    autoplay: { type: Boolean, reflect: true, converter: boolTrueFalse },
-    hidden: { type: Boolean, reflect: true, converter: boolExists },
-    loop: { type: Boolean, reflect: true, converter: boolTrueFalse }
-  };
-  constructor() {
-    super();
-    this.autoplay = false;
-    this.hidden = false;
-    this.loop = false;
-  }
-  render() {
-    return html`
-      &lt;div ?hidden="${this.hidden}"&gt;
-        Content ${this.autoplay ? 'with' : 'without'} autoplay
-        ${this.loop ? '(looping)' : ''}
-      &lt;/div&gt;
-    `;
-  }
-}</code></pre>
-    <h4>HTML Usage Examples</h4>
-    <pre><code class="hljs xml">&lt;!-- Using boolTrueFalse converter --&gt;
-&lt;my-component autoplay="true" loop="false"&gt;&lt;/my-component&gt;
-&lt;!-- Using boolExists converter --&gt;
-&lt;my-component hidden&gt;&lt;/my-component&gt;
-&lt;!-- Combined usage --&gt;
-&lt;my-component autoplay="true" loop="true" hidden&gt;&lt;/my-component&gt;</code></pre>
-    <h4>When to Use Each Converter</h4>
-    <p><strong>Use boolTrueFalse when:</strong></p>
-    <ul>
-      <li>You need explicit true/false values in HTML</li>
-      <li>The attribute value is important for clarity</li>
-      <li>Working with form controls or interactive elements</li>
-    </ul>
-    <p><strong>Use boolExists when:</strong></p>
-    <ul>
-      <li>Following HTML standards (like hidden, disabled attributes)</li>
-      <li>The presence of the attribute is what matters</li>
-      <li>Creating more semantic HTML</li>
-    </ul>
-  </main>
-  <div style="height:33vh"></div>
-</body>
-</html>