kempo-ui 0.0.79 → 0.0.81

package/.github/copilot-instructions.md

@@ -88,79 +88,8 @@ Do not prefix identifiers with underscores.
   - Use clear, descriptive names without prefixes.
   - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
 
-## Components
-
-### Base Component Architecture
-
-The project provides three base components for different rendering strategies. Choose the appropriate base component and extend it:
-
-#### ShadowComponent
-For components that need shadow DOM encapsulation and automatic `/kempo.css` stylesheet injection.
-
-```javascript
-import ShadowComponent from './ShadowComponent.js';
-
-export default class MyComponent extends ShadowComponent {
-  render() {
-    return html`<p>Shadow DOM content with scoped styles</p>`;
-  }
-}
-```
-
-#### LightComponent  
-For components that render directly to light DOM without shadow DOM encapsulation.
-
-```javascript
-import LightComponent from './LightComponent.js';
-
-export default class MyComponent extends LightComponent {
-  renderLightDom() {
-    return html`<p>Light DOM content</p>`;
-  }
-}
-```
-
-#### HybridComponent
-For components that need both shadow DOM (with automatic `/kempo.css`) and light DOM rendering.
-
-```javascript
-import HybridComponent from './HybridComponent.js';
-
-export default class MyComponent extends HybridComponent {
-  render() {
-    return html`<p>Shadow DOM content</p>`;
-  }
-  
-  renderLightDom() {
-    return html`<p>Light DOM content alongside natural children</p>`;
-  }
-}
-```
-
-**Important:** Always call `super.updated()` when overriding the `updated()` method in LightComponent or HybridComponent to ensure proper rendering.
-
-### Component Architecture and Communication
-
-- Use methods to cause actions; do not emit events to trigger logic. Events are for notifying that something already happened.
-  - Prefer `el.closest('ktf-test-framework')?.enqueueSuite({...})` over firing an `enqueue` event.
-
-- Wrap dependent components inside a parent `ktf-test-framework` element. Children find it via `closest('ktf-test-framework')` and call its methods. The framework can query its subtree to orchestrate children.
-
-- Avoid `window` globals and global custom events for coordination. If broadcast is needed, scope events to the framework element; reserve window events for global, non-visual concerns (e.g., settings changes).
-
 ## Development Workflow
 
-### Icons
-- All icons are stored in the `icons/` directory as SVG files
-- Icons should have no `width` or `height` attributes, and use `fill="currentColor"` for theming
-- To download new Material Icons from Google's CDN:
-  ```bash
-  npm run geticon icon_name
-  ```
-  Example: `npm run geticon format_bold`
-- The script automatically formats the icon with proper attributes
-- Browse available icons at [Google Material Symbols](https://fonts.google.com/icons)
-
 ### Local Development Server
 - **DO NOT** start a development server - one is already running
 - Default port: **8083**

package/.github/skills/new-component/SKILL.md

@@ -0,0 +1,201 @@
+---
+name: new-component
+description: Creates a new Kempo UI web component — choosing the right base class, writing the source file, registering the custom element, and adding documentation.
+---
+
+# New Component
+
+## When to Use
+
+Use this skill any time you are asked to create a new component or add a new custom element to the project.
+
+---
+
+## Overview
+
+Creating a component involves four steps:
+
+1. **Choose the base component** — pick the right rendering strategy
+2. **Write the source file** in `src/components/`
+3. **Register the custom element** at the bottom of the source file
+4. **Add documentation** in `docs/components/`
+
+---
+
+## Step 1: Choose the Base Component
+
+Three base classes are available. Pick based on rendering needs:
+
+### `ShadowComponent`
+Use when the component needs shadow DOM encapsulation. The base class automatically injects the `/kempo.css` stylesheet into the shadow root.
+
+```javascript
+import { html } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+export default class MyComponent extends ShadowComponent {
+  render() {
+    return html`<p>Shadow DOM content with scoped styles</p>`;
+  }
+}
+```
+
+### `LightComponent`
+Use when the component renders to the light DOM (no encapsulation, inherits page styles).
+
+```javascript
+import { html } from '../lit-all.min.js';
+import LightComponent from './LightComponent.js';
+
+export default class MyComponent extends LightComponent {
+  renderLightDom() {
+    return html`<p>Light DOM content</p>`;
+  }
+}
+```
+
+### `HybridComponent`
+Use when the component needs both a shadow DOM portion and a light DOM portion (e.g. slotted children that also need managed light DOM output).
+
+```javascript
+import { html } from '../lit-all.min.js';
+import HybridComponent from './HybridComponent.js';
+
+export default class MyComponent extends HybridComponent {
+  render() {
+    return html`<p>Shadow DOM content</p>`;
+  }
+
+  renderLightDom() {
+    return html`<p>Light DOM content alongside natural children</p>`;
+  }
+}
+```
+
+**Important:** Always call `super.updated()` when overriding the `updated()` method in `LightComponent` or `HybridComponent`.
+
+---
+
+## Step 2: Write the Source File
+
+Create `src/components/MyComponent.js`. Follow these conventions:
+
+- Use multi-line comments to separate logical sections: `Lifecycle Callbacks`, `Event Handlers`, `Public Methods`, `Utility Functions`, `Rendering`, `Styles`.
+- Declare reactive properties with `static properties = { ... }` and initialize defaults in the constructor.
+- Use `static styles = css\`...\`` for component-scoped CSS (shadow DOM only).
+- Use arrow functions for class methods to avoid `.bind(this)`.
+- Do not prefix private fields with underscores — use native JS private fields (`#field`) when true privacy is needed.
+
+Example skeleton:
+
+```javascript
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+export default class MyComponent extends ShadowComponent {
+  static properties = {
+    value: { type: String, reflect: true }
+  };
+  
+  /*
+    Lifecycle Calblacks
+  */
+  constructor(){
+    super();
+    this.value = 'default value';
+  }
+  connectedCallback(){
+    super.connectedCallback();
+    // Do things
+  }
+
+  /*
+    Event Handlers
+  */
+  handleClick = () => {
+    this.dispatchEvent(new CustomEvent('my-event', { bubbles: true, composed: true }));
+  };
+
+  /*
+    Rendering
+  */
+  render() {
+    return html`
+      <button @click=${this.handleClick}>${this.value}</button>
+    `;
+  }
+  /*
+    Styles
+  */
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+  
+  /*
+    Static Methods
+  */
+  static staticMethod(){
+    // Do things
+  }
+}
+
+customElements.define('k-my-component', MyComponent);
+```
+
+### Custom element naming
+- All elements use the `k-` prefix (e.g. `k-spinner`, `k-color-picker`).
+- Use kebab-case for multi-word names.
+- The `customElements.define(...)` call goes at the **bottom** of the file, after the class.
+
+---
+
+## Step 3: Register in the Nav and Index (if it should appear in docs)
+
+Add a link to the component in `docs/nav.inc.html` inside the `<menu>` under the appropriate section, in alphabetical order:
+
+```html
+<a href="./components/my-component.html">My Component</a>
+```
+
+Also add a card in `docs/index.html` inside the `<div class="row -mx">` under the `<h2>Components</h2>` section, in alphabetical order:
+
+```html
+<div class="span-12 t-span-6 d-span-4 px">
+  <a href="./components/my-component.html" class="card mb no-link d-b">
+    <h3 class="tc-primary">My Component</h3>
+    <p class="tc-muted">One-sentence description of what the component does.</p>
+  </a>
+</div>
+```
+
+---
+
+## Step 4: Add Documentation
+
+Create `docs/components/my-component.html`. Use an existing docs page (e.g. `docs/components/spinner.html`) as a reference for structure and conventions.
+
+Key requirements:
+- Consistent `<head>` with title, stylesheets, and `window.litDisableBundleWarning = true`.
+- `<k-import src="../nav-1.inc.html"></k-import>` at the top of `<body>`.
+- A Table of Contents accordion.
+- Sections for: examples/usage, and a JavaScript Reference covering constructor, attributes/properties, CSS variables, events, and public methods (as applicable).
+- Use the `highlight-code` skill for all code examples that need syntax highlighting.
+- At the bottom of the file, load the component and its dependencies as `<script type="module">` tags:
+
+```html
+  <script type="module" src="../src/components/MyComponent.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+```
+
+---
+
+## Component Architecture and Communication
+
+- Use **methods** to trigger actions. Events notify that something already happened; they should not be used to trigger logic.
+  - Prefer `el.closest('k-parent')?.doSomething()` over dispatching an event and listening for it.
+- Child components should locate their parent via `closest('k-parent-element')` and call its methods directly.
+- Avoid `window` globals and global custom events for coordination. Scope events to the relevant element; reserve `window` events for global, non-visual concerns (e.g. settings changes).

package/dist/components/FilterItem.js

@@ -0,0 +1,8 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterItem extends ShadowComponent{render(){return html`<slot></slot>`}static styles=css`
+		:host {
+			display: contents;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+	`}customElements.define("k-filter-item",FilterItem);

package/dist/components/FilterList.js

@@ -0,0 +1,5 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterList extends ShadowComponent{render(){return html`<slot></slot>`}filter(t){const e=t.toLowerCase().split(/\s+/).filter(t=>t.length>0);this.querySelectorAll("k-filter-item").forEach(t=>{const s=(t.getAttribute("filter-keywords")||"").toLowerCase();t.hidden=e.length>0&&!e.every(t=>s.includes(t))})}static styles=css`
+		:host {
+			display: block;
+		}
+	`}customElements.define("k-filter-list",FilterList);

package/dist/components/Table.js

@@ -34,11 +34,11 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
             </select>
           `;default:return html`<input type="text" .value=${s} />`}}renderDisplayCell(e,t,s,i,r){return i?i(e,this):r?r(s):s}renderBeforeControlsTemplate(){const e=[];return this.querySelectorAll('[slot="before"]').forEach(t=>{const s=t.tagName.toLowerCase(),i=document.createElement(s);Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),t.innerHTML&&(i.innerHTML=t.innerHTML),e.push(i)}),html`
       <td class="cell controls controls-before">
-        ${e}
+        <div>${e}</div>
       </td>
     `}renderAfterControlsTemplate(){const e=[];return this.querySelectorAll('[slot="after"]').forEach(t=>{const s=t.tagName.toLowerCase(),i=document.createElement(s);Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),t.innerHTML&&(i.innerHTML=t.innerHTML),e.push(i)}),html`
       <td class="cell controls controls-after">
-        ${e}
+        <div>${e}</div>
       </td>
     `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`),s={};t&&t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=e.dataset.field,i=this.fields.find(e=>e.name===t);if(i&&!i.calculator){const i=e.querySelector("input, select");i&&(s[t]=i.value)}});const i=()=>{Object.assign(e,s),e[editing]=!1,t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))};if(Object.keys(s).some(t=>String(e[t]??"")!==s[t]))if(this.requestEdit){t?.classList.add("pending");const r=()=>{t?.classList.remove("pending"),i()},o=()=>{t?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestSave",{detail:{record:e,newData:s,approve:r,reject:o},bubbles:!0}))}else i();else this.cancelEditedRecord(e)}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}getFieldLabel(e){const t=this.fields.find(t=>t.name===e);return t?t.label:toTitleCase(e)}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let n=!1,l=this.getTotalPages(),a=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),n=!0),s&&(this.pageSize=s,n=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,n=!0),void 0!==o&&(this.enableSelection=o,n=!0),n&&this.requestUpdate();const d=this.getTotalPages();d!==l&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),a>d&&this.setPage(d)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e);const s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),!t)return;const i=()=>{const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))};if(this.requestDelete){const e=this.shadowRoot.querySelector(`.record[data-index="${t[index]}"]`);e?.classList.add("pending");const s=()=>{e?.classList.remove("pending"),i()},r=()=>{e?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:[t],approve:s,reject:r},bubbles:!0}))}else i()}deleteSelected(){const e=this.getTotalPages(),t=this.getSelectedRecords().map(e=>this.records.find(t=>t===e)??(void 0!==e[index]?this.records[e[index]]:null)).filter(Boolean);if(!t.length)return;const s=()=>{t.forEach(e=>{const t=this.records.indexOf(e);-1!==t&&this.records.splice(t,1)}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const s=this.getTotalPages();this.currentPage>s&&this.setPage(s),s!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:s},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};if(this.requestDelete){const e=t.map(e=>this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`)).filter(Boolean);e.forEach(e=>e.classList.add("pending"));const i=()=>{e.forEach(e=>e.classList.remove("pending")),s()},r=()=>{e.forEach(e=>e.classList.remove("pending"))};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:t,approve:i,reject:r},bubbles:!0}))}else s()}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&([...this.filters].forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){const e=Array.from(this.querySelectorAll('[slot="before"]')),t=Array.from(this.querySelectorAll('[slot="after"]')),s={beforeControls:e.reduce((e,t)=>e+(t.maxWidth||40),0),afterControls:t.reduce((e,t)=>e+(t.maxWidth||40),0)},i=[...e,...t].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(s)&&(this.columnSizes=s),i&&setTimeout(()=>this.calculateColumnSizes(),0),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find(t=>t.name===e);s&&(s.hidden=t,this.calculateColumnSizes(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
       <div id="wrapper">
@@ -154,8 +154,8 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
     td.controls {
       padding: 0;
     }
-    td.controls-after,
-    td.controls-before {
+    td.controls-after > div,
+    td.controls-before > div {
       display: flex;
       align-items: center;
     }

package/docs/components/filter-list.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Filter List - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <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>
+  <main>
+    <h1 class="ta-center">Filter List</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#tagButtons">Tag Buttons</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#filterItem">FilterItem Attributes</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Wrap items in <code>k-filter-item</code> elements with a <code>filter-keywords</code> attribute inside a <code>k-filter-list</code>. Connect an input to <code>filter()</code> using the <a href="../utils/debounce.html">debounce</a> utility to avoid filtering on every keystroke.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filterInput</span> <span class="hljs-attr">type</span>=<span class="hljs-string">search</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&#x27;Filter...&#x27;</span> /&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-filter-list</span> <span class="hljs-attr">id</span>=<span class="hljs-string">myFilterList</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;apple fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Apple<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;banana fruit yellow&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Banana<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;cherry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Cherry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;grape fruit purple&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Grape<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;lemon citrus yellow fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Lemon<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;orange citrus fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Orange<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;strawberry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Strawberry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-list</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">import</span> debounce <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../src/utils/debounce.js&#x27;</span>;<br>  <span class="hljs-keyword">const</span> list = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;myFilterList&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filterInput&#x27;</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-title function_">debounce</span>(<span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> list.<span class="hljs-title function_">filter</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>)));<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <input id="filterInput" type="search" placeholder="Filter..." class="mb" />
+          <k-filter-list id="myFilterList">
+            <k-filter-item class="d-b" filter-keywords="apple fruit red"><a href="#">Apple</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="banana fruit yellow"><a href="#">Banana</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="cherry fruit red"><a href="#">Cherry</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="grape fruit purple"><a href="#">Grape</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="lemon citrus yellow fruit"><a href="#">Lemon</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="orange citrus fruit"><a href="#">Orange</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="strawberry fruit red"><a href="#">Strawberry</a></k-filter-item>
+          </k-filter-list>
+          <script type="module">
+            import debounce from '../src/utils/debounce.js';
+            const list = document.getElementById('myFilterList');
+            document.getElementById('filterInput').addEventListener('input', debounce(e => list.filter(e.target.value)));
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="tagButtons"><a href="#tagButtons" class="no-link">Tag Buttons</a></h3>
+    <p>Use category buttons to filter the list. Each button stores its filter term in <code>data-filter</code>; clicking it activates that button and calls <code>filter()</code>. An empty string clears the filter and shows all items.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;d-f gap mb&#x27;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">tagButtons</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;btn primary&#x27;</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">&#x27;&#x27;</span>&gt;</span>All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">btn</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">red</span>&gt;</span>Red<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">btn</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">yellow</span>&gt;</span>Yellow<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">btn</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">citrus</span>&gt;</span>Citrus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-filter-list</span> <span class="hljs-attr">id</span>=<span class="hljs-string">tagFilterList</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;apple fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Apple<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;banana fruit yellow&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Banana<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;cherry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Cherry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;grape fruit purple&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Grape<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;lemon citrus yellow fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Lemon<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;orange citrus fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Orange<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;strawberry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Strawberry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-list</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">const</span> list = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;tagFilterList&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;#tagButtons [data-filter]&#x27;</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">btn</span> =&gt;</span> {<br>    btn.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;#tagButtons [data-filter]&#x27;</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">b</span> =&gt;</span> b.<span class="hljs-property">classList</span>.<span class="hljs-title function_">remove</span>(<span class="hljs-string">&#x27;primary&#x27;</span>));<br>      btn.<span class="hljs-property">classList</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">&#x27;primary&#x27;</span>);<br>      list.<span class="hljs-title function_">filter</span>(btn.<span class="hljs-property">dataset</span>.<span class="hljs-property">filter</span>);<br>    });<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f gap mb" id="tagButtons">
+            <button class="btn primary" data-filter="">All</button>
+            <button class="btn" data-filter="red">Red</button>
+            <button class="btn" data-filter="yellow">Yellow</button>
+            <button class="btn" data-filter="citrus">Citrus</button>
+          </div>
+          <k-filter-list id="tagFilterList">
+            <k-filter-item class="d-b" filter-keywords="apple fruit red"><a href="#">Apple</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="banana fruit yellow"><a href="#">Banana</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="cherry fruit red"><a href="#">Cherry</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="grape fruit purple"><a href="#">Grape</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="lemon citrus yellow fruit"><a href="#">Lemon</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="orange citrus fruit"><a href="#">Orange</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="strawberry fruit red"><a href="#">Strawberry</a></k-filter-item>
+          </k-filter-list>
+          <script type="module">
+            const list = document.getElementById('tagFilterList');
+            document.querySelectorAll('#tagButtons [data-filter]').forEach(btn => {
+              btn.addEventListener('click', () => {
+                document.querySelectorAll('#tagButtons [data-filter]').forEach(b => b.classList.remove('primary'));
+                btn.classList.add('primary');
+                list.filter(btn.dataset.filter);
+              });
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new FilterList()</code></h5>
+    <h5><code>new FilterItem()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="filterItem"><a href="#filterItem" class="no-link">FilterItem Attributes</a></h3>
+    <h5><code>filter-keywords<i>: string</i></code></h5>
+    <p>A string of keywords used to match against the search term. The <code>filter()</code> method checks if this value includes the lowercased search term as a substring.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>filter(term<i>: string</i>)<i>: void</i></code></h5>
+    <p>Shows or hides each child <code>k-filter-item</code> based on whether its <code>filter-keywords</code> attribute includes <code>term</code> (case-insensitive). Passing an empty string reveals all items.</p>
+
+  </main>
+  <div style="height:33vh"></div>
+
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/FilterList.js"></script>
+  <script type="module" src="../src/components/FilterItem.js"></script>
+  <script type="module" src="../src/components/Accordion.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+
+</body>
+</html>

package/docs/components/table.html

@@ -102,6 +102,7 @@
       <li><a href="./tableSorting.html">Sorting</a></li>
       <li><a href="./tableFieldSortHide.html">Field Sorting and Hiding</a></li>
       <li><a href="./tableFetchRecords.html">Fetching Records</a></li>
+      <li><a href="./tableServerSync.html">Server Sync</a></li>
     </ul>
 
     <br />

package/docs/icons/search.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/docs/index.html

@@ -83,6 +83,12 @@
           <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="./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="./components/focus-capture.html" class="card mb no-link d-b">
           <h3 class="tc-primary">FocusCapture</h3>

package/docs/nav-1.inc.html

@@ -15,6 +15,67 @@
     <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="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="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="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="side menu sidemenu components"><a href="../components/side-menu.html">Side Menu<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="side panel sidepanel components"><a href="../components/side-panel.html">Side Panel<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table data grid components"><a href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table controls advanced example"><a href="../components/tableControls.html">Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table custom fields advanced example"><a href="../components/tableCustomFields.html">Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table fetch records advanced example"><a href="../components/tableFetchRecords.html">Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table field sort hide advanced example"><a href="../components/tableFieldSortHide.html">Table — Field Sort &amp; Hide<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table pagination advanced example"><a href="../components/tablePagination.html">Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record editing advanced example"><a href="../components/tableRecordEditing.html">Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record filtering advanced example"><a href="../components/tableRecordFiltering.html">Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record hiding advanced example"><a href="../components/tableRecordHiding.html">Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record searching advanced example"><a href="../components/tableRecordSearching.html">Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record selection advanced example"><a href="../components/tableRecordSelection.html">Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table row controls advanced example"><a href="../components/tableRowControls.html">Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table server sync advanced example"><a href="../components/tableServerSync.html">Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<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="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="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"><k-icon name="license"></k-icont></a>
   <a href="https://github.com/dustinpoissant/kempo-ui"><k-icon name="github-mark"></k-icont></a>
@@ -37,6 +98,7 @@
       <a href="../components/content-slider.html">Content Slider</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>
@@ -82,6 +144,13 @@
     </div>
   </menu>
 </k-side-menu>
+<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/FilterList.js" type="module"></script>
+<script src="../src/components/FilterItem.js" type="module"></script>
 <script src="../src/components/SideMenu.js" type="module"></script>
 <script src="../src/components/Icon.js" type="module"></script>
 <script src="../src/components/ThemeSwitcher.js" type="module"></script>

package/docs/nav.inc.html

@@ -15,6 +15,67 @@
     <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="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="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="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="side menu sidemenu components"><a href="./components/side-menu.html">Side Menu<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="side panel sidepanel components"><a href="./components/side-panel.html">Side Panel<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="sortable drag drop sort components"><a href="./components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="spinner loading components"><a href="./components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="split pane components"><a href="./components/split.html">Split<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table data grid components"><a href="./components/table.html">Table<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table controls advanced example"><a href="./components/tableControls.html">Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table custom fields advanced example"><a href="./components/tableCustomFields.html">Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table fetch records advanced example"><a href="./components/tableFetchRecords.html">Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table field sort hide advanced example"><a href="./components/tableFieldSortHide.html">Table — Field Sort &amp; Hide<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table pagination advanced example"><a href="./components/tablePagination.html">Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record editing advanced example"><a href="./components/tableRecordEditing.html">Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record filtering advanced example"><a href="./components/tableRecordFiltering.html">Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record hiding advanced example"><a href="./components/tableRecordHiding.html">Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record searching advanced example"><a href="./components/tableRecordSearching.html">Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table record selection advanced example"><a href="./components/tableRecordSelection.html">Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table row controls advanced example"><a href="./components/tableRowControls.html">Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table server sync advanced example"><a href="./components/tableServerSync.html">Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="table sorting advanced example"><a href="./components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
+        <k-filter-item filter-keywords="tabs tab panel components"><a href="./components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="tags tag input components"><a href="./components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="toast notification alert components"><a href="./components/toast.html">Toast<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="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="formattimestamp timestamp format date time utils utility"><a href="./utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
+        <k-filter-item filter-keywords="object utils utility"><a href="./utils/object.html">object<br><small>Utility</small></a></k-filter-item>
+        <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="./utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
+        <k-filter-item filter-keywords="string utils utility"><a href="./utils/string.html">string<br><small>Utility</small></a></k-filter-item>
+        <k-filter-item filter-keywords="theme utils utility"><a href="./utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
+        <k-filter-item filter-keywords="type utils utility"><a href="./utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+        <k-filter-item filter-keywords="wait async utils utility"><a href="./utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
+      </k-filter-list>
+    </div>
+  </div>
   <div class="flex"></div>
   <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
   <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
@@ -37,6 +98,7 @@
       <a href="./components/color-picker.html">ColorPicker</a>
       <a href="./components/content-slider.html">Content Slider</a>
       <a href="./components/dialog.html">Dialog</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>
@@ -81,6 +143,13 @@
     </div>
   </menu>
 </k-side-menu>
+<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/FilterList.js" type="module"></script>
+<script src="./src/components/FilterItem.js" type="module"></script>
 <script src="./src/components/SideMenu.js" type="module"></script>
 <script src="./src/components/Icon.js" type="module"></script>
 <script src="./src/components/ThemeSwitcher.js" type="module"></script>

package/docs/nav.inc.js

@@ -1,16 +1,66 @@
+import debounce from './src/utils/debounce.js';
+
 document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
 	await window.customElements.whenDefined('k-side-menu');
 	document.getElementById('navSideMenu').toggle();
 });
+
 document.addEventListener('click', function(e) {
-	if (e.target.matches('a[href^="#"]')) {
+	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);
 		}
 	}
+});
+
+/*
+	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;
+};
+
+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();
+	}
+});
+
+searchInput.addEventListener('blur', () => {
+	setTimeout(closeSearch, 150);
+});
+
+document.addEventListener('keydown', e => {
+	const active = document.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();
+		// Don't preventDefault — let the keystroke land in the input naturally
+	}
 });

package/docs/src/components/FilterItem.js

@@ -0,0 +1,8 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterItem extends ShadowComponent{render(){return html`<slot></slot>`}static styles=css`
+		:host {
+			display: contents;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+	`}customElements.define("k-filter-item",FilterItem);

package/docs/src/components/FilterList.js

@@ -0,0 +1,5 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterList extends ShadowComponent{render(){return html`<slot></slot>`}filter(t){const e=t.toLowerCase().split(/\s+/).filter(t=>t.length>0);this.querySelectorAll("k-filter-item").forEach(t=>{const s=(t.getAttribute("filter-keywords")||"").toLowerCase();t.hidden=e.length>0&&!e.every(t=>s.includes(t))})}static styles=css`
+		:host {
+			display: block;
+		}
+	`}customElements.define("k-filter-list",FilterList);

package/docs/src/components/Table.js

@@ -34,11 +34,11 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
             </select>
           `;default:return html`<input type="text" .value=${s} />`}}renderDisplayCell(e,t,s,i,r){return i?i(e,this):r?r(s):s}renderBeforeControlsTemplate(){const e=[];return this.querySelectorAll('[slot="before"]').forEach(t=>{const s=t.tagName.toLowerCase(),i=document.createElement(s);Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),t.innerHTML&&(i.innerHTML=t.innerHTML),e.push(i)}),html`
       <td class="cell controls controls-before">
-        ${e}
+        <div>${e}</div>
       </td>
     `}renderAfterControlsTemplate(){const e=[];return this.querySelectorAll('[slot="after"]').forEach(t=>{const s=t.tagName.toLowerCase(),i=document.createElement(s);Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),t.innerHTML&&(i.innerHTML=t.innerHTML),e.push(i)}),html`
       <td class="cell controls controls-after">
-        ${e}
+        <div>${e}</div>
       </td>
     `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`),s={};t&&t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=e.dataset.field,i=this.fields.find(e=>e.name===t);if(i&&!i.calculator){const i=e.querySelector("input, select");i&&(s[t]=i.value)}});const i=()=>{Object.assign(e,s),e[editing]=!1,t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))};if(Object.keys(s).some(t=>String(e[t]??"")!==s[t]))if(this.requestEdit){t?.classList.add("pending");const r=()=>{t?.classList.remove("pending"),i()},o=()=>{t?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestSave",{detail:{record:e,newData:s,approve:r,reject:o},bubbles:!0}))}else i();else this.cancelEditedRecord(e)}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}getFieldLabel(e){const t=this.fields.find(t=>t.name===e);return t?t.label:toTitleCase(e)}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let n=!1,l=this.getTotalPages(),a=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),n=!0),s&&(this.pageSize=s,n=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,n=!0),void 0!==o&&(this.enableSelection=o,n=!0),n&&this.requestUpdate();const d=this.getTotalPages();d!==l&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),a>d&&this.setPage(d)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e);const s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),!t)return;const i=()=>{const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))};if(this.requestDelete){const e=this.shadowRoot.querySelector(`.record[data-index="${t[index]}"]`);e?.classList.add("pending");const s=()=>{e?.classList.remove("pending"),i()},r=()=>{e?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:[t],approve:s,reject:r},bubbles:!0}))}else i()}deleteSelected(){const e=this.getTotalPages(),t=this.getSelectedRecords().map(e=>this.records.find(t=>t===e)??(void 0!==e[index]?this.records[e[index]]:null)).filter(Boolean);if(!t.length)return;const s=()=>{t.forEach(e=>{const t=this.records.indexOf(e);-1!==t&&this.records.splice(t,1)}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const s=this.getTotalPages();this.currentPage>s&&this.setPage(s),s!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:s},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};if(this.requestDelete){const e=t.map(e=>this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`)).filter(Boolean);e.forEach(e=>e.classList.add("pending"));const i=()=>{e.forEach(e=>e.classList.remove("pending")),s()},r=()=>{e.forEach(e=>e.classList.remove("pending"))};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:t,approve:i,reject:r},bubbles:!0}))}else s()}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&([...this.filters].forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){const e=Array.from(this.querySelectorAll('[slot="before"]')),t=Array.from(this.querySelectorAll('[slot="after"]')),s={beforeControls:e.reduce((e,t)=>e+(t.maxWidth||40),0),afterControls:t.reduce((e,t)=>e+(t.maxWidth||40),0)},i=[...e,...t].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(s)&&(this.columnSizes=s),i&&setTimeout(()=>this.calculateColumnSizes(),0),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find(t=>t.name===e);s&&(s.hidden=t,this.calculateColumnSizes(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
       <div id="wrapper">
@@ -154,8 +154,8 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
     td.controls {
       padding: 0;
     }
-    td.controls-after,
-    td.controls-before {
+    td.controls-after > div,
+    td.controls-before > div {
       display: flex;
       align-items: center;
     }

package/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/package.json

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

package/src/components/FilterItem.js

@@ -0,0 +1,25 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+
+export default class FilterItem extends ShadowComponent {
+	/*
+		Rendering
+	*/
+	render() {
+		return html`<slot></slot>`;
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: contents;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+	`;
+}
+
+customElements.define('k-filter-item', FilterItem);

package/src/components/FilterList.js

@@ -0,0 +1,33 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+
+export default class FilterList extends ShadowComponent {
+	/*
+		Rendering
+	*/
+	render() {
+		return html`<slot></slot>`;
+	}
+
+	/*
+		Public Methods
+	*/
+	filter(term) {
+		const words = term.toLowerCase().split(/\s+/).filter(w => w.length > 0);
+		this.querySelectorAll('k-filter-item').forEach(item => {
+			const keywords = (item.getAttribute('filter-keywords') || '').toLowerCase();
+			item.hidden = words.length > 0 && !words.every(w => keywords.includes(w));
+		});
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: block;
+		}
+	`;
+}
+
+customElements.define('k-filter-list', FilterList);

package/src/components/Table.js

@@ -280,7 +280,7 @@ export default class Table extends ShadowComponent {
     });
     return html`
       <td class="cell controls controls-before">
-        ${controls}
+        <div>${controls}</div>
       </td>
     `;
   }
@@ -298,7 +298,7 @@ export default class Table extends ShadowComponent {
     });
     return html`
       <td class="cell controls controls-after">
-        ${controls}
+        <div>${controls}</div>
       </td>
     `;
   }
@@ -1131,8 +1131,8 @@ export default class Table extends ShadowComponent {
     td.controls {
       padding: 0;
     }
-    td.controls-after,
-    td.controls-before {
+    td.controls-after > div,
+    td.controls-before > div {
       display: flex;
       align-items: center;
     }