kempo-ui 0.0.3 → 0.0.4

package/docs/components/split.html

@@ -27,9 +27,10 @@
         <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="#cssCustomProperties">CSS Custom Properties</a><br />
         <a href="#methods">Methods</a><br />
+        <a href="#events">Events</a><br />
       </div>
     </details>
 
@@ -99,24 +100,44 @@
     <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>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5>
       <code>new Split()</code>
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>resizing<i>: boolean</i></code></h5>
-    <p>Indicates whether the split view is currently being resized.</p>
+    <p>Whether the split view is currently being resized. Syncs to <code>resizing</code> attribute.</p>
+    <h5><code>stacked<i>: boolean</i></code></h5>
+    <p>Whether the split view is in stacked mode. Syncs to <code>stacked</code> attribute.</p>
+    <h5><code>stackWidth<i>: number</i></code></h5>
+    <p>The window width threshold for stacking behavior. Syncs to <code>stack-width</code> attribute.</p>
+
+    <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
+    <h5><code>--left_width</code></h5>
+    <p>The width of the left pane. Default is <code>calc((100% - var(--handle_width)) / 2)</code>.</p>
+    <h5><code>--handle_width</code></h5>
+    <p>The width of the draggable divider handle. Default is <code>0.5rem</code>.</p>
+    <h5><code>--min_pane_width</code></h5>
+    <p>The minimum width each pane can be resized to. Default is <code>6rem</code>.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>setSize(size)<i>: void</i></code></h5>
     <p>Sets the width of the left pane.</p>
 
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>resizestart</code></h5>
+    <p>Fired when the user starts dragging the divider handle. Detail contains <code>{ startSize }</code>.</p>
+    <h5><code>resize</code></h5>
+    <p>Fired during dragging of the divider handle. Detail contains <code>{ size }</code>.</p>
+    <h5><code>resizeend</code></h5>
+    <p>Fired when the user stops dragging the divider handle. Detail contains <code>{ size }</code>.</p>
+
   </main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script> 

package/docs/components/tablePagination.html

@@ -57,16 +57,16 @@
   <h1 class="ta-center">Table - Pagination</h1>
   <main>
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
-    <p>The table component supports pagination, enable it by giving the <code>k-table</code> a <code>enable-pages="true"</code> attribute.</p>
+        <p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
     <p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</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">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&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/FirstPage.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/PrevPage.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/NextPage.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/LastPage.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/PageSelect.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/PageSize.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-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">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <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">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&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/FirstPage.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/PrevPage.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/NextPage.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/LastPage.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/PageSelect.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/PageSize.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-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">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="paginationExample"
-      enable-pages="true"
+      enable-pages
       page-size="10"
       page-size-options="[5,10,25,50]"
     >
-      <div class="d-f full">
+      <div class="d-f full" style="align-items: center;">
         <div>
           <k-tc-first-page></k-tc-first-page>
           <k-tc-prev-page></k-tc-prev-page>

package/docs/components/tableRecordFiltering.html

@@ -60,13 +60,26 @@
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
 
     <p>Record filtering is a feature that allows users to filter the records displayed in the table. The table component provides a filter control that can be used to filter records based on the values in the columns. This control uses a Dialog to display the current filters and allows the user to create filters.</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-filters</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-filters</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/Filters.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">
+    
+    <h3>Basic Filtering (Case-Insensitive)</h3>
+    <p>By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".</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">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</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-filters</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/Filters.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">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="recordFilteringExample">
       <k-tc-filters slot="top"></k-tc-filters>
     </k-table>
     <script type="module" src="../src/components/tableControls/Filters.js"></script>
     <script type="module">
-      document.getElementById('recordHidingExample').setRecords(contacts);
+      document.getElementById('recordFilteringExample').setRecords(contacts);
+    </script>
+
+    <h3>Case-Sensitive Filtering</h3>
+    <p>You can enable case-sensitive filtering by adding the <code>case-sensitive-filters</code> attribute. With this enabled, filtering for "smith" will only match "smith", not "Smith" or "SMITH".</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">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</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-filters</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>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="caseSensitiveExample" case-sensitive-filters>
+      <k-tc-filters slot="top"></k-tc-filters>
+    </k-table>
+    <script type="module">
+      document.getElementById('caseSensitiveExample').setRecords(contacts);
     </script>
   </main>
   <div style="height: 33.333vh"></div>

package/docs/components/tableRecordSelection.html

@@ -59,10 +59,10 @@
     <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>
+    <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><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"
+      enable-selection
     ></k-table>
     <script type="module">
       import Table from '../src/components/Table.js';

package/docs/components/tabs.html

@@ -7,8 +7,10 @@
   <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 ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -29,9 +31,9 @@
         <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 />
+        <a href="#events">Events</a><br />
       </div>
     </details>
 
@@ -135,17 +137,24 @@
 
     <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>
+    <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="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    
+    <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.</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>
+    <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>
@@ -155,6 +164,14 @@
     <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>
   </main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Tabs.js"></script>

package/docs/components/tags.html

@@ -7,8 +7,10 @@
   <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 ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -28,14 +30,14 @@
         <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 />
+        <a href="#events">Events</a><br />
       </div>
     </details>
 
     <h3>Description</h3>
-    <p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a href="./component.html">Component</a> class.</p>
+    <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>
@@ -61,23 +63,23 @@
     <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>
+    <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="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <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.</p>
+    <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.</p>
+    <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.</p>
+    <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the <code>disallowed-tags</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>addTag(tag)<i>: void</i></code></h5>
@@ -86,6 +88,20 @@
     <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>
 
   </main>
   <script type="module" src="../src/components/Import.js"></script> 

package/docs/components/theme-switcher.html

@@ -7,8 +7,10 @@
   <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 ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -27,7 +29,6 @@
         <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="#cssCustomProperties">CSS Custom Properties</a><br />
         <a href="#methods">Methods</a><br />
@@ -85,13 +86,9 @@
       <li><a href="./icon.html">Icon</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <h5><code>current-theme<i>: string</i></code></h5>
-    <p>Reflects the current theme state. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This attribute is automatically updated when the theme changes.</p>
-
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>currentTheme<i>: string</i></code></h5>
-    <p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed.</p>
+    <p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed. Syncs to <code>current-theme</code> attribute.</p>
 
     <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
     <h5><code>--padding<i>: length</i></code></h5>

package/docs/components/timestamp.html

@@ -7,8 +7,10 @@
   <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 ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -27,59 +29,53 @@
         <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>Description</h3>
-    <p>The <code>Timestamp</code> component displays a formatted timestamp. It extends the <a href="./component.html">Component</a> class.</p>
+    <p>The <code>Timestamp</code> component displays a formatted timestamp using custom format tokens. It extends the ShadowComponent class for encapsulated styling.</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp based on the provided locale or the user's current locale if no locale is provided.</p>
+    <p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp using the default format or a custom format with tokens.</p>
     <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
     <k-timestamp timestamp="1633024800000"></k-timestamp>
 
     <h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
-    <p>Use the <code>format</code> attribute to specify a custom format for the timestamp. The format should be a string like <code>YYYY-MM-DD hh:mm:ss:iiii</code>.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"YYYY-MM-DD hh:mm:ss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
-    <k-timestamp timestamp="1633024800000" format="YYYY-MM-DD hh:mm:ss"></k-timestamp>
+    <p>Use the <code>format</code> attribute to specify a custom format using tokens like <code>YYYY</code> (4-digit year), <code>MM</code> (2-digit month), <code>DD</code> (2-digit day), <code>hh</code> (2-digit hour), <code>mm</code> (2-digit minute), and <code>ss</code> (2-digit second).</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"MM/DD/YYYY"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+    <k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
+
+    <h3 id="timeFormat"><a href="#timeFormat" class="no-link">Time Format</a></h3>
+    <p>Display time with custom formatting using hour, minute, and second tokens.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hh:mm:ss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+    <k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
 
     <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 Timestamp(timestamp, format, locale)</code>
-    </h5>
-
-    <h4>Parameters</h4>
-    <h5><code>timestamp<i>: number</i></code></h5>
-    <p>The timestamp to be formatted and displayed.</p>
-    <h5><code>format<i>: string</i></code></h5>
-    <p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
-    <h5><code>locale<i>: string</i></code></h5>
-    <p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
+    <h6>Extends ShadowComponent</h6>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li>ShadowComponent</li>
       <li><a href="../utils/formatTimestamp.js">formatTimestamp Utility Function</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>timestamp<i>: number</i></code></h5>
-    <p>The timestamp to be formatted and displayed.</p>
+    <p>The timestamp to be formatted and displayed. Syncs to <code>timestamp</code> attribute.</p>
     <h5><code>format<i>: string</i></code></h5>
-    <p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
+    <p>The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided, uses the default format. Syncs to <code>format</code> attribute.</p>
     <h5><code>locale<i>: string</i></code></h5>
-    <p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
+    <p>The locale to be used for formatting the timestamp. Syncs to <code>locale</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the <a href="./component.html">Component</a> class.</p>
+    <p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the ShadowComponent class.</p>
 
   </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/Timestamp.js"></script> 
 </body>