kempo-ui 0.0.35 → 0.0.36

package/dist/components/ThemeSwitcher.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=e=>{"theme"===e.key&&(this.currentTheme=e.newValue||"auto",document.documentElement.setAttribute("theme",this.currentTheme))};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import theme from"../utils/theme.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=theme.get()}handleClick=()=>{const e=theme.get();"auto"===e&&theme.set("light"),"light"===e&&theme.set("dark"),"dark"===e&&theme.set("auto")};connectedCallback(){super.connectedCallback(),this.unsubscribe=theme.subscribe(e=>{this.currentTheme=e})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}static styles=css`
 		:host {
 			--padding: var(--spacer);
 			display: flex;
@@ -20,4 +20,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		button.no-btn {
 			padding: var(--padding);
 		}
-	`;static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),window.dispatchEvent(new StorageEvent("storage",{key:"theme",newValue:e}))}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),customElements.define("k-theme-switcher",ThemeSwitcher);
+	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-switcher",ThemeSwitcher);

package/dist/utils/context.js

@@ -0,0 +1 @@
+const contexts={},getContext=e=>(contexts[e]||(contexts[e]={value:void 0,subscribers:new Set}),contexts[e]);export const createContext=(e="global",t)=>{const s=getContext(e);return void 0!==t&&void 0===s.value&&(s.value=t),{get:()=>s.value,set:e=>{s.value=e,s.subscribers.forEach(t=>t(e))},subscribe:e=>(s.subscribers.add(e),e(s.value),()=>s.subscribers.delete(e)),unsubscribe:e=>s.subscribers.delete(e)}};export default createContext;

package/dist/utils/theme.js

@@ -0,0 +1 @@
+import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme());themeContext.subscribe(e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme};

package/docs/components/theme-switcher.html

@@ -37,7 +37,8 @@
     </k-accordion>
 
     <h3>Description</h3>
-    <p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./shadow-component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
+    <p>The <code>ThemeSwitcher</code> component provides a UI control for users to switch between different themes (auto, light, dark). It extends the <a href="./shadow-component.html">ShadowComponent</a> class and uses the <a href="../utils/theme.html">theme utility</a> internally for state management, persistence, and synchronization.</p>
+    <p><strong>Note:</strong> You can manage theme state without this component by directly importing the <a href="../utils/theme.html">theme utility</a>.</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Use the <code>ThemeSwitcher</code> component to allow users to cycle through themes. Clicking the button cycles through auto → light → dark → auto. The component automatically detects the user's system preference when in auto mode.</p>
@@ -84,6 +85,7 @@
     <ul>
       <li><a href="./shadow-component.html">ShadowComponent</a></li>
       <li><a href="./icon.html">Icon</a></li>
+      <li><a href="../utils/theme.html">theme</a> utility</li>
     </ul>
 
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
@@ -101,8 +103,9 @@
     <p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./shadow-component.html">ShadowComponent</a> class.</p>
 
     <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
+    <p><strong>Note:</strong> These static methods are convenience wrappers around the <a href="../utils/theme.html">theme utility</a>. For direct theme management without the component, use the theme utility directly.</p>
     <h5><code>static setTheme(theme)<i>: void</i></code></h5>
-    <p>Sets the specified theme and saves it to local storage. Also applies the theme to the document element and dispatches a storage event for cross-tab synchronization.</p>
+    <p>Sets the specified theme. Internally calls the <a href="../utils/theme.html">theme utility</a> which handles persistence and DOM updates.</p>
     <ul>
       <li><strong>theme</strong> <code>string</code> - The theme to set. Must be one of: <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code></li>
     </ul>
@@ -110,20 +113,29 @@
 <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">setTheme</span>(<span class="hljs-string">'dark'</span>);</code></pre>
 
     <h5><code>static getCurrentTheme()<i>: string</i></code></h5>
-    <p>Gets the current theme from the document attribute or local storage. Returns <code>"auto"</code> if no theme is set.</p>
+    <p>Gets the current theme. Returns <code>"auto"</code> if no theme is set. Internally calls the <a href="../utils/theme.html">theme utility</a>.</p>
     <pre><code class="hljs javascript"><span class="hljs-comment">// Get the current theme</span>
 <span class="hljs-keyword">const</span> currentTheme = <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">getCurrentTheme</span>();
 <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentTheme); <span class="hljs-comment">// "auto", "light", or "dark"</span></code></pre>
+    
+    <h5><code>static getCalculatedCurrentTheme()<i>: string</i></code></h5>
+    <p>Returns the effective theme, always <code>"dark"</code> or <code>"light"</code>. If the current theme is <code>"auto"</code>, this method uses the user's system preference (<code>prefers-color-scheme</code> media query) to determine the theme. Internally calls the <a href="../utils/theme.html">theme utility</a>.</p>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// Get the calculated current theme</span>
+  <span class="hljs-keyword">const</span> effectiveTheme = <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">getCalculatedCurrentTheme</span>();
+  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(effectiveTheme); <span class="hljs.comment">// "dark" or "light"</span></code></pre>
 
     <h3 id="themeDetection"><a href="#themeDetection" class="no-link">Automatic Theme Detection</a></h3>
-    <p>When the theme is set to <code>"auto"</code>, the component automatically detects the user's system preference using <code>prefers-color-scheme</code> media query. The detected theme is applied to the document element as an <code>auto-theme</code> attribute.</p>
-    <p>The component also synchronizes theme changes across browser tabs using the storage event, ensuring a consistent user experience.</p>
+    <p>When the theme is set to <code>"auto"</code>, the <a href="../utils/theme.html">theme utility</a> automatically detects the user's system preference using <code>prefers-color-scheme</code> media query. The detected theme is applied to the document element as an <code>auto-theme</code> attribute.</p>
+    <p>The theme utility handles persistence via localStorage and ensures theme changes are reflected in the DOM, providing a consistent user experience.</p>
+    
+    <h3>Related</h3>
+    <p>See the <a href="../utils/theme.html">theme utility</a> documentation for programmatic theme management without using this component.</p>
 
   </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script> 
   <script type="module" src="../src/components/ThemeSwitcher.js"></script> 
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
-
 </body>
 </html>

package/docs/index.html

@@ -207,6 +207,18 @@
 
     <h2>Utils</h2>
     <div class="row -mx">
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/cookie.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">cookie</h3>
+          <p class="tc-muted">Functions for managing browser cookies.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/context.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">context</h3>
+          <p class="tc-muted">Global or named shared state for vanilla JS components.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./utils/debounce.html" class="card mb no-link d-b">
           <h3 class="tc-primary">debounce</h3>
@@ -237,6 +249,12 @@
           <p class="tc-muted">Collection of functions for string manipulation and conversion.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/theme.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">theme</h3>
+          <p class="tc-muted">Centralized theme management with persistence and reactive updates.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./utils/type.html" class="card mb no-link d-b">
           <h3 class="tc-primary">type</h3>
@@ -249,12 +267,6 @@
           <p class="tc-muted">Functions for manipulating and analyzing JavaScript objects.</p>
         </a>
       </div>
-      <div class="span-12 t-span-6 d-span-4 px">
-        <a href="./utils/cookie.html" class="card mb no-link d-b">
-          <h3 class="tc-primary">cookie</h3>
-          <p class="tc-muted">Functions for managing browser cookies.</p>
-        </a>
-      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./utils/wait.html" class="card mb no-link d-b">
           <h3 class="tc-primary">wait</h3>

package/docs/nav-1.inc.html

@@ -65,12 +65,14 @@
     <h5 class="mb0">Utils</h5>
     <div class="pl mb">
       <a href="../utils/cookie.html">cookie</a>
+      <a href="../utils/context.html">context</a>
       <a href="../utils/debounce.html">debounce</a>
       <a href="../utils/drag.html">drag</a>
       <a href="../utils/formatTimestamp.html">formatTimestamp</a>
       <a href="../utils/object.html">object</a>
       <a href="../utils/propConverters.html">propConverters</a>
       <a href="../utils/string.html">string</a>
+      <a href="../utils/theme.html">theme</a>
       <a href="../utils/type.html">type</a>
       <a href="../utils/wait.html">wait</a>
     </div>

package/docs/nav.inc.html

@@ -54,6 +54,7 @@
       <a href="./components/timestamp.html">Timestamp</a>
       <a href="./components/toggle.html">Toggle</a>
       <a href="./components/tree.html">Tree</a>
+        <a href="./utils/context.html">Context Utility</a>
     </div>
 
     <h5 class="mb0">Base Components</h5>
@@ -66,6 +67,7 @@
     <h5 class="mb0">Utils</h5>
     <div class="pl mb">
       <a href="./utils/cookie.html">cookie</a>
+        <a href="./utils/context.html">context</a>
       <a href="./utils/debounce.html">debounce</a>
       <a href="./utils/drag.html">drag</a>
       <a href="./utils/formatTimestamp.html">formatTimestamp</a>

package/docs/src/components/ThemeSwitcher.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=e=>{"theme"===e.key&&(this.currentTheme=e.newValue||"auto",document.documentElement.setAttribute("theme",this.currentTheme))};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import theme from"../utils/theme.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=theme.get()}handleClick=()=>{const e=theme.get();"auto"===e&&theme.set("light"),"light"===e&&theme.set("dark"),"dark"===e&&theme.set("auto")};connectedCallback(){super.connectedCallback(),this.unsubscribe=theme.subscribe(e=>{this.currentTheme=e})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}static styles=css`
 		:host {
 			--padding: var(--spacer);
 			display: flex;
@@ -20,4 +20,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		button.no-btn {
 			padding: var(--padding);
 		}
-	`;static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),window.dispatchEvent(new StorageEvent("storage",{key:"theme",newValue:e}))}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),customElements.define("k-theme-switcher",ThemeSwitcher);
+	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-switcher",ThemeSwitcher);

package/docs/src/utils/context.js

@@ -0,0 +1 @@
+const contexts={},getContext=e=>(contexts[e]||(contexts[e]={value:void 0,subscribers:new Set}),contexts[e]);export const createContext=(e="global",t)=>{const s=getContext(e);return void 0!==t&&void 0===s.value&&(s.value=t),{get:()=>s.value,set:e=>{s.value=e,s.subscribers.forEach(t=>t(e))},subscribe:e=>(s.subscribers.add(e),e(s.value),()=>s.subscribers.delete(e)),unsubscribe:e=>s.subscribers.delete(e)}};export default createContext;

package/docs/src/utils/theme.js

@@ -0,0 +1 @@
+import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme());themeContext.subscribe(e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme};

package/docs/utils/context.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Context Utility - Kempo UI</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <main>
+    <h1>Context Utility</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="#api">API Methods</a><br />
+          <a href="#examples">Examples</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>createContext</code> utility provides a simple way to create global or named shared state that components can subscribe to. It enables reactive state management with automatic subscriber notifications on value changes.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and create a context to manage shared state:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-comment">// Create a named context with initial value</span><br /><span class="hljs-keyword">const</span> userContext = createContext(<span class="hljs-string">'user'</span>, { <span class="hljs-attr">name</span>: <span class="hljs-string">'Guest'</span> });<br /><br /><span class="hljs-comment">// Subscribe to changes</span><br />userContext.subscribe(<span class="hljs-function">(<span class="hljs-params">user</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'User changed:'</span>, user);<br />});<br /><br /><span class="hljs-comment">// Update the context value</span><br />userContext.set({ <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span> });</code></pre>
+
+    <h3 id="api"><a href="#api" class="no-link">API Methods</a></h3>
+
+    <h4><code>createContext(name, initialValue)</code></h4>
+    <p>Creates or retrieves a context with the specified name.</p>
+    <h5><code>name<i>: string</i></code> (optional)</h5>
+    <p>The name of the context. Defaults to <code>'global'</code>. Using the same name returns the same context instance.</p>
+    <h5><code>initialValue<i>: any</i></code> (optional)</h5>
+    <p>The initial value for the context. Only set if the context doesn't already have a value.</p>
+    <h5>Returns: <code>Object</code></h5>
+    <p>An object with the following methods:</p>
+
+    <h4><code>get()</code></h4>
+    <p>Returns the current value of the context.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> currentValue = userContext.get();</code></pre>
+
+    <h4><code>set(value)</code></h4>
+    <p>Updates the context value and notifies all subscribers.</p>
+    <pre><code class="hljs javascript">userContext.set({ <span class="hljs-attr">name</span>: <span class="hljs-string">'Jane Doe'</span>, <span class="hljs-attr">role</span>: <span class="hljs-string">'admin'</span> });</code></pre>
+
+    <h4><code>subscribe(callback)</code></h4>
+    <p>Subscribes to context changes. The callback is immediately invoked with the current value, then called again whenever the value changes.</p>
+    <h5><code>callback<i>: Function</i></code></h5>
+    <p>Function to call when the context value changes. Receives the new value as an argument.</p>
+    <h5>Returns: <code>Function</code></h5>
+    <p>An unsubscribe function to remove the subscription.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> unsubscribe = userContext.subscribe(<span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'New value:'</span>, value);<br />});<br /><br /><span class="hljs-comment">// Later, stop listening</span><br />unsubscribe();</code></pre>
+
+    <h4><code>unsubscribe(callback)</code></h4>
+    <p>Removes a subscriber callback from the context.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> <span class="hljs-built_in">console</span>.log(value);<br />userContext.subscribe(handler);<br />userContext.unsubscribe(handler);</code></pre>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+
+    <h4>Theme Management</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-keyword">const</span> themeContext = createContext(<span class="hljs-string">'theme'</span>, <span class="hljs-string">'light'</span>);<br /><br /><span class="hljs-comment">// Components can subscribe to theme changes</span><br />themeContext.subscribe(<span class="hljs-function">(<span class="hljs-params">theme</span>) =&gt;</span> {<br />  <span class="hljs-built_in">document</span>.body.className = theme;<br />});<br /><br /><span class="hljs-comment">// Toggle theme from anywhere</span><br /><span class="hljs-keyword">const</span> toggleTheme = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />  <span class="hljs-keyword">const</span> current = themeContext.get();<br />  themeContext.set(current === <span class="hljs-string">'light'</span> ? <span class="hljs-string">'dark'</span> : <span class="hljs-string">'light'</span>);<br />};</code></pre>
+
+    <h4>Component State Sharing</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-keyword">const</span> cartContext = createContext(<span class="hljs-string">'cart'</span>, []);<br /><br /><span class="hljs-comment">// Add item from one component</span><br /><span class="hljs-keyword">const</span> addToCart = <span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> items = cartContext.get();<br />  cartContext.set([...items, item]);<br />};<br /><br /><span class="hljs-comment">// Display cart in another component</span><br />cartContext.subscribe(<span class="hljs-function">(<span class="hljs-params">items</span>) =&gt;</span> {<br />  <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.cart-count'</span>).textContent = items.length;<br />});</code></pre>
+
+    <h4>Global vs Named Contexts</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/context.js'</span>;<br /><br /><span class="hljs-comment">// Use default global context</span><br /><span class="hljs-keyword">const</span> globalCtx = createContext();<br />globalCtx.set({ <span class="hljs-attr">appReady</span>: <span class="hljs-literal">true</span> });<br /><br /><span class="hljs-comment">// Named contexts are isolated</span><br /><span class="hljs-keyword">const</span> userCtx = createContext(<span class="hljs-string">'user'</span>);<br /><span class="hljs-keyword">const</span> settingsCtx = createContext(<span class="hljs-string">'settings'</span>);<br /><br /><span class="hljs-comment">// Same name returns the same context instance</span><br /><span class="hljs-keyword">const</span> userCtx2 = createContext(<span class="hljs-string">'user'</span>);<br /><span class="hljs-built_in">console</span>.log(userCtx === userCtx2); <span class="hljs-comment">// true</span></code></pre>
+
+    <h4>Working Example</h4>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML & JavaScript">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"context-demo"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Current count: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"count-display"</span>&gt;</span>0<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"increment"</span>&gt;</span>Increment<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"decrement"</span>&gt;</span>Decrement<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"reset"</span>&gt;</span>Reset<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript">
+<span class="hljs-keyword">import</span> createContext <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/context.js'</span>;
+
+<span class="hljs-keyword">const</span> counterContext = createContext(<span class="hljs-string">'counter'</span>, <span class="hljs-number">0</span>);
+
+<span class="hljs-comment">// Subscribe to updates</span>
+counterContext.subscribe(<span class="hljs-function">(<span class="hljs-params">count</span>) =&gt;</span> {
+  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'count-display'</span>).textContent = count;
+});
+
+<span class="hljs-comment">// Button handlers</span>
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'increment'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+    counterContext.<span class="hljs-title function_">set</span>(counterContext.<span class="hljs-title function_">get</span>() + <span class="hljs-number">1</span>);
+  });
+
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'decrement'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+    counterContext.<span class="hljs-title function_">set</span>(counterContext.<span class="hljs-title function_">get</span>() - <span class="hljs-number">1</span>);
+  });
+
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'reset'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+    counterContext.<span class="hljs-title function_">set</span>(<span class="hljs-number">0</span>);
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div id="context-demo">
+            <p>Current count: <strong id="count-display">0</strong></p>
+            <button id="increment" class="primary">Increment</button>
+            <button id="decrement">Decrement</button>
+            <button id="reset" class="danger">Reset</button>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+  <script type="module">
+    import createContext from '../src/utils/context.js';
+
+    const counterContext = createContext('counter-demo', 0);
+
+    counterContext.subscribe(count => {
+      document.getElementById('count-display').textContent = count;
+    });
+
+    document.getElementById('increment').addEventListener('click', () => {
+      counterContext.set(counterContext.get() + 1);
+    });
+
+    document.getElementById('decrement').addEventListener('click', () => {
+      counterContext.set(counterContext.get() - 1);
+    });
+
+    document.getElementById('reset').addEventListener('click', () => {
+      counterContext.set(0);
+    });
+  </script>
+</body>
+</html>

package/docs/utils/theme.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Theme Utility - Kempo UI</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script src="../init-1.js" type="module"></script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <main>
+    <h1>Theme Utility</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="#api">API Methods</a><br />
+          <a href="#examples">Examples</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>theme</code> utility provides a centralized way to manage the application's theme state. It handles theme persistence via localStorage, automatic system preference detection, and reactive updates across components. This utility works independently of the ThemeSwitcher component, allowing any part of your application to read, set, or subscribe to theme changes.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the theme utility to manage application themes:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-comment">// Get current theme</span><br /><span class="hljs-keyword">const</span> currentTheme = theme.get(); <span class="hljs-comment">// 'auto', 'light', or 'dark'</span><br /><br /><span class="hljs-comment">// Set theme</span><br />theme.set(<span class="hljs-string">'dark'</span>);<br /><br /><span class="hljs-comment">// Subscribe to theme changes</span><br /><span class="hljs-keyword">const</span> unsubscribe = theme.subscribe(<span class="hljs-function">(<span class="hljs-params">newTheme</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Theme changed to:'</span>, newTheme);<br />});</code></pre>
+
+    <h3 id="api"><a href="#api" class="no-link">API Methods</a></h3>
+
+    <h4><code>theme.get()</code></h4>
+    <p>Returns the current theme value.</p>
+    <h5>Returns: <code>string</code></h5>
+    <p>One of: <code>'auto'</code>, <code>'light'</code>, or <code>'dark'</code></p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> currentTheme = theme.get();<br /><span class="hljs-built_in">console</span>.log(currentTheme); <span class="hljs-comment">// 'auto', 'light', or 'dark'</span></code></pre>
+
+    <h4><code>theme.set(value)</code></h4>
+    <p>Sets the theme and automatically persists it to localStorage and updates the DOM.</p>
+    <h5><code>value<i>: string</i></code></h5>
+    <p>The theme to set. Must be one of: <code>'auto'</code>, <code>'light'</code>, or <code>'dark'</code></p>
+    <pre><code class="hljs javascript">theme.set(<span class="hljs-string">'dark'</span>);</code></pre>
+
+    <h4><code>theme.subscribe(callback)</code></h4>
+    <p>Subscribes to theme changes. The callback is immediately invoked with the current theme, then called again whenever the theme changes.</p>
+    <h5><code>callback<i>: Function</i></code></h5>
+    <p>Function to call when the theme changes. Receives the new theme value as an argument.</p>
+    <h5>Returns: <code>Function</code></h5>
+    <p>An unsubscribe function to remove the subscription.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> unsubscribe = theme.subscribe(<span class="hljs-function">(<span class="hljs-params">newTheme</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Theme is now:'</span>, newTheme);<br />});<br /><br /><span class="hljs-comment">// Later, stop listening</span><br />unsubscribe();</code></pre>
+
+    <h4><code>theme.getCalculated()</code></h4>
+    <p>Returns the effective theme, resolving <code>'auto'</code> to either <code>'light'</code> or <code>'dark'</code> based on the user's system preference.</p>
+    <h5>Returns: <code>string</code></h5>
+    <p>Either <code>'light'</code> or <code>'dark'</code></p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> effectiveTheme = theme.getCalculated();<br /><span class="hljs-built_in">console</span>.log(effectiveTheme); <span class="hljs-comment">// Always 'light' or 'dark'</span></code></pre>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+
+    <h4>Reading Theme Without Component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-comment">// Get theme anywhere in your app</span><br /><span class="hljs-keyword">const</span> currentTheme = theme.get();<br /><span class="hljs-keyword">const</span> isDark = theme.getCalculated() === <span class="hljs-string">'dark'</span>;<br /><br /><span class="hljs-keyword">if</span>(isDark){<br />  <span class="hljs-comment">// Apply dark-specific logic</span><br />}</code></pre>
+
+    <h4>Component Subscribing to Theme</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { LitElement, html } <span class="hljs-keyword">from</span> <span class="hljs-string">'lit'</span>;<br /><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">LitElement</span> {<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">theme</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br />  };<br /><br />  <span class="hljs-title function_">connectedCallback</span>() {<br />    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">connectedCallback</span>();<br />    <span class="hljs-variable language_">this</span>.<span class="hljs-property">unsubscribe</span> = theme.<span class="hljs-title function_">subscribe</span>(<span class="hljs-function">(<span class="hljs-params">t</span>) =&gt;</span> {<br />      <span class="hljs-variable language_">this</span>.<span class="hljs-property">theme</span> = t;<br />    });<br />  }<br /><br />  <span class="hljs-title function_">disconnectedCallback</span>() {<br />    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">disconnectedCallback</span>();<br />    <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">unsubscribe</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">unsubscribe</span>();<br />  }<br /><br />  <span class="hljs-title function_">render</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`&lt;p&gt;Current theme: ${this.theme}&lt;/p&gt;`</span>;<br />  }<br />}</code></pre>
+
+    <h4>Setting Theme Programmatically</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/theme.js'</span>;<br /><br /><span class="hljs-comment">// Set theme based on user preference from API</span><br /><span class="hljs-keyword">const</span> userPreferences = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetchUserPreferences</span>();<br />theme.<span class="hljs-title function_">set</span>(userPreferences.<span class="hljs-property">theme</span>);<br /><br /><span class="hljs-comment">// Toggle between light and dark</span><br /><span class="hljs-keyword">const</span> <span class="hljs-title function_">toggleTheme</span> = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br />  <span class="hljs-keyword">const</span> current = theme.<span class="hljs-title function_">get</span>();<br />  <span class="hljs-keyword">if</span>(current === <span class="hljs-string">'dark'</span>) theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'light'</span>);<br />  <span class="hljs-keyword">else</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'dark'</span>);<br />};</code></pre>
+
+    <h4>Working Example</h4>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML & JavaScript">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"theme-demo"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Current theme: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"theme-display"</span>&gt;</span>auto<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Calculated: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"calculated-display"</span>&gt;</span>dark<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"set-auto"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"set-light"</span>&gt;</span>Light<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"set-dark"</span>&gt;</span>Dark<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript">
+<span class="hljs-keyword">import</span> theme <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/theme.js'</span>;
+
+<span class="hljs-comment">// Subscribe to updates</span>
+theme.subscribe(<span class="hljs-function">(<span class="hljs-params">t</span>) =&gt;</span> {
+  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'theme-display'</span>).textContent = t;
+  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'calculated-display'</span>).textContent = 
+    theme.<span class="hljs-title function_">getCalculated</span>();
+});
+
+<span class="hljs-comment">// Button handlers</span>
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'set-auto'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'auto'</span>));
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'set-light'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'light'</span>));
+<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'set-dark'</span>)
+  .<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> theme.<span class="hljs-title function_">set</span>(<span class="hljs-string">'dark'</span>));
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <div id="theme-demo">
+            <p>Current theme: <strong id="theme-display">auto</strong></p>
+            <p>Calculated: <strong id="calculated-display">dark</strong></p>
+            <button id="set-auto">Auto</button>
+            <button id="set-light" class="primary">Light</button>
+            <button id="set-dark" class="danger">Dark</button>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Automatic Features</h3>
+    <h4>localStorage Persistence</h4>
+    <p>The theme utility automatically saves the current theme to <code>localStorage</code> with the key <code>'theme'</code>. This means the user's theme preference persists across page reloads and browser sessions.</p>
+
+    <h4>DOM Attribute Updates & Kempo CSS Integration</h4>
+    <p>Whenever the theme changes, it's automatically applied to <code>document.documentElement</code> as a <code>theme</code> attribute. This sets the <code>color-scheme</code> property which enables Kempo CSS's <code>light-dark()</code> function to work correctly.</p>
+    <p>Kempo CSS provides theme-aware CSS custom properties that automatically adapt to light and dark modes. See the <a href="https://dustinpoissant.github.io/kempo-css/" target="_blank" rel="noopener noreferrer">Kempo CSS documentation</a> for details on available color variables and theming.</p>
+
+    <h4>System Preference Detection</h4>
+    <p>When the theme is set to <code>'auto'</code>, the utility monitors the system's <code>prefers-color-scheme</code> media query and updates the <code>auto-theme</code> attribute on the document element. The <code>getCalculated()</code> method resolves the actual theme based on this preference.</p>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+  <script type="module">
+    import theme from '../src/utils/theme.js';
+
+    theme.subscribe(t => {
+      document.getElementById('theme-display').textContent = t;
+      document.getElementById('calculated-display').textContent = theme.getCalculated();
+    });
+
+    document.getElementById('set-auto').addEventListener('click', () => theme.set('auto'));
+    document.getElementById('set-light').addEventListener('click', () => theme.set('light'));
+    document.getElementById('set-dark').addEventListener('click', () => theme.set('dark'));
+  </script>
+</body>
+</html>

package/package.json

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

package/src/components/ThemeSwitcher.js

@@ -1,5 +1,6 @@
 import ShadowComponent from './ShadowComponent.js';
 import { html, css } from '../lit-all.min.js';
+import theme from '../utils/theme.js';
 import './Icon.js';
 
 export default class ThemeSwitcher extends ShadowComponent {
@@ -10,24 +11,17 @@ export default class ThemeSwitcher extends ShadowComponent {
 
 	constructor() {
 		super();
-		this.currentTheme = ThemeSwitcher.getCurrentTheme();
+		this.currentTheme = theme.get();
 	}
 
 	/*
 		Event Handlers
 	*/
 	handleClick = () => {
-		const current = ThemeSwitcher.getCurrentTheme();
-		if(current === 'auto') ThemeSwitcher.setTheme('light');
-		if(current === 'light') ThemeSwitcher.setTheme('dark');
-		if(current === 'dark') ThemeSwitcher.setTheme('auto');
-	}
-
-	handleStorageChange = (event) => {
-		if (event.key === 'theme') {
-			this.currentTheme = event.newValue || 'auto';
-			document.documentElement.setAttribute('theme', this.currentTheme);
-		}
+		const current = theme.get();
+		if(current === 'auto') theme.set('light');
+		if(current === 'light') theme.set('dark');
+		if(current === 'dark') theme.set('auto');
 	}
 
 	/*
@@ -35,12 +29,14 @@ export default class ThemeSwitcher extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('storage', this.handleStorageChange);
+		this.unsubscribe = theme.subscribe(t => {
+			this.currentTheme = t;
+		});
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		window.removeEventListener('storage', this.handleStorageChange);
+		if(this.unsubscribe) this.unsubscribe();
 	}
 
 	/*
@@ -84,26 +80,17 @@ export default class ThemeSwitcher extends ShadowComponent {
 	/*
 		Static Methods
 	*/
-	static setTheme(theme) {
-		localStorage.setItem('theme', theme);
-		document.documentElement.setAttribute('theme', theme);
-		window.dispatchEvent(new StorageEvent('storage', { key: 'theme', newValue: theme }));
+	static setTheme(t) {
+		theme.set(t);
 	}
 
 	static getCurrentTheme() {
-		let theme = document.documentElement.getAttribute('theme');
-		if(!theme) theme = localStorage.getItem('theme');
-		return theme || 'auto';
+		return theme.get();
 	}
-}
 
-/*
-	Auto Theme Detection
-*/
-const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-const colorSchemeChangeHandler = event => document.documentElement.setAttribute('auto-theme', event.matches ? 'dark' : 'light');
-colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
-colorSchemeChangeHandler(colorSchemeQuery);
+	static getCalculatedCurrentTheme() {
+		return theme.getCalculated();
+	}
+}
 
-ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme());
 customElements.define('k-theme-switcher', ThemeSwitcher);

package/src/utils/context.js

@@ -0,0 +1,40 @@
+/*
+  Context Utility
+  - Create global or named shared state
+  - Subscribe/unsubscribe to changes
+  - Set/get context values
+*/
+
+const contexts = {};
+
+const getContext = name => {
+  if(!contexts[name]){
+    contexts[name] = {
+      value: undefined,
+      subscribers: new Set()
+    };
+  }
+  return contexts[name];
+};
+
+export const createContext = (name = 'global', initialValue) => {
+  const ctx = getContext(name);
+  if(initialValue !== undefined && ctx.value === undefined){
+    ctx.value = initialValue;
+  }
+  return {
+    get: () => ctx.value,
+    set: val => {
+      ctx.value = val;
+      ctx.subscribers.forEach(fn => fn(val));
+    },
+    subscribe: fn => {
+      ctx.subscribers.add(fn);
+      fn(ctx.value);
+      return () => ctx.subscribers.delete(fn);
+    },
+    unsubscribe: fn => ctx.subscribers.delete(fn)
+  };
+};
+
+export default createContext;

package/src/utils/theme.js

@@ -0,0 +1,50 @@
+/*
+  Theme Utility
+  - Manage global theme state
+  - Subscribe to theme changes
+  - Persist theme to localStorage
+*/
+
+import createContext from './context.js';
+
+const getInitialTheme = () => {
+  let theme = document.documentElement.getAttribute('theme');
+  if(!theme) theme = localStorage.getItem('theme');
+  return theme || 'auto';
+};
+
+const themeContext = createContext('theme', getInitialTheme());
+
+themeContext.subscribe(theme => {
+  localStorage.setItem('theme', theme);
+  document.documentElement.setAttribute('theme', theme);
+});
+
+export const setTheme = theme => themeContext.set(theme);
+
+export const getTheme = () => themeContext.get();
+
+export const subscribeToTheme = callback => themeContext.subscribe(callback);
+
+export const getCalculatedTheme = () => {
+  const theme = getTheme();
+  if(theme === 'auto'){
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return theme;
+};
+
+/*
+  Auto Theme Detection
+*/
+const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const colorSchemeChangeHandler = event => document.documentElement.setAttribute('auto-theme', event.matches ? 'dark' : 'light');
+colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
+colorSchemeChangeHandler(colorSchemeQuery);
+
+export default {
+  get: getTheme,
+  set: setTheme,
+  subscribe: subscribeToTheme,
+  getCalculated: getCalculatedTheme
+};