kempo-ui 0.3.5 → 0.3.7

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

@@ -0,0 +1,31 @@
+<page pageName="Wait Utilities" title="Wait Utilities - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>Wait Utilities</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>Functions</h6>
+          <a href="#wait">wait</a><br />
+          <a href="#waitFrames">waitFrames</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The wait utilities module provides functions for creating delays and waiting for animation frames, useful for timing operations and animations.</p>
+
+    <h3 id="wait"><a href="#wait" class="no-link">wait</a></h3>
+    <p>Creates a promise that resolves after a specified number of milliseconds.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { wait } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/wait.js'</span>;<br /><br /><span class="hljs-comment">// Wait for 1 second</span><br />await wait(<span class="hljs-number">1000</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'This runs after 1 second'</span>);</code></pre>
+
+    <h3 id="waitFrames"><a href="#waitFrames" class="no-link">waitFrames</a></h3>
+    <p>Creates a promise that resolves after a specified number of animation frames.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { waitFrames } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/wait.js'</span>;<br /><br /><span class="hljs-comment">// Wait for 2 animation frames</span><br />await waitFrames(<span class="hljs-number">2</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'This runs after 2 frames'</span>);</code></pre>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -12,8 +12,8 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
-    "prod": "node scripts/docs.js",
-    "dev": "node scripts/docs.js --src --port 9875",
+    "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",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "highlight.js": "^11.11.1",
     "js-beautify": "^1.15.4",
-    "kempo-server": "^1.10.5",
+    "kempo-server": "^3.0.3",
     "kempo-testing-framework": "^1.4.4",
     "terser": "^5.43.1"
   },

package/scripts/build.js

@@ -95,4 +95,9 @@ await copyDir('./dist', './docs/src/');
 console.log('Copying icons/ to docs/icons/');
 await copyDir('./icons', './docs/icons/');
 
+console.log('Pre-rendering docs-src → docs...');
+import { renderDir } from 'kempo-server/templating';
+const count = await renderDir('./docs-src', './docs');
+console.log(`Rendered ${count} pages`);
+
 console.log('Build Complete');

package/scripts/docs.js

@@ -1,69 +1,22 @@
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
-import { spawn } from 'child_process';
 import { getArgs, runChildNodeProcessScript } from 'kempo-server/utils/cli';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-/*
-	Configuration
-*/
 const options = getArgs({
-  p: 'port',
-  b: 'build',
-  s: 'src'
+  b: 'build'
 });
 
-const {
-  port = 8083,
-  build = null,
-  src = false
-} = options;
+const { build = false } = options;
 
-/*
-	Build Logic
-*/
-if(build === null ? !src : build === 'true' || build === true){
-    console.log('Building component files...');
+if(build === 'true' || build === true){
+  console.log('Building component files...');
   await runChildNodeProcessScript(join(__dirname, 'build.js'));
-  console.log('Component files built!');
+  console.log('Build complete!');
 }
 
-/*
-	Server Startup
-*/
-const rootDir = 'docs';
-const configFile = src ? 
-  join(__dirname, '../docs/dev.config.json') : 
-  join(__dirname, '../docs/prod.config.json');
-
-console.log(`Starting kempo-server on port ${port}`);
-console.log(`Root: ${rootDir}`);
-console.log(`Config: ${configFile}`);
-
-const serverArgs = [
-  'kempo-server', 
-  '--root', rootDir, 
-  '--port', port.toString(),
-  '--config', configFile
-];
-
-const serverProcess = spawn('npx', serverArgs, {
-  stdio: 'inherit',
-  shell: true
-});
-
-serverProcess.on('error', err => {
-  console.error('Failed to start server:', err.message);
-  process.exit(1);
-});
-
-process.on('SIGINT', () => {
-  serverProcess.kill();
-  process.exit(0);
-});
-
 process.on('SIGTERM', () => {
   serverProcess.kill();
   process.exit(0);

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/Main.js

@@ -15,7 +15,7 @@ export default class Main extends ShadowComponent {
 		window.addEventListener('aside_state_change', this.handleAsideChange);
 
 		document.querySelectorAll('k-aside[main="push"]').forEach(aside => {
-			if(aside.state !== 'offscreen') {
+			if(aside.state !== 'offscreen' && typeof aside.getTargetWidth === 'function') {
 				const width = aside.getTargetWidth(aside.state);
 				if(width > 0) {
 					this.widthMap.set(aside, { side: aside.side || 'left', width });

package/tests/components/Aside.browser-test.js

@@ -452,6 +452,81 @@ export default {
 		pass('Dispatches offscreen event on disconnect');
 	},
 
+	/*
+		Persistent ID
+	*/
+	'persistentId: should default to null': async ({pass, fail}) => {
+		const aside = await createAside();
+		if(aside.persistentId !== null) {
+			cleanup(aside);
+			return fail(`Expected persistentId null, got ${aside.persistentId}`);
+		}
+		cleanup(aside);
+		pass('persistentId defaults to null');
+	},
+
+	'persistentId: should save state to localStorage on state change': async ({pass, fail}) => {
+		const id = `test-aside-save-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.removeItem(key);
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		aside.persistentId = id;
+		await aside.updateComplete;
+		aside.expand();
+		await aside.updateComplete;
+		const saved = localStorage.getItem(key);
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(saved !== 'expanded') return fail(`Expected "expanded" in localStorage, got "${saved}"`);
+		pass('persistentId saves state to localStorage');
+	},
+
+	'persistentId: should restore state from localStorage on connect': async ({pass, fail}) => {
+		const id = `test-aside-restore-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.setItem(key, 'expanded');
+		const aside = document.createElement('k-aside');
+		aside.setAttribute('main', 'push');
+		aside.setAttribute('state', 'offscreen');
+		aside.setAttribute('persistent-id', id);
+		document.body.appendChild(aside);
+		await aside.updateComplete;
+		// Wait for the property change to apply
+		await new Promise(r => setTimeout(r, 50));
+		const state = aside.state;
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(state !== 'expanded') return fail(`Expected restored state "expanded", got "${state}"`);
+		pass('persistentId restores state from localStorage');
+	},
+
+	'persistentId: should save collapsed state': async ({pass, fail}) => {
+		const id = `test-aside-collapsed-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.removeItem(key);
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		aside.persistentId = id;
+		await aside.updateComplete;
+		aside.collapse();
+		await aside.updateComplete;
+		const saved = localStorage.getItem(key);
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(saved !== 'collapsed') return fail(`Expected "collapsed" in localStorage, got "${saved}"`);
+		pass('persistentId saves collapsed state');
+	},
+
+	'persistentId: should not save state when not set': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		const keysBefore = Object.keys(localStorage).filter(k => k.startsWith('aside-persistent-id-'));
+		aside.expand();
+		await aside.updateComplete;
+		const keysAfter = Object.keys(localStorage).filter(k => k.startsWith('aside-persistent-id-'));
+		cleanup(aside);
+		if(keysAfter.length > keysBefore.length) return fail('Should not save to localStorage when persistentId is null');
+		pass('Does not save to localStorage without persistentId');
+	},
+
 	/*
 		AsideItem
 	*/

package/docs/dev.config.json

@@ -1,20 +0,0 @@
-{
-  "customRoutes": {
-    "/icons/**": "../icons/**",
-    "/src/**": "../src/**"
-  },
-  "middleware": {
-    "security": {
-      "enabled": true,
-      "headers": {
-        "X-Content-Type-Options": "nosniff",
-        "X-Frame-Options": "SAMEORIGIN",
-        "X-XSS-Protection": "1; mode=block"
-      }
-    },
-    "logging": {
-      "enabled": true,
-      "includeResponseTime": true
-    }
-  }
-}

package/docs/nav-1.inc.html

@@ -1,168 +0,0 @@
-<k-nav
-  fixed
-  class="bg-primary"
->
-  <button
-    id="toggleNavSideMenu"
-    class="link"
-  >
-    <k-icon name="menu"></k-icon>
-  </button>
-  <a
-    href="../"
-    class="d-if ph"
-    style="align-items: center"
-  >
-    <img src="../media/icon32.png" alt="Kempo UI Icon" class="pr" />
-    Kempo UI
-  </a>
-  <div style="position:relative;margin:0 .25rem;align-self:center;" theme="light">
-    <input id="navSearchInput" type="search" placeholder="Search docs..." autocomplete="off" style="width:11rem;" />
-    <div id="navSearchDropdown" hidden theme="light" style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);">
-      <k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
-        <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="dialog modal popup components"><a href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="dropdown select components"><a href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="filter list filterlist components"><a href="../components/filter-list.html">Filter List<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="focus capture focuscapture components"><a href="../components/focus-capture.html">Focus Capture<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="html editor components"><a href="../components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table data grid components"><a href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table controls advanced example"><a href="../components/tableControls.html">Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table custom fields advanced example"><a href="../components/tableCustomFields.html">Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table fetch records advanced example"><a href="../components/tableFetchRecords.html">Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table field sort hide advanced example"><a href="../components/tableFieldSortHide.html">Table — Field Sort &amp; Hide<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table pagination advanced example"><a href="../components/tablePagination.html">Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table record editing advanced example"><a href="../components/tableRecordEditing.html">Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table record filtering advanced example"><a href="../components/tableRecordFiltering.html">Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table record hiding advanced example"><a href="../components/tableRecordHiding.html">Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table record searching advanced example"><a href="../components/tableRecordSearching.html">Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table record selection advanced example"><a href="../components/tableRecordSelection.html">Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table row controls advanced example"><a href="../components/tableRowControls.html">Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table server sync advanced example"><a href="../components/tableServerSync.html">Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
-        <k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="theme select dropdown dark light components"><a href="../components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="theme switcher dark light components"><a href="../components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="timestamp date time components"><a href="../components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="toggle switch checkbox components"><a href="../components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="tree treeview components"><a href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="shadow component base"><a href="../components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="light component base"><a href="../components/light-component.html">Light Component<br><small>Base Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="hybrid component base"><a href="../components/hybrid-component.html">Hybrid Component<br><small>Base Component</small></a></k-filter-item>
-        <k-filter-item filter-keywords="cookie utils utility"><a href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="context utils utility"><a href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="debounce utils utility"><a href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="drag utils utility"><a href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="elevation z-index stacking utils"><a href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="../utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="object utils utility"><a href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="../utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="string utils utility"><a href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="theme utils utility"><a href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="type utils utility"><a href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
-        <k-filter-item filter-keywords="wait async utils utility"><a href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
-      </k-filter-list>
-    </div>
-  </div>
-  <div class="flex"></div>
-  <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
-  <a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icont></a>
-  <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
-  <k-theme-switcher></k-theme-switcher>
-</k-nav>
-<div style="width: 100%; height: 4rem;"></div>
-<k-aside
-  id="navSideMenu"
-  main="overlay"
-  state="offscreen"
->
-  <menu>
-    <a href="../" class="ta-center bb mb r0">
-      <h1 class="tc-primary">Kempo UI</h1>
-      <img src="../media/icon128.png" alt="Kempo UI Icon" />
-    </a>
-    <div class="pl mb">
-      <h3>Components</h3>
-      <a href="../components/accordion.html">Accordion</a>
-      <a href="../components/aside.html">Aside</a>
-      <a href="../components/card.html">Card</a>
-      <a href="../components/color-picker.html">ColorPicker</a>
-      <a href="../components/content-slider.html">Content Slider</a>
-      <a href="../components/context.html">Context</a>
-      <a href="../components/dialog.html">Dialog</a>
-      <a href="../components/dropdown.html">Dropdown</a>
-      <a href="../components/filter-list.html">Filter List</a>
-      <a href="../components/focus-capture.html">FocusCapture</a>
-      <a href="../components/html-editor.html">HTML Editor</a>
-      <a href="../components/icon.html">Icon</a>
-      <a href="../components/import.html">Import</a>
-      <a href="../components/nav.html">Nav</a>
-      <a href="../components/photo-viewer.html">Photo Viewer</a>
-      <a href="../components/resize.html">Resize</a>
-      <a href="../components/show-more.html">Show More</a>
-      <a href="../components/sortable.html">Sortable</a>
-      <a href="../components/spinner.html">Spinner</a>
-      <a href="../components/split.html">Split</a>
-      <a href="../components/table.html">Table</a>
-      <a href="../components/tabs.html">Tabs</a>
-      <a href="../components/tags.html">Tags</a>
-      <a href="../components/theme-select.html">Theme Select</a>
-      <a href="../components/theme-switcher.html">Theme Switcher</a>
-      <a href="../components/timestamp.html">Timestamp</a>
-      <a href="../components/toast.html">Toast</a>
-      <a href="../components/toggle.html">Toggle</a>
-      <a href="../components/tree.html">Tree</a>
-    </div>
-
-    <h5 class="mb0">Base Components</h5>
-    <div class="pl mb">
-      <a href="../components/shadow-component.html">Shadow Component</a>
-      <a href="../components/light-component.html">Light Component</a>
-      <a href="../components/hybrid-component.html">Hybrid Component</a>
-    </div>
-
-    <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/elevation.html">elevation</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>
-  </menu>
-</k-aside>
-<style>
-#navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
-#navSearchList a:hover{background:rgba(128,128,128,.15);}
-#navSearchList a small{display:block;color:var(--tc_muted);}
-</style>
-<script src="../src/components/Nav.js" type="module"></script>
-<script src="../src/components/FilterList.js" type="module"></script>
-<script src="../src/components/FilterItem.js" type="module"></script>
-<script src="../src/components/Aside.js" type="module"></script>
-<script src="../src/components/Icon.js" type="module"></script>
-<script src="../src/components/ThemeSwitcher.js" type="module"></script>
-<script src="../nav.inc.js" type="module"></script>