kempo-ui 0.3.6 → 0.3.8

package/docs/utils/wait.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-src/components/aside.page.html

@@ -1,8 +1,9 @@
 <page pageName="Aside" title="Aside - Components - Kempo Docs - A Web Components Solution">
   <content>
-    <details class="b r mb">
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
+    <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>Overlay Mode</h6>
         <a href="#overlayBasic">Basic Usage</a><br />
         <a href="#overlayClose">Closing Options</a><br />
@@ -17,6 +18,7 @@
         <a href="#customWidth">Custom Width</a><br />
         <a href="#customBg">Custom Background</a><br />
         <a href="#customCollapsed">Custom Collapsed Width</a><br />
+        <a href="#persistentState">Persistent State</a><br />
 
         <h6 class="mt">Sub-Components</h6>
         <a href="#subItems">Items &amp; Labels</a><br />
@@ -39,7 +41,8 @@
         <a href="#asideSpacer">k-aside-spacer</a><br />
         <a href="#asideToggle">k-aside-toggle</a><br />
       </div>
-    </details>
+      </k-accordion-panel>
+    </k-accordion>
 
     <h2>Overlay Mode</h2>
     <p>The default mode. Use <code>state="offscreen"</code> as the starting state; call <code>expand()</code> to open. Clicking the backdrop or pressing ESC closes it by default.</p>
@@ -49,12 +52,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside state="offscreen"&gt;
-  &lt;p&gt;Overlay Menu Content&lt;/p&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.expand()"&gt;
-  Open Menu
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Overlay Menu Content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.expand()&#x27;</span>&gt;</span> Open Menu <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -78,16 +76,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside state="offscreen"
-  overlay-close="false"&gt;
-  &lt;p&gt;Overlay Menu&lt;/p&gt;
-  &lt;button onclick="this.closest('k-aside').hide()"&gt;
-    Close
-  &lt;/button&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.expand()"&gt;
-  Open Menu
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span> <span class="hljs-attr">overlay-close</span>=<span class="hljs-string">&#x27;false&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Overlay Menu<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.closest(&quot;k-aside&quot;).hide()&#x27;</span>&gt;</span> Close <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.expand()&#x27;</span>&gt;</span> Open Menu <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -115,13 +104,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside state="offscreen"
-  side="right"&gt;
-  &lt;p&gt;Right Side Menu&lt;/p&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.expand()"&gt;
-  Open Right Menu
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span> <span class="hljs-attr">side</span>=<span class="hljs-string">&#x27;right&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Right Side Menu<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.expand()&#x27;</span>&gt;</span> Open Right Menu <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -147,23 +130,13 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside main="push" state="offscreen"&gt;
-  &lt;nav&gt;
-    &lt;h3&gt;Sidebar&lt;/h3&gt;
-    &lt;a href="#"&gt;Home&lt;/a&gt;
-    &lt;a href="#"&gt;About&lt;/a&gt;
-    &lt;a href="#"&gt;Contact&lt;/a&gt;
-  &lt;/nav&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.toggle()"&gt;
-  Toggle Sidebar
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">&#x27;push&#x27;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Sidebar<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Contact<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.toggle()&#x27;</span>&gt;</span> Toggle Sidebar <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside5" main="push" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Sidebar</h3>
               <a href="#">Home</a>
@@ -186,23 +159,13 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside main="push" state="offscreen"&gt;
-  &lt;nav&gt;
-    &lt;h3&gt;Menu&lt;/h3&gt;
-    &lt;a href="#"&gt;Dashboard&lt;/a&gt;
-    &lt;a href="#"&gt;Settings&lt;/a&gt;
-  &lt;/nav&gt;
-&lt;/k-aside&gt;
-
-&lt;button onclick="aside.expand()"&gt;Expand&lt;/button&gt;
-&lt;button onclick="aside.collapse()"&gt;Collapse&lt;/button&gt;
-&lt;button onclick="aside.hide()"&gt;Hide&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">&#x27;push&#x27;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Menu<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;aside.expand()&#x27;</span>&gt;</span>Expand<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;aside.collapse()&#x27;</span>&gt;</span>Collapse<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;aside.hide()&#x27;</span>&gt;</span>Hide<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside6" main="push" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Menu</h3>
               <a href="#">Dashboard</a>
@@ -227,22 +190,13 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside main="push" side="right" state="offscreen"&gt;
-  &lt;nav&gt;
-    &lt;h3&gt;Right Panel&lt;/h3&gt;
-    &lt;a href="#"&gt;Item 1&lt;/a&gt;
-    &lt;a href="#"&gt;Item 2&lt;/a&gt;
-  &lt;/nav&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.toggle()"&gt;
-  Toggle Right Sidebar
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">&#x27;push&#x27;</span> <span class="hljs-attr">side</span>=<span class="hljs-string">&#x27;right&#x27;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Right Panel<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.toggle()&#x27;</span>&gt;</span> Toggle Right Sidebar <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside7" main="push" side="right" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Right Panel</h3>
               <a href="#">Item 1</a>
@@ -266,15 +220,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;style&gt;
-  k-aside { --width: 30rem; }
-&lt;/style&gt;
-&lt;k-aside state="offscreen"&gt;
-  &lt;p&gt;This menu is 30rem wide.&lt;/p&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.expand()"&gt;
-  Open Wide Menu
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"><br>  k-<span class="hljs-selector-tag">aside</span> {<br>    <span class="hljs-attr">--width</span>: <span class="hljs-number">30rem</span>;<br>  }<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This menu is 30rem wide.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.expand()&#x27;</span>&gt;</span> Open Wide Menu <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -298,19 +244,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;style&gt;
-  k-aside { --bg: var(--c_primary); }
-&lt;/style&gt;
-&lt;k-aside state="offscreen"&gt;
-  &lt;nav class="p tc-light"&gt;
-    &lt;h3&gt;Branded Menu&lt;/h3&gt;
-    &lt;a href="#" class="tc-light"&gt;Home&lt;/a&gt;
-    &lt;a href="#" class="tc-light"&gt;About&lt;/a&gt;
-  &lt;/nav&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="this.previousElementSibling.expand()"&gt;
-  Open Branded Menu
-&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"><br>  k-<span class="hljs-selector-tag">aside</span> {<br>    <span class="hljs-attr">--bg</span>: <span class="hljs-built_in">var</span>(--c_primary);<br>  }<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;p tc-light&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Branded Menu<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;tc-light&#x27;</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;tc-light&#x27;</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.expand()&#x27;</span>&gt;</span> Open Branded Menu <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -338,28 +272,14 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;style&gt;
-  k-aside { --collapsed-width: 5rem; }
-&lt;/style&gt;
-&lt;k-aside main="push" state="offscreen"&gt;
-  &lt;nav&gt;
-    &lt;h3&gt;Sidebar&lt;/h3&gt;
-    &lt;a href="#"&gt;Dashboard&lt;/a&gt;
-    &lt;a href="#"&gt;Reports&lt;/a&gt;
-    &lt;a href="#"&gt;Settings&lt;/a&gt;
-  &lt;/nav&gt;
-&lt;/k-aside&gt;
-
-&lt;button onclick="aside.expand()"&gt;Expand&lt;/button&gt;
-&lt;button onclick="aside.collapse()"&gt;Collapse&lt;/button&gt;
-&lt;button onclick="aside.hide()"&gt;Hide&lt;/button&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"><br>  k-<span class="hljs-selector-tag">aside</span> {<br>    <span class="hljs-attr">--collapsed-width</span>: <span class="hljs-number">5rem</span>;<br>  }<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">&#x27;push&#x27;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Sidebar<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Reports<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&#x27;#&#x27;</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;aside.expand()&#x27;</span>&gt;</span>Expand<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;aside.collapse()&#x27;</span>&gt;</span>Collapse<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;aside.hide()&#x27;</span>&gt;</span>Hide<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <style>k-aside#aside13 { --collapsed-width: 5rem; }</style>
           <k-aside id="aside13" main="push" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Sidebar</h3>
               <a href="#">Dashboard</a>
@@ -380,6 +300,34 @@
       </div>
     </div>
 
+    <h3 id="persistentState"><a href="#persistentState" class="no-link">Persistent State</a></h3>
+    <p>Use <code>persistent-id</code> to remember the aside's state across page loads. The state is saved to <code>localStorage</code> under the key <code>aside-persistent-id-{id}</code> and restored when the element is connected. Works with <code>"expanded"</code>, <code>"collapsed"</code>, and <code>"offscreen"</code> states.</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-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">&#x27;push&#x27;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">&#x27;my-nav&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Sidebar Content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.expand()&#x27;</span>&gt;</span>Expand<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.collapse()&#x27;</span>&gt;</span>Collapse<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;this.previousElementSibling.hide()&#x27;</span>&gt;</span>Hide<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-aside id="aside-persist" main="push" state="offscreen" persistent-id="docs-aside-persist-demo">
+            <k-nav-spacer></k-nav-spacer>
+            <p>Sidebar Content</p>
+          </k-aside>
+          <button id="btn-persist-expand">Expand</button>
+          <button id="btn-persist-collapse">Collapse</button>
+          <button id="btn-persist-hide">Hide</button>
+          <p class="mt"><small>Toggle the state and reload the page — it will be restored.</small></p>
+          <script>
+            const aPersist = document.getElementById('aside-persist');
+            document.getElementById('btn-persist-expand').addEventListener('click',()=> aPersist.expand());
+            document.getElementById('btn-persist-collapse').addEventListener('click',()=> aPersist.collapse());
+            document.getElementById('btn-persist-hide').addEventListener('click',()=> aPersist.hide());
+          </script>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="subItems"><a href="#subItems" class="no-link">Items &amp; Labels</a></h2>
     <p>Use <code>k-aside-item</code>, <code>k-aside-label</code>, and <code>k-aside-spacer</code> inside a push-mode aside for a navigation panel with icons and text. Set <code>--aside_padding: 0;</code> on the aside so the sub-components control their own spacing.</p>
     <p>Items and labels automatically react to the aside's collapsed/expanded state.</p>
@@ -416,17 +364,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html">&lt;k-aside id="myAside" state="offscreen"&gt;
-  &lt;p&gt;Open and close me to see events.&lt;/p&gt;
-&lt;/k-aside&gt;
-&lt;button onclick="myAside.expand()"&gt;Open Menu&lt;/button&gt;
-&lt;div id="log"&gt;&lt;/div&gt;
-
-&lt;script&gt;
-  myAside.addEventListener('aside_state_change', e =&gt; {
-    log.textContent = 'state: ' + e.detail.state;
-  });
-&lt;/script&gt;</code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-aside</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&#x27;myAside&#x27;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&#x27;offscreen&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Open and close me to see events.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&#x27;myAside.expand()&#x27;</span>&gt;</span>Open Menu<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&#x27;log&#x27;</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">script</span>&gt;</span><span class="language-javascript"><br>  myAside.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;aside_state_change&#x27;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {<br>    log.<span class="hljs-property">textContent</span> = <span class="hljs-string">&#x27;state: &#x27;</span> + e.<span class="hljs-property">detail</span>.<span class="hljs-property">state</span>;<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -475,6 +413,8 @@
     <p>Whether clicking the overlay backdrop closes the aside. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
     <h5><code>escClose<i>: boolean</i></code></h5>
     <p>Whether pressing the ESC key closes the aside. Defaults to <code>true</code>. Syncs to <code>esc-close</code> attribute.</p>
+    <h5><code>persistentId<i>: string | null</i></code></h5>
+    <p>When set, the aside's <code>state</code> is saved to <code>localStorage</code> under <code>aside-persistent-id-{id}</code> on every change, and restored when the element connects. Defaults to <code>null</code>. Syncs to <code>persistent-id</code> attribute.</p>
 
     <h3 id="eventRef"><a href="#eventRef" class="no-link">Events</a></h3>
     <h5><code>aside_state_change</code></h5>
@@ -545,7 +485,9 @@
     <p>No additional attributes. Automatically syncs with the parent aside's state.</p>
   </content>
   <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Aside.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/NavSpacer.js"></script>
   </content>
 </page>

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

@@ -7,6 +7,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 />
@@ -180,9 +182,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>');
@@ -196,6 +198,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>
@@ -211,23 +250,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-src/components/nav-spacer.page.html

@@ -0,0 +1,65 @@
+<page pageName="Nav Spacer" title="Nav Spacer - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <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>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/NavSpacer.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Nav.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/index.page.html

@@ -119,6 +119,12 @@
           <p class="tc-muted">Fixed navigation bar with automatic elevation applied at the correct stacking level.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/nav-spacer.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Nav Spacer</h3>
+          <p class="tc-muted">Auto-sizing spacer that offsets page content below a fixed nav bar.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/photo-viewer.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Photo Viewer</h3>

package/docs-src/nav.fragment.html

@@ -25,6 +25,7 @@
           <k-filter-item filter-keywords="icon components"><a href="{{pathToRoot}}components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="{{pathToRoot}}components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="{{pathToRoot}}components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="{{pathToRoot}}components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -102,6 +103,7 @@
         <a href="{{pathToRoot}}components/icon.html">Icon</a>
         <a href="{{pathToRoot}}components/import.html">Import</a>
         <a href="{{pathToRoot}}components/nav.html">Nav</a>
+        <a href="{{pathToRoot}}components/nav-spacer.html">Nav Spacer</a>
         <a href="{{pathToRoot}}components/photo-viewer.html">Photo Viewer</a>
         <a href="{{pathToRoot}}components/resize.html">Resize</a>
         <a href="{{pathToRoot}}components/show-more.html">Show More</a>

package/docs-src/utils/formatTimestamp.page.html

@@ -3,18 +3,18 @@
   <content>
     <h1>formatTimestamp</h1>
     
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
+    <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>Usage</h6>
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#parameters">Parameters</a><br />
         <a href="#formatTokens">Format Tokens</a><br />
         <a href="#examples">Examples</a><br />
       </div>
-    </details>
+      </k-accordion-panel>
+    </k-accordion>
 
     <h3>Description</h3>
     <p>The <code>formatTimestamp</code> utility function formats timestamps using custom format tokens or locale-specific formatting.</p>