kempo-ui 0.4.20 → 0.4.21

package/docs/src/components/controls/TcNextPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Next Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.getCurrentPage()===e.getTotalPages()}handleAction(){this.host?.nextPage()}render(){return e`<slot><k-icon name="chevron"></k-icon></slot>`}}customElements.define("kc-tc-next-page",s);

package/docs/src/components/controls/TcPageSelect.js

@@ -0,0 +1,9 @@
+import e from"./Control.js";import{html as t,css as a}from"../../lit-all.min.js";export default class s extends e{static hostEvents=["pageChange","pageSizeChange","pageCountChanged","recordsSet"];handleSelectChange=e=>{this.host?.setPage(parseInt(e.target.value))};render(){const e=this.host,a=e?.getCurrentPage?.()??1,s=e?.getTotalPages?.()??1,l=[];for(let e=1;e<=s;e++)l.push(t`<option value="${e}" ?selected="${e===a}">Page ${e}</option>`);return t`
+      <div class="page-select">
+        <select @change=${this.handleSelectChange} ?disabled=${s<=1}>${l}</select>
+        <label> out of ${s}</label>
+      </div>
+    `}static styles=[e.styles,a`
+      .page-select { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
+      label { padding: 0; margin: 0; }
+    `]}customElements.define("kc-tc-page-select",s);

package/docs/src/components/controls/TcPageSize.js

@@ -0,0 +1,5 @@
+import e from"./Control.js";import{html as t}from"../../lit-all.min.js";export default class a extends e{static hostEvents=["pageChange","pageSizeChange"];handleChange=e=>{this.host?.setPageSize(parseInt(e.target.value))};render(){const e=this.host,a=e?.getPageSize?.()??10,s=e?.pageSizeOptions??[10,25,50,100,500];return t`
+      <select @change=${this.handleChange}>
+        ${s.map(e=>t`<option value="${e}" ?selected="${e===a}">${e} per page</option>`)}
+      </select>
+    `}}customElements.define("kc-tc-page-size",a);

package/docs/src/components/controls/TcPrevPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Previous Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||1===e.getCurrentPage()}handleAction(){this.host?.prevPage()}render(){return e`<slot><k-icon name="chevron" direction="left"></k-icon></slot>`}}customElements.define("kc-tc-prev-page",s);

package/docs/src/components/controls/TcSearch.js

@@ -0,0 +1 @@
+import e from"./Control.js";import{html as r}from"../../lit-all.min.js";import t from"../../utils/debounce.js";export default class s extends e{static properties={...e.properties,searchTerm:{type:String,state:!0}};constructor(){super(),this.searchTerm="",this.debouncedSearch=t(()=>this.performSearch(),200)}handleInput=e=>{this.searchTerm=e.target.value,this.debouncedSearch()};performSearch(){const e=this.host;e&&(!this.searchTerm||this.searchTerm.length<3?e.showAllRecords():e.search(this.searchTerm))}render(){return r`<input type="search" placeholder="Search" .value=${this.searchTerm||""} @input=${this.handleInput} />`}}customElements.define("kc-tc-search",s);

package/docs/src/components/controls/TcShowAll.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Show All Records")}handleShowAll(){this.handleAction()}handleAction(){this.host?.showAllRecords()}render(){return o`<slot><k-icon name="show"></k-icon></slot>`}}customElements.define("kc-tc-show-all",l);

package/docs/src/components/controls/TextBackgroundColor.js

@@ -0,0 +1,26 @@
+import o from"./Control.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class t extends o{static requires=["setTextBackgroundColor"];static hostMode="visual";static properties={...o.properties,colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};constructor(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1}get opened(){return this.shadowRoot?.querySelector("k-dropdown")?.opened??!1}set opened(o){const e=this.shadowRoot?.querySelector("k-dropdown");e&&(e.opened=o)}handleRemove=()=>{this.host?.removeTextBackgroundColor?.(),this.shadowRoot.querySelector("k-dropdown")?.close()};handleSwatch=o=>{const e=o.target.style.backgroundColor;if(!e)return;const r=e.match(/\d+/g),t=r?"#"+r.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.host?.setTextBackgroundColor?.(t),this.shadowRoot.querySelector("k-dropdown")?.close()};handlePicker=o=>{this.host?.setTextBackgroundColor?.(o.target.value),this.shadowRoot.querySelector("k-dropdown")?.close()};render(){const o=this.colors.split(",").map(o=>o.trim()).filter(Boolean);return e`
+      <k-dropdown>
+        <button slot="trigger" class="trigger" title="Highlight Color">
+          <k-icon name="format_color_fill"></k-icon>
+        </button>
+        <div class="content">
+          ${this.disableRemove?"":e`<button class="remove" @click=${this.handleRemove}>Remove Color</button>`}
+          <div class="swatches">
+            ${o.map(o=>e`<button class="swatch" style="background-color:${o}" @click=${this.handleSwatch}></button>`)}
+          </div>
+          ${this.disablePicker?"":e`
+            <div class="picker"><label>Custom:</label><input type="color" @input=${this.handlePicker} /></div>
+          `}
+        </div>
+      </k-dropdown>
+    `}static styles=[o.styles,r`
+      :host { border: 1px solid var(--c_border); border-radius: var(--radius); margin: var(--spacer_q); }
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .content { padding: 8px; min-width: 200px; }
+      .remove { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--c_border); background: transparent; cursor: pointer; border-radius: var(--radius); }
+      .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+      .swatch { width: 32px; height: 32px; border: 1px solid var(--c_border); cursor: pointer; border-radius: 4px; }
+      .swatch:hover { box-shadow: 0 0 4px rgba(0,122,204,0.3); }
+      .picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+      .picker input { flex: 1; height: 32px; border: 1px solid var(--c_border); border-radius: 4px; cursor: pointer; }
+    `]}customElements.define("kc-text-background-color",t);

package/docs/src/components/controls/TextColor.js

@@ -0,0 +1,26 @@
+import e from"./Control.js";import{html as o,css as t}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class r extends e{static requires=["setTextColor"];static hostMode="visual";static properties={...e.properties,colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};constructor(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1}get opened(){return this.shadowRoot?.querySelector("k-dropdown")?.opened??!1}set opened(e){const o=this.shadowRoot?.querySelector("k-dropdown");o&&(o.opened=e)}handleRemove=()=>{this.host?.removeTextColor?.(),this.shadowRoot.querySelector("k-dropdown")?.close()};handleSwatch=e=>{const o=e.target.style.backgroundColor;if(!o)return;const t=o.match(/\d+/g),r=t?"#"+t.map(e=>parseInt(e).toString(16).padStart(2,"0")).join(""):o;this.host?.setTextColor?.(r),this.shadowRoot.querySelector("k-dropdown")?.close()};handlePicker=e=>{this.host?.setTextColor?.(e.target.value),this.shadowRoot.querySelector("k-dropdown")?.close()};render(){const e=this.colors.split(",").map(e=>e.trim()).filter(Boolean);return o`
+      <k-dropdown>
+        <button slot="trigger" class="trigger" title="Text Color">
+          <k-icon name="format_color_text"></k-icon>
+        </button>
+        <div class="content">
+          ${this.disableRemove?"":o`<button class="remove" @click=${this.handleRemove}>Remove Color</button>`}
+          <div class="swatches">
+            ${e.map(e=>o`<button class="swatch" style="background-color:${e}" @click=${this.handleSwatch}></button>`)}
+          </div>
+          ${this.disablePicker?"":o`
+            <div class="picker"><label>Custom:</label><input type="color" @input=${this.handlePicker} /></div>
+          `}
+        </div>
+      </k-dropdown>
+    `}static styles=[e.styles,t`
+      :host { border: 1px solid var(--c_border); border-radius: var(--radius); margin: var(--spacer_q); }
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .content { padding: 8px; min-width: 200px; }
+      .remove { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--c_border); background: transparent; cursor: pointer; border-radius: var(--radius); }
+      .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+      .swatch { width: 32px; height: 32px; border: 1px solid var(--c_border); cursor: pointer; border-radius: 4px; }
+      .swatch:hover { box-shadow: 0 0 4px rgba(0,122,204,0.3); }
+      .picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+      .picker input { flex: 1; height: 32px; border: 1px solid var(--c_border); border-radius: 4px; cursor: pointer; }
+    `]}customElements.define("kc-text-color",r);

package/docs/src/components/controls/Underline.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static requires=["underline"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Underline")}handleAction(){this.host?.underline?.()}render(){return e`<slot><k-icon name="format_underlined"></k-icon></slot>`}}customElements.define("kc-underline",n);

package/docs/src/components/controls/Undo.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["undo"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Undo")}handleAction(){this.host?.undo?.()}render(){return o`<slot><k-icon name="undo"></k-icon></slot>`}}customElements.define("kc-undo",e);

package/docs/src/components/controls/WordCount.js

@@ -0,0 +1,4 @@
+import t from"./Control.js";import{html as e,css as s}from"../../lit-all.min.js";export default class n extends t{static hostEvents=["change","ready"];static properties={...t.properties,count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),setTimeout(()=>this.updateCount(),0)}willUpdate(t){super.willUpdate?.(t),this.updateCount()}updateCount(){const t=this.host;if(!t||"function"!=typeof t.getValue)return;const e=t.getValue()||"",s=e.includes("<")?(new DOMParser).parseFromString(e,"text/html").body.innerText||"":e;this.count=s.trim().split(/\s+/).filter(t=>t.length>0).length}render(){return e`<span class="word-count"><slot name="label">Words:</slot> ${this.count}</span>`}static styles=[t.styles,s`
+      :host { align-items: center; padding: 0 0.5rem; font-size: 0.875rem; color: var(--tc_muted, #666); }
+      .word-count { display: flex; align-items: center; gap: 0.25rem; }
+    `]}customElements.define("kc-word-count",n);

package/docs/src/components/controls/WordWrap.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static requires=["toggleWordWrap"];static hostMode="code";static hostEvents=["word-wrap-changed"];static properties={...t.properties,active:{type:Boolean,reflect:!0}};constructor(){super(),this.active=!0}connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Toggle Word Wrap"),this.host&&(this.active=!1!==this.host.wordWrap)}willUpdate(t){super.willUpdate?.(t),this.host&&(this.active=!1!==this.host.wordWrap)}handleAction(){this.host?.toggleWordWrap?.()}render(){return e`<slot><k-icon name="wrap_text"></k-icon></slot>`}}customElements.define("kc-word-wrap",s);

package/docs-src/components/code-editor.page.html

@@ -9,7 +9,8 @@
         <a href="#controlsExample">Built-in Controls</a><br />
         <a href="#customControls">Custom Controls</a><br />
         <a href="#height">Setting Height</a><br />
-        <a href="#disabled">Disabled / Read-only</a><br />
+        <a href="#formIntegration">Form Integration</a><br />
+        <a href="#disabled">Disabled</a><br />
         <a href="#jsApi">JavaScript API</a><br />
 
         <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -66,7 +67,7 @@ console.log(sorted);"></k-code-editor>
     <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">k-code-editor</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&#x27;html&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-format-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-format-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-copy-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-copy-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-editor-theme</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-editor-theme</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-fullscreen</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-fullscreen</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&#x27;html&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-copy-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-copy-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-editor-theme</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-editor-theme</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-fullscreen</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-fullscreen</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -75,10 +76,10 @@ console.log(sorted);"></k-code-editor>
   <h1>Hello World</h1>
   <p>This is a paragraph.</p>
 </div>">
-            <k-cec-format-code slot="toolbar-top-left"></k-cec-format-code>
-            <k-cec-copy-code slot="toolbar-top-left"></k-cec-copy-code>
-            <k-cec-editor-theme slot="toolbar-top-right"></k-cec-editor-theme>
-            <k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
+            <kc-format-code slot="toolbar-top-left"></kc-format-code>
+            <kc-copy-code slot="toolbar-top-left"></kc-copy-code>
+            <kc-editor-theme slot="toolbar-top-right"></kc-editor-theme>
+            <kc-fullscreen slot="toolbar-top-right"></kc-fullscreen>
           </k-code-editor>
         </k-card>
       </div>
@@ -101,12 +102,38 @@ console.log(x);"></k-code-editor>
       </div>
     </div>
 
-    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled / Read-only</a></h3>
-    <p>The <code>disabled</code> attribute makes the editor non-interactive (Monaco is set to <code>readOnly</code>), mutes the toolbar, fades the host, and excludes the field from form submission. The <code>readonly</code> attribute lets the user select and copy text but not edit; the value is still submitted with the form.</p>
+    <h3 id="formIntegration"><a href="#formIntegration" class="no-link">Form Integration</a></h3>
+    <p>The code editor supports form association. Add a <code>name</code> attribute so the value is submitted with the form, and use <code>required</code> to enforce validation:</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">k-code-editor</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&#x27;codeForm&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&#x27;code&#x27;</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&#x27;javascript&#x27;</span> <span class="hljs-attr">required</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;b r&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&#x27;submit&#x27;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;btn mt&#x27;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&#x27;formOutput&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;codeForm&#x27;</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;submit&#x27;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {<br>    e.<span class="hljs-title function_">preventDefault</span>();<br>    <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormData</span>(e.<span class="hljs-property">target</span>);<br>    <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;formOutput&#x27;</span>).<span class="hljs-property">textContent</span> = data.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;code&#x27;</span>);<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">
+          <form id="codeForm">
+            <k-code-editor name="code" language="javascript" required class="b r" style="height: 200px" value="console.log('hello');"></k-code-editor>
+            <button type="submit" class="btn mt">Submit</button>
+          </form>
+          <pre id="formOutput" class="mt b r p" style="min-height: 2rem;"></pre>
+          <script>
+            document.getElementById('codeForm').addEventListener('submit', e => {
+              e.preventDefault();
+              const data = new FormData(e.target);
+              document.getElementById('formOutput').textContent = data.get('code');
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>The <code>disabled</code> attribute makes the editor non-interactive (Monaco is set to <code>readOnly</code>), mutes the toolbar, fades the host, and excludes the field from form submission.</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">k-code-editor</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -114,18 +141,9 @@ console.log(x);"></k-code-editor>
           <k-code-editor
             disabled
             language="javascript"
-            class="b r mb"
-            style="height: 160px"
-            value="// This editor is disabled — toolbar is muted, content is locked.
-const x = 42;
-console.log(x);"
-          ></k-code-editor>
-          <k-code-editor
-            readonly
-            language="javascript"
             class="b r"
             style="height: 160px"
-            value="// This editor is read-only — select and copy, just not edit.
+            value="// This editor is disabled — toolbar is muted, content is locked.
 const x = 42;
 console.log(x);"
           ></k-code-editor>
@@ -161,7 +179,6 @@ console.log(x);"
         <tr><td><code>monacoSrc</code></td><td><code>monaco-src</code></td><td>String</td><td><code>''</code></td><td>Custom Monaco CDN base URL</td></tr>
         <tr><td><code>editorTheme</code></td><td><code>editor-theme</code></td><td>String</td><td><code>'auto'</code></td><td>Theme override: <code>'auto'</code> (matches site theme), <code>'light'</code>, or <code>'dark'</code></td></tr>
         <tr><td><code>disabled</code></td><td><code>disabled</code></td><td>Boolean</td><td><code>false</code></td><td>Editor is non-interactive (Monaco set to <code>readOnly</code>), toolbar is muted, host fades, and the field is excluded from form submission</td></tr>
-        <tr><td><code>readonly</code></td><td><code>readonly</code></td><td>Boolean</td><td><code>false</code></td><td>User can select and copy text but not edit (Monaco set to <code>readOnly</code>); value still submitted with the form</td></tr>
         <tr><td><code>required</code></td><td><code>required</code></td><td>Boolean</td><td><code>false</code></td><td>When <code>true</code> and the editor is empty, the element reports a <code>valueMissing</code> validity error</td></tr>
       </tbody>
     </table>
@@ -233,38 +250,42 @@ console.log(x);"
         <tr><th>Element</th><th>Description</th></tr>
       </thead>
       <tbody>
-        <tr><td><code>&lt;k-cec-format-code&gt;</code></td><td>Formats the code using Monaco's built-in formatter</td></tr>
-        <tr><td><code>&lt;k-cec-copy-code&gt;</code></td><td>Copies the editor content to the clipboard</td></tr>
-        <tr><td><code>&lt;k-cec-undo&gt;</code></td><td>Undoes the last edit</td></tr>
-        <tr><td><code>&lt;k-cec-redo&gt;</code></td><td>Redoes the last undone edit</td></tr>
-        <tr><td><code>&lt;k-cec-word-wrap&gt;</code></td><td>Toggles word wrapping on/off</td></tr>
-        <tr><td><code>&lt;k-cec-minimap&gt;</code></td><td>Toggles the minimap on/off</td></tr>
-        <tr><td><code>&lt;k-cec-find-replace&gt;</code></td><td>Opens Monaco's Find &amp; Replace dialog</td></tr>
-        <tr><td><code>&lt;k-cec-font-size&gt;</code></td><td>Increase/decrease font size buttons</td></tr>
-        <tr><td><code>&lt;k-cec-fold-all&gt;</code></td><td>Toggles fold/unfold all code regions</td></tr>
-        <tr><td><code>&lt;k-cec-fullscreen&gt;</code></td><td>Toggles the editor in and out of fullscreen — visible in all modes</td></tr>
-        <tr><td><code>&lt;k-cec-language&gt;</code></td><td>Select dropdown to change the syntax language</td></tr>
-        <tr><td><code>&lt;k-cec-editor-theme&gt;</code></td><td>Select dropdown to switch between auto, light, and dark editor themes</td></tr>
-        <tr><td><code>&lt;k-cec-group&gt;</code></td><td>Groups controls visually with shared borders</td></tr>
-        <tr><td><code>&lt;k-cec-spacer&gt;</code></td><td>Flexible spacer to push controls apart</td></tr>
+        <tr><td><code>&lt;kc-format-code&gt;</code></td><td>Formats the code using Monaco's built-in formatter</td></tr>
+        <tr><td><code>&lt;kc-copy-code&gt;</code></td><td>Copies the editor content to the clipboard</td></tr>
+        <tr><td><code>&lt;kc-undo&gt;</code></td><td>Undoes the last edit</td></tr>
+        <tr><td><code>&lt;kc-redo&gt;</code></td><td>Redoes the last undone edit</td></tr>
+        <tr><td><code>&lt;kc-word-wrap&gt;</code></td><td>Toggles word wrapping on/off</td></tr>
+        <tr><td><code>&lt;kc-minimap&gt;</code></td><td>Toggles the minimap on/off</td></tr>
+        <tr><td><code>&lt;kc-find-replace&gt;</code></td><td>Opens Monaco's Find &amp; Replace dialog</td></tr>
+        <tr><td><code>&lt;kc-font-size&gt;</code></td><td>Container for increase/decrease font size buttons</td></tr>
+        <tr><td><code>&lt;kc-font-size-decrease&gt;</code></td><td>Decreases the editor font size</td></tr>
+        <tr><td><code>&lt;kc-font-size-increase&gt;</code></td><td>Increases the editor font size</td></tr>
+        <tr><td><code>&lt;kc-fold-all&gt;</code></td><td>Toggles fold/unfold all code regions</td></tr>
+        <tr><td><code>&lt;kc-fullscreen&gt;</code></td><td>Toggles the editor in and out of fullscreen — visible in all modes</td></tr>
+        <tr><td><code>&lt;kc-language&gt;</code></td><td>Select dropdown to change the syntax language</td></tr>
+        <tr><td><code>&lt;kc-editor-theme&gt;</code></td><td>Select dropdown to switch between auto, light, and dark editor themes</td></tr>
+        <tr><td><code>&lt;k-control-group&gt;</code></td><td>Groups controls visually with shared borders</td></tr>
+        <tr><td><code>&lt;kc-spacer&gt;</code></td><td>Flexible spacer to push controls apart</td></tr>
       </tbody>
     </table>
 
     <script type="module" src="{{pathToRoot}}src/components/CodeEditor.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/FormatCode.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/CopyCode.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/EditorTheme.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/Undo.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/Redo.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/WordWrap.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/Minimap.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/FindReplace.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/FontSize.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/FoldAll.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/LanguageSelect.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/Fullscreen.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/ControlGroup.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/codeEditorControls/ControlSpacer.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FormatCode.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/CopyCode.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/EditorTheme.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Undo.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Redo.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/WordWrap.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Minimap.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FindReplace.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FontSize.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FontSizeDecrease.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FontSizeIncrease.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FoldAll.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Language.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Fullscreen.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/ControlGroup.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Spacer.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
   </content>