kempo-ui 0.3.5 → 0.3.6

package/docs-src/components/tableServerSync.page.html

@@ -0,0 +1,129 @@
+<page pageName="Table - Server Sync" title="Server Sync - Table - Kempo Docs - A Web Components Solution">
+  <content location="head">
+    <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>
+  </content>
+  <content>
+
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+
+    <p>
+      The table supports an optional server-sync workflow for saving edits and deleting records. When the
+      <code>request-edit</code> attribute is present, calling <code>saveEditedRecord()</code> fires a
+      <code>requestSave</code> event instead of applying the changes immediately. When the <code>request-delete</code>
+      attribute is present, calling <code>deleteRecord()</code> or <code>deleteSelected()</code> fires a
+      <code>requestDelete</code> event instead of deleting immediately.
+    </p>
+    <p>
+      Both events expose an <code>approve()</code> function on <code>event.detail</code>. Call it once the server
+      operation succeeds to commit the change. If the operation fails, simply do not call <code>approve()</code> —
+      the record stays in its current state so the user can retry. <code>requestSave</code> also provides
+      <code>event.detail.record</code> (the original record) and <code>event.detail.newData</code> (the values
+      read from the editor inputs). <code>requestDelete</code> provides <code>event.detail.records</code>, an
+      array of the records targeted for deletion.
+    </p>
+    <p>
+      The example below mocks a server call that takes 1–3 seconds and randomly fails 50% of the time.
+      Toasts are used to notify the user of success or failure.
+    </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">serverSyncExample</span> <span class="hljs-attr">enable-selection</span> <span class="hljs-attr">request-edit</span> <span class="hljs-attr">request-delete</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</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-edit</span>&gt;</span><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><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-selected</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-selected</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="language-javascript"><br>  <span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;/src/components/Toast.js&#x27;</span>;<br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-keyword">const</span> table = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;serverSyncExample&#x27;</span>);<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">mockServer</span> = (<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() &lt; <span class="hljs-number">0.8</span> ? <span class="hljs-title function_">resolve</span>() : <span class="hljs-title function_">reject</span>();<br>    }, <span class="hljs-number">1000</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">2000</span>);<br>  });<br>  table.<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: contacts,<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;email&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Email&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>      <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;phoneNumber&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Phone Number&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;gender&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Gender&#x27;</span>,<br>      <span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">v</span> =&gt;</span> v === <span class="hljs-string">&#x27;m&#x27;</span> ? <span class="hljs-string">&#x27;Male&#x27;</span> : <span class="hljs-string">&#x27;Female&#x27;</span><br>    }]<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestSave&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;Record saved.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Save failed. The record remains open for editing.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestDelete&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      records,<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">const</span> count = records.<span class="hljs-property">length</span>;<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(count === <span class="hljs-number">1</span> ? <span class="hljs-string">&#x27;1 record deleted.&#x27;</span> : count + <span class="hljs-string">&#x27; records deleted.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Delete failed. Please try again.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table
+      id="serverSyncExample"
+      enable-selection
+      request-edit
+      request-delete
+    >
+      <k-tc-edit slot="after"></k-tc-edit>
+      <k-tc-delete-record slot="after"></k-tc-delete-record>
+      <k-tc-delete-selected slot="top"></k-tc-delete-selected>
+    </k-table>
+    <script type="module">
+      import Toast from '{{pathToRoot}}src/components/Toast.js';
+      await window.customElements.whenDefined('k-table');
+      const table = document.getElementById('serverSyncExample');
+
+      const mockServer = () => new Promise((resolve, reject) => {
+        setTimeout(() => {
+          Math.random() < 0.8 ? resolve() : reject();
+        }, 1000 + Math.random() * 2000);
+      });
+
+      table.setData({
+        records: contacts,
+        fields: [
+          { name: 'name', label: 'Name' },
+          { name: 'email', label: 'Email' },
+          { name: 'birthday', label: 'Birthday', type: 'date' },
+          { name: 'phoneNumber', label: 'Phone Number' },
+          { name: 'gender', label: 'Gender', formatter: v => v === 'm' ? 'Male' : 'Female' }
+        ]
+      });
+
+      table.addEventListener('requestSave', async ({ detail: { approve, reject } }) => {
+        try {
+          await mockServer();
+          approve();
+          Toast.success('Record saved.', { timeout: 3000 });
+        } catch {
+          reject();
+          Toast.error('Save failed. The record remains open for editing.', { timeout: 5000 });
+        }
+      });
+
+      table.addEventListener('requestDelete', async ({ detail: { records, approve, reject } }) => {
+        const count = records.length;
+        try {
+          await mockServer();
+          approve();
+          Toast.success(count === 1 ? '1 record deleted.' : count + ' records deleted.', { timeout: 3000 });
+        } catch {
+          reject();
+          Toast.error('Delete failed. Please try again.', { timeout: 5000 });
+        }
+      });
+    </script>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/tableControls/Edit.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/tableControls/DeleteRecord.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/tableControls/DeleteSelected.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Toast.js"></script>
+  </content>
+</page>

package/docs-src/components/tableSorting.page.html

@@ -0,0 +1,54 @@
+<page pageName="Table - Sorting" title="Sorting - Table - Kempo Docs">
+  <content location="head">
+    <script type="module" src="{{pathToRoot}}src/components/Table.js"></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>
+  </content>
+  <content>
+
+    <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>
+  </content>
+</page>

package/docs-src/components/tabs.page.html

@@ -0,0 +1,201 @@
+<page pageName="Tabs" title="Tabs - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <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"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <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>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-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-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <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>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
+    <p>Use the <code>k-tab-spacer</code> component to create flexible spacing between tabs. This is useful for creating layouts where some tabs are grouped on the left and others on the right.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-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">"left1"</span>&gt;</span>Home<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">"left2"</span>&gt;</span>About<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">"right1"</span>&gt;</span>Settings<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">"right2"</span>&gt;</span>Profile<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">"left1"</span>&gt;</span><br />    Home 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">"left2"</span>&gt;</span><br />    About 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">"right1"</span>&gt;</span><br />    Settings 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">"right2"</span>&gt;</span><br />    Profile 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-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-tabs>
+            <k-tab for="left1">Home</k-tab>
+            <k-tab for="left2">About</k-tab>
+            <k-tab-spacer></k-tab-spacer>
+            <k-tab for="right1">Settings</k-tab>
+            <k-tab for="right2">Profile</k-tab>
+            <k-tab-content name="left1">
+              <p>Home Content</p>
+            </k-tab-content>
+            <k-tab-content name="left2">
+              <p>About Content</p>
+            </k-tab-content>
+            <k-tab-content name="right1">
+              <p>Settings Content</p>
+            </k-tab-content>
+            <k-tab-content name="right2">
+              <p>Profile Content</p>
+            </k-tab-content>
+          </k-tabs>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
+    <p>When there are many tabs that don't fit in the available space, the tabs will automatically become scrollable with left/right scroll indicators.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-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">"tab1"</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">"tab2"</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</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><br />  <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><br />  <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><br />  <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><br />  <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><br />  <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><br />  <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><br />    Content for Tab 1<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">"tab2"</span>&gt;</span><br />    Content for Tab 2<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">"tab3"</span>&gt;</span><br />    Content for Tab 3<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">"tab4"</span>&gt;</span><br />    Content for Tab 4<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">"tab5"</span>&gt;</span><br />    Content for Tab 5<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">"tab6"</span>&gt;</span><br />    Content for Tab 6<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">"tab7"</span>&gt;</span><br />    Content for Tab 7<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">"tab8"</span>&gt;</span><br />    Content for Tab 8<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-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results" style="max-width: 400px;">
+          <k-tabs>
+            <k-tab for="tab1">Tab 1</k-tab>
+            <k-tab for="tab2">Tab 2</k-tab>
+            <k-tab for="tab3">Tab 3</k-tab>
+            <k-tab for="tab4">Tab 4</k-tab>
+            <k-tab for="tab5">Tab 5</k-tab>
+            <k-tab for="tab6">Tab 6</k-tab>
+            <k-tab for="tab7">Tab 7</k-tab>
+            <k-tab for="tab8">Tab 8</k-tab>
+            <k-tab-content name="tab1">
+              <p>Content for Tab 1</p>
+            </k-tab-content>
+            <k-tab-content name="tab2">
+              <p>Content for Tab 2</p>
+            </k-tab-content>
+            <k-tab-content name="tab3">
+              <p>Content for Tab 3</p>
+            </k-tab-content>
+            <k-tab-content name="tab4">
+              <p>Content for Tab 4</p>
+            </k-tab-content>
+            <k-tab-content name="tab5">
+              <p>Content for Tab 5</p>
+            </k-tab-content>
+            <k-tab-content name="tab6">
+              <p>Content for Tab 6</p>
+            </k-tab-content>
+            <k-tab-content name="tab7">
+              <p>Content for Tab 7</p>
+            </k-tab-content>
+            <k-tab-content name="tab8">
+              <p>Content for Tab 8</p>
+            </k-tab-content>
+          </k-tabs>
+        </k-card>
+      </div>
+    </div>
+
+    <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>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-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-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <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>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new Tabs()</code></h5>
+    
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+    
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>active<i>: string</i></code></h5>
+    <p>The name of the active tab. Syncs to <code>active</code> attribute.</p>
+    <h5><code>fixedHeight<i>: boolean</i></code></h5>
+    <p>Whether the tabs component uses fixed height mode. Syncs to <code>fixed-height</code> attribute.</p>
+    <h5><code>contents<i>: TabContent[]</i></code></h5>
+    <p>Returns an array of all tab content elements.</p>
+    <h5><code>tabs<i>: Tab[]</i></code></h5>
+    <p>Returns an array of all tab elements.</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>
+    <h5><code>updateActiveElements()<i>: void</i></code></h5>
+    <p>Updates the active state of tabs and content based on the current active property.</p>
+    <h5><code>updateScrollIndicators()<i>: void</i></code></h5>
+    <p>Updates the visibility of scroll indicators based on tab overflow.</p>
+    
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>tab</code></h5>
+    <p>Fired when the active tab changes. Detail contains <code>{ tab }</code> with the name of the new active tab.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Tabs.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/docs-src/components/tags.page.html

@@ -0,0 +1,157 @@
+<page pageName="Tags" title="Tags - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#allowedTags">Allowed Tags</a><br />
+          <a href="#disallowedTags">Disallowed Tags</a><br />
+          <a href="#disabled">Disabled</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a
+        href="./shadow-component.html">ShadowComponent</a> class.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Use the <code>Tags</code> component to allow users to add and remove tags. Tags can be added by typing them into
+      the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking
+      on it.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-tags>
+            <label>Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
+    <p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can
+      be added.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Allowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-tags allowed-tags="tag1,tag2,tag3">
+            <label>Allowed Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
+
+
+
+    <h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
+    <p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags
+      cannot be added.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <k-card label="Results">
+            <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Disallowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+          </k-card>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-tags disallowed-tags="tag1,tag2,tag3">
+          <label>Disallowed Tags</label>
+        </k-tags>
+      </div>
+    </div>
+
+
+
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>Use the <code>disabled</code> attribute to prevent the user from adding or removing tags while still displaying the current value.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;design,ui&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-tags disabled value="design,ui">
+            <label>Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
+
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Tags()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>value<i>: string</i></code></h5>
+    <p>A comma-separated list of tags. Syncs with the <code>value</code> attribute.</p>
+    <h5><code>allowedTags<i>: string</i></code></h5>
+    <p>A comma-separated list of allowed tags. If specified, only these tags can be added. Syncs with the
+      <code>allowed-tags</code> attribute.</p>
+    <h5><code>disallowedTags<i>: string</i></code></h5>
+    <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the
+      <code>disallowed-tags</code> attribute.</p>
+    <h5><code>disabled<i>: boolean</i></code></h5>
+    <p>When <code>true</code>, prevents the user from adding or removing tags. The current value is still displayed. The element appears at 50% opacity. Syncs with the <code>disabled</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>addTag(tag)<i>: void</i></code></h5>
+    <p>Adds a tag to the list of tags.</p>
+    <h5><code>removeTag(tag)<i>: void</i></code></h5>
+    <p>Removes a tag from the list of tags.</p>
+    <h5><code>validateTags()<i>: string</i></code></h5>
+    <p>Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a
+      comma-separated string.</p>
+    <h5><code>renderTags()<i>: Promise&lt;void&gt;</i></code></h5>
+    <p>Re-renders the tag elements in the component.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>change</code></h5>
+    <p>Fired when the value changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
+    <h5><code>addtag</code></h5>
+    <p>Fired when a tag is added. Detail contains <code>{ tag }</code>.</p>
+    <h5><code>removetag</code></h5>
+    <p>Fired when a tag is removed. Detail contains <code>{ tag }</code>.</p>
+    <h5><code>allowedtagschange</code></h5>
+    <p>Fired when the allowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
+    <h5><code>disallowedtagschange</code></h5>
+    <p>Fired when the disallowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Tags.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>