npm - kempo-ui - Versions diffs - 0.0.2 → 0.0.3 - Mend

kempo-ui 0.0.2 → 0.0.3

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 (193) hide show

package/.github/copilot-instructions.md +149 -149
package/.github/workflows/publish-npm.yml +44 -44
package/CONTRIBUTING.md +149 -149
package/README.md +0 -0
package/dist/kempo-vars.css +0 -0
package/dist/src/components/FocusCapture.js +7 -0
package/dist/src/components/Icon.js +10 -0
package/dist/src/components/Import.js +1 -0
package/dist/src/components/ShadowComponent.js +1 -0
package/dist/src/components/SideMenu.js +97 -0
package/dist/src/lit-all.min.js +120 -0
package/docs/components/accordion.html +122 -0
package/docs/components/card.html +91 -0
package/docs/components/component.html +90 -0
package/docs/components/content-slider.html +193 -0
package/docs/components/dialog.html +245 -0
package/docs/components/directory-viewer.html +90 -0
package/docs/components/focus-capture.html +68 -0
package/docs/components/icon.html +161 -0
package/docs/components/import.html +78 -0
package/docs/components/lazy-component.html +84 -0
package/docs/components/reactive-component.html +69 -0
package/docs/components/reactive-lazy-component.html +69 -0
package/docs/components/resize.html +152 -0
package/docs/components/search.html +102 -0
package/docs/components/show-more.html +123 -0
package/docs/components/side-menu.html +168 -0
package/docs/components/sortable.html +96 -0
package/docs/components/split.html +126 -0
package/docs/components/table.html +312 -0
package/docs/components/tableControls.html +77 -0
package/docs/components/tableCustomFields.html +113 -0
package/docs/components/tableFetchRecords.html +114 -0
package/docs/components/tableFieldSortHide.html +75 -0
package/docs/components/tablePagination.html +100 -0
package/docs/components/tableRecordEditing.html +144 -0
package/docs/components/tableRecordFiltering.html +75 -0
package/docs/components/tableRecordHiding.html +80 -0
package/docs/components/tableRecordSearching.html +75 -0
package/docs/components/tableRecordSelection.html +75 -0
package/docs/components/tableRowControls.html +78 -0
package/docs/components/tableSorting.html +73 -0
package/docs/components/tabs.html +163 -0
package/docs/components/tags.html +94 -0
package/docs/components/theme-switcher.html +129 -0
package/docs/components/timestamp.html +86 -0
package/docs/components/toast.html +328 -0
package/docs/components/toggle.html +155 -0
package/docs/dev.config.json +20 -0
package/docs/icons/add.svg +1 -0
package/docs/icons/arrow-back.svg +1 -0
package/docs/icons/arrow-down-double.svg +1 -0
package/docs/icons/arrow-down.svg +1 -0
package/docs/icons/arrow-forward.svg +1 -0
package/docs/icons/arrow-up-double.svg +1 -0
package/docs/icons/arrow-up.svg +1 -0
package/docs/icons/cards.svg +1 -0
package/docs/icons/check.svg +1 -0
package/docs/icons/chevron-left.svg +1 -0
package/docs/icons/chevron-right.svg +1 -0
package/docs/icons/close.svg +2 -0
package/docs/icons/compare.svg +1 -0
package/docs/icons/delete.svg +1 -0
package/docs/icons/drag-handle.svg +1 -0
package/docs/icons/drawing2.svg +124 -0
package/docs/icons/edit.svg +1 -0
package/docs/icons/error.svg +1 -0
package/docs/icons/export-file.svg +1 -0
package/docs/icons/file-text.svg +1 -0
package/docs/icons/file.svg +1 -0
package/docs/icons/filter-off.svg +1 -0
package/docs/icons/filter.svg +1 -0
package/docs/icons/first.svg +1 -0
package/docs/icons/folder-clear.svg +1 -0
package/docs/icons/folder-create.svg +1 -0
package/docs/icons/folder-open.svg +1 -0
package/docs/icons/folder.svg +1 -0
package/docs/icons/hide.svg +1 -0
package/docs/icons/image.svg +1 -0
package/docs/icons/label-add.svg +1 -0
package/docs/icons/label.svg +1 -0
package/docs/icons/last.svg +1 -0
package/docs/icons/menu.svg +1 -0
package/docs/icons/mode-auto.svg +1 -0
package/docs/icons/mode-dark.svg +1 -0
package/docs/icons/mode-light.svg +1 -0
package/docs/icons/open-in-browser.svg +1 -0
package/docs/icons/pause.svg +1 -0
package/docs/icons/play.svg +1 -0
package/docs/icons/refresh.svg +1 -0
package/docs/icons/remove.svg +1 -0
package/docs/icons/save.svg +1 -0
package/docs/icons/search.svg +1 -0
package/docs/icons/settings.svg +1 -0
package/docs/icons/show.svg +1 -0
package/docs/icons/storage.svg +1 -0
package/docs/icons/table-visibility.svg +1 -0
package/docs/icons/tag.svg +1 -0
package/docs/icons/tools.svg +1 -0
package/docs/icons/trash-x.svg +1 -0
package/docs/icons/warning.svg +1 -0
package/docs/index.html +28 -21
package/docs/nav.inc.html +73 -0
package/docs/nav.inc.js +4 -0
package/{config/production.json → docs/prod.config.json} +20 -16
package/docs/src/components/FocusCapture.js +7 -0
package/docs/src/components/HybridComponent.js +1 -0
package/docs/src/components/Icon.js +10 -0
package/docs/src/components/Import.js +1 -0
package/docs/src/components/LightComponent.js +1 -0
package/docs/src/components/ShadowComponent.js +1 -0
package/docs/src/components/SideMenu.js +97 -0
package/docs/src/lit-all.min.js +120 -0
package/docs/src/utils/cli.js +1 -0
package/docs/src/utils/fs-utils.js +1 -0
package/docs/styles.css +6 -0
package/icons/add.svg +1 -0
package/icons/arrow-back.svg +1 -0
package/icons/arrow-down-double.svg +1 -0
package/icons/arrow-down.svg +1 -0
package/icons/arrow-forward.svg +1 -0
package/icons/arrow-up-double.svg +1 -0
package/icons/arrow-up.svg +1 -0
package/icons/cards.svg +1 -0
package/icons/check.svg +1 -0
package/icons/chevron-left.svg +1 -0
package/icons/chevron-right.svg +1 -0
package/icons/close.svg +2 -0
package/icons/compare.svg +1 -0
package/icons/delete.svg +1 -0
package/icons/drag-handle.svg +1 -0
package/icons/drawing2.svg +124 -0
package/icons/edit.svg +1 -0
package/icons/error.svg +1 -0
package/icons/export-file.svg +1 -0
package/icons/file-text.svg +1 -0
package/icons/file.svg +1 -0
package/icons/filter-off.svg +1 -0
package/icons/filter.svg +1 -0
package/icons/first.svg +1 -0
package/icons/folder-clear.svg +1 -0
package/icons/folder-create.svg +1 -0
package/icons/folder-open.svg +1 -0
package/icons/folder.svg +1 -0
package/icons/hide.svg +1 -0
package/icons/image.svg +1 -0
package/icons/label-add.svg +1 -0
package/icons/label.svg +1 -0
package/icons/last.svg +1 -0
package/icons/menu.svg +1 -0
package/icons/mode-auto.svg +1 -0
package/icons/mode-dark.svg +1 -0
package/icons/mode-light.svg +1 -0
package/icons/open-in-browser.svg +1 -0
package/icons/pause.svg +1 -0
package/icons/play.svg +1 -0
package/icons/refresh.svg +1 -0
package/icons/remove.svg +1 -0
package/icons/save.svg +1 -0
package/icons/search.svg +1 -0
package/icons/settings.svg +1 -0
package/icons/show.svg +1 -0
package/icons/storage.svg +1 -0
package/icons/table-visibility.svg +1 -0
package/icons/tag.svg +1 -0
package/icons/tools.svg +1 -0
package/icons/trash-x.svg +1 -0
package/icons/warning.svg +1 -0
package/package.json +2 -2
package/scripts/build.js +109 -138
package/scripts/docs.js +60 -60
package/src/components/Card.js +66 -0
package/src/components/FocusCapture.js +23 -0
package/src/components/HybridComponent.js +40 -40
package/src/components/Icon.js +155 -0
package/src/components/Import.js +104 -0
package/src/components/LightComponent.js +32 -32
package/src/components/ShadowComponent.js +30 -17
package/src/components/SideMenu.js +167 -0
package/src/components/ThemeSwitcher.js +108 -0
package/src/kempo-hljs.css +146 -0
package/src/utils/cli.js +43 -43
package/src/utils/fs-utils.js +41 -41
package/src/utils/propConverters.js +11 -0
package/tests/HybridComponent.browser-test.js +214 -214
package/tests/LightComponent.browser-test.js +169 -169
package/tests/ShadowComponent.browser-test.js +130 -130
package/config/development.json +0 -14
package/docs/components/ShadowComponent.js +0 -1
/package/{docs → dist/src}/components/HybridComponent.js +0 -0
/package/{docs → dist/src}/components/LightComponent.js +0 -0
/package/{docs → dist/src}/utils/cli.js +0 -0
/package/{docs → dist/src}/utils/fs-utils.js +0 -0

package/docs/components/tableRecordHiding.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Row Controls - Table - Kempo Docs</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Table - Record Hiding</h1>
+  <main>
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <p>The table component supports record hiding. To allow for hiding add the "hide" control to the "before" or "after" controls. There is a built-in "showAll" control that can be added to the "top" or "bottom" controls to reveal previously hidden fields.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Hide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/HiddenCount.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ShowAll.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="recordHidingExample">
+      <k-tc-hide slot="after"></k-tc-hide>
+      <k-tc-hidden-count></k-tc-hidden-count>
+      <k-tc-show-all></k-tc-show-all>
+    </k-table>
+    <script type="module" src="../src/components/tableControls/Hide.js"></script>
+    <script type="module" src="../src/components/tableControls/HiddenCount.js"></script>
+    <script type="module" src="../src/components/tableControls/ShowAll.js"></script>
+    <script type="module">
+      document.getElementById('recordHidingExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tableRecordSearching.html ADDED Viewed

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Record Searching - Table - Kempo Docs</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Table - Record Searching</h1>
+  <main>
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <p>The search control (aka quick filter) is a feature that allows users to filter the records displayed in the table. The control is a search input that can be used to filter records based on the values in the columns.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Search.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="quickFilterExample">
+      <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
+    </k-table>
+    <script type="module" src="../src/components/tableControls/Search.js"></script>
+    <script type="module">
+      document.getElementById('quickFilterExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tableRecordSelection.html ADDED Viewed

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Record Selection - Table - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Table - Record Selection</h1>
+  <main>
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <p>The table component supports record selection. You can enable selection by setting the <code>enable-selection</code> attribute to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span><br />  <span class="hljs-attr">enable-selection</span>=<span class="hljs-string">"true"</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table
+      id="recordSelectionExample"
+      enable-selection="true"
+    ></k-table>
+    <script type="module">
+      import Table from '../src/components/Table.js';
+      document.getElementById('recordSelectionExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tableRowControls.html ADDED Viewed

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Row Controls - Table - Kempo Docs</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 5; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Table - Row Controls</h1>
+  <main>
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</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">"export-file"</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-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/DeleteRecord.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function.</p>
+    <k-table id="rowControlsExample">
+      <k-tc-export-json slot="before" max-width="40">
+        <k-icon name="export-file"></k-icon>
+      </k-tc-export-json>
+      <k-tc-delete-record slot="after"></k-tc-delete-record>
+    </k-table>
+    <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
+    <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
+    <script type="module">
+      document.getElementById('rowControlsExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tableSorting.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>Sorting - Table - Kempo Docs</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Table - Sorting</h1>
+  <main>
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <p>The sorting feature allows users to sort the records displayed in the table by clicking on the column headers. This is enabled by setting the <code>enable-sorting="true"</code> attribute.</p>
+    <p>Once enabled the user can sort the records by clicking on the fields.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortingExample"</span> <span class="hljs-attr">enable-sorting</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="sortingExample" enable-sorting="true"></k-table>
+    <script type="module">
+      document.getElementById('sortingExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tabs.html ADDED Viewed

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Tabs</h1>
+  <main>
+    <details class="b r mb">
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#tabSpacers">Tab Spacers</a><br />
+        <a href="#scrollingTabs">Scrolling Tabs</a><br />
+        <a href="#fixedHeight">Fixed Height</a><br />
+        <h6 class="mt">JavaScript Reference</h6>
+        <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 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create tabs using the <code>k-tabs</code> component. Add tabs using the <code>k-tab</code> component and tab contents using the <code>k-tab-content</code> component. Use the <code>for</code> attribute on the <code>k-tab</code> component to link it to the corresponding <code>k-tab-content</code> component.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>&gt;</span><br />    HTML Content<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>&gt;</span><br />    JavaScript Content<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
+    <k-tabs>
+      <k-tab for="html">HTML</k-tab>
+      <k-tab for="js">JavaScript</k-tab>
+      <k-tab-content name="html">
+        <p>HTML Content</p>
+      </k-tab-content>
+      <k-tab-content name="js">
+        <p>JavaScript Content</p>
+      </k-tab-content>
+    </k-tabs>
+    <h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
+    <p>Use the <code>k-tab-spacer</code> component to add a flexible space between tabs.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-spacer</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>&gt;</span><br />    HTML Content<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>&gt;</span><br />    JavaScript Content<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
+    <k-tabs>
+      <k-tab for="html">HTML</k-tab>
+      <k-tab-spacer></k-tab-spacer>
+      <k-tab for="js">JavaScript</k-tab>
+      <k-tab-content name="html">
+        <p>HTML Content</p>
+      </k-tab-content>
+      <k-tab-content name="js">
+        <p>JavaScript Content</p>
+      </k-tab-content>
+    </k-tabs>
+    <h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
+    <p>When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>&gt;</span>Tab 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>&gt;</span>Tab 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>&gt;</span>Tab 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>&gt;</span>Tab 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>&gt;</span>Tab 5<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>&gt;</span>Tab 6<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>&gt;</span>Tab 7<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>&gt;</span>Tab 8<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab9"</span>&gt;</span>Tab 9<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab10"</span>&gt;</span>Tab 10<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- Tab Contents --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab1"</span>&gt;</span>Content 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab2"</span>&gt;</span>Content 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab3"</span>&gt;</span>Content 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab4"</span>&gt;</span>Content 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab5"</span>&gt;</span>Content 5<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab6"</span>&gt;</span>Content 6<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab7"</span>&gt;</span>Content 7<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab8"</span>&gt;</span>Content 8<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab9"</span>&gt;</span>Content 9<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab10"</span>&gt;</span>Content 10<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
+    <k-tabs>
+      <k-tab for="tab1">Long Tab Name 1</k-tab>
+      <k-tab for="tab2">Long Tab Name 2</k-tab>
+      <k-tab for="tab3">Long Tab Name 3</k-tab>
+      <k-tab for="tab4">Long Tab Name 4</k-tab>
+      <k-tab for="tab5">Long Tab Name 5</k-tab>
+      <k-tab for="tab6">Long Tab Name 6</k-tab>
+      <k-tab for="tab7">Long Tab Name 7</k-tab>
+      <k-tab for="tab8">Long Tab Name 8</k-tab>
+      <k-tab for="tab9">Long Tab Name 9</k-tab>
+      <k-tab for="tab10">Long Tab Name 10</k-tab>
+      <k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
+      <k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
+      <k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
+      <k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
+      <k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
+      <k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
+      <k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
+      <k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
+      <k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
+      <k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
+    </k-tabs>
+    <h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
+    <p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span> <span class="hljs-attr">fixed-height</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed1"</span>&gt;</span>Tab 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed2"</span>&gt;</span>Tab 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed1"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This content will scroll if it's too long.<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>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<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>&gt;</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<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>&gt;</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<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>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<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>&gt;</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<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>&gt;</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Another tab that is not tall enough.<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>&gt;</span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
+    <k-tabs fixed-height="true" style="height: 200px">
+      <k-tab for="fixed1">Tab 1</k-tab>
+      <k-tab for="fixed2">Tab 2</k-tab>
+      <k-tab-content name="fixed1">
+        <p>This content will scroll if it's too long.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+      </k-tab-content>
+      <k-tab-content name="fixed2">
+        <p>Another tab that is not tall enough.</p>
+        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+      </k-tab-content>
+    </k-tabs>
+    <h2 id="jsRef">JavaScript Reference</h2>
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5><code>new Tabs()</code></h5>
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./component.html">Component</a></li>
+    </ul>
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>active<i>: string</i></code></h5>
+    <p>The name of the active tab.</p>
+    <h5><code>fixed-height<i>: boolean</i></code></h5>
+    <p>When true, the tabs component will fill its container height and enable content scrolling.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>getActiveTab()<i>: Tab</i></code></h5>
+    <p>Returns the currently active tab.</p>
+    <h5><code>getTab(id)<i>: Tab</i></code></h5>
+    <p>Returns the tab with the specified id.</p>
+    <h5><code>getActiveContent()<i>: TabContent</i></code></h5>
+    <p>Returns the currently active tab content.</p>
+    <h5><code>getContent(id)<i>: TabContent</i></code></h5>
+    <p>Returns the tab content with the specified id.</p>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Tabs.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>