npm - kempo-ui - Versions diffs - 0.0.10 → 0.0.11 - Mend

kempo-ui 0.0.10 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/docs/components/accordion.html +33 -121
package/docs/components/card.html +42 -56
package/docs/components/collapsible.html +37 -157
package/docs/components/content-slider.html +35 -181
package/docs/components/dialog.html +37 -302
package/docs/components/focus-capture.html +41 -77
package/docs/components/hybrid-component.html +35 -71
package/docs/components/icon.html +42 -121
package/docs/components/import.html +42 -38
package/docs/components/light-component.html +36 -59
package/docs/components/persistant-collapsible.html +40 -67
package/docs/components/photo-viewer.html +38 -231
package/docs/components/resize.html +39 -139
package/docs/components/shadow-component.html +40 -52
package/docs/components/show-more.html +41 -91
package/docs/components/side-menu.html +39 -121
package/docs/components/sortable.html +35 -92
package/docs/components/split.html +40 -111
package/docs/components/table.html +32 -268
package/docs/components/tableControls.html +52 -53
package/docs/components/tableCustomFields.html +52 -89
package/docs/components/tableFetchRecords.html +50 -88
package/docs/components/tableFieldSortHide.html +52 -51
package/docs/components/tablePagination.html +52 -76
package/docs/components/tableRecordEditing.html +52 -120
package/docs/components/tableRecordFiltering.html +50 -62
package/docs/components/tableRecordHiding.html +51 -55
package/docs/components/tableRecordSearching.html +52 -51
package/docs/components/tableRecordSelection.html +53 -52
package/docs/components/tableRowControls.html +53 -55
package/docs/components/tableSorting.html +52 -49
package/docs/components/tabs.html +43 -165
package/docs/components/tags.html +39 -101
package/docs/components/theme-switcher.html +36 -84
package/docs/components/timestamp.html +39 -74
package/docs/components/toast.html +29 -316
package/docs/components/toggle.html +41 -118
package/docs/components/tree.html +40 -157
package/docs/index.html +56 -209
package/docs/utils/debounce.html +32 -15
package/docs/utils/drag.html +30 -33
package/docs/utils/formatTimestamp.html +29 -49
package/docs/utils/init.js +1 -0
package/docs/utils/propConverters.html +24 -41
package/docs/utils/toTitleCase.html +29 -24
package/docs/utils/watchWindowSize.html +1 -0
package/package.json +1 -1

package/docs/components/accordion.html CHANGED Viewed

@@ -3,157 +3,69 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <title>watchWindowSize - Kempo UI</title>
+  <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 type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>
-  <h1 class="ta-center">Accordion</h1>
   <main>
+    <h1>watchWindowSize</h1>
     <details
       class="b r mb"
     >
       <summary class="p">Table of Contents</summary>
       <div class="m mt0 pl">
-        <h6>Examples</h6>
+        <h6>Usage</h6>
         <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#defaultOpen">Default Open Panel</a><br />
-        <h6 class="mt">JavaScript Reference</h6>
-        <a href="#constructor">Constructor</a><br />
-        <a href="#requirements">Requirements</a><br />
-        <a href="#properties">Properties</a><br />
-        <a href="#methods">Methods</a><br />
-        <a href="#events">Events</a><br />
+        <a href="#functions">Functions</a><br />
+        <a href="#examples">Examples</a><br />
       </div>
     </details>
     <h3>Description</h3>
-    <p>A widget that allows a single panel of content to be opened and closed.</p>
+    <p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
-    <k-accordion
-      class="mb"
-    >
-      <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
-      <k-accordion-panel name="panel1">
-        <p class="m">Panel 1 content</p>
-      </k-accordion-panel>
-      <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
-      <k-accordion-panel name="panel2">
-        <p class="m">Panel 2 content</p>
-      </k-accordion-panel>
-      <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
-      <k-accordion-panel name="panel3">
-        <p class="m">Panel 3 content</p>
-      </k-accordion-panel>
-    </k-accordion>
-    <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link">Default Open Panel</a></h3>
-    <p>You can have a panel open by default by setting the <code>active</code> attribute to <code>true</code> on both the header and the panel.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
-    <k-accordion
-      class="mb"
-    >
-      <k-accordion-header for-panel="panel1" active="true">Panel 1</k-accordion-header>
-      <k-accordion-panel name="panel1" active="true">
-        <p class="m">Panel 1 content</p>
-      </k-accordion-panel>
-      <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
-      <k-accordion-panel name="panel2">
-        <p class="m">Panel 2 content</p>
-      </k-accordion-panel>
-      <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
-      <k-accordion-panel name="panel3">
-        <p class="m">Panel 3 content</p>
-      </k-accordion-panel>
-    </k-accordion>
-    <h2 id="jsRef">JavaScript Reference</h2>
-    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
-    <h5>
-      <code>new Accordion()</code><br />
-    </h5>
-    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
-    <ul>
-      <li><a href="./component.html">ShadowComponent</a></li>
-    </ul>
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h4>Accordion (Main Component)</h4>
-    <h5><code>activeHeader<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the currently active header element, or <code>null</code> if no panel is open.</p>
-    <h5><code>activePanel<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the currently active panel element, or <code>null</code> if no panel is open.</p>
+    <p>Import and use the window size watching functions:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
-    <h4>AccordionHeader</h4>
-    <h5><code>forPanel<i>: string</i></code></h5>
-    <p>The panel name that this header controls. Syncs with the <code>for-panel</code> attribute.</p>
-    <h5><code>active<i>: boolean</i></code></h5>
-    <p>Whether this header is currently active (its associated panel is open). Syncs with the <code>active</code> attribute.</p>
-    <h5><code>accordion<i>: Accordion | null</i></code></h5>
-    <p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
-    <h4>AccordionPanel</h4>
-    <h5><code>name<i>: string</i></code></h5>
-    <p>Unique identifier for this panel. Must match the <code>for-panel</code> attribute of its associated header. Syncs with the <code>name</code> attribute.</p>
-    <h5><code>active<i>: boolean</i></code></h5>
-    <p>Whether this panel is currently open. Syncs with the <code>active</code> attribute.</p>
-    <h5><code>transitioning<i>: boolean</i></code></h5>
-    <p>Whether this panel is currently animating (opening or closing). Syncs with the <code>transitioning</code> attribute.</p>
-    <h5><code>accordion<i>: Accordion | null</i></code></h5>
-    <p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
-    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
-    <h4>Accordion (Main Component)</h4>
-    <h5><code>getHeader(panelName)<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the header element associated with the specified panel name, or <code>null</code> if not found.</p>
+    <h5><code>watchWindowSize(handler)</code></h5>
+    <p>Registers a handler function to be called when the window is resized.</p>
     <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel whose header to retrieve</li>
+      <li><strong>handler:</strong> Function that receives the new window width</li>
+      <li><strong>Returns:</strong> Current window width</li>
     </ul>
-    <h5><code>getPanel(panelName)<i>: HTMLElement | null</i></code></h5>
-    <p>Returns the panel element with the specified name, or <code>null</code> if not found.</p>
+    <h5><code>unwatchWindowSize(handler)</code></h5>
+    <p>Unregisters a previously registered handler function.</p>
     <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to retrieve</li>
+      <li><strong>handler:</strong> The same function reference that was registered</li>
     </ul>
-    <h5><code>openPanel(panelName)<i>: void</i></code></h5>
-    <p>Opens the panel with the specified name. Closes any currently open panel first. Dispatches an <code>openpanel</code> event.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to open</li>
-    </ul>
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    <h4>Responsive Component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br />  <span class="hljs-keyword">constructor</span>() {<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br />    <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br />  }<br /><br />  connectedCallback() {<br />    <span class="hljs-keyword">super</span>.connectedCallback();<br />    <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br />    <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br />  }<br /><br />  disconnectedCallback() {<br />    <span class="hljs-keyword">super</span>.disconnectedCallback();<br />    unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br />  }<br /><br />  handleResize(width) {<br />    <span class="hljs-keyword">this</span>.isMobile = width &lt; <span class="hljs-number">768</span>;<br />    <span class="hljs-keyword">this</span>.requestUpdate();<br />  }<br /><br />  render() {<br />    <span class="hljs-keyword">return</span> html`<span class="xml"><br />      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br />        Content adapts to screen size<br />      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    `</span>;<br />  }<br />}</code></pre>
-    <h5><code>closePanel(panelName)<i>: void</i></code></h5>
-    <p>Closes the panel with the specified name. Dispatches a <code>closepanel</code> event.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to close</li>
-    </ul>
+    <h4>Multiple Handlers</h4>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br />  nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width &lt; <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br />  sidebar.style.display = width &lt; <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
-    <h5><code>togglePanel(panelName)<i>: void</i></code></h5>
-    <p>Toggles the panel with the specified name (opens if closed, closes if open). Dispatches a <code>togglepanel</code> event.</p>
-    <ul>
-      <li><strong>panelName</strong> <code>string</code> - The name of the panel to toggle</li>
-    </ul>
+    <h4>Breakpoint Detection</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br />  <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br />  <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br />  <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br />  <br />  <span class="hljs-keyword">if</span> (width &gt;= breakpoints.desktop) {<br />    currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br />  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.tablet) {<br />    currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br />  }<br />  <br />  <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br />  <br />  <span class="hljs-comment">// Dispatch custom event</span><br />  <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br />    <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br />  }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
+    <h4>Performance Benefits</h4>
+    <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br />  recalculateLayout();<br />  updateCharts();<br />  reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
-    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
-    <h5><code>openpanel</code></h5>
-    <p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
-    <h5><code>closepanel</code></h5>
-    <p>Fired when a panel is closed. The event detail contains <code>{ panelName }</code>.</p>
-    <h5><code>togglepanel</code></h5>
-    <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Accordion.js"></script>
 </body>
-</html>
+</html>

package/docs/components/card.html CHANGED Viewed

@@ -3,83 +3,69 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Card - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <title>watchWindowSize - Kempo UI</title>
+  <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 type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>
-  <h1 class="ta-center">Card</h1>
   <main>
-    <details class="b r mb">
+    <h1>watchWindowSize</h1>
+    <details
+      class="b r mb"
+    >
       <summary class="p">Table of Contents</summary>
       <div class="m mt0 pl">
-        <h6>Examples</h6>
+        <h6>Usage</h6>
         <a href="#basicUsage">Basic Usage</a><br />
-        <h6 class="mt">JavaScript Reference</h6>
-        <a href="#constructor">Constructor</a><br />
-        <a href="#requirements">Requirements</a><br />
-        <a href="#properties">Properties</a><br />
-        <a href="#methods">Methods</a><br />
+        <a href="#functions">Functions</a><br />
+        <a href="#examples">Examples</a><br />
       </div>
     </details>
-    <p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
-    <div class="row -mx mb">
-      <div class="col d-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
-      </div>
-      <div class="col d-span-6 m-span-12 px">
-        <k-card>
-          This is a card
-        </k-card>
-      </div>
-    </div>
-    <h3 id="labels"><a href="#labels" class="no-link">Labels</a></h3>
-    <p>A label gives some text in a box on the top border of the card, helping identify the purpose of the contents.</p>
-    <div class="row -mx mb">
-      <div class="col d-span-6 m-span-12 px">
-        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"I'm a Label"</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
-      </div>
-      <div class="col d-span-6 m-span-12 px">
-        <k-card label="I'm a Label">
-          This is a card
-        </k-card>
-      </div>
-    </div>
+    <h3>Description</h3>
+    <p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
-    <h2 id="jsRef">JavaScript Reference</h2>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the window size watching functions:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
-    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
-    <h5>
-      <code>new Card()</code><br />
-      <code>new Card(<i>string</i> label)</code>
-    </h5>
-    <h4>Parameters</h4>
-    <h5><code>label<i>: string</i></code></h5>
-    <p>The label for the card.</p>
+    <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
+    <h5><code>watchWindowSize(handler)</code></h5>
+    <p>Registers a handler function to be called when the window is resized.</p>
+    <ul>
+      <li><strong>handler:</strong> Function that receives the new window width</li>
+      <li><strong>Returns:</strong> Current window width</li>
+    </ul>
-    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <h5><code>unwatchWindowSize(handler)</code></h5>
+    <p>Unregisters a previously registered handler function.</p>
     <ul>
-      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><strong>handler:</strong> The same function reference that was registered</li>
     </ul>
-    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h5><code>label<i>: string</i></code></h5>
-    <p>The label for the card. Syncs with the <code>label</code> attribute.</p>
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    <h4>Responsive Component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br />  <span class="hljs-keyword">constructor</span>() {<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br />    <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br />  }<br /><br />  connectedCallback() {<br />    <span class="hljs-keyword">super</span>.connectedCallback();<br />    <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br />    <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br />  }<br /><br />  disconnectedCallback() {<br />    <span class="hljs-keyword">super</span>.disconnectedCallback();<br />    unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br />  }<br /><br />  handleResize(width) {<br />    <span class="hljs-keyword">this</span>.isMobile = width &lt; <span class="hljs-number">768</span>;<br />    <span class="hljs-keyword">this</span>.requestUpdate();<br />  }<br /><br />  render() {<br />    <span class="hljs-keyword">return</span> html`<span class="xml"><br />      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br />        Content adapts to screen size<br />      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    `</span>;<br />  }<br />}</code></pre>
+    <h4>Multiple Handlers</h4>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br />  nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width &lt; <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br />  sidebar.style.display = width &lt; <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
+    <h4>Breakpoint Detection</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br />  <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br />  <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br />  <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br />  <br />  <span class="hljs-keyword">if</span> (width &gt;= breakpoints.desktop) {<br />    currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br />  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.tablet) {<br />    currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br />  }<br />  <br />  <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br />  <br />  <span class="hljs-comment">// Dispatch custom event</span><br />  <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br />    <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br />  }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
-    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>setLabel(<i>string</i> label)<i>: void</i></code></h5>
-    <p>Sets the label for the card.</p>
+    <h4>Performance Benefits</h4>
+    <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br />  recalculateLayout();<br />  updateCharts();<br />  reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Card.js"></script>
 </body>
-</html>
+</html>