kempo-ui 0.3.7 → 0.3.8

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

@@ -136,7 +136,7 @@
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside5" main="push" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Sidebar</h3>
               <a href="#">Home</a>
@@ -165,7 +165,7 @@
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside6" main="push" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Menu</h3>
               <a href="#">Dashboard</a>
@@ -196,7 +196,7 @@
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside7" main="push" side="right" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Right Panel</h3>
               <a href="#">Item 1</a>
@@ -279,7 +279,7 @@
         <k-card label="Output">
           <style>k-aside#aside13 { --collapsed-width: 5rem; }</style>
           <k-aside id="aside13" main="push" state="offscreen">
-            <div class="navbar-spacer"></div>
+            <k-nav-spacer></k-nav-spacer>
             <nav>
               <h3>Sidebar</h3>
               <a href="#">Dashboard</a>
@@ -311,10 +311,8 @@
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-aside id="aside-persist" main="push" state="offscreen" persistent-id="docs-aside-persist-demo">
-            <div class="navbar-spacer"></div>
-            <nav>
-              <p>Sidebar Content</p>
-            </nav>
+            <k-nav-spacer></k-nav-spacer>
+            <p>Sidebar Content</p>
           </k-aside>
           <button id="btn-persist-expand">Expand</button>
           <button id="btn-persist-collapse">Collapse</button>
@@ -490,5 +488,6 @@
     <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Aside.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/NavSpacer.js"></script>
   </content>
 </page>

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

@@ -7,6 +7,8 @@
         <h6>Examples</h6>
         <a href="#fullExample">Complete Editor Example</a><br />
         <a href="#javascriptUsage">JavaScript API Example</a><br />
+        <a href="#incompatibleContent">Incompatible Content Example</a><br />
+        <a href="#customNodes">Custom Nodes Example</a><br />
         
         <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
         <a href="#constructor">Constructor</a><br />
@@ -180,9 +182,9 @@
           <k-html-editor id="myEditor" class="b r"></k-html-editor>
           <script>
             const myEditor = document.getElementById('myEditor');
-            setTimeout(() => {
+            myEditor.addEventListener('ready', () => {
               myEditor.setValue('<p>Select text and use the buttons above to format it!</p><p>The editor works without any built-in controls - you have full control via JavaScript.</p>');
-            }, 100);
+            });
             
             function insertMyEditorHTML() {
               myEditor.insertHTML('<p><b>Inserted content!</b></p>');
@@ -196,6 +198,43 @@
       </div>
     </div>
 
+    <h3 id="incompatibleContent"><a href="#incompatibleContent" class="no-link">Incompatible Content Example</a></h3>
+    <p>When the editor's value contains HTML that Lexical does not support (such as <code>&lt;svg&gt;</code>, <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, <code>&lt;video&gt;</code>, etc.), it automatically defaults to code mode to preserve the content. If the user attempts to switch to visual mode, a confirmation dialog warns that the incompatible code will be lost.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;svgEditor&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&lt;p&gt;This value contains an inline SVG which Lexical does not support:&lt;/p&gt;&lt;svg width=&#x27;120&#x27; height=&#x27;60&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27;&gt;&lt;rect width=&#x27;120&#x27; height=&#x27;60&#x27; rx=&#x27;8&#x27; fill=&#x27;#4a90d9&#x27;/&gt;&lt;text x=&#x27;50%&#x27; y=&#x27;50%&#x27; dominant-baseline=&#x27;middle&#x27; text-anchor=&#x27;middle&#x27; fill=&#x27;white&#x27; font-size=&#x27;14&#x27;&gt;SVG&lt;/text&gt;&lt;/svg&gt;&lt;p&gt;The editor detected incompatible content and defaulted to code mode automatically.&lt;/p&gt;&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-spacer</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;toolbar-top&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-spacer</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;toolbar-top&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-html-editor id="svgEditor" class="b r" value="<p>This value contains an inline SVG which Lexical does not support:</p><svg width='120' height='60' xmlns='http://www.w3.org/2000/svg'><rect width='120' height='60' rx='8' fill='#4a90d9'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='14'>SVG</text></svg><p>The editor detected incompatible content and defaulted to code mode automatically.</p>">
+            <k-hec-spacer slot="toolbar-top"></k-hec-spacer>
+            <k-hec-mode slot="toolbar-top"></k-hec-mode>
+          </k-html-editor>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customNodes"><a href="#customNodes" class="no-link">Custom Nodes Example</a></h3>
+    <p>Custom nodes extend what Lexical understands in visual mode. Import a node file and list its name in the <code>nodes</code> attribute (comma-separated filenames without <code>.js</code>). The built-in <code>HtmlComment</code> node preserves HTML comments as inline visual chips rather than forcing code mode — comments round-trip through the editor without being stripped.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Import the HtmlComment node --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&#x27;module&#x27;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#x27;src/components/htmlEditorNodes/HtmlComment.js&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-comment">&lt;!-- Register the node with nodes attribute --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">nodes</span>=<span class="hljs-string">&#x27;HtmlComment&#x27;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#x27;&lt;p&gt;This paragraph has an &lt;!-- important note --&gt; inline comment.&lt;/p&gt;&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-spacer</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-spacer</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <script type="module" src="/src/components/htmlEditorNodes/HtmlComment.js"></script>
+          <k-html-editor id="commentEditor" class="b r" nodes="HtmlComment" value="<p>This paragraph has an <!-- important note --> inline comment.</p>">
+            <k-hec-spacer slot="toolbar-top"></k-hec-spacer>
+            <k-hec-mode slot="toolbar-top"></k-hec-mode>
+          </k-html-editor>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -211,23 +250,30 @@
     <p>The HTML content of the editor. Can be get or set via JavaScript or HTML attribute.</p>
 
     <h5><code>mode<i>: String</i></code></h5>
-    <p>Current editing mode. Either <code>'visual'</code> (WYSIWYG) or <code>'code'</code> (raw HTML). Default: <code>'visual'</code></p>
+    <p>Current editing mode. Either <code>'visual'</code> (WYSIWYG) or <code>'code'</code> (raw HTML). Default: <code>'visual'</code>. If the initial <code>value</code> contains content that is incompatible with the visual editor (such as <code>&lt;svg&gt;</code>, <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, etc.), the editor automatically switches to <code>'code'</code> mode to preserve the content. Custom nodes can extend what is considered compatible by defining a static <code>isVisualCompatible(domNode)</code> method.</p>
+
+    <h5><code>nodes<i>: String</i></code></h5>
+    <p>Comma-separated list of custom Lexical node module filenames (without <code>.js</code>) to load from the <code>htmlEditorNodes/</code> directory. Custom nodes can define two static hooks:</p>
+    <ul>
+      <li><code>isVisualCompatible(domNode)</code> — returns <code>true</code> if the node handles a DOM construct that would otherwise be considered incompatible (e.g., HTML comments)</li>
+      <li><code>preprocessHtml(htmlString)</code> — transforms raw HTML before Lexical parses it (e.g., converting <code>&lt;!-- --&gt;</code> to a parseable <code>&lt;span&gt;</code>)</li>
+    </ul>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
 
     <h4>Mode Control</h4>
     <h5><code>setMode(mode)<i>: this</i></code></h5>
-    <p>Set the editing mode. Accepts <code>'visual'</code> or <code>'code'</code>.</p>
+    <p>Set the editing mode. Accepts <code>'visual'</code> or <code>'code'</code>. If switching to <code>'visual'</code> and the current content is incompatible, a confirmation dialog warns that incompatible code will be lost.</p>
 
     <h5><code>toggleMode()<i>: this</i></code></h5>
-    <p>Toggle between visual and code modes.</p>
+    <p>Toggle between visual and code modes. Same incompatibility warning applies when switching to visual mode.</p>
 
     <h4>Content Management</h4>
     <h5><code>getValue()<i>: String</i></code></h5>
     <p>Returns the current HTML content.</p>
 
     <h5><code>setValue(html)<i>: this</i></code></h5>
-    <p>Sets the HTML content of the editor.</p>
+    <p>Sets the HTML content of the editor. If the editor is in visual mode and the new content is incompatible, automatically switches to code mode.</p>
 
     <h5><code>clear()<i>: this</i></code></h5>
     <p>Clears all content from the editor.</p>

package/docs-src/components/nav-spacer.page.html

@@ -0,0 +1,65 @@
+<page pageName="Nav Spacer" title="Nav Spacer - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">Nav Spacer</h1>
+
+    <k-accordion persistent-id="toc-nav-spacer" class="b r mb">
+      <k-accordion-header for-panel="toc-nav-spacer-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-nav-spacer-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#noMargin">No Margin</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#cssVariables">CSS Variables</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <p>Place <code>k-nav-spacer</code> immediately after a <code>&lt;k-nav fixed&gt;</code> element. It automatically measures the nav's height using a <code>ResizeObserver</code> and sets its own height to match, ensuring page content is not hidden behind the fixed nav. A default bottom margin of <code>var(--spacer)</code> separates the spacer from the content below; override it with kempo-css margin utilities like <code>mb0</code>, <code>mbh</code>, etc.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Place <code>k-nav-spacer</code> directly after the fixed nav in your HTML. It will size itself to match the nav height.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-nav</span> <span class="hljs-attr">fixed</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- nav content --&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-nav-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav-spacer</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">main</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- page content --&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="noMargin"><a href="#noMargin" class="no-link">No Margin</a></h3>
+    <p>Add <code>mb0</code> to remove the default bottom margin, or use any kempo-css margin utility to customise it.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-nav-spacer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;mb0&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav-spacer</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <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 NavSpacer()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
+    <h5><code>--spacer</code></h5>
+    <p>Controls the default bottom margin. Inherited from kempo-css (default <code>1rem</code>). Override by applying a margin utility class directly to the element.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/NavSpacer.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Nav.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/index.page.html

@@ -119,6 +119,12 @@
           <p class="tc-muted">Fixed navigation bar with automatic elevation applied at the correct stacking level.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/nav-spacer.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Nav Spacer</h3>
+          <p class="tc-muted">Auto-sizing spacer that offsets page content below a fixed nav bar.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/photo-viewer.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Photo Viewer</h3>

package/docs-src/nav.fragment.html

@@ -25,6 +25,7 @@
           <k-filter-item filter-keywords="icon components"><a href="{{pathToRoot}}components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="{{pathToRoot}}components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="{{pathToRoot}}components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="{{pathToRoot}}components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="{{pathToRoot}}components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="{{pathToRoot}}components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="{{pathToRoot}}components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -102,6 +103,7 @@
         <a href="{{pathToRoot}}components/icon.html">Icon</a>
         <a href="{{pathToRoot}}components/import.html">Import</a>
         <a href="{{pathToRoot}}components/nav.html">Nav</a>
+        <a href="{{pathToRoot}}components/nav-spacer.html">Nav Spacer</a>
         <a href="{{pathToRoot}}components/photo-viewer.html">Photo Viewer</a>
         <a href="{{pathToRoot}}components/resize.html">Resize</a>
         <a href="{{pathToRoot}}components/show-more.html">Show More</a>

package/icons/comment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-400h480v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320h594l46 45v-525H160v480Zm0 0v-480 480Z"/></svg>

package/llm.txt

@@ -67,6 +67,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-import>` | `Import.js` | Includes external HTML fragments; `src` attribute | [import.html](https://dustinpoissant.github.io/kempo-ui/components/import.html) |
 | `<k-main>` | `Main.js` | Layout main; automatically adjusts margins when a `k-aside[main="push"]` opens | — |
 | `<k-nav>` | `Nav.js` | Navigation bar | [nav.html](https://dustinpoissant.github.io/kempo-ui/components/nav.html) |
+| `<k-nav-spacer>` | `NavSpacer.js` | Auto-sizing spacer that offsets page content below a fixed `k-nav` bar; default bottom margin of `var(--spacer)` can be overridden with kempo-css margin utilities | [nav-spacer.html](https://dustinpoissant.github.io/kempo-ui/components/nav-spacer.html) |
 | `<k-photo-viewer>` | `PhotoViewer.js` | Lightbox/gallery viewer | [photo-viewer.html](https://dustinpoissant.github.io/kempo-ui/components/photo-viewer.html) |
 | `<k-resize>` | `Resize.js` | Resizable pane with drag handle | [resize.html](https://dustinpoissant.github.io/kempo-ui/components/resize.html) |
 | `<k-show-more>` | `ShowMore.js` | Truncated content with expand toggle | [show-more.html](https://dustinpoissant.github.io/kempo-ui/components/show-more.html) |

package/package.json

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

package/scripts/build.js

@@ -55,7 +55,7 @@ await Promise.all(allJSFiles.map(async jsFile => {
     processedJS[jsFile] = code;
   } else {
     // Minify the file
-    code = (await minify(code)).code;
+    code = (await minify(code, { module: true })).code;
   }
   
   // Convert absolute paths to relative paths for GitHub Pages compatibility

package/src/components/Accordion.js

@@ -33,7 +33,7 @@ export default class Accordion extends ShadowComponent {
 		if (changedProps.has('persistentId') && this.persistentId && window?.localStorage) {
 			const key = `accordion-persistent-id-${this.persistentId}`;
 			const value = window.localStorage.getItem(key);
-			if (value) {
+			if (value !== null) {
 				const openPanels = value.split(',');
 				this.querySelectorAll('k-accordion-panel').forEach(panel => {
 					panel.active = openPanels.includes(panel.name);

package/src/components/Dropdown.js

@@ -73,7 +73,8 @@ export default class Dropdown extends ShadowComponent {
 		Event Handlers
 	*/
 	handleDocumentClick = e => {
-		const isTrigger = e.target.closest('[slot="trigger"]');
+		const path = e.composedPath();
+		const isTrigger = path.find(el => el.matches?.('[slot="trigger"]'));
 
 		if(isTrigger) {
 			const triggerDropdown = isTrigger.closest('k-dropdown');
@@ -87,13 +88,13 @@ export default class Dropdown extends ShadowComponent {
 		if(!this.opened) return;
 
 		// Click is outside this dropdown entirely
-		if(!this.contains(e.target)) {
+		if(!path.includes(this)) {
 			if(this.closeOnClickOutside) this.close();
 			return;
 		}
 
 		// Click is inside the menu on an interactive element (including submenu items)
-		const isInteractive = e.target.closest('a, button');
+		const isInteractive = path.find(el => el.matches?.('a, button'));
 		if(isInteractive && !isInteractive.closest('[slot="trigger"]') && this.closeOnSelect) this.close();
 	};
 
@@ -235,8 +236,11 @@ export default class Dropdown extends ShadowComponent {
 		:host {
 			display: inline-block;
 			position: relative;
+			white-space: normal;
 		}
 		#trigger {
+			display: inline-flex;
+			align-items: center;
 			cursor: pointer;
 			anchor-name: --dropdown-trigger;
 		}