npm - kempo - Versions diffs - 1.0.0 - Mend

kempo 1.0.0

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

Files changed (194) hide show

package/.gitattributes +2 -0
package/LICENSE +21 -0
package/README.md +2 -0
package/dist/components/Card.js +1 -0
package/dist/components/CodeEditor.js +1 -0
package/dist/components/Component.js +1 -0
package/dist/components/Dialog.js +1 -0
package/dist/components/FocusCapture.js +1 -0
package/dist/components/Icon.js +1 -0
package/dist/components/Import.js +1 -0
package/dist/components/LazyComponent.js +1 -0
package/dist/components/ReactiveComponent.js +1 -0
package/dist/components/ReactiveLazyComponent.js +1 -0
package/dist/components/Resize.js +1 -0
package/dist/components/Search.js +1 -0
package/dist/components/ShowMore.js +1 -0
package/dist/components/SideMenu.js +1 -0
package/dist/components/Split.js +1 -0
package/dist/components/Tabs.js +1 -0
package/dist/components/ThemeSwitcher.js +1 -0
package/dist/components/Timestamp.js +1 -0
package/dist/components/WebSnippetEditor.js +1 -0
package/dist/index.js +1 -0
package/dist/kempo-hljs.css +1 -0
package/dist/kempo-styles.css +1 -0
package/dist/kempo-vars.css +1 -0
package/dist/kempo.css +1 -0
package/dist/kempo.js +1 -0
package/dist/utils/cli.js +1 -0
package/dist/utils/cookie.js +1 -0
package/dist/utils/debounce.js +1 -0
package/dist/utils/drag.js +1 -0
package/dist/utils/element.js +1 -0
package/dist/utils/formatTimestamp.js +1 -0
package/dist/utils/fuzzyMatch.js +1 -0
package/dist/utils/getPreferredTheme.js +1 -0
package/dist/utils/loadCss.js +1 -0
package/dist/utils/loadScript.js +1 -0
package/dist/utils/object.js +1 -0
package/dist/utils/string.js +1 -0
package/dist/utils/toFunction.js +1 -0
package/dist/utils/type.js +1 -0
package/dist/utils/waitFrames.js +1 -0
package/docs/components/_template.html +22 -0
package/docs/components/card.html +35 -0
package/docs/components/codeeditor.html +29 -0
package/docs/components/component.html +88 -0
package/docs/components/dialog.html +89 -0
package/docs/components/icon.html +73 -0
package/docs/components/import.html +34 -0
package/docs/components/lazycomponent.html +50 -0
package/docs/components/resize.html +107 -0
package/docs/components/show-more.html +92 -0
package/docs/components/sidemenu.html +97 -0
package/docs/components/split.html +70 -0
package/docs/components/tabs.html +33 -0
package/docs/components/websnippeteditor.html +42 -0
package/docs/index.html +17 -0
package/docs/kempo/components/Card.js +1 -0
package/docs/kempo/components/CodeEditor.js +1 -0
package/docs/kempo/components/Collapse.js +1 -0
package/docs/kempo/components/Component.js +1 -0
package/docs/kempo/components/Dialog.js +1 -0
package/docs/kempo/components/FocusCapture.js +1 -0
package/docs/kempo/components/Icon.js +1 -0
package/docs/kempo/components/Import.js +1 -0
package/docs/kempo/components/LazyComponent.js +1 -0
package/docs/kempo/components/ReactiveComponent.js +1 -0
package/docs/kempo/components/ReactiveLazyComponent.js +1 -0
package/docs/kempo/components/Resize.js +1 -0
package/docs/kempo/components/Search.js +1 -0
package/docs/kempo/components/ShowMore.js +1 -0
package/docs/kempo/components/SideMenu.js +1 -0
package/docs/kempo/components/Split.js +1 -0
package/docs/kempo/components/Tabs.js +1 -0
package/docs/kempo/components/ThemeSwitcher.js +1 -0
package/docs/kempo/components/Timestamp.js +1 -0
package/docs/kempo/components/WebSnippetEditor.js +1 -0
package/docs/kempo/icons/arrow-down-double.svg +1 -0
package/docs/kempo/icons/arrow-up-double.svg +1 -0
package/docs/kempo/icons/close.svg +2 -0
package/docs/kempo/icons/compare.svg +1 -0
package/docs/kempo/icons/dark-mode.svg +1 -0
package/docs/kempo/icons/delete.svg +1 -0
package/docs/kempo/icons/filter-off.svg +1 -0
package/docs/kempo/icons/filter.svg +1 -0
package/docs/kempo/icons/light-mode.svg +1 -0
package/docs/kempo/icons/menu.svg +1 -0
package/docs/kempo/icons/pause.svg +1 -0
package/docs/kempo/icons/play.svg +1 -0
package/docs/kempo/icons/search.svg +1 -0
package/docs/kempo/icons/settings.svg +1 -0
package/docs/kempo/icons/storage.svg +1 -0
package/docs/kempo/icons/trash-x.svg +1 -0
package/docs/kempo/index.js +1 -0
package/docs/kempo/kempo-hljs.css +1 -0
package/docs/kempo/kempo-styles.css +1 -0
package/docs/kempo/kempo-vars.css +1 -0
package/docs/kempo/kempo.css +1 -0
package/docs/kempo/kempo.js +1 -0
package/docs/kempo/utils/cli.js +1 -0
package/docs/kempo/utils/cookie.js +1 -0
package/docs/kempo/utils/debounce.js +1 -0
package/docs/kempo/utils/drag.js +1 -0
package/docs/kempo/utils/element.js +1 -0
package/docs/kempo/utils/formatTimestamp.js +1 -0
package/docs/kempo/utils/fuzzyMatch.js +1 -0
package/docs/kempo/utils/getPreferredTheme.js +1 -0
package/docs/kempo/utils/loadCss.js +1 -0
package/docs/kempo/utils/loadScript.js +1 -0
package/docs/kempo/utils/object.js +1 -0
package/docs/kempo/utils/string.js +1 -0
package/docs/kempo/utils/toFunction.js +1 -0
package/docs/kempo/utils/type.js +1 -0
package/docs/kempo/utils/waitFrames.js +1 -0
package/docs/nav-1.inc.html +66 -0
package/docs/nav.inc.html +66 -0
package/docs/search.json +94 -0
package/docs/styles/_template.html +22 -0
package/docs/styles/borders-spacing.html +193 -0
package/docs/styles/buttons.html +113 -0
package/docs/styles/colors.html +65 -0
package/docs/styles/displays-layouts.html +156 -0
package/docs/styles/embed-1.html +35 -0
package/docs/styles/inputs.html +89 -0
package/docs/styles/tables.html +143 -0
package/docs/styles/typography.html +116 -0
package/icons/arrow-down-double.svg +1 -0
package/icons/arrow-up-double.svg +1 -0
package/icons/close.svg +2 -0
package/icons/compare.svg +1 -0
package/icons/dark-mode.svg +1 -0
package/icons/delete.svg +1 -0
package/icons/filter-off.svg +1 -0
package/icons/filter.svg +1 -0
package/icons/light-mode.svg +1 -0
package/icons/menu.svg +1 -0
package/icons/pause.svg +1 -0
package/icons/play.svg +1 -0
package/icons/search.svg +1 -0
package/icons/settings.svg +1 -0
package/icons/storage.svg +1 -0
package/icons/trash-x.svg +1 -0
package/kempo/components/Card.js +65 -0
package/kempo/components/CodeEditor.js +141 -0
package/kempo/components/Component.js +109 -0
package/kempo/components/Dialog.js +277 -0
package/kempo/components/FocusCapture.js +30 -0
package/kempo/components/Icon.js +60 -0
package/kempo/components/Import.js +40 -0
package/kempo/components/LazyComponent.js +40 -0
package/kempo/components/ReactiveComponent.js +11 -0
package/kempo/components/ReactiveLazyComponent.js +11 -0
package/kempo/components/Resize.js +168 -0
package/kempo/components/Search.js +136 -0
package/kempo/components/ShowMore.js +82 -0
package/kempo/components/SideMenu.js +156 -0
package/kempo/components/Split.js +133 -0
package/kempo/components/Tabs.js +254 -0
package/kempo/components/ThemeSwitcher.js +77 -0
package/kempo/components/Timestamp.js +25 -0
package/kempo/components/WebSnippetEditor.js +159 -0
package/kempo/kempo-hljs.css +145 -0
package/kempo/kempo-styles.css +893 -0
package/kempo/kempo-vars.css +154 -0
package/kempo/kempo.js +48 -0
package/kempo/utils/cli.js +54 -0
package/kempo/utils/cookie.js +16 -0
package/kempo/utils/debounce.js +9 -0
package/kempo/utils/drag.js +74 -0
package/kempo/utils/element.js +69 -0
package/kempo/utils/formatTimestamp.js +11 -0
package/kempo/utils/fuzzyMatch.js +55 -0
package/kempo/utils/getPreferredTheme.js +1 -0
package/kempo/utils/loadCss.js +10 -0
package/kempo/utils/loadScript.js +10 -0
package/kempo/utils/object.js +177 -0
package/kempo/utils/string.js +54 -0
package/kempo/utils/toFunction.js +24 -0
package/kempo/utils/type.js +8 -0
package/kempo/utils/waitFrames.js +17 -0
package/package.json +33 -0
package/scripts/build.js +131 -0
package/scripts/docs.js +14 -0
package/test/components/SuiteList.js +26 -0
package/test/components/Test.js +357 -0
package/test/index.html +49 -0
package/test/index.js +25 -0
package/test/suite.html +45 -0
package/test/suites.inc.html +4 -0
package/test/tests/components/Component.test.js +138 -0
package/test/tests/utils/cli.test.js +113 -0
package/test/tests/utils/cookie.test.js +87 -0
package/test/tests/utils/debounce.test.js +71 -0

package/docs/components/dialog.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dialog - 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>
+  <main>
+    <h1 class="ta-center">Dialog</h1>
+    <h5>Basic Dialog</h5>
+    <p>Create dialogs using the <code>k-dialog</code> component. Open the dialog by calling the <code>open()</code> method, and close it by calling the <code>close()</code> method. Or it can closed using the dialogs GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</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>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"doument.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
+    <k-dialog id="d1">
+      <p class="p">Hello World</p>
+    </k-dialog>
+    <h5>Titles</h5>
+    <p>Assign an element to the <code>title</code> slot to have it appear as the dialog title.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d2"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span><br />    <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span><br />    <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span><br />  &gt;</span>This is a fact<span class="hljs-tag">&lt;/<span class="hljs-name">h6</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>A hotdog is a sandwhich<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d2" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d2"
+    >
+      <h6
+        class="m0 px"
+        slot="title"
+      >This is a fact</h6>
+      <p class="p">A hotdog is a sandwhich</p>
+    </k-dialog>
+    <h5>Action Buttons</h5>
+    <p>Add a cancel button using the <code>cancel-text</code> attribute.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"d4"</span><br />  <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Absolutly Not"</span><br />&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>Mint and Chocolate belong together<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d4" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d4"
+      cancel-text="Absolutly Not"
+    >
+      <p class="p">Mint and Chocolate belong together</p>
+    </k-dialog>
+    <p>Add a confirm button using the <code>confirm-text</code> attribute.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"d5"</span><br />  <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Confirm"</span><br />&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>Spaghetti is the greatest food<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d5" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d5"
+      confirm-text="Confirm"
+    >
+      <p class="p">Spaghetti is the greatest food</p>
+    </k-dialog>
+    <p>Try it with both a cancel and confirm button.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"d6"</span><br />  <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"It should be outlawed"</span><br />  <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Of course it is"</span><br />&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>Ranch is gross<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
+    <button class="openDialog mb" data-dialog="d6" slot="right">Open Dialog</button>
+    <k-dialog
+      id="d6"
+      cancel-text="It should be outlawed"
+      confirm-text="Of course it is"
+    >
+      <p class="p">Ranch is gross</p>
+    </k-dialog>
+  </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/Dialog.js"></script>
+  <script>
+    document.querySelectorAll('.openDialog').forEach( $btn => {
+      $btn.addEventListener('click', () => {
+        const $dialog = document.getElementById($btn.dataset.dialog);
+        console.log($dialog);
+        if($dialog) $dialog.open();
+      });
+    });
+  </script>
+</body>
+</html>

package/docs/components/icon.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Icon - 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">Icon</h1>
+  <main>
+    <p>Icons are SVG files that live in a directory accessible to your website, by default this is in <code>/kempo/icons</code>. In these examples the "name" is the filename without the file extension (<code>.svg</code>).</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"menu"</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">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"close"</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">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"play"</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">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pause"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <k-icon name="menu"></k-icon>
+          <k-icon name="close"></k-icon>
+          <k-icon name="play"></k-icon>
+          <k-icon name="pause"></k-icon>
+        </k-card>
+      </div>
+    </div>
+    <h3>Explicity set the Source</h3>
+    <p>You can use any svg file that is publically available (on your site or any other public domain) buy using the <code>src</code> attribute instead of <code>name</code>. The code will attempt to ensure compatability.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <k-icon src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"></k-icon>
+        </k-card>
+      </div>
+    </div>
+    <h3>Changing the icon directory location</h3>
+    <p>To change the location of the directory holding the icons import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location, do this before icons are loaded (for example in the head of the document).</p>
+    <pre><code class="hljs xml"><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> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Icon.js'</span>;<br />  Icon.pathToIcons = <span class="hljs-string">'./pathTo/icons'</span>;<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <h3>Adding Icons</h3>
+    <p>Add your SVGs to the directory, remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of <code>currentColor</code>, this will allow the icon to adapt to the font color where it is rendered.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Before">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"24"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"24"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="After">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+  </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/Card.js"></script>
+</body>
+</html>

package/docs/components/import.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Import - 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">Import</h1>
+  <main>
+    <h3>What is an import</h3>
+    <p>Import commonly used HTML snippets.</p>
+    <k-card label="import-me.html">
+      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
+    </k-card>
+    <k-card label="HTML">
+      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
+    </k-card>
+    <k-card label="Results">
+      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span> <span class="hljs-attr">rendered</span>=<span class="hljs-string">"true"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
+    </k-card>
+  </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/Card.js"></script>
+</body>
+</html>

package/docs/components/lazycomponent.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LazyComponent - 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">LazyComponent</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#attributes">Attributes</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+    <h3>Description</h3>
+    <p>This is a base class like <a href="./component.html">component</a> but the <code>render</code> method is not called until the element is visible (in the view), a skeleton is rendered until then.</p>
+    <h3 id="requirements">Requirements</h3>
+    <ul>
+      <li><a href="">Component Class</a></li>
+      <li><a href="">isInView Utility Function</a></li>
+    </ul>
+    <h3 id="constructor">Constructor</h3>
+    <h6>Extends <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a></h6>
+    <h5>
+      <code>super()</code><br />
+      <code>super(<i>Object shadowOptions</i>)</code>
+    </h5>
+    <p>This class <b class="tc-danger">can not</b> be instatiated directly, but rather <b class="tc-success">should be</b> extended, optionally passing in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options" target="_blank">shadowOptions</a>.</p>
+  </main>
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    Icon.pathToIcons = '../kempo/icons';
+  </script>
+  <script type="module" src="../kempo/components/Import.js"></script>
+</body>
+</html>

package/docs/components/resize.html ADDED Viewed

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Resize - 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">Resize</h1>
+  <main>
+    <h3>Basic Usage</h3>
+    <p>Set the initial height and width using normal styles.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />&gt;</span><br />  Resize Me<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*" class="pb">
+          <k-resize
+            style="height: 200px; width: 200px;"
+          >
+            <p class="p">
+              Resize Me
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+    <p>Set the minimum and maximum height and width using normal styles. The default min-height and min-width is <code>10rem</code> and the default max-height and max-width is <code>100%</code>.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"</span><br />&gt;</span><br />  Resize Me<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*" class="pb">
+          <k-resize
+            style="min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"
+          >
+            <p class="p">
+              Resize Me
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+    <h3>Resize Dimention</h3>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />  <span class="hljs-attr">dimention</span>=<span class="hljs-string">"width"</span><br />&gt;</span><br />  Resize Width<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*" class="pb">
+          <k-resize
+            style="height: 200px; width: 200px;"
+            dimention="width"
+          >
+            <p class="p">
+              Resize Width
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />  <span class="hljs-attr">dimention</span>=<span class="hljs-string">"height"</span><br />&gt;</span><br />  Resize Height<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*" class="pb">
+          <k-resize
+            style="height: 200px; width: 200px;"
+            dimention="height"
+          >
+            <p class="p">
+              Resize Height
+            </p>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+    <h3>* Notes</h3>
+    <p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></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/Resize.js"></script>
+</body>
+</html>

package/docs/components/show-more.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ShowMore - 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" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    Icon.pathToIcons = '../kempo/icons';
+  </script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <main>
+    <h1 class="ta-center">Show More</h1>
+    <h3>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-show-more</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-show-more>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
+          </k-show-more>
+        </k-card>
+      </div>
+    </div>
+    <h3>"More" / "Less" Button Text</h3>
+    <p>Change the text of the show "more" or "less" buttons by creating an element that has a <code>slot</code> attribute of <code>"more"</code> or <code>"less"</code>.</p>
+    <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-show-more</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"more"</span>&gt;</span>Reveal Details<span class="hljs-tag">&lt;/<span class="hljs-name">span</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">"less"</span>&gt;</span>Hide Details<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-show-more>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
+            <span slot="more">Reveal Details</span>
+            <span slot="less">Hide Details</span>
+          </k-show-more>
+        </k-card>
+      </div>
+    </div>
+    <h3>Closed Height</h3>
+    <p>Change the height of the closed state by setting the <code>--closed_height</code> CSS Custom Property.</p>
+    <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-show-more</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"--closed_height: 4rem"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-show-more
+            style="--closed_height: 4rem"
+          >
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
+          </k-show-more>
+        </k-card>
+      </div>
+    </div>
+    <h3>Try It Yourself</h3>
+    <k-web-snippet-editor
+      show-css="false"
+      show-js="false"
+      use-kempo="true"
+      scripts="../kempo/components/ShowMore.js"
+    >
+      <pre for="html">&lt;k-show-more style="--closed_height: 10rem">
+  &lt;p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eum pariatur voluptas aspernatur ad laborum nostrum deserunt quo consequuntur, molestias id quos rem cum, distinctio quam obcaecati recusandae ut quod non vel ipsam architecto fuga. Tempore placeat quidem aperiam consectetur optio beatae assumenda dolor corrupti saepe eum, natus doloremque reprehenderit sequi laboriosam suscipit eos esse dolore facilis alias. Pariatur beatae ex suscipit nulla voluptate nobis quisquam alias. Nesciunt unde asperiores iste, praesentium quod cumque. Quos numquam sunt quisquam enim explicabo nobis fugiat, distinctio illum et corporis necessitatibus, ab ullam nesciunt tempora quas totam odio autem. Similique maiores facilis saepe exercitationem dolores, quisquam consequuntur atque in molestiae sint voluptatem. Eveniet vel recusandae sit. Doloribus eum magni cumque animi tempore error dicta dignissimos repellat porro, recusandae iusto quas? Soluta explicabo vitae cupiditate repellat magnam blanditiis, quam animi nihil, totam similique est eum, magni impedit deleniti! Laboriosam explicabo libero laudantium reiciendis autem officia obcaecati eius incidunt earum quibusdam, cumque quasi aspernatur quod at, placeat dolorum, vel illum commodi odit non. Iure adipisci, unde assumenda laboriosam quaerat beatae optio, aliquid tenetur ex nemo velit earum tempore nulla, animi neque nam ipsam quia accusantium enim et quis reprehenderit quas? Labore modi maiores in suscipit laboriosam.&lt;/p>
+  &lt;span slot="more">Show me all the text&lt;/span>
+  &lt;span slot="less">Whoa, that's too much text, hide some&lt;/span>
+&lt;/k-show-more></pre>
+    </k-web-snippet-editor>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../kempo/components/Import.js"></script>
+  <script type="module" src="../kempo/components/ShowMore.js"></script>
+  <script type="module" src="../kempo/components/WebSnippetEditor.js"></script>
+</body>
+</html>

package/docs/components/sidemenu.html ADDED Viewed

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SideMenu - 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">SideMenu</h1>
+  <main>
+    <h3>Basic Usage</h3>
+    <p>Side Menus are closed by default, to open them call the <code>open()</code> method.</p>
+    <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-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</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">"open-sm1"</span>&gt;</span>Open Side Menu 1<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-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm1'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm1'</span>).open();<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-side-menu id="sm1">
+            <p>Side Menu 1</p>
+          </k-side-menu>
+          <button id="open-sm1">Open Side Menu 1</button>
+          <script>
+            document.getElementById('open-sm1').addEventListener('click',()=>{
+              document.getElementById('sm1').open();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+    <h3>Closing</h3>
+    <p>By default clicking on the overlay (the part that covers the page while the Side Menu is open) will close the Side Menu. Use the <code>overlay-close="false"</code> attribute/value to disable this.</p>
+    <p>Use the <code>close()</code> method to close the Side Menu, alternately you can use the <code>toggle()</code> method which can be used to open or close the Side Menu.</p>
+    <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-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm2"</span> <span class="hljs-attr">overlay-close</span>=<span class="hljs-string">"false"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"close-sm2"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</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">"open-sm2"</span>&gt;</span>Open Side Menu 2<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> $sm2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm2'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    $sm2.open();<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'close-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    $sm2.close();<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-side-menu id="sm2" overlay-close="false">
+            <p>Side Menu 2</p>
+            <button id="close-sm2">Close</button>
+          </k-side-menu>
+          <button id="open-sm2">Open Side Menu 2</button>
+          <script>
+            const $sm2 = document.getElementById('sm2');
+            document.getElementById('open-sm2').addEventListener('click',()=>{
+              $sm2.open();
+            });
+            document.getElementById('close-sm2').addEventListener('click',()=>{
+              $sm2.close();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+    <h3>Right Side Menu</h3>
+    <p>Give the menu the <code>side="right"</code> attribute/value to make it open from the right side.</p>
+    <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-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm3"</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</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">"open-sm3"</span>&gt;</span>Open Side Menu 3<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-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm3'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm3'</span>).open();<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-side-menu id="sm3" side="right">
+            <p>Side Menu 3</p>
+          </k-side-menu>
+          <button id="open-sm3">Open Side Menu 3</button>
+          <script>
+            document.getElementById('open-sm3').addEventListener('click',()=>{
+              document.getElementById('sm3').open();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+  </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/SideMenu.js"></script>
+</body>
+</html>