kempo-ui 0.4.24 → 0.4.26

package/dist/components/Context.js

@@ -1 +1 @@
-import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";export default class s extends e{static properties={data:{type:String,reflect:!0}};constructor(){super(),this.data="{}"}connectedCallback(){super.connectedCallback(),this.style.display="contents"}set(t,e){const s=JSON.parse(this.data||"{}"),a=!(t in s),n=s[t];s[t]=e,this.data=JSON.stringify(s),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const s=e[t];delete e[t],this.data=JSON.stringify(e),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:s},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",s);
+import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";const s=Symbol("persist");export default class i extends e{static properties={data:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this[s]=()=>{if(this.persistentId&&window?.localStorage)try{window.localStorage.setItem(`context-persistent-id-${this.persistentId}`,this.data)}catch{}},this.data="{}",this.persistentId=null}connectedCallback(){if(super.connectedCallback(),this.style.display="contents",this.persistentId&&window?.localStorage){const t=window.localStorage.getItem(`context-persistent-id-${this.persistentId}`);t&&(this.data=t)}}set(t,e){const i=JSON.parse(this.data||"{}"),a=!(t in i),n=i[t];i[t]=e,this.data=JSON.stringify(i),this[s](),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const i=e[t];delete e[t],this.data=JSON.stringify(e),this[s](),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:i},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",i);

package/dist/components/PhotoViewer.js

@@ -1,4 +1,4 @@
-import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from"../lit-all.min.js";import{boolExists as i}from"../utils/propConverters.js";import"./Icon.js";export default class l extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:i},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:i},global:{type:Boolean,reflect:!0,converter:i}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}static open(e,t=0,n={}){const{keyboardControls:i=!0,onClose:l}=n,s=document.createElement("div");s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.zIndex="80";const r=e.map(e=>{const t=document.createElement("k-photo-viewer");return t.src=e.src,t.alt=e.alt||"",t.keyboardControls=i,void 0!==e.caption&&("string"==typeof e.caption?t.innerHTML=e.caption:o(e.caption,t)),s.appendChild(t),t});(document.querySelector("[data-overlay-root]")||document.body).appendChild(s);const a=()=>{r.some(e=>e.fullscreen)||(r.forEach(e=>e.removeEventListener("fullscreenclose",a)),s.remove(),l?.())};r.forEach(e=>e.addEventListener("fullscreenclose",a));const c=Math.min(Math.max(t,0),r.length-1);return r[c].open(),r[c]}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter(e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
+import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from"../lit-all.min.js";import{boolExists as l}from"../utils/propConverters.js";import"./Icon.js";export default class i extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:l},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:l},global:{type:Boolean,reflect:!0,converter:l}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),e.has("fullscreen")){this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),document.body.classList.toggle("no-scroll",this.fullscreen);const e=this.closest("[data-overlay-root]");e&&e.classList.toggle("no-scroll",this.fullscreen),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))}(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}static open(e,t=0,n={}){const{keyboardControls:l=!0,onClose:i}=n,s=document.createElement("div");s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.zIndex="80";const r=e.map(e=>{const t=document.createElement("k-photo-viewer");return t.src=e.src,t.alt=e.alt||"",t.keyboardControls=l,void 0!==e.caption&&("string"==typeof e.caption?t.innerHTML=e.caption:o(e.caption,t)),s.appendChild(t),t});(document.querySelector("[data-overlay-root]")||document.body).appendChild(s);const a=()=>{r.some(e=>e.fullscreen)||(r.forEach(e=>e.removeEventListener("fullscreenclose",a)),s.remove(),i?.())};r.forEach(e=>e.addEventListener("fullscreenclose",a));const c=Math.min(Math.max(t,0),r.length-1);return r[c].open(),r[c]}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter(e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
 		:host {
 			display: block;
 		}
@@ -132,4 +132,4 @@ import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from".
 					</div>
 				</div>
 			</div>
-		`}}customElements.define("k-photo-viewer",l);
+		`}}customElements.define("k-photo-viewer",i);

package/docs/components/context.html

@@ -505,6 +505,7 @@
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#events">Listening to Events</a><br />
           <a href="#usingInComponents">Using in Components</a><br />
+          <a href="#persistence">Persistence</a><br />
           <a href="#interactiveDemo">Interactive Demo</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -565,6 +566,17 @@
     </div>
     <p>To react to context changes from inside a shadow-DOM component, listen on the context element directly — events bubble and are <code>composed: true</code> so they also cross shadow boundaries.</p>
 
+    <h3 id="persistence"><a href="#persistence" class="no-link">Persistence</a></h3>
+    <p>Set a <code>persistent-id</code> to automatically save the store to <code>localStorage</code> and restore it on the next page load — the same convention used by <code>Split</code>, <code>Accordion</code>, <code>Tabs</code> and <code>Aside</code>. The data is reloaded in <code>connectedCallback</code> (before descendants read it) and re-saved on every <code>set()</code>, <code>delete()</code> and <code>clear()</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-context</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">&quot;app-settings&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-context</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+    <p>Because the entire store is JSON-serialized into a single value, keep persisted contexts to small, serializable state (settings, selections, ids) — not large or non-JSON data. Scope what you persist by giving config its own <code>persistent-id</code> context and leaving transient state in a separate, non-persistent <code>k-context</code>.</p>
+
     <h3 id="interactiveDemo"><a href="#interactiveDemo" class="no-link">Interactive Demo</a></h3>
     <div class="row -mx">
       <div class="col m-span-12 t-span-6 px">
@@ -630,6 +642,11 @@
           <td><code>String</code> (JSON)</td>
           <td>A JSON string representing the initial store state. Reflects back to the attribute as state changes via the component's methods. Defaults to <code>'{}'</code>.</td>
         </tr>
+        <tr>
+          <td><code>persistent-id</code></td>
+          <td><code>String</code></td>
+          <td>When set, the store is auto-saved to <code>localStorage</code> (key <code>context-persistent-id-&lt;id&gt;</code>) on every change and restored on connect. Defaults to <code>null</code> (no persistence).</td>
+        </tr>
       </tbody>
     </table>
     </div>

package/docs/src/components/Context.js

@@ -1 +1 @@
-import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";export default class s extends e{static properties={data:{type:String,reflect:!0}};constructor(){super(),this.data="{}"}connectedCallback(){super.connectedCallback(),this.style.display="contents"}set(t,e){const s=JSON.parse(this.data||"{}"),a=!(t in s),n=s[t];s[t]=e,this.data=JSON.stringify(s),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const s=e[t];delete e[t],this.data=JSON.stringify(e),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:s},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",s);
+import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";const s=Symbol("persist");export default class i extends e{static properties={data:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this[s]=()=>{if(this.persistentId&&window?.localStorage)try{window.localStorage.setItem(`context-persistent-id-${this.persistentId}`,this.data)}catch{}},this.data="{}",this.persistentId=null}connectedCallback(){if(super.connectedCallback(),this.style.display="contents",this.persistentId&&window?.localStorage){const t=window.localStorage.getItem(`context-persistent-id-${this.persistentId}`);t&&(this.data=t)}}set(t,e){const i=JSON.parse(this.data||"{}"),a=!(t in i),n=i[t];i[t]=e,this.data=JSON.stringify(i),this[s](),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const i=e[t];delete e[t],this.data=JSON.stringify(e),this[s](),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:i},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",i);

package/docs/src/components/PhotoViewer.js

@@ -1,4 +1,4 @@
-import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from"../lit-all.min.js";import{boolExists as i}from"../utils/propConverters.js";import"./Icon.js";export default class l extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:i},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:i},global:{type:Boolean,reflect:!0,converter:i}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}static open(e,t=0,n={}){const{keyboardControls:i=!0,onClose:l}=n,s=document.createElement("div");s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.zIndex="80";const r=e.map(e=>{const t=document.createElement("k-photo-viewer");return t.src=e.src,t.alt=e.alt||"",t.keyboardControls=i,void 0!==e.caption&&("string"==typeof e.caption?t.innerHTML=e.caption:o(e.caption,t)),s.appendChild(t),t});(document.querySelector("[data-overlay-root]")||document.body).appendChild(s);const a=()=>{r.some(e=>e.fullscreen)||(r.forEach(e=>e.removeEventListener("fullscreenclose",a)),s.remove(),l?.())};r.forEach(e=>e.addEventListener("fullscreenclose",a));const c=Math.min(Math.max(t,0),r.length-1);return r[c].open(),r[c]}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter(e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
+import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from"../lit-all.min.js";import{boolExists as l}from"../utils/propConverters.js";import"./Icon.js";export default class i extends e{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:l},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:l},global:{type:Boolean,reflect:!0,converter:l}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),e.has("fullscreen")){this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),document.body.classList.toggle("no-scroll",this.fullscreen);const e=this.closest("[data-overlay-root]");e&&e.classList.toggle("no-scroll",this.fullscreen),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))}(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}static open(e,t=0,n={}){const{keyboardControls:l=!0,onClose:i}=n,s=document.createElement("div");s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.zIndex="80";const r=e.map(e=>{const t=document.createElement("k-photo-viewer");return t.src=e.src,t.alt=e.alt||"",t.keyboardControls=l,void 0!==e.caption&&("string"==typeof e.caption?t.innerHTML=e.caption:o(e.caption,t)),s.appendChild(t),t});(document.querySelector("[data-overlay-root]")||document.body).appendChild(s);const a=()=>{r.some(e=>e.fullscreen)||(r.forEach(e=>e.removeEventListener("fullscreenclose",a)),s.remove(),i?.())};r.forEach(e=>e.addEventListener("fullscreenclose",a));const c=Math.min(Math.max(t,0),r.length-1);return r[c].open(),r[c]}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter(e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=n`
 		:host {
 			display: block;
 		}
@@ -132,4 +132,4 @@ import e from"./ShadowComponent.js";import{html as t,css as n,render as o}from".
 					</div>
 				</div>
 			</div>
-		`}}customElements.define("k-photo-viewer",l);
+		`}}customElements.define("k-photo-viewer",i);

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

@@ -9,6 +9,7 @@
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#events">Listening to Events</a><br />
           <a href="#usingInComponents">Using in Components</a><br />
+          <a href="#persistence">Persistence</a><br />
           <a href="#interactiveDemo">Interactive Demo</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -69,6 +70,17 @@
     </div>
     <p>To react to context changes from inside a shadow-DOM component, listen on the context element directly — events bubble and are <code>composed: true</code> so they also cross shadow boundaries.</p>
 
+    <h3 id="persistence"><a href="#persistence" class="no-link">Persistence</a></h3>
+    <p>Set a <code>persistent-id</code> to automatically save the store to <code>localStorage</code> and restore it on the next page load — the same convention used by <code>Split</code>, <code>Accordion</code>, <code>Tabs</code> and <code>Aside</code>. The data is reloaded in <code>connectedCallback</code> (before descendants read it) and re-saved on every <code>set()</code>, <code>delete()</code> and <code>clear()</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-context</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">&quot;app-settings&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-context</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+    <p>Because the entire store is JSON-serialized into a single value, keep persisted contexts to small, serializable state (settings, selections, ids) — not large or non-JSON data. Scope what you persist by giving config its own <code>persistent-id</code> context and leaving transient state in a separate, non-persistent <code>k-context</code>.</p>
+
     <h3 id="interactiveDemo"><a href="#interactiveDemo" class="no-link">Interactive Demo</a></h3>
     <div class="row -mx">
       <div class="col m-span-12 t-span-6 px">
@@ -134,6 +146,11 @@
           <td><code>String</code> (JSON)</td>
           <td>A JSON string representing the initial store state. Reflects back to the attribute as state changes via the component's methods. Defaults to <code>'{}'</code>.</td>
         </tr>
+        <tr>
+          <td><code>persistent-id</code></td>
+          <td><code>String</code></td>
+          <td>When set, the store is auto-saved to <code>localStorage</code> (key <code>context-persistent-id-&lt;id&gt;</code>) on every change and restored on connect. Defaults to <code>null</code> (no persistence).</td>
+        </tr>
       </tbody>
     </table>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.24",
+  "version": "0.4.26",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Context.js

@@ -4,18 +4,51 @@
   A non-rendering state container for sharing data between sibling and descendant
   components, similar in purpose to React's useContext. Place it as an ancestor
   of components that need shared state; children locate it via closest('k-context').
+
+  Set a `persistent-id` to auto-save/load the data to localStorage (the same
+  convention used by Split, Accordion, Tabs and Aside).
 */
 import { html } from '../lit-all.min.js';
 import LightComponent from './LightComponent.js';
 
+/*
+  Symbols
+*/
+const persist = Symbol('persist');
+
 export default class Context extends LightComponent {
+  /*
+    Reactive Properties / Attributes
+  */
   static properties = {
-    data: { type: String, reflect: true }
+    data: { type: String, reflect: true },
+    persistentId: { type: String, reflect: true, attribute: 'persistent-id' }
   };
 
+  /*
+    Constructor
+  */
   constructor() {
     super();
+
+    /*
+      Private Methods
+    */
+    // Mirror the data blob into localStorage whenever a persistent-id is set, so the
+    // next page load can restore it. Guarded so a full/blocked store (private mode,
+    // quota) never throws out of a set/delete.
+    this[persist] = () => {
+      if(!this.persistentId || !window?.localStorage) return;
+      try {
+        window.localStorage.setItem(`context-persistent-id-${this.persistentId}`, this.data);
+      } catch { /* storage unavailable — keep working in-memory */ }
+    };
+
+    /*
+      Init Props
+    */
     this.data = '{}';
+    this.persistentId = null;
   }
 
   /*
@@ -24,6 +57,14 @@ export default class Context extends LightComponent {
   connectedCallback() {
     super.connectedCallback();
     this.style.display = 'contents';
+    // Restore persisted state up front, before descendants read it on their own
+    // connect. Setting data directly (rather than per-key set) intentionally skips
+    // events: the context is an ancestor, so children read the loaded values via
+    // closest('k-context').get() when they first render.
+    if(this.persistentId && window?.localStorage){
+      const stored = window.localStorage.getItem(`context-persistent-id-${this.persistentId}`);
+      if(stored) this.data = stored;
+    }
   }
 
   /*
@@ -35,6 +76,7 @@ export default class Context extends LightComponent {
     const oldValue = obj[key];
     obj[key] = value;
     this.data = JSON.stringify(obj);
+    this[persist]();
     this.dispatchEvent(new CustomEvent(isNew ? 'context:create' : 'context:set', {
       detail: isNew ? { key, value } : { key, value, oldValue },
       bubbles: true,
@@ -56,6 +98,7 @@ export default class Context extends LightComponent {
     const value = obj[key];
     delete obj[key];
     this.data = JSON.stringify(obj);
+    this[persist]();
     this.dispatchEvent(new CustomEvent('context:delete', {
       detail: { key, value },
       bubbles: true,

package/src/components/PhotoViewer.js

@@ -104,7 +104,11 @@ export default class PhotoViewer extends ShadowComponent {
 			}));
 			this.dispatchEvent(new CustomEvent(this.fullscreen ? 'fullscreen' : 'fullscreenclose'));
 			this.updateNavigationState();
-			
+
+			document.body.classList.toggle('no-scroll', this.fullscreen);
+			const overlayRoot = this.closest('[data-overlay-root]');
+			if(overlayRoot) overlayRoot.classList.toggle('no-scroll', this.fullscreen);
+
 			if(this.keyboardControls) {
 				if(this.fullscreen) {
 					document.addEventListener('keydown', this.handleKeydown);

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

@@ -10,6 +10,17 @@ const createContext = async () => {
   return { container, el };
 };
 
+const createPersistentContext = async (persistentId) => {
+  const container = document.createElement('div');
+  container.innerHTML = `<k-context persistent-id="${persistentId}"></k-context>`;
+  document.body.appendChild(container);
+  const el = container.querySelector('k-context');
+  await el.updateComplete;
+  return { container, el };
+};
+
+const storageKey = (id) => `context-persistent-id-${id}`;
+
 const cleanup = (container) => {
   if(container && container.parentNode){
     container.parentNode.removeChild(container);
@@ -234,5 +245,68 @@ export default {
     }
     cleanup(container);
     pass('getData() returns a shallow copy of all data');
+  },
+
+  /*
+    persistent-id (localStorage auto save/load)
+  */
+  'set() writes data to localStorage when persistent-id is set': async ({pass, fail}) => {
+    const id = 'persist-set-' + Date.now();
+    window.localStorage.removeItem(storageKey(id));
+    const { container, el } = await createPersistentContext(id);
+    el.set('theme', 'dark');
+    let stored;
+    try { stored = JSON.parse(window.localStorage.getItem(storageKey(id))); } catch(e) {
+      cleanup(container); window.localStorage.removeItem(storageKey(id));
+      return fail('localStorage value is not valid JSON');
+    }
+    cleanup(container); window.localStorage.removeItem(storageKey(id));
+    if(!stored || stored.theme !== 'dark'){
+      return fail(`Expected stored {theme:'dark'}, got ${JSON.stringify(stored)}`);
+    }
+    pass('set() persisted to localStorage');
+  },
+
+  'restores data from localStorage on connect': async ({pass, fail}) => {
+    const id = 'persist-load-' + Date.now();
+    window.localStorage.setItem(storageKey(id), JSON.stringify({ count: 7 }));
+    const { container, el } = await createPersistentContext(id);
+    const value = el.get('count');
+    cleanup(container); window.localStorage.removeItem(storageKey(id));
+    if(value !== 7){
+      return fail(`Expected restored count to be 7, got ${value}`);
+    }
+    pass('data restored from localStorage on connect');
+  },
+
+  'delete() updates localStorage': async ({pass, fail}) => {
+    const id = 'persist-delete-' + Date.now();
+    window.localStorage.removeItem(storageKey(id));
+    const { container, el } = await createPersistentContext(id);
+    el.set('a', 1);
+    el.set('b', 2);
+    el.delete('a');
+    let stored;
+    try { stored = JSON.parse(window.localStorage.getItem(storageKey(id))); } catch(e) {
+      cleanup(container); window.localStorage.removeItem(storageKey(id));
+      return fail('localStorage value is not valid JSON');
+    }
+    cleanup(container); window.localStorage.removeItem(storageKey(id));
+    if(!stored || 'a' in stored || stored.b !== 2){
+      return fail(`Expected stored to drop 'a' and keep b:2, got ${JSON.stringify(stored)}`);
+    }
+    pass('delete() updated localStorage');
+  },
+
+  'does not write to localStorage without a persistent-id': async ({pass, fail}) => {
+    const before = window.localStorage.length;
+    const { container, el } = await createContext();
+    el.set('x', 1);
+    const after = window.localStorage.length;
+    cleanup(container);
+    if(after !== before){
+      return fail('A context without persistent-id should not touch localStorage');
+    }
+    pass('no persistent-id means no localStorage writes');
   }
 };

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

@@ -872,5 +872,69 @@ export default {
 		}
 
 		pass('Container mounts into the [data-overlay-root] element');
+	},
+
+	/*
+		Scroll Lock Tests
+	*/
+	'should add no-scroll to body when opened': async ({pass, fail}) => {
+		const { container, viewer } = await createPhotoViewer();
+
+		viewer.open();
+		await viewer.updateComplete;
+
+		const hasClass = document.body.classList.contains('no-scroll');
+		viewer.close();
+		await viewer.updateComplete;
+
+		cleanup(container);
+		if(!hasClass){
+			fail('document.body should have no-scroll class when fullscreen');
+			return;
+		}
+
+		pass('document.body gets no-scroll class when opened');
+	},
+
+	'should remove no-scroll from body when closed': async ({pass, fail}) => {
+		const { container, viewer } = await createPhotoViewer({ fullscreen: true });
+
+		viewer.close();
+		await viewer.updateComplete;
+
+		const hasClass = document.body.classList.contains('no-scroll');
+		cleanup(container);
+
+		if(hasClass){
+			fail('document.body should not have no-scroll class when closed');
+			return;
+		}
+
+		pass('document.body loses no-scroll class when closed');
+	},
+
+	'should add no-scroll to the nearest [data-overlay-root] when opened': async ({pass, fail}) => {
+		const root = document.createElement('div');
+		root.setAttribute('data-overlay-root', '');
+		document.body.appendChild(root);
+
+		const viewer = document.createElement('k-photo-viewer');
+		root.appendChild(viewer);
+		await viewer.updateComplete;
+
+		viewer.open();
+		await viewer.updateComplete;
+
+		const hasClass = root.classList.contains('no-scroll');
+		viewer.close();
+		await viewer.updateComplete;
+		root.remove();
+
+		if(!hasClass){
+			fail('[data-overlay-root] should have no-scroll class when a descendant viewer is fullscreen');
+			return;
+		}
+
+		pass('[data-overlay-root] gets no-scroll class when opened');
 	}
 };