kempo-ui 0.3.4 → 0.3.6

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.4",
+  "version": "0.3.6",
   "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",
+    "prod": "npx kempo-server --root docs --config docs/prod.config.json",
+    "dev": "npx kempo-server --root docs-src",
     "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

@@ -198,6 +198,8 @@ export default class Aside extends ShadowComponent {
 			left: var(--spacer_h);
 		}
 		aside {
+			display: flex;
+			flex-direction: column;
 			position: fixed;
 			top: 0;
 			left: 0;

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

@@ -756,6 +756,41 @@ export default {
 		pass('AsideSpacer has flex-grow 1');
 	},
 
+	'AsideSpacer: aside should be a flex column so spacer pushes items down': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'expanded' });
+		const item1 = document.createElement('k-aside-item');
+		item1.icon = 'cards';
+		item1.textContent = 'Top';
+		const spacer = document.createElement('k-aside-spacer');
+		const item2 = document.createElement('k-aside-item');
+		item2.icon = 'settings';
+		item2.textContent = 'Bottom';
+		aside.appendChild(item1);
+		aside.appendChild(spacer);
+		aside.appendChild(item2);
+		await item1.updateComplete;
+		await spacer.updateComplete;
+		await item2.updateComplete;
+		await new Promise(r => requestAnimationFrame(r));
+		const asideEl = aside.shadowRoot.querySelector('aside');
+		const asideStyle = getComputedStyle(asideEl);
+		if(asideStyle.display !== 'flex') {
+			cleanup(aside);
+			return fail(`Expected aside display flex, got ${asideStyle.display}`);
+		}
+		if(asideStyle.flexDirection !== 'column') {
+			cleanup(aside);
+			return fail(`Expected aside flex-direction column, got ${asideStyle.flexDirection}`);
+		}
+		const spacerRect = spacer.getBoundingClientRect();
+		if(spacerRect.height < 1) {
+			cleanup(aside);
+			return fail(`Spacer should have height > 0 to push items, got ${spacerRect.height}`);
+		}
+		cleanup(aside);
+		pass('Aside is a flex column and spacer pushes items down');
+	},
+
 	/*
 		Cleanup
 	*/

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>

package/docs/nav.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" 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/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>