kempo-ui 0.4.25 → 0.4.27

package/docs/utils/elevation.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/formatTimestamp.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/object.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/propConverters.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/sanitizeHtml.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/string.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/theme.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/toTitleCase.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/type.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/voice.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

package/docs/utils/wait.html

@@ -228,6 +228,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="../components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="../utils/cookie.html">cookie</a>
         <a href="../utils/context.html">context</a>
         <a href="../utils/debounce.html">debounce</a>

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/docs-src/nav.fragment.html

@@ -212,6 +212,8 @@
           <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
               href="{{pathToRoot}}components/button.html"
             >Button<br><small>Base Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
+              href="{{pathToRoot}}utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="cookie utils utility"><a
               href="{{pathToRoot}}utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="context utils utility"><a
@@ -344,6 +346,7 @@
 
       <h5 class="mb0">Utils</h5>
       <div class="pl mb">
+        <a href="{{pathToRoot}}utils/closestAcrossShadow.html">closestAcrossShadow</a>
         <a href="{{pathToRoot}}utils/cookie.html">cookie</a>
         <a href="{{pathToRoot}}utils/context.html">context</a>
         <a href="{{pathToRoot}}utils/debounce.html">debounce</a>

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

@@ -0,0 +1,49 @@
+<page pageName="closestAcrossShadow" title="closestAcrossShadow - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>closestAcrossShadow</h1>
+    <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="#examples">Examples</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>closestAcrossShadow</code> utility works like the native
+      <code>Element.closest()</code>, but it does not stop at shadow-DOM boundaries.
+      When the current tree yields no match it continues from the host of the enclosing
+      shadow root and keeps walking up toward the document, returning the nearest matching
+      ancestor (or the element itself), or <code>null</code> if there is none.</p>
+    <p>This is useful when a component nested inside another component's shadow root needs
+      to locate a shared ancestor — for example a <a href="{{pathToRoot}}components/context.html"><code>k-context</code></a> —
+      which native <code>closest()</code> cannot reach because it never crosses shadow boundaries.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> closestAcrossShadow <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/closestAcrossShadow.js'</span>;<br /><br /><span class="hljs-comment">// From inside a deeply nested component, reach a shared k-context:</span><br /><span class="hljs-keyword">const</span> ctx = closestAcrossShadow(<span class="hljs-keyword">this</span>, <span class="hljs-string">'k-context'</span>);<br /><span class="hljs-keyword">const</span> settings = ctx?.get(<span class="hljs-string">'settings'</span>);</code></pre>
+
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>element<i>: Element</i></code></h5>
+    <p>The element to start searching from. The element itself is included in the match, just like <code>closest()</code>.</p>
+    <h5><code>selector<i>: string</i></code></h5>
+    <p>A CSS selector to match ancestors against.</p>
+    <h5><code><i>returns</i>: Element | null</code></h5>
+    <p>The nearest matching ancestor across shadow boundaries, or <code>null</code> if none match.</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+
+    <h4>Reading a context from a nested shadow component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> closestAcrossShadow <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/closestAcrossShadow.js'</span>;<br /><br />connectedCallback() {<br />  <span class="hljs-keyword">super</span>.connectedCallback();<br />  <span class="hljs-keyword">const</span> ctx = closestAcrossShadow(<span class="hljs-keyword">this</span>, <span class="hljs-string">'k-context'</span>);<br />  ctx?.addEventListener(<span class="hljs-string">'context:set'</span>, () =&gt; <span class="hljs-keyword">this</span>.requestUpdate());<br />}</code></pre>
+
+    <h4>Falls back to null</h4>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// No matching ancestor in any tree:</span><br>closestAcrossShadow(someDetachedNode, <span class="hljs-string">'.missing'</span>); <span class="hljs-comment">// =&gt; null</span></code></pre>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.25",
+  "version": "0.4.27",
   "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/utils/closestAcrossShadow.js

@@ -0,0 +1,23 @@
+/*
+  closestAcrossShadow
+
+  Like Element.closest(), but it does not stop at shadow-DOM boundaries. When the
+  current tree yields no match, it continues from the host of the enclosing shadow
+  root and keeps walking up toward the document. Returns the nearest matching
+  ancestor (or the element itself), or null if there is none.
+
+  Useful for components nested inside another component's shadow root that need to
+  locate a shared ancestor — e.g. a k-context — which native closest() can't reach.
+*/
+export const closestAcrossShadow = (element, selector) => {
+  let node = element;
+  while(node){
+    const match = node.closest?.(selector);
+    if(match) return match;
+    const root = node.getRootNode();
+    node = root instanceof ShadowRoot ? root.host : null;
+  }
+  return null;
+};
+
+export default closestAcrossShadow;

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/utils/closestAcrossShadow.browser-test.js

@@ -0,0 +1,90 @@
+import closestAcrossShadow, { closestAcrossShadow as named } from '../../src/utils/closestAcrossShadow.js';
+
+const cleanup = (el) => {
+  if(el && el.parentNode){
+    el.parentNode.removeChild(el);
+  }
+};
+
+export default {
+  'exports the function as default and named export': ({pass, fail}) => {
+    if(typeof closestAcrossShadow === 'function' && typeof named === 'function'){
+      pass('exported correctly as both default and named export');
+    } else {
+      fail('not exported correctly');
+    }
+  },
+
+  'finds an ancestor within the same tree (like closest)': ({pass, fail}) => {
+    const root = document.createElement('div');
+    root.className = 'target';
+    root.innerHTML = '<section><span id="leaf"></span></section>';
+    document.body.appendChild(root);
+    const found = closestAcrossShadow(root.querySelector('#leaf'), '.target');
+    cleanup(root);
+    if(found === root){
+      pass('found ancestor in the same tree');
+    } else {
+      fail('did not find ancestor in the same tree');
+    }
+  },
+
+  'returns the element itself when it matches': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'me';
+    document.body.appendChild(el);
+    const found = closestAcrossShadow(el, '.me');
+    cleanup(el);
+    if(found === el){
+      pass('returned the element itself');
+    } else {
+      fail('did not return the element itself');
+    }
+  },
+
+  'crosses a shadow boundary to find an ancestor': ({pass, fail}) => {
+    const host = document.createElement('div');
+    host.className = 'target';
+    document.body.appendChild(host);
+    const inner = document.createElement('span');
+    host.attachShadow({ mode: 'open' }).appendChild(inner);
+    const found = closestAcrossShadow(inner, '.target');
+    cleanup(host);
+    if(found === host){
+      pass('crossed a shadow boundary');
+    } else {
+      fail('did not cross the shadow boundary');
+    }
+  },
+
+  'crosses multiple nested shadow boundaries': ({pass, fail}) => {
+    const host = document.createElement('div');
+    host.className = 'target';
+    document.body.appendChild(host);
+    const mid = document.createElement('div');
+    host.attachShadow({ mode: 'open' }).appendChild(mid);
+    const leaf = document.createElement('span');
+    mid.attachShadow({ mode: 'open' }).appendChild(leaf);
+    const found = closestAcrossShadow(leaf, '.target');
+    cleanup(host);
+    if(found === host){
+      pass('crossed multiple nested shadow boundaries');
+    } else {
+      fail('did not cross multiple nested shadow boundaries');
+    }
+  },
+
+  'returns null when there is no match anywhere': ({pass, fail}) => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const inner = document.createElement('span');
+    host.attachShadow({ mode: 'open' }).appendChild(inner);
+    const found = closestAcrossShadow(inner, '.nope');
+    cleanup(host);
+    if(found === null){
+      pass('returned null when no match');
+    } else {
+      fail(`expected null, got ${found}`);
+    }
+  }
+};