kempo-ui 0.4.16 → 0.4.17

package/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [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/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/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/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/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.17",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

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