kempo-ui 0.4.20 → 0.4.21

package/dist/components/controls/PgFirst.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="First Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","First Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page<=1}handleAction(){const t=this.host;t&&(t.page=1)}render(){return e`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`}}customElements.define("kc-pg-first",i);

package/dist/components/controls/PgGotoPage.js

@@ -0,0 +1,15 @@
+import t from"./Control.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Combobox.js";export default class s extends t{static hostEvents=["page-change"];handleInput=t=>{const e=this.host;if(e&&t.target.value){const o=parseInt(t.target.value,10);!isNaN(o)&&o>0&&(e.page=o)}};handleBlur=t=>{const e=this.host;e&&(t.target.value=String(e.page))};render(){const t=this.host,o=t?.page??1,s=t?.totalPages??1;return e`
+      <k-combobox
+        .value=${String(o)}
+        @input=${this.handleInput}
+        @blur=${this.handleBlur}
+        placeholder="page"
+        no-results-message="Invalid Page"
+      >
+        ${Array.from({length:s},(t,o)=>e`
+          <k-option value=${o+1}>${o+1}</k-option>
+        `)}
+      </k-combobox>
+    `}static styles=[t.styles,o`
+      k-combobox { width: 5rem; }
+    `]}customElements.define("kc-pg-goto-page",s);

package/dist/components/controls/PgItemsPerPage.js

@@ -0,0 +1,12 @@
+import e from"./Control.js";import{html as t,css as s}from"../../lit-all.min.js";export default class a extends e{static hostEvents=["page-change"];handleChange=e=>{const t=this.host;t&&(t.itemsPerPage=parseInt(e.target.value,10))};render(){const e=this.host,s=e?.itemsPerPage??10,a=e?.pageSizes??[5,10,25,50,100];return t`
+      <label>
+        <slot>Items per page:</slot>
+        <select @change=${this.handleChange}>
+          ${a.map(e=>t`<option value=${e} ?selected=${e===s}>${e}</option>`)}
+        </select>
+      </label>
+    `}static styles=[e.styles,s`
+      :host { align-items: center; }
+      label { display: inline-flex; align-items: center; gap: var(--spacer_q, 0.25rem); padding: 0; white-space: nowrap; }
+      select { min-height: 2.5rem; box-sizing: border-box; }
+    `]}customElements.define("kc-pg-items-per-page",a);

package/dist/components/controls/PgLast.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=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Last Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Last Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page>=e.totalPages}handleAction(){const t=this.host;t&&(t.page=t.totalPages)}render(){return e`<slot><k-icon name="chevron-line"></k-icon></slot>`}}customElements.define("kc-pg-last",s);

package/dist/components/controls/PgNext.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=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Next Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Next Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page>=e.totalPages}handleAction(){this.host?.nextPage()}render(){return e`<slot><k-icon name="chevron"></k-icon></slot>`}}customElements.define("kc-pg-next",s);

package/dist/components/controls/PgPageInfo.js

@@ -0,0 +1,3 @@
+import s from"./Control.js";import{html as e,css as t}from"../../lit-all.min.js";export default class a extends s{static hostEvents=["page-change"];render(){const s=this.host;return e`<span class="info">Page ${s?.page??1} of ${s?.totalPages??1}</span>`}static styles=[s.styles,t`
+      .info { padding: 0 var(--spacer_q, 0.25rem); white-space: nowrap; }
+    `]}customElements.define("kc-pg-page-info",a);

package/dist/components/controls/PgPrev.js

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

package/dist/components/controls/Quote.js

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

package/dist/components/controls/Redo.js

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

package/dist/components/{htmlEditorControls/ControlSpacer.js → controls/Spacer.js}

@@ -1,6 +1,6 @@
 import e from"../ShadowComponent.js";import{html as t,css as s}from"../../lit-all.min.js";export default class l extends e{static styles=s`
-		:host {
-			display: inline-flex;
-			flex: 1;
-		}
-	`;render(){return t``}}customElements.define("k-hec-spacer",l);
+    :host {
+      display: inline-flex;
+      flex: 1;
+    }
+  `;render(){return t``}}customElements.define("kc-spacer",l);

package/dist/components/controls/Strikethrough.js

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

package/dist/components/controls/TcDeleteRecord.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class o extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Delete Record")}get record(){const e=this.closest(".record");if(e){const t=e.dataset.index;if(void 0!==t)return this.host?.records?.[t]}return null}delete(){this.handleAction()}handleAction(){const e=this.record;e&&this.host?.deleteRecord(e)}render(){return t`<slot><k-icon name="delete"></k-icon></slot>`}}customElements.define("kc-tc-delete-record",o);

package/dist/components/controls/TcDeleteSelected.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class l extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Delete Selected")}handleAction(){this.host?.deleteSelected()}render(){return t`<slot><k-icon name="delete_sweep"></k-icon></slot>`}}customElements.define("kc-tc-delete-selected",l);

package/dist/components/controls/TcEdit.js

@@ -0,0 +1,12 @@
+import t from"./Control.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static hostEvents=["editingChange"];static properties={...t.properties,isEditing:{type:Boolean,state:!0}};constructor(){super(),this.isEditing=!1}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}connectedCallback(){super.connectedCallback();const t=this.host;t&&t.addEventListener("editingChange",t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)})}handleEdit=()=>{const t=this.record;t&&this.host?.editRecord(t)};handleSave=()=>{const t=this.record;t&&this.host?.saveEditedRecord(t)};handleCancel=()=>{const t=this.record;t&&this.host?.cancelEditedRecord(t)};render(){return this.isEditing?e`
+      <button class="edit-btn save" @click=${this.handleSave}><k-icon name="check"></k-icon></button>
+      <button class="edit-btn cancel" @click=${this.handleCancel}><k-icon name="close"></k-icon></button>
+    `:e`
+      <button class="edit-btn" @click=${this.handleEdit}><k-icon name="edit"></k-icon></button>
+    `}static styles=[t.styles,i`
+      :host { align-items: baseline; gap: 0.25rem; }
+      .edit-btn { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); }
+      .edit-btn:hover { background: oklch(from var(--c_bg__inv) l c h / 0.1); }
+      .save { color: var(--c_success, green); }
+      .cancel { color: var(--c_danger, red); }
+    `]}customElements.define("kc-tc-edit",n);

package/dist/components/controls/TcExportCsv.js

@@ -0,0 +1,3 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Export CSV")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}getCSV(){const t=this.host;if(!t)return"";const e=[];t.fields.forEach(({name:t,calculator:o})=>{o||e.push(t)});let o=e.join(",")+"\n";const r=this.record;return r?o+=e.map(t=>r[t]||"").join(",")+"\n":t.records.forEach(t=>{o+=e.map(e=>t[e]||"").join(",")+"\n"}),o}export(){this.handleAction()}handleAction(){const t=this.getCSV(),e=new Blob([t],{type:"text/csv"}),o=URL.createObjectURL(e),r=document.createElement("a");r.href=o,r.download="data.csv",r.click(),URL.revokeObjectURL(o)}render(){return e`<slot><k-icon name="export-file"></k-icon> Export CSV</slot>`}static styles=[t.styles,o`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `]}customElements.define("kc-tc-export-csv",r);

package/dist/components/controls/TcExportJson.js

@@ -0,0 +1,3 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Export JSON")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}export(){this.handleAction()}handleAction(){const t=this.record,e=t?JSON.stringify(t):JSON.stringify(this.host?.records||[]),o=new Blob([e],{type:"application/json"}),r=URL.createObjectURL(o),s=document.createElement("a");s.href=r,s.download="data.json",s.click(),URL.revokeObjectURL(r)}render(){return e`<slot><k-icon name="export-file"></k-icon> Export JSON</slot>`}static styles=[t.styles,o`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `]}customElements.define("kc-tc-export-json",r);

package/dist/components/controls/TcFieldSortHide.js

@@ -0,0 +1,21 @@
+import e from"./ButtonControl.js";import{html as t,render as i}from"../../lit-all.min.js";import"../Icon.js";import l from"../Dialog.js";export default class o extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Show / Hide / Order Fields")}openDialog(){this.handleAction()}handleAction(){import("../Sortable.js");const e=this.host;if(!e)return;const o=document.createElement("div");i(t`
+      <div class="m">
+        <k-sortable id="sorting" @sort=${t=>{const i=Array.from(t.target.querySelectorAll("k-sortable-item")).map(e=>e.getAttribute("data-field"));e.reorderFields(i)}}>
+          ${e.fields.map(i=>t`
+            <k-sortable-item data-field="${i.name}">
+              <label class="field pb0">
+                <input
+                  class="field-visibility"
+                  data-field="${i.name}"
+                  type="checkbox"
+                  .checked="${!i.hidden}"
+                  @change="${t=>e.setFieldHiddenState(i.name,!t.target.checked)}"
+                  style="height: 1.25rem; width: 1.25rem"
+                />
+                ${i.label}
+              </label>
+            </k-sortable-item>
+          `)}
+        </k-sortable>
+      </div>
+    `,o),l.create(o,{title:"Show / Hide / Order Fields",width:"400px",cancelText:"Close"})}render(){return t`<slot><k-icon name="table-visibility"></k-icon></slot>`}}customElements.define("kc-tc-field-sort-hide",o);

package/dist/components/controls/TcFilters.js

@@ -0,0 +1,34 @@
+import t from"./ButtonControl.js";import{html as e,render as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";const n={equals:"equals","not-equals":"does not equal",contains:"contains","not-contains":"does not contain","greater-than":"is greater than","greater-than-or-equal":"is greater than or equal to","less-than":"is less than","less-than-or-equal":"is less than or equal to"};export default class o extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Filters")}handleFilter(){this.handleAction()}handleAction(){this.openDialog()}openDialog=()=>{const t=this.host;if(!t)return;const o=document.createElement("div");l(e`
+      <div class="p">
+        ${0===t.filters.length?e`<p>No Current Filters.</p>`:e`
+          <h5>Current Filters</h5>
+          <ul id="currentFilters">
+            ${t.filters.map(({field:l,condition:i,value:o})=>e`
+              <li data-field="${l}" data-condition="${i}" data-value="${o}">
+                ${t.getFieldLabel(l)} ${n[i]} "${o}"
+                <button class="remove-filter no-btn pq" @click=${()=>{t.removeFilter(l,i,o),s.close(),this.openDialog()}}>
+                  <k-icon name="close"></k-icon>
+                </button>
+              </li>
+            `)}
+          </ul>
+        `}
+        <hr />
+        <h5>Add A Filter</h5>
+        <form id="addFilter" @submit=${e=>{e.preventDefault();const l=e.target;t.addFilter(l.filterField.value,l.filterCondition.value,l.filterValue.value),s.close(),this.openDialog()}}>
+          <select id="filterField" class="mb">
+            ${t.fields.map(({name:t,label:l})=>e`<option value="${t}">${l}</option>`)}
+          </select>
+          <select id="filterCondition" class="mb">
+            ${Object.entries(n).map(([t,l])=>e`
+              <option value="${t}" ?selected="${"contains"===t}">${l}</option>
+            `)}
+          </select>
+          <input id="filterValue" type="text" class="mb" />
+          <button type="submit" class="btn primary mb mr">Add Filter</button>
+          ${0===t.filters.length?"":e`
+            <button type="button" class="btn danger mb mr" @click=${()=>{t.removeAllFilters(),s.close()}}>Clear All Filters</button>
+          `}
+        </form>
+      </div>
+    `,o);const s=i.create(o,{width:"600px",title:"Filters"})};render(){return e`<slot><k-icon name="filter"></k-icon></slot>`}}customElements.define("kc-tc-filters",o);

package/dist/components/controls/TcFirstPage.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="First Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||1===e.getCurrentPage()}handleAction(){this.host?.firstPage()}render(){return e`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`}}customElements.define("kc-tc-first-page",s);

package/dist/components/controls/TcHiddenCount.js

@@ -0,0 +1 @@
+import t from"./Control.js";import{html as e}from"../../lit-all.min.js";export default class d extends t{static hostEvents=["recordHidden","recordShown"];static properties={...t.properties,hiddenCount:{type:Number,state:!0}};constructor(){super(),this.hiddenCount=0}connectedCallback(){super.connectedCallback(),this.updateCount()}willUpdate(t){super.willUpdate?.(t),this.updateCount()}updateHiddenCount(){this.updateCount()}handleHiddenChange(){this.updateCount()}updateCount(){this.hiddenCount=this.host?.getHiddenRecords?.()?.length||0}render(){return e`<div><span>${this.hiddenCount}</span> Hidden Records</div>`}}customElements.define("kc-tc-hidden-count",d);

package/dist/components/controls/TcHide.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Hide Record")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}handleHide(){this.handleAction()}handleAction(){const t=this.record;t&&this.host?.hideRecord(t)}render(){return e`<slot><k-icon name="hide"></k-icon></slot>`}}customElements.define("kc-tc-hide",o);

package/dist/components/controls/TcLastPage.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="Last Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.getCurrentPage()===e.getTotalPages()}handleAction(){this.host?.lastPage()}render(){return e`<slot><k-icon name="chevron-line"></k-icon></slot>`}}customElements.define("kc-tc-last-page",s);

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/components/code-editor.html

@@ -505,7 +505,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>
@@ -562,7 +563,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">
@@ -571,10 +572,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>
@@ -597,12 +598,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">
@@ -610,18 +637,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>
@@ -657,7 +675,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>
@@ -729,38 +746,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="../src/components/CodeEditor.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FormatCode.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/CopyCode.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/EditorTheme.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Undo.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Redo.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/WordWrap.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Minimap.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FindReplace.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FontSize.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FoldAll.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/LanguageSelect.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Fullscreen.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/ControlGroup.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/ControlSpacer.js"></script>
+    <script type="module" src="../src/components/controls/FormatCode.js"></script>
+    <script type="module" src="../src/components/controls/CopyCode.js"></script>
+    <script type="module" src="../src/components/controls/EditorTheme.js"></script>
+    <script type="module" src="../src/components/controls/Undo.js"></script>
+    <script type="module" src="../src/components/controls/Redo.js"></script>
+    <script type="module" src="../src/components/controls/WordWrap.js"></script>
+    <script type="module" src="../src/components/controls/Minimap.js"></script>
+    <script type="module" src="../src/components/controls/FindReplace.js"></script>
+    <script type="module" src="../src/components/controls/FontSize.js"></script>
+    <script type="module" src="../src/components/controls/FontSizeDecrease.js"></script>
+    <script type="module" src="../src/components/controls/FontSizeIncrease.js"></script>
+    <script type="module" src="../src/components/controls/FoldAll.js"></script>
+    <script type="module" src="../src/components/controls/Language.js"></script>
+    <script type="module" src="../src/components/controls/Fullscreen.js"></script>
+    <script type="module" src="../src/components/ControlGroup.js"></script>
+    <script type="module" src="../src/components/controls/Spacer.js"></script>
     <script type="module" src="../src/components/Accordion.js"></script>
     <script type="module" src="../src/components/Card.js"></script>