kempo-ui 0.3.5 → 0.3.7

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

@@ -0,0 +1,494 @@
+<page pageName="Aside" title="Aside - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m">
+        <h6>Overlay Mode</h6>
+        <a href="#overlayBasic">Basic Usage</a><br />
+        <a href="#overlayClose">Closing Options</a><br />
+        <a href="#overlayRight">Right Side</a><br />
+
+        <h6 class="mt">Push Mode</h6>
+        <a href="#pushBasic">Basic Push</a><br />
+        <a href="#pushCollapsed">Collapsed State</a><br />
+        <a href="#pushRight">Right Side Push</a><br />
+
+        <h6 class="mt">Customization</h6>
+        <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 />
+        <a href="#subMenu">Expandable Menus</a><br />
+
+        <h6 class="mt">Events</h6>
+        <a href="#events">State Change Event</a><br />
+
+        <h6 class="mt">JavaScript Reference</h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#eventRef">Events</a><br />
+        <a href="#methods">Methods</a><br />
+        <a href="#cssVars">CSS Custom Properties</a><br />
+        <h6 class="mt"><a href="#subRef" class="no-link">Sub-Component Reference</a></h6>
+        <a href="#asideItem">k-aside-item</a><br />
+        <a href="#asideLabel">k-aside-label</a><br />
+        <a href="#asideMenu">k-aside-menu</a><br />
+        <a href="#asideSpacer">k-aside-spacer</a><br />
+        <a href="#asideToggle">k-aside-toggle</a><br />
+      </div>
+      </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>
+
+    <h3 id="overlayBasic"><a href="#overlayBasic" class="no-link">Basic Usage</a></h3>
+    <p>A simple overlay menu that opens from the left.</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">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">
+        <k-card label="Output">
+          <k-aside id="aside1" state="offscreen">
+            <p>Overlay Menu Content</p>
+          </k-aside>
+          <button id="open1">Open Menu</button>
+          <script>
+            document.getElementById('open1').addEventListener('click',()=>{
+              document.getElementById('aside1').expand();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="overlayClose"><a href="#overlayClose" class="no-link">Closing Options</a></h3>
+    <p>By default clicking on the overlay backdrop closes the menu. Use <code>overlay-close="false"</code> to disable this. Pressing ESC also closes by default; use <code>esc-close="false"</code> to disable.</p>
+    <p>Use <code>hide()</code> to close the menu programmatically, or <code>toggle()</code> to switch between expanded and offscreen.</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">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">
+        <k-card label="Output">
+          <k-aside id="aside2" state="offscreen" overlay-close="false">
+            <p>Overlay Menu</p>
+            <button id="close2">Close</button>
+          </k-aside>
+          <button id="open2">Open Menu</button>
+          <script>
+            const a2 = document.getElementById('aside2');
+            document.getElementById('open2').addEventListener('click',()=>{
+              a2.expand();
+            });
+            document.getElementById('close2').addEventListener('click',()=>{
+              a2.hide();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="overlayRight"><a href="#overlayRight" class="no-link">Right Side</a></h3>
+    <p>Use <code>side="right"</code> to open the menu from the right.</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">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">
+        <k-card label="Output">
+          <k-aside id="aside3" state="offscreen" side="right">
+            <p>Right Side Menu</p>
+          </k-aside>
+          <button id="open3">Open Right Menu</button>
+          <script>
+            document.getElementById('open3').addEventListener('click',()=>{
+              document.getElementById('aside3').expand();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2>Push Mode</h2>
+    <p>Set <code>main="push"</code> so the aside pushes page content. It dispatches <code>aside_state_change</code> events on <code>window</code> that <code>&lt;k-main&gt;</code> listens to, adjusting its margins. The aside below will push this page's content when toggled.</p>
+
+    <h3 id="pushBasic"><a href="#pushBasic" class="no-link">Basic Push</a></h3>
+    <p>A push-mode sidebar that shifts the page content. Click the button to toggle 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-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>
+            <nav>
+              <h3>Sidebar</h3>
+              <a href="#">Home</a>
+              <a href="#">About</a>
+              <a href="#">Contact</a>
+            </nav>
+          </k-aside>
+          <button id="toggle5">Toggle Sidebar</button>
+          <script>
+            document.getElementById('toggle5').addEventListener('click',()=>{
+              document.getElementById('aside5').toggle();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="pushCollapsed"><a href="#pushCollapsed" class="no-link">Collapsed State</a></h3>
+    <p>Use <code>collapse()</code> to show a narrow strip (width set by <code>--collapsed-width</code>). Use <code>expand()</code> to show full width, or <code>hide()</code> to go offscreen.</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>&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>
+            <nav>
+              <h3>Menu</h3>
+              <a href="#">Dashboard</a>
+              <a href="#">Settings</a>
+            </nav>
+          </k-aside>
+          <button id="btn6expand">Expand</button>
+          <button id="btn6collapse">Collapse</button>
+          <button id="btn6hide">Hide</button>
+          <script>
+            const a6 = document.getElementById('aside6');
+            document.getElementById('btn6expand').addEventListener('click',()=> a6.expand());
+            document.getElementById('btn6collapse').addEventListener('click',()=> a6.collapse());
+            document.getElementById('btn6hide').addEventListener('click',()=> a6.hide());
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="pushRight"><a href="#pushRight" class="no-link">Right Side Push</a></h3>
+    <p>Use <code>side="right"</code> with push mode to have the sidebar on the right side of the viewport.</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">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>
+            <nav>
+              <h3>Right Panel</h3>
+              <a href="#">Item 1</a>
+              <a href="#">Item 2</a>
+            </nav>
+          </k-aside>
+          <button id="toggle7">Toggle Right Sidebar</button>
+          <script>
+            document.getElementById('toggle7').addEventListener('click',()=>{
+              document.getElementById('aside7').toggle();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2>Customization</h2>
+
+    <h3 id="customWidth"><a href="#customWidth" class="no-link">Custom Width</a></h3>
+    <p>Override <code>--width</code> to change the expanded width. Default is <code>20rem</code>.</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">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">
+        <k-card label="Output">
+          <style>k-aside#aside8 { --width: 30rem; }</style>
+          <k-aside id="aside8" state="offscreen">
+            <p>This menu is 30rem wide instead of the default 20rem.</p>
+          </k-aside>
+          <button id="open8">Open Wide Menu</button>
+          <script>
+            document.getElementById('open8').addEventListener('click',()=>{
+              document.getElementById('aside8').expand();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customBg"><a href="#customBg" class="no-link">Custom Background</a></h3>
+    <p>Override <code>--bg</code> to change the background color.</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">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">
+        <k-card label="Output">
+          <style>k-aside#aside9 { --bg: var(--c_primary); --aside_padding: 0; }</style>
+          <k-aside id="aside9" state="offscreen">
+            <nav class="p tc-light">
+              <h3>Branded Menu</h3>
+              <a href="#" class="tc-light">Home</a>
+              <a href="#" class="tc-light">About</a>
+            </nav>
+          </k-aside>
+          <button id="open9">Open Branded Menu</button>
+          <script>
+            document.getElementById('open9').addEventListener('click',()=>{
+              document.getElementById('aside9').expand();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customCollapsed"><a href="#customCollapsed" class="no-link">Custom Collapsed Width</a></h3>
+    <p>Override <code>--collapsed-width</code> to change the width of the narrow strip shown in collapsed state. Default is <code>3.5rem</code>.</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">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>
+            <nav>
+              <h3>Sidebar</h3>
+              <a href="#">Dashboard</a>
+              <a href="#">Reports</a>
+              <a href="#">Settings</a>
+            </nav>
+          </k-aside>
+          <button id="btn13expand">Expand</button>
+          <button id="btn13collapse">Collapse</button>
+          <button id="btn13hide">Hide</button>
+          <script>
+            const a13 = document.getElementById('aside13');
+            document.getElementById('btn13expand').addEventListener('click',()=> a13.expand());
+            document.getElementById('btn13collapse').addEventListener('click',()=> a13.collapse());
+            document.getElementById('btn13hide').addEventListener('click',()=> a13.hide());
+          </script>
+        </k-card>
+      </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">
+            <div class="navbar-spacer"></div>
+            <nav>
+              <p>Sidebar Content</p>
+            </nav>
+          </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>
+    <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">&quot;push&quot;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&quot;expanded&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;--aside_padding: 0;&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-toggle</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;m-0&quot;</span>&gt;</span>Kempo<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-toggle</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cards&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">active</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;check&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Tasks<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;label&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-label</span>&gt;</span>Projects<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-label</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;folder&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Figma Design<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;folder&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Static Mania<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-spacer</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;settings&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;account-circle&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Profile<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</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">k-main</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Main Content<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Content adjusts when panel opens/closes.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <iframe src="./aside-items.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="subMenu"><a href="#subMenu" class="no-link">Expandable Menus</a></h2>
+    <p>Use <code>k-aside-menu</code> for collapsible sub-menus with an icon and label. When the aside is collapsed, clicking a menu icon expands the aside (unless <code>no-expand</code> is set).</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">&quot;push&quot;</span> <span class="hljs-attr">state</span>=<span class="hljs-string">&quot;expanded&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;--aside_padding: 0;&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-toggle</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;m-0&quot;</span>&gt;</span>Kempo<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-toggle</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cards&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-menu</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;folder&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Projects&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Website Redesign<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Mobile App<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-menu</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-menu</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;settings&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Settings&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>General<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Security<span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-aside-menu</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-aside</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <iframe src="./aside-menu.html" style="width: 100%; height: 400px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="events"><a href="#events" class="no-link">State Change Event</a></h2>
+    <p>The <code>aside_state_change</code> event fires on both the element and on <code>window</code> whenever the state changes. The event detail contains <code>{ aside, state, main }</code>.</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">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">
+        <k-card label="Output">
+          <k-aside id="aside10" state="offscreen">
+            <p>Open and close me to see events.</p>
+          </k-aside>
+          <button id="open10">Open Menu</button>
+          <div id="eventLog" class="p b r mt" style="font-family:monospace;min-height:3rem;"></div>
+          <script>
+            const log10 = document.getElementById('eventLog');
+            document.getElementById('aside10').addEventListener('aside_state_change', e => {
+              const entry = document.createElement('div');
+              entry.textContent = 'state: ' + e.detail.state + ', main: ' + e.detail.main;
+              log10.prepend(entry);
+            });
+            document.getElementById('open10').addEventListener('click',()=>{
+              document.getElementById('aside10').expand();
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef">JavaScript Reference</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 Aside()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./focus-capture.html">FocusCapture</a> (used in overlay mode)</li>
+      <li><strong>k-main:</strong> Wrap your page content in <code>&lt;k-main&gt;</code> so push-mode asides can shift the layout.</li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>state<i>: string</i></code></h5>
+    <p>The current state. <code>"expanded"</code> (default) shows the full aside, <code>"collapsed"</code> shows a narrow strip (width set by <code>--collapsed-width</code>), <code>"offscreen"</code> hides it. Syncs to <code>state</code> attribute.</p>
+    <h5><code>side<i>: string</i></code></h5>
+    <p>Which side of the viewport to anchor to. <code>"left"</code> (default) or <code>"right"</code>. Syncs to <code>side</code> attribute.</p>
+    <h5><code>main<i>: string</i></code></h5>
+    <p>How the aside interacts with page content. <code>"overlay"</code> (default) renders a backdrop and focus trap without affecting layout. <code>"push"</code> dispatches events so <code>&lt;k-main&gt;</code> adjusts its margins. Syncs to <code>main</code> attribute.</p>
+    <h5><code>overlayClose<i>: boolean</i></code></h5>
+    <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>
+    <p>Dispatched on the element and on <code>window</code> whenever <code>state</code> changes. Detail: <code>{ aside, state, main }</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>expand()<i>: void</i></code></h5>
+    <p>Sets state to <code>"expanded"</code>.</p>
+    <h5><code>collapse()<i>: void</i></code></h5>
+    <p>Sets state to <code>"collapsed"</code>.</p>
+    <h5><code>hide()<i>: void</i></code></h5>
+    <p>Sets state to <code>"offscreen"</code>.</p>
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Toggles between <code>"expanded"</code> and <code>"offscreen"</code>.</p>
+
+    <h3 id="cssVars"><a href="#cssVars" class="no-link">CSS Custom Properties</a></h3>
+    <h5><code>--width</code></h5>
+    <p>Width of the aside when expanded. Default <code>20rem</code>.</p>
+    <h5><code>--collapsed-width</code></h5>
+    <p>Width of the aside when collapsed. Default <code>3.5rem</code>.</p>
+    <h5><code>--bg</code></h5>
+    <p>Background color. Default <code>var(--c_bg)</code>.</p>
+    <h5><code>--border</code></h5>
+    <p>Color of the inner border. Default <code>var(--c_border)</code>.</p>
+
+    <h2 id="subRef">Sub-Component Reference</h2>
+
+    <h3 id="asideItem"><a href="#asideItem" class="no-link">k-aside-item</a></h3>
+    <p>A navigation link that reacts to the parent aside's collapsed/expanded state. Shows icon + text when expanded, icon-only when collapsed.</p>
+    <div class="table-wrapper mb">
+    <table>
+      <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
+      <tbody>
+        <tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>Icon name (renders <code>k-icon</code>). Shows a dot when collapsed if no icon set.</td></tr>
+        <tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>Link URL.</td></tr>
+        <tr><td><code>active</code></td><td>boolean</td><td><code>false</code></td><td>Highlights the item with the primary color.</td></tr>
+        <tr><td><code>no-expand</code></td><td>boolean</td><td><code>false</code></td><td>Prevents clicking a collapsed item from expanding the aside.</td></tr>
+        <tr><td><code>hide-when-collapsed</code></td><td>boolean</td><td><code>false</code></td><td>Hides the item entirely when collapsed.</td></tr>
+      </tbody>
+    </table>
+    </div>
+
+    <h3 id="asideLabel"><a href="#asideLabel" class="no-link">k-aside-label</a></h3>
+    <p>A section label. Displays text when expanded, an <code>&lt;hr&gt;</code> divider when collapsed.</p>
+    <p>No additional attributes beyond automatic collapsed state syncing.</p>
+
+    <h3 id="asideMenu"><a href="#asideMenu" class="no-link">k-aside-menu</a></h3>
+    <p>An expandable sub-menu that toggles open/closed. When the aside is collapsed, clicking the menu icon expands the aside.</p>
+    <div class="table-wrapper mb">
+    <table>
+      <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
+      <tbody>
+        <tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>Icon name for the menu header.</td></tr>
+        <tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>Text label for the menu header.</td></tr>
+        <tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>Whether the sub-menu is expanded.</td></tr>
+        <tr><td><code>no-expand</code></td><td>boolean</td><td><code>false</code></td><td>Prevents clicking a collapsed menu from expanding the aside.</td></tr>
+        <tr><td><code>hide-when-collapsed</code></td><td>boolean</td><td><code>false</code></td><td>Hides the menu entirely when collapsed.</td></tr>
+      </tbody>
+    </table>
+    </div>
+    <p>Slot: Place <code>k-aside-item</code> elements inside for sub-menu links.</p>
+
+    <h3 id="asideSpacer"><a href="#asideSpacer" class="no-link">k-aside-spacer</a></h3>
+    <p>A flexible spacer (<code>flex: 1</code>) that pushes subsequent items to the bottom of the aside. No attributes.</p>
+
+    <h3 id="asideToggle"><a href="#asideToggle" class="no-link">k-aside-toggle</a></h3>
+    <p>A header with a collapse/expand toggle button. Renders an arrow icon that flips direction based on state. Place content (e.g. a logo) in the default slot; it hides when collapsed.</p>
+    <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>
+  </content>
+</page>