kempo-ui 0.4.16 → 0.4.18

package/CHANGELOG.md

@@ -6,6 +6,24 @@ 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`
+  - New `--min-height` CSS variable to prevent editor from shrinking below a minimum size
+  - New `--max-height` CSS variable to add vertical scrollbar when content exceeds max height
+  - Works alongside existing `--height` variable for flexible sizing
+  - Documentation updated with sizing example showing all three variables used together
+
 ## [0.4.16] - 2026-05-03
 ### Added
 - **Markdown Editor component**: Debounced change event during input

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/dist/components/MarkdownEditor.js

@@ -62,6 +62,8 @@ import{html as t,css as e,nothing as i}from"../lit-all.min.js";import s from"./S
     k-resize {
       width: 100%;
       height: var(--height, 14rem);
+      min-height: var(--min-height);
+      max-height: var(--max-height);
       background: var(--c_bg);
     }
     .frame {
@@ -100,6 +102,7 @@ import{html as t,css as e,nothing as i}from"../lit-all.min.js";import s from"./S
       overflow-y: auto;
       scrollbar-width: thin;
       resize: none;
+      max-height: none !important;
     }
     .preview-empty {
       color: var(--tc_muted);

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/components/markdown-editor.html

@@ -502,6 +502,7 @@
         <a href="#disabled">Disabled / Read-only</a><br />
         <a href="#tagFiltering">Tag Filtering</a><br />
         <a href="#customControls">Custom Controls</a><br />
+        <a href="#sizingExample">Sizing Example</a><br />
 
         <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
         <a href="#constructor">Constructor</a><br />
@@ -768,6 +769,25 @@
 customElements.<span class="hljs-title function_">define</span>(<span class="hljs-string">'k-md-hr'</span>, <span class="hljs-title class_">MarkdownHr</span>);</code></pre>
     </k-card>
 
+    <h3 id="sizingExample"><a href="#sizingExample" class="no-link">Sizing Example</a></h3>
+    <p>Use the three sizing CSS variables together to control the editor dimensions. Set <code>--height</code> for the default size, <code>--min-height</code> to prevent it from shrinking, and <code>--max-height</code> to add a vertical scrollbar when content grows.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="CSS">
+          <pre><code class="hljs css"><span class="hljs-selector-tag">k-markdown-editor</span> {
+  <span class="hljs-attr">--height</span>: <span class="hljs-number">20rem</span>;
+  <span class="hljs-attr">--min-height</span>: <span class="hljs-number">10rem</span>;
+  <span class="hljs-attr">--max-height</span>: <span class="hljs-number">40rem</span>;
+}</code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-markdown-editor placeholder="Type to expand, but max out at 40rem..." style="--height: 20rem; --min-height: 10rem; --max-height: 40rem;"></k-markdown-editor>
+        </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>
@@ -864,10 +884,10 @@ customElements.<span class="hljs-title function_">define</span>(<span class="hlj
     <table class="b">
       <thead><tr><th>Variable</th><th>Default</th><th>Description</th></tr></thead>
       <tbody>
-        <tr><td><code>--min_height</code></td><td><code>6rem</code></td><td>Minimum height of the textarea / preview area</td></tr>
-        <tr><td><code>--max_height</code></td><td><code>24rem</code></td><td>Maximum height before the editor scrolls internally</td></tr>
+        <tr><td><code>--height</code></td><td><code>14rem</code></td><td>Height of the editor container</td></tr>
+        <tr><td><code>--min-height</code></td><td>none</td><td>Minimum height of the editor</td></tr>
+        <tr><td><code>--max-height</code></td><td>none</td><td>Maximum height before the editor scrolls internally</td></tr>
         <tr><td><code>--padding</code></td><td><code>0.5rem 0.75rem</code></td><td>Padding inside the textarea / preview</td></tr>
-        <tr><td><code>--border</code></td><td><code>1px solid var(--c_border)</code></td><td>Border around the editor</td></tr>
       </tbody>
     </table>
     <p class="mt">The component also uses kempo-css's global <code>--c_border</code>, <code>--c_bg</code>, <code>--tc</code>, <code>--tc_muted</code>, <code>--radius</code>, <code>--animation_ms</code>, and <code>--focus_shadow</code>; override those globally for site-wide tuning.</p>
@@ -877,7 +897,7 @@ customElements.<span class="hljs-title function_">define</span>(<span class="hlj
     <p>Fires on every keystroke (or programmatic change via the selection-manipulation API). <code>detail.value</code> is the current markdown.</p>
 
     <h5><code>change</code></h5>
-    <p>Fires when the textarea blurs. <code>detail.value</code> is the markdown at the moment focus left.</p>
+    <p>Fires with a 300ms debounce whenever text is typed, and also on blur. <code>detail.value</code> is the current markdown. Useful for enabling/disabling a "Save" button during long typing sessions without waiting for blur.</p>
 
     <h5><code>mode-change</code></h5>
     <p>Fires when the user switches between Write and Preview tabs. <code>detail.mode</code> is the new mode.</p>

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/MarkdownEditor.js

@@ -62,6 +62,8 @@ import{html as t,css as e,nothing as i}from"../lit-all.min.js";import s from"./S
     k-resize {
       width: 100%;
       height: var(--height, 14rem);
+      min-height: var(--min-height);
+      max-height: var(--max-height);
       background: var(--c_bg);
     }
     .frame {
@@ -100,6 +102,7 @@ import{html as t,css as e,nothing as i}from"../lit-all.min.js";import s from"./S
       overflow-y: auto;
       scrollbar-width: thin;
       resize: none;
+      max-height: none !important;
     }
     .preview-empty {
       color: var(--tc_muted);

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/docs-src/components/markdown-editor.page.html

@@ -14,6 +14,7 @@
         <a href="#disabled">Disabled / Read-only</a><br />
         <a href="#tagFiltering">Tag Filtering</a><br />
         <a href="#customControls">Custom Controls</a><br />
+        <a href="#sizingExample">Sizing Example</a><br />
 
         <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
         <a href="#constructor">Constructor</a><br />
@@ -280,6 +281,25 @@
 customElements.<span class="hljs-title function_">define</span>(<span class="hljs-string">'k-md-hr'</span>, <span class="hljs-title class_">MarkdownHr</span>);</code></pre>
     </k-card>
 
+    <h3 id="sizingExample"><a href="#sizingExample" class="no-link">Sizing Example</a></h3>
+    <p>Use the three sizing CSS variables together to control the editor dimensions. Set <code>--height</code> for the default size, <code>--min-height</code> to prevent it from shrinking, and <code>--max-height</code> to add a vertical scrollbar when content grows.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="CSS">
+          <pre><code class="hljs css"><span class="hljs-selector-tag">k-markdown-editor</span> {
+  <span class="hljs-attr">--height</span>: <span class="hljs-number">20rem</span>;
+  <span class="hljs-attr">--min-height</span>: <span class="hljs-number">10rem</span>;
+  <span class="hljs-attr">--max-height</span>: <span class="hljs-number">40rem</span>;
+}</code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-markdown-editor placeholder="Type to expand, but max out at 40rem..." style="--height: 20rem; --min-height: 10rem; --max-height: 40rem;"></k-markdown-editor>
+        </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>
@@ -376,10 +396,10 @@ customElements.<span class="hljs-title function_">define</span>(<span class="hlj
     <table class="b">
       <thead><tr><th>Variable</th><th>Default</th><th>Description</th></tr></thead>
       <tbody>
-        <tr><td><code>--min_height</code></td><td><code>6rem</code></td><td>Minimum height of the textarea / preview area</td></tr>
-        <tr><td><code>--max_height</code></td><td><code>24rem</code></td><td>Maximum height before the editor scrolls internally</td></tr>
+        <tr><td><code>--height</code></td><td><code>14rem</code></td><td>Height of the editor container</td></tr>
+        <tr><td><code>--min-height</code></td><td>none</td><td>Minimum height of the editor</td></tr>
+        <tr><td><code>--max-height</code></td><td>none</td><td>Maximum height before the editor scrolls internally</td></tr>
         <tr><td><code>--padding</code></td><td><code>0.5rem 0.75rem</code></td><td>Padding inside the textarea / preview</td></tr>
-        <tr><td><code>--border</code></td><td><code>1px solid var(--c_border)</code></td><td>Border around the editor</td></tr>
       </tbody>
     </table>
     <p class="mt">The component also uses kempo-css's global <code>--c_border</code>, <code>--c_bg</code>, <code>--tc</code>, <code>--tc_muted</code>, <code>--radius</code>, <code>--animation_ms</code>, and <code>--focus_shadow</code>; override those globally for site-wide tuning.</p>
@@ -389,7 +409,7 @@ customElements.<span class="hljs-title function_">define</span>(<span class="hlj
     <p>Fires on every keystroke (or programmatic change via the selection-manipulation API). <code>detail.value</code> is the current markdown.</p>
 
     <h5><code>change</code></h5>
-    <p>Fires when the textarea blurs. <code>detail.value</code> is the markdown at the moment focus left.</p>
+    <p>Fires with a 300ms debounce whenever text is typed, and also on blur. <code>detail.value</code> is the current markdown. Useful for enabling/disabling a "Save" button during long typing sessions without waiting for blur.</p>
 
     <h5><code>mode-change</code></h5>
     <p>Fires when the user switches between Write and Preview tabs. <code>detail.mode</code> is the new mode.</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.16",
+  "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/src/components/MarkdownEditor.js

@@ -470,6 +470,8 @@ export default class MarkdownEditor extends ShadowComponent {
     k-resize {
       width: 100%;
       height: var(--height, 14rem);
+      min-height: var(--min-height);
+      max-height: var(--max-height);
       background: var(--c_bg);
     }
     .frame {
@@ -508,6 +510,7 @@ export default class MarkdownEditor extends ShadowComponent {
       overflow-y: auto;
       scrollbar-width: thin;
       resize: none;
+      max-height: none !important;
     }
     .preview-empty {
       color: var(--tc_muted);

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;
 		}