kempo-ui 0.3.5 → 0.3.7

package/AGENTS.md

@@ -6,6 +6,7 @@
  - All components should be in the `src/components/` directory.
  - All utility function module files should be in the `src/utils/` directory.
  - All documnentation should be in the `docs/` directory. This directory is used by GitHub as the "GitHub Pages", so all links need to be relative, and there will be a build script which copies all code to the `docs/` directory.
+ - Documentation source files (templates, fragments, page files) are in the `docs-src/` directory. These use the kempo-server v3 templating system and are pre-rendered to `docs/` during build.
  - `llm.txt.md` in the root is the consumer-facing LLM reference for this library. **Keep it up to date**: when adding a new component or utility, add a row to the relevant table in `llm.txt.md`.
  
 ## Dependencies
@@ -113,4 +114,4 @@ Do not prefix identifiers with underscores.
 - **ALL tests must pass — ZERO failures are acceptable.** If a test fails after a change, fix it immediately. There are no "pre-existing failures" in this project.
 
 ### Building
-The docs should be running using `npm run dev` which serves the html files in the docs, but reroutes all requests to `docs/src` to use `src` so we do not need to build or "watch" files to build, if you save a file, just refresh the docs page. Same for icons, the server reroutes `docs/icons` to `icons` so we dont need to watch or build after adding an icon.
+The docs use the kempo-server v3 templating system. Source files are in `docs-src/` using `.page.html`, `.template.html`, and `.fragment.html` files. For development, `npm run dev` starts kempo-server with SSR (server-side rendering) from `docs-src/`, so page changes are reflected on refresh without rebuilding. Static assets (CSS, media, manifest) live in `docs/` and are served via customRoutes during dev. For production, `npm run build` minifies JS, copies icons, and pre-renders all pages from `docs-src/` to `docs/`.

package/dist/components/Aside.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,this.state)}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
 				<k-focus-capture>
 					<div id="container">
 						<button id="overlay-btn" @click=${this.overlayClick}>

package/dist/components/Main.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:s}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:s}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state&&"function"==typeof t.getTargetWidth){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:n}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:n}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
 			<main>
 				<slot></slot>
 			</main>

package/docs/components/accordion.html

@@ -11,11 +11,242 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
+  
 </head>
 <body>
-  <k-import src="../nav-1.inc.html"></k-import>
-  <h1 class="ta-center">Accordion</h1>
+  
+  <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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; Sorting<br><small>Advanced Example</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table placeholder advanced example"><a href="../components/tablePlaceholder.html">Table &mdash; Placeholder<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-icon></a>
+    <a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icon></a>
+    <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icon></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 type="module">
+    import debounce from '../src/utils/debounce.js';
+
+    document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
+      await window.customElements.whenDefined('k-aside');
+      document.getElementById('navSideMenu').toggle();
+    });
+
+    document.addEventListener('click', function(e) {
+      if(e.target.matches('a[href^="#"]')) {
+        e.preventDefault();
+        const targetId = e.target.getAttribute('href').replace('#', '');
+        const target = document.getElementById(targetId);
+        if(target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+          const url = window.location.pathname + window.location.search + '#' + targetId;
+          history.replaceState(null, '', url);
+        }
+      }
+    });
+
+    /*
+      Nav Search
+    */
+    const searchInput = document.getElementById('navSearchInput');
+    const searchDropdown = document.getElementById('navSearchDropdown');
+    let navSearchList = null;
+
+    const openSearch = async () => {
+      await customElements.whenDefined('k-filter-list');
+      if(!navSearchList) navSearchList = document.getElementById('navSearchList');
+      navSearchList.filter(searchInput.value);
+      searchDropdown.hidden = false;
+    };
+
+    const closeSearch = () => {
+      searchDropdown.hidden = true;
+      navSearchList?.clearFocus();
+    };
+
+    searchInput.addEventListener('focus', openSearch);
+
+    searchInput.addEventListener('input', debounce(e => {
+      navSearchList?.filter(e.target.value);
+    }, 150));
+
+    searchInput.addEventListener('keydown', e => {
+      if(e.key === 'Escape') {
+        searchInput.value = '';
+        searchInput.blur();
+        closeSearch();
+      } else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        navSearchList?.handleKeydown(e);
+      }
+    });
+
+    searchInput.addEventListener('blur', () => {
+      setTimeout(closeSearch, 150);
+    });
+
+    document.addEventListener('keydown', e => {
+      let active = document.activeElement;
+      while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+      const tag = active?.tagName;
+      if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
+      if(e.metaKey || e.ctrlKey || e.altKey) return;
+      if(e.key.length === 1) {
+        searchInput.focus();
+      }
+    });
+  </script>
+
+  
+    <h1 class="ta-center">Accordion</h1>
+  
   <k-main>
+    
     <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">
@@ -208,13 +439,14 @@
       <h5><code>togglepanel</code></h5>
       <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
     </k-card>
-
+  
   </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
   <script type="module" src="../src/components/Main.js"></script>
-  <script type="module" src="../src/components/Accordion.js"></script>
-  <script type="module" src="../src/components/Card.js"></script>
-  <script type="module" src="../src/components/Resize.js"></script>
+  
+    <script type="module" src="../src/components/Accordion.js"></script>
+    <script type="module" src="../src/components/Card.js"></script>
+    <script type="module" src="../src/components/Resize.js"></script>
+  
 </body>
-</html>
+</html>

package/docs/components/aside-items.html

@@ -7,14 +7,8 @@
   <link rel="stylesheet" href="../kempo-vars.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module">
-    import theme from '../src/utils/theme.js';
-    theme.init();
-  </script>
-  <script type="module" src="../src/components/Aside.js"></script>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Main.js"></script>
-  <style>
+  
+    <style>
     body {
       margin: 0;
       padding: 0;
@@ -22,9 +16,17 @@
       overflow: hidden;
     }
   </style>
+    <script type="module">
+    import theme from '../src/utils/theme.js';
+    theme.init();
+  </script>
+    <script type="module" src="../src/components/Aside.js"></script>
+    <script type="module" src="../src/components/Main.js"></script>
+  
 </head>
 <body>
-  <k-aside main="push" state="expanded" style="--aside_padding: 0;">
+  
+    <k-aside main="push" state="expanded" style="--aside_padding: 0;">
     <k-aside-toggle><h5 class="m0">Kempo</h5></k-aside-toggle>
     <k-aside-item icon="cards" href="#" active>Dashboard</k-aside-item>
     <k-aside-item icon="check" href="#">Tasks</k-aside-item>
@@ -40,5 +42,7 @@
     <h2>Main Content</h2>
     <p>Click the aside's collapse/expand to see items react.</p>
   </k-main>
+  
+  
 </body>
 </html>

package/docs/components/aside-menu.html

@@ -7,14 +7,8 @@
   <link rel="stylesheet" href="../kempo-vars.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module">
-    import theme from '../src/utils/theme.js';
-    theme.init();
-  </script>
-  <script type="module" src="../src/components/Aside.js"></script>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Main.js"></script>
-  <style>
+  
+    <style>
     body {
       margin: 0;
       padding: 0;
@@ -22,9 +16,17 @@
       overflow: hidden;
     }
   </style>
+    <script type="module">
+    import theme from '../src/utils/theme.js';
+    theme.init();
+  </script>
+    <script type="module" src="../src/components/Aside.js"></script>
+    <script type="module" src="../src/components/Main.js"></script>
+  
 </head>
 <body>
-  <k-aside main="push" state="expanded" style="--aside_padding: 0;">
+  
+    <k-aside main="push" state="expanded" style="--aside_padding: 0;">
     <k-aside-toggle><h5 class="m0">Kempo</h5></k-aside-toggle>
     <k-aside-item icon="cards" href="#">Dashboard</k-aside-item>
     <k-aside-menu icon="folder" label="Projects">
@@ -40,5 +42,7 @@
     <h2>Main Content</h2>
     <p>Click menu headers to expand sub-items. Collapse the aside to see menus fold.</p>
   </k-main>
+  
+  
 </body>
 </html>

package/docs/components/aside-push.html

@@ -3,25 +3,30 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <title>Untitled</title>
   <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <script>window.litDisableBundleWarning = true;</script>
+  
 </head>
 <body>
-  <k-aside id="aside4" state="offscreen">
+  
+    <k-aside id="aside4" state="offscreen">
     <p>Push Sidebar Content</p>
   </k-aside>
   <k-main>
     <button id="toggle4">Toggle Sidebar</button>
     <p>This content shifts when the aside is visible.</p>
   </k-main>
-  <script>
+  
+  
+    <script>
     document.getElementById('toggle4').addEventListener('click',()=>{
       document.getElementById('aside4').toggle();
     });
   </script>
-  <script type="module" src="../src/components/Aside.js"></script>
-  <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Main.js"></script>
+    <script type="module" src="../src/components/Aside.js"></script>
+    <script type="module" src="../src/components/Main.js"></script>
+  
 </body>
 </html>