kempo-ui 0.3.14 → 0.3.16

package/docs-src/nav.fragment.html

@@ -1,91 +1,247 @@
 <fragment>
-  <k-nav fixed class="bg-primary">
-    <button id="toggleNavSideMenu" class="link">
+  <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" />
+    <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="code editor codeeditor monaco components"><a href="{{pathToRoot}}components/code-editor.html">Code Editor<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="nav spacer navbar spacer navspacer components"><a href="{{pathToRoot}}components/nav-spacer.html">Nav Spacer<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>
+    <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="code editor codeeditor monaco components"><a
+              href="{{pathToRoot}}components/code-editor.html"
+            >Code Editor<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="combobox combo box search autocomplete components"><a
+              href="{{pathToRoot}}components/combobox.html"
+            >Combobox<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="nav spacer navbar spacer navspacer components"><a
+              href="{{pathToRoot}}components/nav-spacer.html"
+            >Nav Spacer<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>
+    <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
+      class="mr"
+      style="
+        --padding: 0.5rem;
+        --c_active: var(--tc_on_primary);
+        --tc_active: var(--c_primary);
+        --c_inactive__hover: rgba(255, 255, 255, 0.1);
+      "
+    ></k-theme-switcher>
   </k-nav>
   <div style="width: 100%; height: 4rem;"></div>
-  <k-aside id="navSideMenu" main="overlay" state="offscreen">
+  <k-aside
+    id="navSideMenu"
+    main="overlay"
+    state="offscreen"
+  >
     <menu>
-      <a href="{{pathToRoot}}" class="ta-center bb mb r0">
+      <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" />
+        <img
+          src="{{pathToRoot}}media/icon128.png"
+          alt="Kempo UI Icon"
+        />
       </a>
 
       <div class="pl mb">
@@ -94,6 +250,7 @@
         <a href="{{pathToRoot}}components/aside.html">Aside</a>
         <a href="{{pathToRoot}}components/card.html">Card</a>
         <a href="{{pathToRoot}}components/code-editor.html">Code Editor</a>
+        <a href="{{pathToRoot}}components/combobox.html">Combobox</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>
@@ -148,16 +305,47 @@
     </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);}
+    #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
+    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';
 
@@ -166,12 +354,12 @@
       document.getElementById('navSideMenu').toggle();
     });
 
-    document.addEventListener('click', function(e) {
-      if(e.target.matches('a[href^="#"]')) {
+    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) {
+        if (target) {
           target.scrollIntoView({ behavior: 'smooth' });
           const url = window.location.pathname + window.location.search + '#' + targetId;
           history.replaceState(null, '', url);
@@ -188,7 +376,7 @@
 
     const openSearch = async () => {
       await customElements.whenDefined('k-filter-list');
-      if(!navSearchList) navSearchList = document.getElementById('navSearchList');
+      if (!navSearchList) navSearchList = document.getElementById('navSearchList');
       navSearchList.filter(searchInput.value);
       searchDropdown.hidden = false;
     };
@@ -205,11 +393,11 @@
     }, 150));
 
     searchInput.addEventListener('keydown', e => {
-      if(e.key === 'Escape') {
+      if (e.key === 'Escape') {
         searchInput.value = '';
         searchInput.blur();
         closeSearch();
-      } else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+      } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
         navSearchList?.handleKeydown(e);
       }
     });
@@ -220,13 +408,13 @@
 
     document.addEventListener('keydown', e => {
       let active = document.activeElement;
-      while(active?.shadowRoot?.activeElement) active = active.shadowRoot.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) {
+      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>
+</fragment>

package/llms.txt

@@ -57,6 +57,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
 | `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls` attributes; form-associated; theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
+| `<k-combobox>` | `Combobox.js` | Searchable dropdown with debounced `search` event, dynamic `setOptions()`, `searching` indicator, keyboard nav; options are strings or `{label, value}` objects | [combobox.html](https://dustinpoissant.github.io/kempo-ui/components/combobox.html) |
 | `<k-content-slider>` | `ContentSlider.js` | Swipeable carousel | [content-slider.html](https://dustinpoissant.github.io/kempo-ui/components/content-slider.html) |
 | `<k-context>` | `Context.js` | Non-rendering state container; `set(key,value)`, `get(key)`, `delete(key)`, `clear()`, `getData()`; fires `context:create`, `context:set`, `context:delete` | [context.html](https://dustinpoissant.github.io/kempo-ui/components/context.html) |
 | `<k-dialog>` | `Dialog.js` | Modal dialog with focus trapping; call `.open()` / `.close()` | [dialog.html](https://dustinpoissant.github.io/kempo-ui/components/dialog.html) |
@@ -79,7 +80,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-tabs>` `<k-tab>` `<k-tab-content>` `<k-tab-spacer>` | `Tabs.js` | Tabbed interface; `<k-tab for-content="id">` links to `<k-tab-content name="id">` | [tabs.html](https://dustinpoissant.github.io/kempo-ui/components/tabs.html) |
 | `<k-tags>` `<k-tag>` | `Tags.js` | Tag input; add/remove tags; fires `change` | [tags.html](https://dustinpoissant.github.io/kempo-ui/components/tags.html) |
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |
-| `<k-theme-switcher>` | `ThemeSwitcher.js` | Light/dark/auto toggle button | [theme-switcher.html](https://dustinpoissant.github.io/kempo-ui/components/theme-switcher.html) |
+| `<k-theme-switcher>` | `ThemeSwitcher.js` | Theme switcher with segmented and toggle display modes | [theme-switcher.html](https://dustinpoissant.github.io/kempo-ui/components/theme-switcher.html) |
 | `<k-timestamp>` | `Timestamp.js` | Displays a `value` timestamp as human-readable relative time | [timestamp.html](https://dustinpoissant.github.io/kempo-ui/components/timestamp.html) |
 | `<k-toast>` `<k-toast-container>` | `Toast.js` | Toast notifications; use `<k-toast-container>` once in page, call `.addToast(options)` | [toast.html](https://dustinpoissant.github.io/kempo-ui/components/toast.html) |
 | `<k-toggle>` | `Toggle.js` | On/off toggle; `value` (Boolean, reflects); methods: `on()`, `off()`, `toggle()`; fires `change`, `on`, `off` | [toggle.html](https://dustinpoissant.github.io/kempo-ui/components/toggle.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",