kempo-ui 0.3.7 → 0.3.8

package/docs/components/html-editor.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>
@@ -254,6 +256,8 @@
         <h6>Examples</h6>
         <a href="#fullExample">Complete Editor Example</a><br />
         <a href="#javascriptUsage">JavaScript API Example</a><br />
+        <a href="#incompatibleContent">Incompatible Content Example</a><br />
+        <a href="#customNodes">Custom Nodes Example</a><br />
         
         <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
         <a href="#constructor">Constructor</a><br />
@@ -427,9 +431,9 @@
           <k-html-editor id="myEditor" class="b r"></k-html-editor>
           <script>
             const myEditor = document.getElementById('myEditor');
-            setTimeout(() => {
+            myEditor.addEventListener('ready', () => {
               myEditor.setValue('<p>Select text and use the buttons above to format it!</p><p>The editor works without any built-in controls - you have full control via JavaScript.</p>');
-            }, 100);
+            });
             
             function insertMyEditorHTML() {
               myEditor.insertHTML('<p><b>Inserted content!</b></p>');
@@ -443,6 +447,43 @@
       </div>
     </div>
 
+    <h3 id="incompatibleContent"><a href="#incompatibleContent" class="no-link">Incompatible Content Example</a></h3>
+    <p>When the editor's value contains HTML that Lexical does not support (such as <code>&lt;svg&gt;</code>, <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, <code>&lt;video&gt;</code>, etc.), it automatically defaults to code mode to preserve the content. If the user attempts to switch to visual mode, a confirmation dialog warns that the incompatible code will be lost.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;svgEditor&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&lt;p&gt;This value contains an inline SVG which Lexical does not support:&lt;/p&gt;&lt;svg width=&#x27;120&#x27; height=&#x27;60&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27;&gt;&lt;rect width=&#x27;120&#x27; height=&#x27;60&#x27; rx=&#x27;8&#x27; fill=&#x27;#4a90d9&#x27;/&gt;&lt;text x=&#x27;50%&#x27; y=&#x27;50%&#x27; dominant-baseline=&#x27;middle&#x27; text-anchor=&#x27;middle&#x27; fill=&#x27;white&#x27; font-size=&#x27;14&#x27;&gt;SVG&lt;/text&gt;&lt;/svg&gt;&lt;p&gt;The editor detected incompatible content and defaulted to code mode automatically.&lt;/p&gt;&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-spacer</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;toolbar-top&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-spacer</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;toolbar-top&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-html-editor id="svgEditor" class="b r" value="<p>This value contains an inline SVG which Lexical does not support:</p><svg width='120' height='60' xmlns='http://www.w3.org/2000/svg'><rect width='120' height='60' rx='8' fill='#4a90d9'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='14'>SVG</text></svg><p>The editor detected incompatible content and defaulted to code mode automatically.</p>">
+            <k-hec-spacer slot="toolbar-top"></k-hec-spacer>
+            <k-hec-mode slot="toolbar-top"></k-hec-mode>
+          </k-html-editor>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customNodes"><a href="#customNodes" class="no-link">Custom Nodes Example</a></h3>
+    <p>Custom nodes extend what Lexical understands in visual mode. Import a node file and list its name in the <code>nodes</code> attribute (comma-separated filenames without <code>.js</code>). The built-in <code>HtmlComment</code> node preserves HTML comments as inline visual chips rather than forcing code mode — comments round-trip through the editor without being stripped.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Import the HtmlComment node --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&#x27;module&#x27;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#x27;src/components/htmlEditorNodes/HtmlComment.js&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-comment">&lt;!-- Register the node with nodes attribute --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">nodes</span>=<span class="hljs-string">&#x27;HtmlComment&#x27;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#x27;&lt;p&gt;This paragraph has an &lt;!-- important note --&gt; inline comment.&lt;/p&gt;&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-spacer</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-spacer</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <script type="module" src="/src/components/htmlEditorNodes/HtmlComment.js"></script>
+          <k-html-editor id="commentEditor" class="b r" nodes="HtmlComment" value="<p>This paragraph has an <!-- important note --> inline comment.</p>">
+            <k-hec-spacer slot="toolbar-top"></k-hec-spacer>
+            <k-hec-mode slot="toolbar-top"></k-hec-mode>
+          </k-html-editor>
+        </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>
@@ -458,23 +499,30 @@
     <p>The HTML content of the editor. Can be get or set via JavaScript or HTML attribute.</p>
 
     <h5><code>mode<i>: String</i></code></h5>
-    <p>Current editing mode. Either <code>'visual'</code> (WYSIWYG) or <code>'code'</code> (raw HTML). Default: <code>'visual'</code></p>
+    <p>Current editing mode. Either <code>'visual'</code> (WYSIWYG) or <code>'code'</code> (raw HTML). Default: <code>'visual'</code>. If the initial <code>value</code> contains content that is incompatible with the visual editor (such as <code>&lt;svg&gt;</code>, <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, etc.), the editor automatically switches to <code>'code'</code> mode to preserve the content. Custom nodes can extend what is considered compatible by defining a static <code>isVisualCompatible(domNode)</code> method.</p>
+
+    <h5><code>nodes<i>: String</i></code></h5>
+    <p>Comma-separated list of custom Lexical node module filenames (without <code>.js</code>) to load from the <code>htmlEditorNodes/</code> directory. Custom nodes can define two static hooks:</p>
+    <ul>
+      <li><code>isVisualCompatible(domNode)</code> — returns <code>true</code> if the node handles a DOM construct that would otherwise be considered incompatible (e.g., HTML comments)</li>
+      <li><code>preprocessHtml(htmlString)</code> — transforms raw HTML before Lexical parses it (e.g., converting <code>&lt;!-- --&gt;</code> to a parseable <code>&lt;span&gt;</code>)</li>
+    </ul>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
 
     <h4>Mode Control</h4>
     <h5><code>setMode(mode)<i>: this</i></code></h5>
-    <p>Set the editing mode. Accepts <code>'visual'</code> or <code>'code'</code>.</p>
+    <p>Set the editing mode. Accepts <code>'visual'</code> or <code>'code'</code>. If switching to <code>'visual'</code> and the current content is incompatible, a confirmation dialog warns that incompatible code will be lost.</p>
 
     <h5><code>toggleMode()<i>: this</i></code></h5>
-    <p>Toggle between visual and code modes.</p>
+    <p>Toggle between visual and code modes. Same incompatibility warning applies when switching to visual mode.</p>
 
     <h4>Content Management</h4>
     <h5><code>getValue()<i>: String</i></code></h5>
     <p>Returns the current HTML content.</p>
 
     <h5><code>setValue(html)<i>: this</i></code></h5>
-    <p>Sets the HTML content of the editor.</p>
+    <p>Sets the HTML content of the editor. If the editor is in visual mode and the new content is incompatible, automatically switches to code mode.</p>
 
     <h5><code>clear()<i>: this</i></code></h5>
     <p>Clears all content from the editor.</p>

package/docs/components/hybrid-component.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/icon.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/import.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/light-component.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/nav-spacer.html

@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nav Spacer - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  
+</head>
+<body>
+  
+  <k-nav fixed class="bg-primary">
+    <button id="toggleNavSideMenu" class="link">
+      <k-icon name="menu"></k-icon>
+    </button>
+    <a href="../" class="d-if ph" style="align-items: center">
+      <img src="../media/icon32.png" alt="Kempo UI Icon" class="pr" />
+      Kempo UI
+    </a>
+    <div style="position:relative;margin:0 .25rem;align-self:center;" theme="light">
+      <input id="navSearchInput" type="search" placeholder="Search docs..." autocomplete="off" style="width:11rem;" />
+      <div id="navSearchDropdown" hidden theme="light" style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);">
+        <k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
+          <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="dialog modal popup components"><a href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="dropdown select components"><a href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="filter list filterlist components"><a href="../components/filter-list.html">Filter List<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="focus capture focuscapture components"><a href="../components/focus-capture.html">Focus Capture<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="html editor components"><a href="../components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table data grid components"><a href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table controls advanced example"><a href="../components/tableControls.html">Table &mdash; Controls<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table custom fields advanced example"><a href="../components/tableCustomFields.html">Table &mdash; Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table fetch records advanced example"><a href="../components/tableFetchRecords.html">Table &mdash; Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table field sort hide advanced example"><a href="../components/tableFieldSortHide.html">Table &mdash; Field Sort &amp; Hide<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table pagination advanced example"><a href="../components/tablePagination.html">Table &mdash; Pagination<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table record editing advanced example"><a href="../components/tableRecordEditing.html">Table &mdash; Record Editing<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table record filtering advanced example"><a href="../components/tableRecordFiltering.html">Table &mdash; Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table record hiding advanced example"><a href="../components/tableRecordHiding.html">Table &mdash; Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table record searching advanced example"><a href="../components/tableRecordSearching.html">Table &mdash; Record Searching<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table record selection advanced example"><a href="../components/tableRecordSelection.html">Table &mdash; Record Selection<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table row controls advanced example"><a href="../components/tableRowControls.html">Table &mdash; Row Controls<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table server sync advanced example"><a href="../components/tableServerSync.html">Table &mdash; Server Sync<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table &mdash; Sorting<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table placeholder advanced example"><a href="../components/tablePlaceholder.html">Table &mdash; Placeholder<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="theme select dropdown dark light components"><a href="../components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="theme switcher dark light components"><a href="../components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="timestamp date time components"><a href="../components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="toggle switch checkbox components"><a href="../components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="tree treeview components"><a href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="shadow component base"><a href="../components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="light component base"><a href="../components/light-component.html">Light Component<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="hybrid component base"><a href="../components/hybrid-component.html">Hybrid Component<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="cookie utils utility"><a href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="context utils utility"><a href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="debounce utils utility"><a href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="drag utils utility"><a href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="elevation z-index stacking utils"><a href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="../utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="object utils utility"><a href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="../utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="string utils utility"><a href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="theme utils utility"><a href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="type utils utility"><a href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="wait async utils utility"><a href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
+        </k-filter-list>
+      </div>
+    </div>
+    <div class="flex"></div>
+    <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
+    <a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icon></a>
+    <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icon></a>
+    <k-theme-switcher></k-theme-switcher>
+  </k-nav>
+  <div style="width: 100%; height: 4rem;"></div>
+  <k-aside id="navSideMenu" main="overlay" state="offscreen">
+    <menu>
+      <a href="../" class="ta-center bb mb r0">
+        <h1 class="tc-primary">Kempo UI</h1>
+        <img src="../media/icon128.png" alt="Kempo UI Icon" />
+      </a>
+
+      <div class="pl mb">
+        <h3>Components</h3>
+        <a href="../components/accordion.html">Accordion</a>
+        <a href="../components/aside.html">Aside</a>
+        <a href="../components/card.html">Card</a>
+        <a href="../components/color-picker.html">ColorPicker</a>
+        <a href="../components/content-slider.html">Content Slider</a>
+        <a href="../components/context.html">Context</a>
+        <a href="../components/dialog.html">Dialog</a>
+        <a href="../components/dropdown.html">Dropdown</a>
+        <a href="../components/filter-list.html">Filter List</a>
+        <a href="../components/focus-capture.html">FocusCapture</a>
+        <a href="../components/html-editor.html">HTML Editor</a>
+        <a href="../components/icon.html">Icon</a>
+        <a href="../components/import.html">Import</a>
+        <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
+        <a href="../components/photo-viewer.html">Photo Viewer</a>
+        <a href="../components/resize.html">Resize</a>
+        <a href="../components/show-more.html">Show More</a>
+        <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/spinner.html">Spinner</a>
+        <a href="../components/split.html">Split</a>
+        <a href="../components/table.html">Table</a>
+        <a href="../components/tabs.html">Tabs</a>
+        <a href="../components/tags.html">Tags</a>
+        <a href="../components/theme-select.html">Theme Select</a>
+        <a href="../components/theme-switcher.html">Theme Switcher</a>
+        <a href="../components/timestamp.html">Timestamp</a>
+        <a href="../components/toast.html">Toast</a>
+        <a href="../components/toggle.html">Toggle</a>
+        <a href="../components/tree.html">Tree</a>
+      </div>
+
+      <h5 class="mb0">Base Components</h5>
+      <div class="pl mb">
+        <a href="../components/shadow-component.html">Shadow Component</a>
+        <a href="../components/light-component.html">Light Component</a>
+        <a href="../components/hybrid-component.html">Hybrid Component</a>
+      </div>
+
+      <h5 class="mb0">Utils</h5>
+      <div class="pl mb">
+        <a href="../utils/cookie.html">cookie</a>
+        <a href="../utils/context.html">context</a>
+        <a href="../utils/debounce.html">debounce</a>
+        <a href="../utils/drag.html">drag</a>
+        <a href="../utils/elevation.html">elevation</a>
+        <a href="../utils/formatTimestamp.html">formatTimestamp</a>
+        <a href="../utils/object.html">object</a>
+        <a href="../utils/propConverters.html">propConverters</a>
+        <a href="../utils/string.html">string</a>
+        <a href="../utils/theme.html">theme</a>
+        <a href="../utils/type.html">type</a>
+        <a href="../utils/wait.html">wait</a>
+      </div>
+    </menu>
+  </k-aside>
+  <style>
+#navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
+#navSearchList a:hover{background:rgba(128,128,128,.15);}
+#navSearchList a small{display:block;color:var(--tc_muted);}
+  </style>
+  <script src="../src/components/Nav.js" type="module"></script>
+  <script src="../src/components/FilterList.js" type="module"></script>
+  <script src="../src/components/FilterItem.js" type="module"></script>
+  <script src="../src/components/Aside.js" type="module"></script>
+  <script src="../src/components/Icon.js" type="module"></script>
+  <script src="../src/components/ThemeSwitcher.js" type="module"></script>
+  <script type="module">
+    import debounce from '../src/utils/debounce.js';
+
+    document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
+      await window.customElements.whenDefined('k-aside');
+      document.getElementById('navSideMenu').toggle();
+    });
+
+    document.addEventListener('click', function(e) {
+      if(e.target.matches('a[href^="#"]')) {
+        e.preventDefault();
+        const targetId = e.target.getAttribute('href').replace('#', '');
+        const target = document.getElementById(targetId);
+        if(target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+          const url = window.location.pathname + window.location.search + '#' + targetId;
+          history.replaceState(null, '', url);
+        }
+      }
+    });
+
+    /*
+      Nav Search
+    */
+    const searchInput = document.getElementById('navSearchInput');
+    const searchDropdown = document.getElementById('navSearchDropdown');
+    let navSearchList = null;
+
+    const openSearch = async () => {
+      await customElements.whenDefined('k-filter-list');
+      if(!navSearchList) navSearchList = document.getElementById('navSearchList');
+      navSearchList.filter(searchInput.value);
+      searchDropdown.hidden = false;
+    };
+
+    const closeSearch = () => {
+      searchDropdown.hidden = true;
+      navSearchList?.clearFocus();
+    };
+
+    searchInput.addEventListener('focus', openSearch);
+
+    searchInput.addEventListener('input', debounce(e => {
+      navSearchList?.filter(e.target.value);
+    }, 150));
+
+    searchInput.addEventListener('keydown', e => {
+      if(e.key === 'Escape') {
+        searchInput.value = '';
+        searchInput.blur();
+        closeSearch();
+      } else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        navSearchList?.handleKeydown(e);
+      }
+    });
+
+    searchInput.addEventListener('blur', () => {
+      setTimeout(closeSearch, 150);
+    });
+
+    document.addEventListener('keydown', e => {
+      let active = document.activeElement;
+      while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+      const tag = active?.tagName;
+      if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
+      if(e.metaKey || e.ctrlKey || e.altKey) return;
+      if(e.key.length === 1) {
+        searchInput.focus();
+      }
+    });
+  </script>
+
+  
+  <k-main>
+    
+    <h1 class="ta-center">Nav Spacer</h1>
+
+    <k-accordion persistent-id="toc-nav-spacer" class="b r mb">
+      <k-accordion-header for-panel="toc-nav-spacer-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-nav-spacer-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#noMargin">No Margin</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="#cssVariables">CSS Variables</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <p>Place <code>k-nav-spacer</code> immediately after a <code>&lt;k-nav fixed&gt;</code> element. It automatically measures the nav's height using a <code>ResizeObserver</code> and sets its own height to match, ensuring page content is not hidden behind the fixed nav. A default bottom margin of <code>var(--spacer)</code> separates the spacer from the content below; override it with kempo-css margin utilities like <code>mb0</code>, <code>mbh</code>, etc.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Place <code>k-nav-spacer</code> directly after the fixed nav in your HTML. It will size itself to match the nav height.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-nav</span> <span class="hljs-attr">fixed</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- nav content --&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-nav-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav-spacer</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">main</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- page content --&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="noMargin"><a href="#noMargin" class="no-link">No Margin</a></h3>
+    <p>Add <code>mb0</code> to remove the default bottom margin, or use any kempo-css margin utility to customise it.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-nav-spacer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;mb0&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav-spacer</span>&gt;</span></code></pre>
+        </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 NavSpacer()</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="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
+    <h5><code>--spacer</code></h5>
+    <p>Controls the default bottom margin. Inherited from kempo-css (default <code>1rem</code>). Override by applying a margin utility class directly to the element.</p>
+  
+  </k-main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Main.js"></script>
+  
+    <script type="module" src="../src/components/NavSpacer.js"></script>
+    <script type="module" src="../src/components/Nav.js"></script>
+    <script type="module" src="../src/components/Accordion.js"></script>
+    <script type="module" src="../src/components/Card.js"></script>
+  
+</body>
+</html>

package/docs/components/nav.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/photo-viewer.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/resize.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/components/shadow-component.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>