kempo-ui 0.3.6 → 0.3.8

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

@@ -3,18 +3,18 @@
   <content>
     <h1>toTitleCase</h1>
     
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m">
         <h6>Usage</h6>
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#parameters">Parameters</a><br />
         <a href="#returnValue">Return Value</a><br />
         <a href="#examples">Examples</a><br />
       </div>
-    </details>
+      </k-accordion-panel>
+    </k-accordion>
 
     <h3>Description</h3>
     <p>The <code>toTitleCase</code> utility function converts strings to title case format. It handles camelCase, snake_case, kebab-case, and regular text, converting them into properly capitalized title case with spaces between words.</p>

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.6",
+  "version": "0.3.8",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -12,8 +12,8 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
-    "prod": "npx kempo-server --root docs --config docs/prod.config.json",
-    "dev": "npx kempo-server --root docs-src",
+    "docs": "npx kempo-server --root docs --config docs/prod.config.json",
+    "dev": "npx kempo-server --root docs-src --port 8083",
     "icon": "node bin/icon.js",
     "geticon": "node bin/get_icon.js",
     "listicons": "node bin/list_icons.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/Aside.js

@@ -10,7 +10,8 @@ export default class Aside extends ShadowComponent {
 		side: { type: String, reflect: true },
 		main: { type: String, reflect: true },
 		overlayClose: { type: Boolean, reflect: true, attribute: 'overlay-close', converter: boolTrueFalse },
-		escClose: { type: Boolean, reflect: true, attribute: 'esc-close', converter: boolTrueFalse }
+		escClose: { type: Boolean, reflect: true, attribute: 'esc-close', converter: boolTrueFalse },
+		persistentId: { type: String, reflect: true, attribute: 'persistent-id' }
 	};
 
 	constructor() {
@@ -20,6 +21,7 @@ export default class Aside extends ShadowComponent {
 		this.main = 'overlay';
 		this.overlayClose = true;
 		this.escClose = true;
+		this.persistentId = null;
 	}
 
 	/*
@@ -39,6 +41,11 @@ export default class Aside extends ShadowComponent {
 	updated(changedProperties) {
 		super.updated(changedProperties);
 
+		if(changedProperties.has('persistentId') && this.persistentId && window?.localStorage) {
+			const saved = window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);
+			if(saved) this.state = saved;
+		}
+
 		if(changedProperties.has('state')) {
 			const prev = changedProperties.get('state');
 
@@ -61,6 +68,10 @@ export default class Aside extends ShadowComponent {
 			this.dispatchEvent(new CustomEvent('aside_state_change', { detail }));
 			window.dispatchEvent(new CustomEvent('aside_state_change', { detail }));
 			this.inert = this.state === 'offscreen';
+
+			if(this.persistentId && window?.localStorage) {
+				window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`, this.state);
+			}
 		}
 	}
 

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;
 		}