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/styles/colors.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Colors - 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">Colors</h1>
+  <main>
+    <h3>Background</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span>&gt;</span>Alternate<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-inv"</span>&gt;</span>Inverse<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <div class="bg-alt d-ib mq p">Alternate</div>
+          <div class="bg-inv d-ib mq p">Inverse</div>
+          <div class="bg-primary d-ib mq p">Primary</div>
+          <div class="bg-secondary d-ib mq p">Secondary</div>
+          <div class="bg-success d-ib mq p">Success</div>
+          <div class="bg-warning d-ib mq p">Warning</div>
+          <div class="bg-danger d-ib mq p">Danger</div>
+        </k-card>
+      </div>
+    </div>
+    <h3>Text Colors</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">p</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"tc-muted"</span>&gt;</span>Muted<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color:#999"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span>&gt;</span>Inverse<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"tc-primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"tc-secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"tc-success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"tc-warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"tc-danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <p>Normal</p>
+          <p class="tc-muted">Muted</p>
+          <p style="background-color:#999" class="tc-inv">Inverse</p>
+          <p class="tc-primary">Primary</p>
+          <p class="tc-secondary">Secondary</p>
+          <p class="tc-success">Success</p>
+          <p class="tc-warning">Warning</p>
+          <p class="tc-danger">Danger</p>
+        </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>
+  <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/styles/displays-layouts.html ADDED Viewed

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Displays and Layouts - Kempo - 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">Displays and Layouts</h1>
+  <main style="margin-bottom: 33vh">
+    <h3>Display</h3>
+    <div class="table-wrapper mb" style="max-width:30rem">
+      <table>
+        <thead>
+          <tr>
+            <th>Class</th>
+            <th>Display Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>d-b</code></td>
+            <td>block</td>
+          </tr>
+          <tr>
+            <td><code>d-ib</code></td>
+            <td>inline-block</td>
+          </tr>
+          <tr>
+            <td><code>d-i</code></td>
+            <td>inline</td>
+          </tr>
+          <tr>
+            <td><code>d-f</code></td>
+            <td>flex</td>
+          </tr>
+          <tr>
+            <td><code>d-if</code></td>
+            <td>inline-flex</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <h3>Flex Values</h3>
+    <p>Use classes <code>flex-1</code> through <code>flex-10</code> to assign a flex value to a flexed child (parent has a flex display. Flex values will flex relative to each other's values.</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100px"</span>&gt;</span><br />    100px<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><br />    flex<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</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">"flex"</span>&gt;</span><br />    flex<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><br />    flex<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</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">"flex"</span>&gt;</span><br />    flex<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-2"</span>&gt;</span><br />    flex-2<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</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">"flex"</span>&gt;</span><br />    flex<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-3"</span>&gt;</span><br />    flex-3<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <h6>Output*</h6>
+        <k-resize dimention="width">
+          <div class="d-f mx mt">
+            <div
+              style="width: 100px"
+              class="b p"
+            >
+              100px
+            </div>
+            <div class="b p flex">
+              flex
+            </div>
+          </div>
+          <div class="d-f mx">
+            <div class="b p flex">
+              flex
+            </div>
+            <div class="b p flex">
+              flex
+            </div>
+          </div>
+          <div class="d-f mx">
+            <div class="b p flex">
+              flex
+            </div>
+            <div class="b p flex-2">
+              flex-2
+            </div>
+          </div>
+          <div class="d-f mx mb">
+            <div class="b p flex">
+              flex
+            </div>
+            <div class="b p flex-3">
+              flex-3
+            </div>
+          </div>
+        </k-resize>
+      </div>
+    </div>
+    <h3>12 Column Grid</h3>
+    <p>Create a parent with class <code>row</code> and children with class <code>col</code>, optionally add <code>span-*</code> classes (1-12).</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</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">"col"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</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">"col span-4"</span>&gt;</span>col span-4<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-8"</span>&gt;</span>col span-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <h6>Output*</h6>
+        <k-resize dimention="width">
+          <div class="row m">
+            <div class="col b p">col</div>
+            <div class="col b p">col</div>
+            <div class="col b p">col</div>
+          </div>
+          <div class="row m">
+            <div class="col span-4 b p">col span-4</div>
+            <div class="col span-8 b p">col span-8</div>
+          </div>
+        </k-resize>
+      </div>
+    </div>
+    <h5>Responsive 12 Column Grid</h5>
+    <p>Optionally use <code>d-span-*</code> for desktop, <code>t-span-*</code> for tablet, and <code>m-span-*</code> for mobile to make the grid responsive.</p>
+    <k-card label="HTML">
+      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</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">"col d-span-3 t-span-6 m-span-12"</span>&gt;</span><br />    col d-span-3 t-span-6 m-span-12<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>&gt;</span><br />    col d-span-3 t-span-6 m-span-12<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>&gt;</span><br />    col d-span-3 t-span-6 m-span-12<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>&gt;</span><br />    col d-span-3 t-span-6 m-span-12<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+    </k-card>
+    <h6>Output*</h6>
+    <k-resize dimention="width" style="height: 300px" class="mb">
+      <iframe src="./embed-1.html" style="height: 298px"></iframe>
+    </k-resize>
+    <h5>Alternative Responsive 12 Column Grid</h5>
+    <p>Rather than declairing a size for device sizes, you should consider just giving each section a <code>min-width</code> that correspondes to the minumum space it requires to be useable, and let Kempo do the rest.</p>
+    <k-card label="HTML">
+      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span> <span class="hljs-attr">dimention</span>=<span class="hljs-string">"width"</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">"row"</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">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 150px"</span>&gt;</span>col, min-width: 150px<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 200px"</span>&gt;</span>col, min-width: 200px<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 300px"</span>&gt;</span>col, min-width: 300px<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
+    </k-card>
+    <h6>Output*</h6>
+    <k-resize style="min-width: 350px" dimention="width" class="mb">
+      <div class="row m">
+        <div class="col b p" style="min-width: 150px">col, min-width: 150px</div>
+        <div class="col b p" style="min-width: 200px">col, min-width: 200px</div>
+        <div class="col b p" style="min-width: 300px">col, min-width: 300px</div>
+      </div>
+    </k-resize>
+    <h3>* Notes</h3>
+    <p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></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/styles/embed-1.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Template - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <style>
+    body {
+      overflow: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="row">
+    <div class="col d-span-3 t-span-6 m-span-12 p b">
+      col d-span-3 t-span-6 m-span-12
+    </div>
+    <div class="col d-span-3 t-span-6 m-span-12 p b">
+      col d-span-3 t-span-6 m-span-12
+    </div>
+    <div class="col d-span-3 t-span-6 m-span-12 p b">
+      col d-span-3 t-span-6 m-span-12
+    </div>
+    <div class="col d-span-3 t-span-6 m-span-12 p b">
+      col d-span-3 t-span-6 m-span-12
+    </div>
+  </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>
+</body>
+</html>

package/docs/styles/inputs.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>Inputs - 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">Inputs</h1>
+  <main>
+    <h3>Inputs</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">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">textarea</span><br />  <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">select</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 1<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 2<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 3<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">multiple</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 1<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 2<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 3<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 4<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 5<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Option 6<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <input placeholder="Input" />
+          <textarea
+            placeholder="Textarea"
+          ></textarea>
+          <select>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+          </select>
+          <select multiple>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+            <option>Option 4</option>
+            <option>Option 5</option>
+            <option>Option 6</option>
+          </select>
+        </k-card>
+      </div>
+    </div>
+    <h3>Labels</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">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input"</span>&gt;</span>Input:<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">id</span>=<span class="hljs-string">"input"</span> /&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <label for="input">Input:</label>
+          <input id="input" />
+        </k-card>
+      </div>
+    </div>
+    <h3>Checkbox / Radios</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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"check1"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"check1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>Check 1<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> <span class="hljs-attr">id</span>=<span class="hljs-string">"check2"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"check2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>Check 2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radios"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rad1"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"rad1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>Radio 1<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">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radios"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rad2"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"rad2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>Radio 2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <input type="checkbox" id="check1" />
+          <label for="check1" class="checkbox">Check 1</label>
+          <input type="checkbox" id="check2" />
+          <label for="check2" class="checkbox">Check 2</label>
+          <input type="radio" name="radios" id="rad1" />
+          <label for="rad1" class="checkbox">Radio 1</label>
+          <input type="radio" name="radios" id="rad2" />
+          <label for="rad2" class="checkbox">Radio 2</label>
+        </k-card>
+      </div>
+    </div>
+  </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>
+  <script type="module" src="../kempo/components/Card.js"></script>
+</body>
+</html>

package/docs/styles/tables.html ADDED Viewed

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Table - 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">Table</h1>
+  <main>
+    <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">table</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 1<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 2<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 3<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 4<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br />    <span class="hljs-comment">&lt;!-- .... --&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <table>
+            <thead>
+              <tr>
+                <th>Field 1</th>
+                <th>Field 2</th>
+                <th>Field 3</th>
+                <th>Field 4</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Row 1 - Data 1</td>
+                <td>Row 1 - Data 2</td>
+                <td>Row 1 - Data 3</td>
+                <td>Row 1 - Data 4</td>
+              </tr>
+              <tr>
+                <td>Row 2 - Data 1</td>
+                <td>Row 2 - Data 2</td>
+                <td>Row 2 - Data 3</td>
+                <td>Row 2 - Data 4</td>
+              </tr>
+              <tr>
+                <td>Row 3 - Data 1</td>
+                <td>Row 3 - Data 2</td>
+                <td>Row 3 - Data 3</td>
+                <td>Row 3 - Data 4</td>
+              </tr>
+              <tr>
+                <td>Row 4 - Data 1</td>
+                <td>Row 4 - Data 2</td>
+                <td>Row 4 - Data 3</td>
+                <td>Row 4 - Data 4</td>
+              </tr>
+              <tr>
+                <td>Row 5 - Data 1</td>
+                <td>Row 5 - Data 2</td>
+                <td>Row 5 - Data 3</td>
+                <td>Row 5 - Data 4</td>
+              </tr>
+            </tbody>
+          </table>
+        </k-card>
+      </div>
+    </div>
+    <h3>Responsive Table</h3>
+    <p>Wrap the table in a div with the <code>table-wrapper</code> class, and set a min-size on the columns to make the table responsive.</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-wrapper"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 1<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 2<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 3<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Field 4<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br />      <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Row 1 - Data 4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br />      <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br />      <span class="hljs-comment">&lt;!-- .... --&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <k-resize dimention="width">
+            <div class="table-wrapper">
+              <table>
+                <colgroup>
+                  <col style="min-width: 9rem" />
+                  <col style="min-width: 9rem" />
+                  <col style="min-width: 9rem" />
+                  <col style="min-width: 9rem" />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th>Field 1</th>
+                    <th>Field 2</th>
+                    <th>Field 3</th>
+                    <th>Field 4</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Row 1 - Data 1</td>
+                    <td>Row 1 - Data 2</td>
+                    <td>Row 1 - Data 3</td>
+                    <td>Row 1 - Data 4</td>
+                  </tr>
+                  <tr>
+                    <td>Row 2 - Data 1</td>
+                    <td>Row 2 - Data 2</td>
+                    <td>Row 2 - Data 3</td>
+                    <td>Row 2 - Data 4</td>
+                  </tr>
+                  <tr>
+                    <td>Row 3 - Data 1</td>
+                    <td>Row 3 - Data 2</td>
+                    <td>Row 3 - Data 3</td>
+                    <td>Row 3 - Data 4</td>
+                  </tr>
+                  <tr>
+                    <td>Row 4 - Data 1</td>
+                    <td>Row 4 - Data 2</td>
+                    <td>Row 4 - Data 3</td>
+                    <td>Row 4 - Data 4</td>
+                  </tr>
+                  <tr>
+                    <td>Row 5 - Data 1</td>
+                    <td>Row 5 - Data 2</td>
+                    <td>Row 5 - Data 3</td>
+                    <td>Row 5 - Data 4</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </k-resize>
+        </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>
+  <script type="module" src="../kempo/components/Resize.js"></script>
+</body>
+</html>