kempo 1.0.0

package/docs/nav-1.inc.html

@@ -0,0 +1,66 @@
+<nav
+  class="d-f bg-primary fixed"
+>
+  <button
+    id="open-side-menu"
+    class="link"
+  >
+    <k-icon name="menu"></k-icon>
+  </button>
+  <a href="../">Home</a>
+  <k-search
+    class="flex mr"
+    style="min-width:10rem;max-width:24rem"
+  ></k-search>
+  <div class="flex"></div>
+  <k-theme-switcher></k-theme-switcher>
+</nav>
+<div style="width: 100%; height: 4rem;"></div>
+<k-side-menu
+  id="side-menu"
+>
+  <h1>Kempo Docs</h1>
+  <menu>
+    <a href="../" class="h5 pl0 mb">Home</a>
+    <h5 class="mb0">Styles</h5>
+    <div class="pl mb">
+      <a href="../styles/typography.html">Typography</a>
+      <a href="../styles/displays-layouts.html">Displays and Layouts</a>
+      <a href="../styles/borders-spacing.html">Borders and Spacing</a>
+      <a href="../styles/inputs.html">Inputs</a>
+      <a href="../styles/buttons.html">Buttons</a>
+      <a href="../styles/tables.html">Tables</a>
+      <a href="../styles/colors.html">Colors</a>
+    </div>
+    <h5 class="mb0">Components</h5>
+    <div class="pl mb">
+      <a href="../components/component.html">Component</a>
+      <a href="../components/lazycomponent.html">LazyComponent</a>
+      <a href="../components/reactivecomponent.html">ReactiveComponent</a>
+      <a href="../components/reactivelazycomponent.html">ReactiveLazyComponent</a>
+      <a href="../components/focuscapture.html">FocusCapture</a>
+      <hr />
+      <a href="../components/codeeditor.html">Code Editor</a>
+      <a href="../components/card.html">Card</a>
+      <a href="../components/dialog.html">Dialog</a>
+      <a href="../components/icon.html">Icon</a>
+      <a href="../components/import.html">Import</a>
+      <a href="../components/resize.html">Resize</a>
+      <a href="../components/show-more.html">Show More</a>
+      <a href="../components/sidemenu.html">Side Menu</a>
+      <a href="../components/split.html">Split</a>
+      <a href="../components/tabs.html">Tabs</a>
+      <a href="../components/websnippeteditor.html">Web Snippet Editor</a>
+    </div>
+  </menu>
+</k-side-menu>
+<script>
+  document.getElementById('open-side-menu').addEventListener('click', async () => {
+    await window.customElements.whenDefined('k-side-menu');
+    document.getElementById('side-menu').open();
+  });
+</script>
+<script src="../kempo/components/SideMenu.js" type="module"></script>
+<script src="../kempo/components/Icon.js" type="module"></script>
+<script src="../kempo/components/ThemeSwitcher.js" type="module"></script>
+<script src="../kempo/components/Search.js" type="module"></script>

package/docs/nav.inc.html

@@ -0,0 +1,66 @@
+<nav
+  class="d-f bg-primary fixed"
+>
+  <button
+    id="open-side-menu"
+    class="link"
+  >
+    <k-icon name="menu"></k-icon>
+  </button>
+  <a href="./">Home</a>
+  <k-search
+    class="flex mr"
+    style="min-width:10rem;max-width:24rem"
+  ></k-search>
+  <div class="flex"></div>
+  <k-theme-switcher></k-theme-switcher>
+</nav>
+<div style="width: 100%; height: 4rem;"></div>
+<k-side-menu
+  id="side-menu"
+>
+  <h1>Kempo Docs</h1>
+  <menu>
+    <a href="./" class="h5 pl0 mb">Home</a>
+    <h5 class="mb0">Styles</h5>
+    <div class="pl mb">
+      <a href="./styles/typography.html">Typography</a>
+      <a href="./styles/displays-layouts.html">Displays and Layouts</a>
+      <a href="./styles/borders-spacing.html">Borders and Spacing</a>
+      <a href="./styles/inputs.html">Inputs</a>
+      <a href="./styles/buttons.html">Buttons</a>
+      <a href="./styles/tables.html">Tables</a>
+      <a href="./styles/colors.html">Colors</a>
+    </div>
+    <h5 class="mb0">Components</h5>
+    <div class="pl mb">
+      <a href="./components/component.html">Component</a>
+      <a href="./components/lazycomponent.html">LazyComponent</a>
+      <a href="./components/reactivecomponent.html">ReactiveComponent</a>
+      <a href="./components/reactivelazycomponent.html">ReactiveLazyComponent</a>
+      <a href="./components/focuscapture.html">FocusCapture</a>
+      <hr />
+      <a href="./components/codeeditor.html">Code Editor</a>
+      <a href="./components/card.html">Card</a>
+      <a href="./components/dialog.html">Dialog</a>
+      <a href="./components/icon.html">Icon</a>
+      <a href="./components/import.html">Import</a>
+      <a href="./components/resize.html">Resize</a>
+      <a href="./components/show-more.html">Show More</a>
+      <a href="./components/sidemenu.html">Side Menu</a>
+      <a href="./components/split.html">Split</a>
+      <a href="./components/tabs.html">Tabs</a>
+      <a href="./components/websnippeteditor.html">Web Snippet Editor</a>
+    </div>
+  </menu>
+</k-side-menu>
+<script>
+  document.getElementById('open-side-menu').addEventListener('click', async () => {
+    await window.customElements.whenDefined('k-side-menu');
+    document.getElementById('side-menu').open();
+  });
+</script>
+<script src="./kempo/components/SideMenu.js" type="module"></script>
+<script src="./kempo/components/Icon.js" type="module"></script>
+<script src="./kempo/components/ThemeSwitcher.js" type="module"></script>
+<script src="./kempo/components/Search.js" type="module"></script>

package/docs/search.json

@@ -0,0 +1,94 @@
+{
+  "/components/codeeditor.html": {
+    "name": "Components > Code Editor",
+    "terms": [
+      "component",
+      "code",
+      "editor",
+      "html",
+      "css",
+      "js"
+    ]
+  },
+  "/components/resize.html": {
+    "name": "Components > Resize",
+    "terms": [
+      "resize",
+      "component",
+      "drag",
+      "width",
+      "height"
+    ]
+  },
+  "/components/split.html": {
+    "name": "Components > Split",
+    "terms": [
+      "component",
+      "split",
+      "resize",
+      "content"
+    ]
+  },
+  "/components/tabs.html": {
+    "name": "Components > Tabs",
+    "terms": [
+      "component",
+      "tab",
+      "content"
+    ]
+  },
+  "/components/websnippeteditor.html": {
+    "name": "Components > Web Snippet Editor",
+    "terms": [
+      "component",
+      "web",
+      "snippet",
+      "editor",
+      "code",
+      "html",
+      "css",
+      "js"
+    ]
+  },
+  "/styles/borders-spacing.html": {
+    "name": "Styles > Borders and Spacing",
+    "terms": [
+      "styles",
+      "border",
+      "spacing",
+      "margin",
+      "padding",
+      "radius"
+    ]
+  },
+  "/styles/displays-layouts.html": {
+    "name": "Styles > Displays and Layout",
+    "terms": [
+      "display",
+      "flex",
+      "grid",
+      "12",
+      "column",
+      "col",
+      "row",
+      "rows",
+      "cols",
+      "columns"
+    ]
+  },
+  "/styles/typography.html": {
+    "name": "Styles > Typography",
+    "terms": [
+      "display",
+      "text",
+      "typography",
+      "heading",
+      "paragraph",
+      "bold",
+      "italic",
+      "strike",
+      "sup",
+      "sub"
+    ]
+  }
+}

package/docs/styles/_template.html

@@ -0,0 +1,22 @@
+<!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" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Template</h1>
+  <main>
+    
+  </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/borders-spacing.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Borders and Spacing - 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">Borders and Spacing</h1>
+  <main style="margin-bottom: 33vh">
+    <h3>Borders</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">"b"</span>&gt;</span>b<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">"bt"</span>&gt;</span>bt<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">"br"</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">"bb"</span>&gt;</span>bb<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">"bl"</span>&gt;</span>bl<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">"bx"</span>&gt;</span>bx<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">"by"</span>&gt;</span>by<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="d-ib bg-alt p mr mb b">b</div>
+          <div class="d-ib bg-alt p mr mb bt">bt</div>
+          <div class="d-ib bg-alt p mr mb br">br</div>
+          <div class="d-ib bg-alt p mr mb bb">bb</div>
+          <div class="d-ib bg-alt p mr mb bl">bl</div>
+          <div class="d-ib bg-alt p mr mb bx">bx</div>
+          <div class="d-ib bg-alt p mr mb by">by</div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Padding</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">"p"</span>&gt;</span>p<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">"pt"</span>&gt;</span>pt<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">"pr"</span>&gt;</span>pr<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">"pb"</span>&gt;</span>pb<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">"pl"</span>&gt;</span>pl<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">"px"</span>&gt;</span>px<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">"py"</span>&gt;</span>py<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="d-ib bg-success mx mb p">
+            <div class="d-ib bg-alt pq">p</div>
+          </div>
+          <div class="d-ib bg-success mx mb pt">
+            <div class="d-ib bg-alt pq">pt</div>
+          </div>
+          <div class="d-ib bg-success mx mb pr">
+            <div class="d-ib bg-alt pq">pr</div>
+          </div>
+          <div class="d-ib bg-success mx mb pb">
+            <div class="d-ib bg-alt pq">pb</div>
+          </div>
+          <div class="d-ib bg-success mx mb pl">
+            <div class="d-ib bg-alt pq">pl</div>
+          </div>
+          <div class="d-ib bg-success mx mb px">
+            <div class="d-ib bg-alt pq">px</div>
+          </div>
+          <div class="d-ib bg-success mx mb py">
+            <div class="d-ib bg-alt pq">py</div>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Margins</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">"m"</span>&gt;</span>m<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">"mt"</span>&gt;</span>mt<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">"mr"</span>&gt;</span>mr<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">"mb"</span>&gt;</span>mb<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">"ml"</span>&gt;</span>ml<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">"mx"</span>&gt;</span>mx<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">"my"</span>&gt;</span>my<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="d-ib bg-warning mx mb p">
+            <div class="d-ib bg-alt pq">m</div>
+          </div>
+          <div class="d-ib bg-warning mx mb pt">
+            <div class="d-ib bg-alt pq">mt</div>
+          </div>
+          <div class="d-ib bg-warning mx mb pr">
+            <div class="d-ib bg-alt pq">mr</div>
+          </div>
+          <div class="d-ib bg-warning mx mb pb">
+            <div class="d-ib bg-alt pq">mb</div>
+          </div>
+          <div class="d-ib bg-warning mx mb pl">
+            <div class="d-ib bg-alt pq">ml</div>
+          </div>
+          <div class="d-ib bg-warning mx mb px">
+            <div class="d-ib bg-alt pq">mx</div>
+          </div>
+          <div class="d-ib bg-warning mx mb py">
+            <div class="d-ib bg-alt pq">my</div>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h5>Negative Margins</h5>
+    <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">"-m"</span>&gt;</span>-m<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">"-mt"</span>&gt;</span>-mt<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">"-mr"</span>&gt;</span>-mr<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">"-mb"</span>&gt;</span>-mb<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">"-ml"</span>&gt;</span>-ml<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">"-mx"</span>&gt;</span>-mx<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">"-my"</span>&gt;</span>-my<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="d-ib bg-danger mx mb p">
+            <div class="d-ib bg-alt pq">-m</div>
+          </div>
+          <div class="d-ib bg-danger mx mb pt">
+            <div class="d-ib bg-alt pq">-mt</div>
+          </div>
+          <div class="d-ib bg-danger mx mb pr">
+            <div class="d-ib bg-alt pq">-mr</div>
+          </div>
+          <div class="d-ib bg-danger mx mb pb">
+            <div class="d-ib bg-alt pq">-mb</div>
+          </div>
+          <div class="d-ib bg-danger mx mb pl">
+            <div class="d-ib bg-alt pq">-ml</div>
+          </div>
+          <div class="d-ib bg-danger mx mb px">
+            <div class="d-ib bg-alt pq">-mx</div>
+          </div>
+          <div class="d-ib bg-danger mx mb py">
+            <div class="d-ib bg-alt pq">-my</div>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h5>Cancelled Margins</h5>
+    <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">"m m0"</span>&gt;</span>m m0<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">"m mt0"</span>&gt;</span>m mt0<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">"m mr0"</span>&gt;</span>m mr0<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">"m mb0"</span>&gt;</span>m mb0<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">"m ml0"</span>&gt;</span>m ml0<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">"m mx0"</span>&gt;</span>m mx0<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">"m my0"</span>&gt;</span>m my0<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="d-ib bg-warning mx mb">
+            <div class="d-ib bg-alt pq b" style="border-color: var(--c_danger)!important">m m0</div>
+          </div>
+          <div class="d-ib bg-warning mx mb px pb">
+            <div class="d-ib bg-alt pq bt" style="border-color: var(--c_danger)!important">m mt0</div>
+          </div>
+          <div class="d-ib bg-warning mx mb py pl">
+            <div class="d-ib bg-alt pq br" style="border-color: var(--c_danger)!important">m mr0</div>
+          </div>
+          <div class="d-ib bg-warning mx mb px pt">
+            <div class="d-ib bg-alt pq bb" style="border-color: var(--c_danger)!important">m mb0</div>
+          </div>
+          <div class="d-ib bg-warning mx mb py pr">
+            <div class="d-ib bg-alt pq bl" style="border-color: var(--c_danger)!important">m ml0</div>
+          </div>
+          <div class="d-ib bg-warning mx mb py">
+            <div class="d-ib bg-alt pq bx" style="border-color: var(--c_danger)!important">m mx0</div>
+          </div>
+          <div class="d-ib bg-warning mx mb px">
+            <div class="d-ib bg-alt pq by" style="border-color: var(--c_danger)!important">m my0</div>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+
+    <h3>* Notes</h3>
+    <p>
+      <i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i><br />
+      For example extra borders, margins, and paddings have in added along with colors. This is what each color represents.
+      <ul>
+        <li><b>Green</b> = Padding</li>
+        <li><b>Orange</b> = Margins</li>
+        <li><b>Red</b> = Negative Margins</li>
+        <li><b>Red Border</b> = Cancelled Margins</li>
+      </ul>
+    </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/buttons.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Buttons - 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">Buttons</h1>
+  <main>
+    <h3>What is a button?</h3>
+    <p>"Buttons" are defened as:</p>
+    <ul>
+      <li><code>&lt;button></code> elements</li>
+      <li><code>&lt;input></code> elements with a type of <code>"input"</code>, <code>"submit"</code>, or <code>"reset"</code>.</li>
+      <li>Any element with the <code>btn</code> class.</li>
+    </ul>
+    <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">button</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"input"</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">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"submit input"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>a.btn<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <button>button</button>
+          <input type="button" value="input" />
+          <input type="submit" value="submit input" />
+          <a href="#" class="btn">a.btn</a>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Button 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">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <button class="mbq ">Default</button>
+          <button class="mbq primary">Primary</button>
+          <button class="mbq secondary">Secondary</button>
+          <button class="mbq success">Success</button>
+          <button class="mbq warning">Warning</button>
+          <button class="mbq danger">Danger</button>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Button Groups</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">"btn-grp"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</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*">
+          <div class="btn-grp">
+            <button>Default</button>
+            <button>Default</button>
+          </div>
+      </div>
+    </div>
+
+    <h3>Button Sizes</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">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <button class="small">Small</button>
+          <button>Normal</button>
+          <button class="large">Large</button>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>No Styles</h3>
+    <p><code>no-style</code> makes the button look like the default button (no styles).</p>
+    <p><code>no-btn</code> makes the button not look like a button (just text).</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">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-style"</span>&gt;</span>no-style<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-btn"</span>&gt;</span>no-btn<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output*">
+          <button class="no-style">no-style</button>
+          <button class="no-btn">no-btn</button>
+        </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/Card.js"></script> 
+  <script type="module" src="../kempo/components/Import.js"></script> 
+</body>
+</html>