kempo-ui 0.3.6 → 0.3.7

package/dist/components/Aside.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,this.state)}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
 				<k-focus-capture>
 					<div id="container">
 						<button id="overlay-btn" @click=${this.overlayClick}>

package/dist/components/Main.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:s}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:s}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state&&"function"==typeof t.getTargetWidth){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:n}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:n}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
 			<main>
 				<slot></slot>
 			</main>

package/docs/components/aside.html

@@ -247,9 +247,10 @@
   
   <k-main>
     
-    <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 />
@@ -264,6 +265,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 />
@@ -286,7 +288,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>
@@ -296,12 +299,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">
@@ -325,16 +323,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">
@@ -362,13 +351,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">
@@ -394,17 +377,7 @@
     <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">
@@ -433,17 +406,7 @@
     <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">
@@ -474,16 +437,7 @@
     <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">
@@ -513,15 +467,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">
@@ -545,19 +491,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">
@@ -585,21 +519,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 { --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">
@@ -627,6 +547,36 @@
       </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>
@@ -663,17 +613,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">
@@ -722,6 +662,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>
@@ -795,6 +737,7 @@
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Main.js"></script>
   
+    <script type="module" src="../src/components/Accordion.js"></script>
     <script type="module" src="../src/components/Aside.js"></script>
     <script type="module" src="../src/components/Card.js"></script>
   

package/docs/src/components/Aside.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,this.state)}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
 				<k-focus-capture>
 					<div id="container">
 						<button id="overlay-btn" @click=${this.overlayClick}>

package/docs/src/components/Main.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:s}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:s}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state&&"function"==typeof t.getTargetWidth){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:n}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:n}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
 			<main>
 				<slot></slot>
 			</main>

package/docs/utils/formatTimestamp.html

@@ -247,18 +247,18 @@
     
     <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>

package/docs/utils/toTitleCase.html

@@ -247,18 +247,18 @@
     
     <h1>toTitleCase</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="#returnValue">Return Value</a><br />
         <a href="#examples">Examples</a><br />
       </div>
-    </details>
+      </k-accordion-panel>
+    </k-accordion>
 
     <h3>Description</h3>
     <p>The <code>toTitleCase</code> utility function converts strings to title case format. It handles camelCase, snake_case, kebab-case, and regular text, converting them into properly capitalized title case with spaces between words.</p>

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,17 +130,7 @@
     <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">
@@ -186,17 +159,7 @@
     <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">
@@ -227,16 +190,7 @@
     <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">
@@ -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,21 +272,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 { --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">
@@ -380,6 +300,36 @@
       </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>
@@ -416,17 +366,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 +415,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,6 +487,7 @@
     <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>

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>

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

@@ -3,18 +3,18 @@
   <content>
     <h1>toTitleCase</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="#returnValue">Return Value</a><br />
         <a href="#examples">Examples</a><br />
       </div>
-    </details>
+      </k-accordion-panel>
+    </k-accordion>
 
     <h3>Description</h3>
     <p>The <code>toTitleCase</code> utility function converts strings to title case format. It handles camelCase, snake_case, kebab-case, and regular text, converting them into properly capitalized title case with spaces between words.</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -12,8 +12,8 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
-    "prod": "npx kempo-server --root docs --config docs/prod.config.json",
-    "dev": "npx kempo-server --root docs-src",
+    "docs": "npx kempo-server --root docs --config docs/prod.config.json",
+    "dev": "npx kempo-server --root docs-src --port 8083",
     "icon": "node bin/icon.js",
     "geticon": "node bin/get_icon.js",
     "listicons": "node bin/list_icons.js",

package/src/components/Aside.js

@@ -10,7 +10,8 @@ export default class Aside extends ShadowComponent {
 		side: { type: String, reflect: true },
 		main: { type: String, reflect: true },
 		overlayClose: { type: Boolean, reflect: true, attribute: 'overlay-close', converter: boolTrueFalse },
-		escClose: { type: Boolean, reflect: true, attribute: 'esc-close', converter: boolTrueFalse }
+		escClose: { type: Boolean, reflect: true, attribute: 'esc-close', converter: boolTrueFalse },
+		persistentId: { type: String, reflect: true, attribute: 'persistent-id' }
 	};
 
 	constructor() {
@@ -20,6 +21,7 @@ export default class Aside extends ShadowComponent {
 		this.main = 'overlay';
 		this.overlayClose = true;
 		this.escClose = true;
+		this.persistentId = null;
 	}
 
 	/*
@@ -39,6 +41,11 @@ export default class Aside extends ShadowComponent {
 	updated(changedProperties) {
 		super.updated(changedProperties);
 
+		if(changedProperties.has('persistentId') && this.persistentId && window?.localStorage) {
+			const saved = window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);
+			if(saved) this.state = saved;
+		}
+
 		if(changedProperties.has('state')) {
 			const prev = changedProperties.get('state');
 
@@ -61,6 +68,10 @@ export default class Aside extends ShadowComponent {
 			this.dispatchEvent(new CustomEvent('aside_state_change', { detail }));
 			window.dispatchEvent(new CustomEvent('aside_state_change', { detail }));
 			this.inert = this.state === 'offscreen';
+
+			if(this.persistentId && window?.localStorage) {
+				window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`, this.state);
+			}
 		}
 	}
 

package/src/components/Main.js

@@ -15,7 +15,7 @@ export default class Main extends ShadowComponent {
 		window.addEventListener('aside_state_change', this.handleAsideChange);
 
 		document.querySelectorAll('k-aside[main="push"]').forEach(aside => {
-			if(aside.state !== 'offscreen') {
+			if(aside.state !== 'offscreen' && typeof aside.getTargetWidth === 'function') {
 				const width = aside.getTargetWidth(aside.state);
 				if(width > 0) {
 					this.widthMap.set(aside, { side: aside.side || 'left', width });

package/tests/components/Aside.browser-test.js

@@ -452,6 +452,81 @@ export default {
 		pass('Dispatches offscreen event on disconnect');
 	},
 
+	/*
+		Persistent ID
+	*/
+	'persistentId: should default to null': async ({pass, fail}) => {
+		const aside = await createAside();
+		if(aside.persistentId !== null) {
+			cleanup(aside);
+			return fail(`Expected persistentId null, got ${aside.persistentId}`);
+		}
+		cleanup(aside);
+		pass('persistentId defaults to null');
+	},
+
+	'persistentId: should save state to localStorage on state change': async ({pass, fail}) => {
+		const id = `test-aside-save-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.removeItem(key);
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		aside.persistentId = id;
+		await aside.updateComplete;
+		aside.expand();
+		await aside.updateComplete;
+		const saved = localStorage.getItem(key);
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(saved !== 'expanded') return fail(`Expected "expanded" in localStorage, got "${saved}"`);
+		pass('persistentId saves state to localStorage');
+	},
+
+	'persistentId: should restore state from localStorage on connect': async ({pass, fail}) => {
+		const id = `test-aside-restore-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.setItem(key, 'expanded');
+		const aside = document.createElement('k-aside');
+		aside.setAttribute('main', 'push');
+		aside.setAttribute('state', 'offscreen');
+		aside.setAttribute('persistent-id', id);
+		document.body.appendChild(aside);
+		await aside.updateComplete;
+		// Wait for the property change to apply
+		await new Promise(r => setTimeout(r, 50));
+		const state = aside.state;
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(state !== 'expanded') return fail(`Expected restored state "expanded", got "${state}"`);
+		pass('persistentId restores state from localStorage');
+	},
+
+	'persistentId: should save collapsed state': async ({pass, fail}) => {
+		const id = `test-aside-collapsed-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.removeItem(key);
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		aside.persistentId = id;
+		await aside.updateComplete;
+		aside.collapse();
+		await aside.updateComplete;
+		const saved = localStorage.getItem(key);
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(saved !== 'collapsed') return fail(`Expected "collapsed" in localStorage, got "${saved}"`);
+		pass('persistentId saves collapsed state');
+	},
+
+	'persistentId: should not save state when not set': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		const keysBefore = Object.keys(localStorage).filter(k => k.startsWith('aside-persistent-id-'));
+		aside.expand();
+		await aside.updateComplete;
+		const keysAfter = Object.keys(localStorage).filter(k => k.startsWith('aside-persistent-id-'));
+		cleanup(aside);
+		if(keysAfter.length > keysBefore.length) return fail('Should not save to localStorage when persistentId is null');
+		pass('Does not save to localStorage without persistentId');
+	},
+
 	/*
 		AsideItem
 	*/