kempo-ui 0.3.4 → 0.3.6

package/docs-src/index.page.html

@@ -0,0 +1,312 @@
+<page pageName="Kempo UI" title="Kempo UI Documentation">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">
+      <img
+        src="{{pathToRoot}}media/icon64.png"
+        alt="Kempo UI Icon"
+      />
+      <span
+        class="d-ib py"
+        style="vertical-align: bottom"
+      >
+        Kempo UI
+      </span>
+    </h1>
+    <p>A lit-based web component library.</p>
+    <p>Current Version: <code id="version">unknown</code></p>
+
+    <h2>Getting Started</h2>
+    <div class="row -mx">
+      <div class="span-12 t-span-4 d-span-4 px">
+        <p>Install using NPM.</p>
+        <pre><code class="hljs bash">npm install kempo-ui</code></pre>
+      </div>
+      <div class="span-12 t-span-4 d-span-4 px">
+        <p>or clone the git repo</p>
+        <pre><code class="hljs bash">git <span class="hljs-built_in">clone</span> https://github.com/dustinpoissant/kempo-ui.git</code></pre>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <p>or download directly</p>
+        <a href="https://github.com/dustinpoissant/kempo-ui/archive/refs/heads/main.zip" target="_blank"
+          class="btn primary">Download Zip</a>
+      </div>
+    </div>
+
+    <h2>Components</h2>
+    <div class="row -mx">
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/accordion.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Accordion</h3>
+          <p class="tc-muted">Collapsible sections with smooth animations and toggle controls.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/aside.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Aside</h3>
+          <p class="tc-muted">Enhanced sidebar component with push and overlay modes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/card.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Card</h3>
+          <p class="tc-muted">Container component with optional labels and border styling.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/color-picker.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">ColorPicker</h3>
+          <p class="tc-muted">Advanced color selection supporting all CSS color formats with alpha transparency.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/content-slider.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Content Slider</h3>
+          <p class="tc-muted">Swipeable carousel for images and content with navigation controls.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/context.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Context</h3>
+          <p class="tc-muted">Non-rendering state container for sharing data and notifying descendant components of changes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/dialog.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Dialog</h3>
+          <p class="tc-muted">Modal dialogs with focus trapping and customizable buttons.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/dropdown.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Dropdown</h3>
+          <p class="tc-muted">Action menus with keyboard navigation and customizable positioning.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/filter-list.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Filter List</h3>
+          <p class="tc-muted">Show or hide items based on a search term matching their filter keywords.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/focus-capture.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">FocusCapture</h3>
+          <p class="tc-muted">Trap keyboard focus within a container for accessibility.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/html-editor.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">HTML Editor</h3>
+          <p class="tc-muted">WYSIWYG editor with formatting tools and dual editing modes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/icon.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Icon</h3>
+          <p class="tc-muted">Display SVG icons from a collection with customizable size and color.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/import.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Import</h3>
+          <p class="tc-muted">Dynamically load and include HTML snippets into your pages.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/nav.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Nav</h3>
+          <p class="tc-muted">Fixed navigation bar with automatic elevation applied at the correct stacking level.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/photo-viewer.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Photo Viewer</h3>
+          <p class="tc-muted">Lightbox gallery for viewing images with zoom and navigation.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/resize.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Resize</h3>
+          <p class="tc-muted">Draggable handle to resize adjacent elements dynamically.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/show-more.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Show More</h3>
+          <p class="tc-muted">Truncate long content with a "show more" button to expand.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/sortable.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Sortable</h3>
+          <p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/spinner.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Spinner</h3>
+          <p class="tc-muted">Loading indicators with multiple styles and sizes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/split.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Split</h3>
+          <p class="tc-muted">Resizable split panes with horizontal or vertical layouts.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/table.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Table</h3>
+          <p class="tc-muted">Feature-rich data tables with sorting, filtering, and pagination.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/tabs.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Tabs</h3>
+          <p class="tc-muted">Tabbed interface for organizing content into switchable panels.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/tags.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Tags</h3>
+          <p class="tc-muted">Input field for adding and removing tags with keyboard support.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/theme-select.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Theme Select</h3>
+          <p class="tc-muted">Dropdown select for choosing between Light, Dark, and System Default themes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/theme-switcher.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Theme Switcher</h3>
+          <p class="tc-muted">Toggle between light, dark, and auto theme modes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/timestamp.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Timestamp</h3>
+          <p class="tc-muted">Display formatted dates and times with relative formatting.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/toast.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Toast</h3>
+          <p class="tc-muted">Notification messages that appear temporarily at screen corners.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/toggle.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Toggle</h3>
+          <p class="tc-muted">Switch component for boolean values with custom styling.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/tree.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Tree</h3>
+          <p class="tc-muted">Hierarchical data visualization with collapsible branches and custom leaf types.</p>
+        </a>
+      </div>
+    </div>
+
+    <h2>Base Components</h2>
+    <div class="row -mx">
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/shadow-component.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Shadow Component</h3>
+          <p class="tc-muted">Base class for components with shadow DOM and scoped styles.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/light-component.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Light Component</h3>
+          <p class="tc-muted">Base class for components that render directly to light DOM.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/hybrid-component.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Hybrid Component</h3>
+          <p class="tc-muted">Base class combining shadow and light DOM rendering.</p>
+        </a>
+      </div>
+    </div>
+
+    <h2>Utils</h2>
+    <div class="row -mx">
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/cookie.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">cookie</h3>
+          <p class="tc-muted">Functions for managing browser cookies.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/context.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">context</h3>
+          <p class="tc-muted">Global or named shared state for vanilla JS components.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/debounce.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">debounce</h3>
+          <p class="tc-muted">Delay function execution until after a specified wait period.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/drag.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">drag</h3>
+          <p class="tc-muted">Handle mouse and touch drag interactions with cleanup.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/formatTimestamp.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">formatTimestamp</h3>
+          <p class="tc-muted">Format dates into human-readable relative or absolute strings.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/propConverters.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">propConverters</h3>
+          <p class="tc-muted">Type converters for Lit component properties and attributes.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/string.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">string</h3>
+          <p class="tc-muted">Collection of functions for string manipulation and conversion.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/theme.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">theme</h3>
+          <p class="tc-muted">Centralized theme management with persistence and reactive updates.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/type.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">type</h3>
+          <p class="tc-muted">Functions for checking and identifying JavaScript value types.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/object.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">object</h3>
+          <p class="tc-muted">Functions for manipulating and analyzing JavaScript objects.</p>
+        </a>
+      </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/wait.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">wait</h3>
+          <p class="tc-muted">Functions for creating delays and waiting for animation frames.</p>
+        </a>
+      </div>
+    </div>
+    <div style="height:33vh"></div>
+  </content>
+  <content location="scripts">
+    <script type="module">
+      document.getElementById('version').innerHTML = (await (await fetch('https://raw.githubusercontent.com/dustinpoissant/kempo-ui/refs/heads/main/package.json')).json()).version;
+    </script>
+  </content>
+</page>

package/docs-src/nav.fragment.html

@@ -0,0 +1,228 @@
+<fragment>
+  <k-nav fixed class="bg-primary">
+    <button id="toggleNavSideMenu" class="link">
+      <k-icon name="menu"></k-icon>
+    </button>
+    <a href="{{pathToRoot}}" class="d-if ph" style="align-items: center">
+      <img src="{{pathToRoot}}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="{{pathToRoot}}components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="aside sidebar components"><a href="{{pathToRoot}}components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="card components"><a href="{{pathToRoot}}components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="color picker colorpicker components"><a href="{{pathToRoot}}components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="content slider components"><a href="{{pathToRoot}}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="{{pathToRoot}}components/context.html">Context<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="dialog modal popup components"><a href="{{pathToRoot}}components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="dropdown select components"><a href="{{pathToRoot}}components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="filter list filterlist components"><a href="{{pathToRoot}}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="{{pathToRoot}}components/focus-capture.html">Focus Capture<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="html editor components"><a href="{{pathToRoot}}components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="icon components"><a href="{{pathToRoot}}components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="import components"><a href="{{pathToRoot}}components/import.html">Import<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav navbar navigation components"><a href="{{pathToRoot}}components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="{{pathToRoot}}components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="resize components"><a href="{{pathToRoot}}components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="show more showmore components"><a href="{{pathToRoot}}components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="sortable drag drop sort components"><a href="{{pathToRoot}}components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="spinner loading components"><a href="{{pathToRoot}}components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="split pane components"><a href="{{pathToRoot}}components/split.html">Split<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table data grid components"><a href="{{pathToRoot}}components/table.html">Table<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="table controls advanced example"><a href="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="tags tag input components"><a href="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="toast notification alert components"><a href="{{pathToRoot}}components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="toggle switch checkbox components"><a href="{{pathToRoot}}components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="tree treeview components"><a href="{{pathToRoot}}components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="shadow component base"><a href="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}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="{{pathToRoot}}utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="context utils utility"><a href="{{pathToRoot}}utils/context.html">context<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="debounce utils utility"><a href="{{pathToRoot}}utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="drag utils utility"><a href="{{pathToRoot}}utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="elevation z-index stacking utils"><a href="{{pathToRoot}}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="{{pathToRoot}}utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="object utils utility"><a href="{{pathToRoot}}utils/object.html">object<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="{{pathToRoot}}utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="string utils utility"><a href="{{pathToRoot}}utils/string.html">string<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="theme utils utility"><a href="{{pathToRoot}}utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="type utils utility"><a href="{{pathToRoot}}utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="wait async utils utility"><a href="{{pathToRoot}}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="{{pathToRoot}}" class="ta-center bb mb r0">
+        <h1 class="tc-primary">Kempo UI</h1>
+        <img src="{{pathToRoot}}media/icon128.png" alt="Kempo UI Icon" />
+      </a>
+
+      <div class="pl mb">
+        <h3>Components</h3>
+        <a href="{{pathToRoot}}components/accordion.html">Accordion</a>
+        <a href="{{pathToRoot}}components/aside.html">Aside</a>
+        <a href="{{pathToRoot}}components/card.html">Card</a>
+        <a href="{{pathToRoot}}components/color-picker.html">ColorPicker</a>
+        <a href="{{pathToRoot}}components/content-slider.html">Content Slider</a>
+        <a href="{{pathToRoot}}components/context.html">Context</a>
+        <a href="{{pathToRoot}}components/dialog.html">Dialog</a>
+        <a href="{{pathToRoot}}components/dropdown.html">Dropdown</a>
+        <a href="{{pathToRoot}}components/filter-list.html">Filter List</a>
+        <a href="{{pathToRoot}}components/focus-capture.html">FocusCapture</a>
+        <a href="{{pathToRoot}}components/html-editor.html">HTML Editor</a>
+        <a href="{{pathToRoot}}components/icon.html">Icon</a>
+        <a href="{{pathToRoot}}components/import.html">Import</a>
+        <a href="{{pathToRoot}}components/nav.html">Nav</a>
+        <a href="{{pathToRoot}}components/photo-viewer.html">Photo Viewer</a>
+        <a href="{{pathToRoot}}components/resize.html">Resize</a>
+        <a href="{{pathToRoot}}components/show-more.html">Show More</a>
+        <a href="{{pathToRoot}}components/sortable.html">Sortable</a>
+        <a href="{{pathToRoot}}components/spinner.html">Spinner</a>
+        <a href="{{pathToRoot}}components/split.html">Split</a>
+        <a href="{{pathToRoot}}components/table.html">Table</a>
+        <a href="{{pathToRoot}}components/tabs.html">Tabs</a>
+        <a href="{{pathToRoot}}components/tags.html">Tags</a>
+        <a href="{{pathToRoot}}components/theme-select.html">Theme Select</a>
+        <a href="{{pathToRoot}}components/theme-switcher.html">Theme Switcher</a>
+        <a href="{{pathToRoot}}components/timestamp.html">Timestamp</a>
+        <a href="{{pathToRoot}}components/toast.html">Toast</a>
+        <a href="{{pathToRoot}}components/toggle.html">Toggle</a>
+        <a href="{{pathToRoot}}components/tree.html">Tree</a>
+      </div>
+
+      <h5 class="mb0">Base Components</h5>
+      <div class="pl mb">
+        <a href="{{pathToRoot}}components/shadow-component.html">Shadow Component</a>
+        <a href="{{pathToRoot}}components/light-component.html">Light Component</a>
+        <a href="{{pathToRoot}}components/hybrid-component.html">Hybrid Component</a>
+      </div>
+
+      <h5 class="mb0">Utils</h5>
+      <div class="pl mb">
+        <a href="{{pathToRoot}}utils/cookie.html">cookie</a>
+        <a href="{{pathToRoot}}utils/context.html">context</a>
+        <a href="{{pathToRoot}}utils/debounce.html">debounce</a>
+        <a href="{{pathToRoot}}utils/drag.html">drag</a>
+        <a href="{{pathToRoot}}utils/elevation.html">elevation</a>
+        <a href="{{pathToRoot}}utils/formatTimestamp.html">formatTimestamp</a>
+        <a href="{{pathToRoot}}utils/object.html">object</a>
+        <a href="{{pathToRoot}}utils/propConverters.html">propConverters</a>
+        <a href="{{pathToRoot}}utils/string.html">string</a>
+        <a href="{{pathToRoot}}utils/theme.html">theme</a>
+        <a href="{{pathToRoot}}utils/type.html">type</a>
+        <a href="{{pathToRoot}}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="{{pathToRoot}}src/components/Nav.js" type="module"></script>
+  <script src="{{pathToRoot}}src/components/FilterList.js" type="module"></script>
+  <script src="{{pathToRoot}}src/components/FilterItem.js" type="module"></script>
+  <script src="{{pathToRoot}}src/components/Aside.js" type="module"></script>
+  <script src="{{pathToRoot}}src/components/Icon.js" type="module"></script>
+  <script src="{{pathToRoot}}src/components/ThemeSwitcher.js" type="module"></script>
+  <script type="module">
+    import debounce from '{{pathToRoot}}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>
+</fragment>