kempo-ui 0.4.17 → 0.4.18

package/CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.4.18] - 2026-05-04
+### Added
+- **Combobox component**: `no-results-message` and `empty-message` attributes
+  - `no-results-message` customizes the text shown when the user has typed something but no options match (default: `"No Matches"`)
+  - `empty-message` customizes the text shown when the input is empty and no options are loaded, e.g. before a dynamic search has fetched results (default: `"Type to search..."`)
+  - Both attributes map to `noResultsMessage` and `emptyMessage` properties respectively
+
+### Fixed
+- **Tabs component**: Test for `persistent-id` localStorage restore had a logic inversion — `content3.active` was checked instead of `!content3.active`, causing the test to fail precisely when restoration was working correctly
+
 ## [0.4.17] - 2026-05-03
 ### Added
 - **Markdown Editor component**: CSS size variables `--min-height` and `--max-height`

package/dist/components/Combobox.js

@@ -1,4 +1,4 @@
-import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponent.js";import i from"../utils/debounce.js";import"./Option.js";export default class o extends s{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},placeholder:{type:String},opened:{type:Boolean,reflect:!0},searching:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},requireMatch:{type:Boolean,reflect:!0,attribute:"require-match"},disabled:{type:Boolean,reflect:!0},debounceMs:{type:Number,attribute:"debounce-ms"},maxVisible:{type:Number,attribute:"max-visible"}};#e=-1;#t=[];constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.placeholder="",this.opened=!1,this.searching=!1,this.required=!1,this.requireMatch=!1,this.disabled=!1,this.debounceMs=300,this.maxVisible=8,this.#s(300)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}childrenUpdated(){this.#i()}updated(e){super.updated(e),e.has("debounceMs")&&this.#s(this.debounceMs),(e.has("value")||e.has("required")||e.has("requireMatch"))&&this.#o()}formResetCallback(){this.value="",this.#o()}formStateRestoreCallback(e){this.value=e}handleInput=e=>{this.value=e.target.value,this.opened=!0,this.#e=-1,this.#a(this.value)};handleKeydown=e=>{const t=this.#n;if("ArrowDown"===e.key){if(e.preventDefault(),!this.opened)return void(this.opened=!0);this.#e=Math.min(this.#e+1,t.length-1),this.requestUpdate(),this.#r()}else"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.requestUpdate(),this.#r()):"Enter"===e.key?(e.preventDefault(),this.#e>=0&&this.#e<t.length&&this.#l(t[this.#e])):"Escape"===e.key?(e.preventDefault(),this.opened=!1,this.#e=-1):"Tab"===e.key&&(this.opened=!1,this.#e=-1)};handleDocumentClick=e=>{e.composedPath().includes(this)||(this.opened=!1,this.#e=-1)};handleFocus=()=>{this.opened=!0};handleOptionClick=e=>{const t=Number(e.currentTarget.dataset.index);this.#l(this.#n[t])};setOptions(e){return[...this.querySelectorAll("k-option")].forEach(e=>e.remove()),e.forEach(e=>{const t=document.createElement("k-option");"object"==typeof e?(t.setAttribute("value",e.value??e.label),t.textContent=e.label):t.textContent=e,this.appendChild(t)}),this}clear(){return this.value="",this.opened=!1,this.#e=-1,this.#o(),this}#s(e){this.#a=i(e=>{this.dispatchEvent(new CustomEvent("search",{detail:{value:e},bubbles:!0,composed:!0}))},e)}#a=()=>{};#i(){this.#t=[...this.querySelectorAll("k-option")].map(e=>({label:e.label,value:e.value})),this.requestUpdate()}#l(e){this.value=e.label,this.opened=!1,this.#e=-1,this.#o(),this.dispatchEvent(new CustomEvent("select",{detail:{value:e.value,label:e.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#o(){const e=this.#t.find(e=>e.label===this.value);this.internals.setFormValue(e?e.value:this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a value.",this.shadowRoot?.querySelector("input")):this.requireMatch&&this.value&&!e?this.internals.setValidity({customError:!0},"Please select a valid option.",this.shadowRoot?.querySelector("input")):this.internals.setValidity({})}#r(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".option.focused")?.scrollIntoView({block:"nearest"})})}get#d(){const e=(this.value||"").toLowerCase();return e?this.#t.filter(t=>t.label.toLowerCase().includes(e)):this.#t}get#n(){return this.#d.slice(0,this.maxVisible)}render(){const t=this.#n,s=this.#d.length>this.maxVisible;return e`
+import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponent.js";import i from"../utils/debounce.js";import"./Option.js";export default class o extends s{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},placeholder:{type:String},opened:{type:Boolean,reflect:!0},searching:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},requireMatch:{type:Boolean,reflect:!0,attribute:"require-match"},disabled:{type:Boolean,reflect:!0},debounceMs:{type:Number,attribute:"debounce-ms"},maxVisible:{type:Number,attribute:"max-visible"},noResultsMessage:{type:String,attribute:"no-results-message"},emptyMessage:{type:String,attribute:"empty-message"}};#e=-1;#t=[];constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.placeholder="",this.opened=!1,this.searching=!1,this.required=!1,this.requireMatch=!1,this.disabled=!1,this.debounceMs=300,this.maxVisible=8,this.noResultsMessage="No Matches",this.emptyMessage="Type to search...",this.#s(300)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}childrenUpdated(){this.#i()}updated(e){super.updated(e),e.has("debounceMs")&&this.#s(this.debounceMs),(e.has("value")||e.has("required")||e.has("requireMatch"))&&this.#o()}formResetCallback(){this.value="",this.#o()}formStateRestoreCallback(e){this.value=e}handleInput=e=>{this.value=e.target.value,this.opened=!0,this.#e=-1,this.#a(this.value)};handleKeydown=e=>{const t=this.#n;if("ArrowDown"===e.key){if(e.preventDefault(),!this.opened)return void(this.opened=!0);this.#e=Math.min(this.#e+1,t.length-1),this.requestUpdate(),this.#r()}else"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.requestUpdate(),this.#r()):"Enter"===e.key?(e.preventDefault(),this.#e>=0&&this.#e<t.length&&this.#l(t[this.#e])):"Escape"===e.key?(e.preventDefault(),this.opened=!1,this.#e=-1):"Tab"===e.key&&(this.opened=!1,this.#e=-1)};handleDocumentClick=e=>{e.composedPath().includes(this)||(this.opened=!1,this.#e=-1)};handleFocus=()=>{this.opened=!0};handleOptionClick=e=>{const t=Number(e.currentTarget.dataset.index);this.#l(this.#n[t])};setOptions(e){return[...this.querySelectorAll("k-option")].forEach(e=>e.remove()),e.forEach(e=>{const t=document.createElement("k-option");"object"==typeof e?(t.setAttribute("value",e.value??e.label),t.textContent=e.label):t.textContent=e,this.appendChild(t)}),this}clear(){return this.value="",this.opened=!1,this.#e=-1,this.#o(),this}#s(e){this.#a=i(e=>{this.dispatchEvent(new CustomEvent("search",{detail:{value:e},bubbles:!0,composed:!0}))},e)}#a=()=>{};#i(){this.#t=[...this.querySelectorAll("k-option")].map(e=>({label:e.label,value:e.value})),this.requestUpdate()}#l(e){this.value=e.label,this.opened=!1,this.#e=-1,this.#o(),this.dispatchEvent(new CustomEvent("select",{detail:{value:e.value,label:e.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#o(){const e=this.#t.find(e=>e.label===this.value);this.internals.setFormValue(e?e.value:this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a value.",this.shadowRoot?.querySelector("input")):this.requireMatch&&this.value&&!e?this.internals.setValidity({customError:!0},"Please select a valid option.",this.shadowRoot?.querySelector("input")):this.internals.setValidity({})}#r(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".option.focused")?.scrollIntoView({block:"nearest"})})}get#d(){const e=(this.value||"").toLowerCase();return e?this.#t.filter(t=>t.label.toLowerCase().includes(e)):this.#t}get#n(){return this.#d.slice(0,this.maxVisible)}render(){const t=this.#n,s=this.#d.length>this.maxVisible;return e`
 			<slot style="display:none"></slot>
 			<input
 				type="text"
@@ -23,7 +23,7 @@ import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponen
 						<div class="more">${this.#d.length-this.maxVisible} more...</div>
 					`:""}
 					${0!==t.length||this.searching?"":e`
-						<div class="no-results">No matches</div>
+						<div class="no-results">${this.value?this.noResultsMessage:this.emptyMessage}</div>
 					`}
 					${this.searching?e`
 						<div class="searching">

package/docs/components/combobox.html

@@ -498,6 +498,7 @@
           <a href="#required">Required</a><br />
           <a href="#requireMatch">Require Match</a><br />
           <a href="#maxVisible">Max Visible</a><br />
+          <a href="#noResultsMessage">No Results Message &amp; Empty Message</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -628,6 +629,21 @@
       </div>
     </div>
 
+    <h3 id="noResultsMessage"><a href="#noResultsMessage" class="no-link">No Results Message &amp; Empty Message</a></h3>
+    <p>Use <code>no-results-message</code> to customize the text shown when the user has typed something but no options match. Use <code>empty-message</code> to customize the text shown when the input is empty and no options are loaded yet (e.g. before a dynamic search has fetched results). They default to <code>"No Matches"</code> and <code>"Type to search..."</code> respectively.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-combobox</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&#x27;Start typing to search...&#x27;</span> <span class="hljs-attr">no-results-message</span>=<span class="hljs-string">&#x27;No users found. Try a different search.&#x27;</span> <span class="hljs-attr">empty-message</span>=<span class="hljs-string">&#x27;Start typing to find a user...&#x27;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-combobox</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-combobox id="noResultsCb" placeholder="Start typing to search..." no-results-message="No users found. Try a different search." empty-message="Start typing to find a user..."></k-combobox>
+        </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>
@@ -722,6 +738,20 @@
           <td><code>8</code></td>
           <td>Maximum number of options visible at once.</td>
         </tr>
+        <tr>
+          <td><code>no-results-message</code></td>
+          <td><code>noResultsMessage</code></td>
+          <td><code>String</code></td>
+          <td><code>'No Matches'</code></td>
+          <td>Text displayed when the user has typed something but no options match.</td>
+        </tr>
+        <tr>
+          <td><code>empty-message</code></td>
+          <td><code>emptyMessage</code></td>
+          <td><code>String</code></td>
+          <td><code>'Type to search...'</code></td>
+          <td>Text displayed when the input is empty and no options are loaded (e.g. before an initial dynamic search fetch).</td>
+        </tr>
       </tbody>
     </table>
 

package/docs/src/components/Combobox.js

@@ -1,4 +1,4 @@
-import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponent.js";import i from"../utils/debounce.js";import"./Option.js";export default class o extends s{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},placeholder:{type:String},opened:{type:Boolean,reflect:!0},searching:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},requireMatch:{type:Boolean,reflect:!0,attribute:"require-match"},disabled:{type:Boolean,reflect:!0},debounceMs:{type:Number,attribute:"debounce-ms"},maxVisible:{type:Number,attribute:"max-visible"}};#e=-1;#t=[];constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.placeholder="",this.opened=!1,this.searching=!1,this.required=!1,this.requireMatch=!1,this.disabled=!1,this.debounceMs=300,this.maxVisible=8,this.#s(300)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}childrenUpdated(){this.#i()}updated(e){super.updated(e),e.has("debounceMs")&&this.#s(this.debounceMs),(e.has("value")||e.has("required")||e.has("requireMatch"))&&this.#o()}formResetCallback(){this.value="",this.#o()}formStateRestoreCallback(e){this.value=e}handleInput=e=>{this.value=e.target.value,this.opened=!0,this.#e=-1,this.#a(this.value)};handleKeydown=e=>{const t=this.#n;if("ArrowDown"===e.key){if(e.preventDefault(),!this.opened)return void(this.opened=!0);this.#e=Math.min(this.#e+1,t.length-1),this.requestUpdate(),this.#r()}else"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.requestUpdate(),this.#r()):"Enter"===e.key?(e.preventDefault(),this.#e>=0&&this.#e<t.length&&this.#l(t[this.#e])):"Escape"===e.key?(e.preventDefault(),this.opened=!1,this.#e=-1):"Tab"===e.key&&(this.opened=!1,this.#e=-1)};handleDocumentClick=e=>{e.composedPath().includes(this)||(this.opened=!1,this.#e=-1)};handleFocus=()=>{this.opened=!0};handleOptionClick=e=>{const t=Number(e.currentTarget.dataset.index);this.#l(this.#n[t])};setOptions(e){return[...this.querySelectorAll("k-option")].forEach(e=>e.remove()),e.forEach(e=>{const t=document.createElement("k-option");"object"==typeof e?(t.setAttribute("value",e.value??e.label),t.textContent=e.label):t.textContent=e,this.appendChild(t)}),this}clear(){return this.value="",this.opened=!1,this.#e=-1,this.#o(),this}#s(e){this.#a=i(e=>{this.dispatchEvent(new CustomEvent("search",{detail:{value:e},bubbles:!0,composed:!0}))},e)}#a=()=>{};#i(){this.#t=[...this.querySelectorAll("k-option")].map(e=>({label:e.label,value:e.value})),this.requestUpdate()}#l(e){this.value=e.label,this.opened=!1,this.#e=-1,this.#o(),this.dispatchEvent(new CustomEvent("select",{detail:{value:e.value,label:e.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#o(){const e=this.#t.find(e=>e.label===this.value);this.internals.setFormValue(e?e.value:this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a value.",this.shadowRoot?.querySelector("input")):this.requireMatch&&this.value&&!e?this.internals.setValidity({customError:!0},"Please select a valid option.",this.shadowRoot?.querySelector("input")):this.internals.setValidity({})}#r(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".option.focused")?.scrollIntoView({block:"nearest"})})}get#d(){const e=(this.value||"").toLowerCase();return e?this.#t.filter(t=>t.label.toLowerCase().includes(e)):this.#t}get#n(){return this.#d.slice(0,this.maxVisible)}render(){const t=this.#n,s=this.#d.length>this.maxVisible;return e`
+import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponent.js";import i from"../utils/debounce.js";import"./Option.js";export default class o extends s{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},placeholder:{type:String},opened:{type:Boolean,reflect:!0},searching:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},requireMatch:{type:Boolean,reflect:!0,attribute:"require-match"},disabled:{type:Boolean,reflect:!0},debounceMs:{type:Number,attribute:"debounce-ms"},maxVisible:{type:Number,attribute:"max-visible"},noResultsMessage:{type:String,attribute:"no-results-message"},emptyMessage:{type:String,attribute:"empty-message"}};#e=-1;#t=[];constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.placeholder="",this.opened=!1,this.searching=!1,this.required=!1,this.requireMatch=!1,this.disabled=!1,this.debounceMs=300,this.maxVisible=8,this.noResultsMessage="No Matches",this.emptyMessage="Type to search...",this.#s(300)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}childrenUpdated(){this.#i()}updated(e){super.updated(e),e.has("debounceMs")&&this.#s(this.debounceMs),(e.has("value")||e.has("required")||e.has("requireMatch"))&&this.#o()}formResetCallback(){this.value="",this.#o()}formStateRestoreCallback(e){this.value=e}handleInput=e=>{this.value=e.target.value,this.opened=!0,this.#e=-1,this.#a(this.value)};handleKeydown=e=>{const t=this.#n;if("ArrowDown"===e.key){if(e.preventDefault(),!this.opened)return void(this.opened=!0);this.#e=Math.min(this.#e+1,t.length-1),this.requestUpdate(),this.#r()}else"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.requestUpdate(),this.#r()):"Enter"===e.key?(e.preventDefault(),this.#e>=0&&this.#e<t.length&&this.#l(t[this.#e])):"Escape"===e.key?(e.preventDefault(),this.opened=!1,this.#e=-1):"Tab"===e.key&&(this.opened=!1,this.#e=-1)};handleDocumentClick=e=>{e.composedPath().includes(this)||(this.opened=!1,this.#e=-1)};handleFocus=()=>{this.opened=!0};handleOptionClick=e=>{const t=Number(e.currentTarget.dataset.index);this.#l(this.#n[t])};setOptions(e){return[...this.querySelectorAll("k-option")].forEach(e=>e.remove()),e.forEach(e=>{const t=document.createElement("k-option");"object"==typeof e?(t.setAttribute("value",e.value??e.label),t.textContent=e.label):t.textContent=e,this.appendChild(t)}),this}clear(){return this.value="",this.opened=!1,this.#e=-1,this.#o(),this}#s(e){this.#a=i(e=>{this.dispatchEvent(new CustomEvent("search",{detail:{value:e},bubbles:!0,composed:!0}))},e)}#a=()=>{};#i(){this.#t=[...this.querySelectorAll("k-option")].map(e=>({label:e.label,value:e.value})),this.requestUpdate()}#l(e){this.value=e.label,this.opened=!1,this.#e=-1,this.#o(),this.dispatchEvent(new CustomEvent("select",{detail:{value:e.value,label:e.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#o(){const e=this.#t.find(e=>e.label===this.value);this.internals.setFormValue(e?e.value:this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a value.",this.shadowRoot?.querySelector("input")):this.requireMatch&&this.value&&!e?this.internals.setValidity({customError:!0},"Please select a valid option.",this.shadowRoot?.querySelector("input")):this.internals.setValidity({})}#r(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".option.focused")?.scrollIntoView({block:"nearest"})})}get#d(){const e=(this.value||"").toLowerCase();return e?this.#t.filter(t=>t.label.toLowerCase().includes(e)):this.#t}get#n(){return this.#d.slice(0,this.maxVisible)}render(){const t=this.#n,s=this.#d.length>this.maxVisible;return e`
 			<slot style="display:none"></slot>
 			<input
 				type="text"
@@ -23,7 +23,7 @@ import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponen
 						<div class="more">${this.#d.length-this.maxVisible} more...</div>
 					`:""}
 					${0!==t.length||this.searching?"":e`
-						<div class="no-results">No matches</div>
+						<div class="no-results">${this.value?this.noResultsMessage:this.emptyMessage}</div>
 					`}
 					${this.searching?e`
 						<div class="searching">

package/docs-src/components/combobox.page.html

@@ -13,6 +13,7 @@
           <a href="#required">Required</a><br />
           <a href="#requireMatch">Require Match</a><br />
           <a href="#maxVisible">Max Visible</a><br />
+          <a href="#noResultsMessage">No Results Message &amp; Empty Message</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -143,6 +144,21 @@
       </div>
     </div>
 
+    <h3 id="noResultsMessage"><a href="#noResultsMessage" class="no-link">No Results Message &amp; Empty Message</a></h3>
+    <p>Use <code>no-results-message</code> to customize the text shown when the user has typed something but no options match. Use <code>empty-message</code> to customize the text shown when the input is empty and no options are loaded yet (e.g. before a dynamic search has fetched results). They default to <code>"No Matches"</code> and <code>"Type to search..."</code> respectively.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-combobox</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&#x27;Start typing to search...&#x27;</span> <span class="hljs-attr">no-results-message</span>=<span class="hljs-string">&#x27;No users found. Try a different search.&#x27;</span> <span class="hljs-attr">empty-message</span>=<span class="hljs-string">&#x27;Start typing to find a user...&#x27;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-combobox</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-combobox id="noResultsCb" placeholder="Start typing to search..." no-results-message="No users found. Try a different search." empty-message="Start typing to find a user..."></k-combobox>
+        </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>
@@ -237,6 +253,20 @@
           <td><code>8</code></td>
           <td>Maximum number of options visible at once.</td>
         </tr>
+        <tr>
+          <td><code>no-results-message</code></td>
+          <td><code>noResultsMessage</code></td>
+          <td><code>String</code></td>
+          <td><code>'No Matches'</code></td>
+          <td>Text displayed when the user has typed something but no options match.</td>
+        </tr>
+        <tr>
+          <td><code>empty-message</code></td>
+          <td><code>emptyMessage</code></td>
+          <td><code>String</code></td>
+          <td><code>'Type to search...'</code></td>
+          <td>Text displayed when the input is empty and no options are loaded (e.g. before an initial dynamic search fetch).</td>
+        </tr>
       </tbody>
     </table>
 

package/package.json

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

package/src/components/Combobox.js

@@ -16,7 +16,9 @@ export default class Combobox extends ShadowComponent {
 		requireMatch: { type: Boolean, reflect: true, attribute: 'require-match' },
 		disabled: { type: Boolean, reflect: true },
 		debounceMs: { type: Number, attribute: 'debounce-ms' },
-		maxVisible: { type: Number, attribute: 'max-visible' }
+		maxVisible: { type: Number, attribute: 'max-visible' },
+		noResultsMessage: { type: String, attribute: 'no-results-message' },
+		emptyMessage: { type: String, attribute: 'empty-message' }
 	};
 
 	#focusedIndex = -1;
@@ -38,6 +40,8 @@ export default class Combobox extends ShadowComponent {
 		this.disabled = false;
 		this.debounceMs = 300;
 		this.maxVisible = 8;
+		this.noResultsMessage = 'No Matches';
+		this.emptyMessage = 'Type to search...';
 		this.#setupDebounce(300);
 	}
 
@@ -255,7 +259,7 @@ export default class Combobox extends ShadowComponent {
 						<div class="more">${this.#filteredOptions.length - this.maxVisible} more...</div>
 					` : ''}
 					${visible.length === 0 && !this.searching ? html`
-						<div class="no-results">No matches</div>
+						<div class="no-results">${this.value ? this.noResultsMessage : this.emptyMessage}</div>
 					` : ''}
 					${this.searching ? html`
 						<div class="searching">

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

@@ -12,8 +12,8 @@ const createCombobox = async (attrs = {}, children = '') => {
 			${attrs.disabled ? 'disabled' : ''}
 			${attrs.name ? `name="${attrs.name}"` : ''}
 			${attrs.debounceMs ? `debounce-ms="${attrs.debounceMs}"` : ''}
-			${attrs.maxVisible ? `max-visible="${attrs.maxVisible}"` : ''}
-		>${children}</k-combobox>
+			${attrs.maxVisible ? `max-visible="${attrs.maxVisible}"` : ''}		${attrs.noResultsMessage ? `no-results-message="${attrs.noResultsMessage}"` : ''}
+		${attrs.emptyMessage ? `empty-message="${attrs.emptyMessage}"` : ''}		>${children}</k-combobox>
 	`;
 	document.body.appendChild(container);
 	const el = container.querySelector('k-combobox');
@@ -119,6 +119,26 @@ export default {
 		pass();
 	},
 
+	'should have default noResultsMessage of No Matches': async ({pass, fail}) => {
+		const { container, el } = await createCombobox();
+		if(el.noResultsMessage !== 'No Matches') {
+			cleanup(container);
+			return fail(`Expected 'No Matches', got '${el.noResultsMessage}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should have default emptyMessage of Type to search...': async ({pass, fail}) => {
+		const { container, el } = await createCombobox();
+		if(el.emptyMessage !== 'Type to search...') {
+			cleanup(container);
+			return fail(`Expected 'Type to search...', got '${el.emptyMessage}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
 	'should not be required by default': async ({pass, fail}) => {
 		const { container, el } = await createCombobox();
 		if(el.required !== false) {
@@ -222,6 +242,26 @@ export default {
 		pass();
 	},
 
+	'should reflect no-results-message attribute': async ({pass, fail}) => {
+		const { container, el } = await createCombobox({ noResultsMessage: 'Nothing found' });
+		if(el.noResultsMessage !== 'Nothing found') {
+			cleanup(container);
+			return fail(`Expected 'Nothing found', got '${el.noResultsMessage}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should reflect empty-message attribute': async ({pass, fail}) => {
+		const { container, el } = await createCombobox({ emptyMessage: 'Start searching' });
+		if(el.emptyMessage !== 'Start searching') {
+			cleanup(container);
+			return fail(`Expected 'Start searching', got '${el.emptyMessage}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
 	/*
 		Children (k-option)
 	*/
@@ -443,6 +483,33 @@ export default {
 		pass();
 	},
 
+	'should show noResultsMessage text when value typed but no matches': async ({pass, fail}) => {
+		const { container, el } = await createCombobox({ noResultsMessage: 'Custom no results' }, fruitOptions);
+		el.value = 'zzz';
+		el.opened = true;
+		await el.updateComplete;
+		const msg = el.shadowRoot.querySelector('.no-results');
+		if(!msg || msg.textContent.trim() !== 'Custom no results') {
+			cleanup(container);
+			return fail(`Expected 'Custom no results', got '${msg?.textContent}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should show emptyMessage text when no value and no options': async ({pass, fail}) => {
+		const { container, el } = await createCombobox({ emptyMessage: 'Custom empty' });
+		el.opened = true;
+		await el.updateComplete;
+		const msg = el.shadowRoot.querySelector('.no-results');
+		if(!msg || msg.textContent.trim() !== 'Custom empty') {
+			cleanup(container);
+			return fail(`Expected 'Custom empty', got '${msg?.textContent}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
 	/*
 		Max Visible
 	*/

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

@@ -917,7 +917,7 @@ export default {
 			fail(`Expected active to be "tab3", got "${tabs.active}"`);
 			return;
 		}
-		if(!tab3.active || content3.active){
+		if(!tab3.active || !content3.active){
 			fail('tab3 should be active (restored from localStorage)');
 			return;
 		}