kempo-ui 0.4.20 → 0.4.21

package/docs/src/components/markdownEditorControls/Strikethrough.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as r}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{constructor(){super(),this.label="Strikethrough"}command(){this.wrapSelection("~~","~~","strikethrough")}render(){return r`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_strikethrough"></k-icon>
-      </button>
-    `}}customElements.define("k-md-strikethrough",e);

package/docs/src/components/markdownEditorControls/Table.js

@@ -1,80 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";import{bound as o}from"../../utils/number.js";export default class n extends t{constructor(){super(),this.label="Table"}command(){}handleDropdownOpened=()=>{requestAnimationFrame(()=>{const t=this.shadowRoot?.querySelector(".tbl-cols");t&&(t.value="3",t.select());const e=this.shadowRoot?.querySelector(".tbl-rows");e&&(e.value="2")})};handleFormKeydown=t=>{"Enter"===t.key?(t.preventDefault(),this.#t()):"Escape"===t.key&&this.shadowRoot?.querySelector("k-dropdown")?.close()};handleInsertClick=()=>this.#t();#t(){const t=this.#e(this.shadowRoot?.querySelector(".tbl-cols")?.value,1,20),e=this.#e(this.shadowRoot?.querySelector(".tbl-rows")?.value,1,50);if(!t||!e)return;const r=this.editor;r&&(r.replaceSelection(this.#r(t,e),{selectInserted:!1}),this.shadowRoot?.querySelector("k-dropdown")?.close())}#e(t,e,r){const n=parseInt(t,10);return Number.isFinite(n)?o(n,e,r):0}#r(t,e){const r=Array.from({length:t},(t,e)=>` Header ${e+1} `).join("|"),o=Array.from({length:t},()=>" --- ").join("|"),n=Array.from({length:t},()=>"   ").join("|");return`\n${[`|${r}|`,`|${o}|`,...Array.from({length:e},()=>`|${n}|`)].join("\n")}\n`}render(){return e`
-      <k-dropdown @opened=${this.handleDropdownOpened}>
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <k-icon name="table"></k-icon>
-        </button>
-        <div class="tbl-form" @keydown=${this.handleFormKeydown}>
-          <input
-            class="tbl-cols"
-            type="number"
-            min="1"
-            max="20"
-            inputmode="numeric"
-            aria-label="Columns"
-            value="3"
-          />
-          <span class="tbl-x" aria-hidden="true">×</span>
-          <input
-            class="tbl-rows"
-            type="number"
-            min="1"
-            max="50"
-            inputmode="numeric"
-            aria-label="Rows"
-            value="2"
-          />
-          <button type="button" class="primary" @click=${this.handleInsertClick}>Insert</button>
-        </div>
-      </k-dropdown>
-    `}static styles=[t.styles,r`
-      .tbl-form {
-        display: flex;
-        align-items: center;
-        gap: 0.4rem;
-        padding: 0.5rem;
-      }
-      .tbl-form input {
-        width: 2.5rem;
-        padding: 0.35rem 0.4rem;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        font: inherit;
-        background: var(--c_bg);
-        color: var(--tc);
-        text-align: center;
-        /* Hide the up/down spinner buttons that take up extra width. */
-        -moz-appearance: textfield;
-      }
-      .tbl-form input::-webkit-inner-spin-button,
-      .tbl-form input::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-      .tbl-form input:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-      .tbl-x {
-        color: var(--tc_muted);
-        font-weight: bold;
-      }
-      .tbl-form button.primary {
-        padding: 0.4rem 0.8rem;
-        border: 1px solid var(--c_primary);
-        border-radius: var(--radius);
-        background: var(--c_primary);
-        color: white;
-        cursor: pointer;
-        font: inherit;
-      }
-      .tbl-form button.primary:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-    `]}customElements.define("k-md-table",n);

package/docs/src/components/paginationControls/FirstPage.js

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

package/docs/src/components/paginationControls/GotoPage.js

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

package/docs/src/components/paginationControls/ItemsPerPage.js

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

package/docs/src/components/paginationControls/LastPage.js

@@ -1 +0,0 @@
-import t from"./PaginationButtonControl.js";import{html as a}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Last Page"),this.hasAttribute("title")||this.setAttribute("title","Last Page")}willUpdate(t){super.willUpdate(t);const a=this.pagination;this.disabled=!a||a.page>=a.totalPages}handleAction(){this.pagination&&(this.pagination.page=this.pagination.totalPages)}render(){return a`<k-icon name="chevron-line"></k-icon>`}}customElements.define("k-pg-last",e);

package/docs/src/components/paginationControls/NextPage.js

@@ -1 +0,0 @@
-import t from"./PaginationButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Next Page"),this.hasAttribute("title")||this.setAttribute("title","Next Page")}willUpdate(t){super.willUpdate(t);const e=this.pagination;this.disabled=!e||e.page>=e.totalPages}handleAction(){this.pagination?.nextPage()}render(){return e`<k-icon name="chevron"></k-icon>`}}customElements.define("k-pg-next",i);

package/docs/src/components/paginationControls/PageCount.js

@@ -1 +0,0 @@
-import t from"./PaginationControl.js";import{html as n}from"../../lit-all.min.js";export default class e extends t{render(){return n`<span>${this.pagination?.totalPages??1}</span>`}}customElements.define("k-pg-count",e);

package/docs/src/components/paginationControls/PageInfo.js

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

package/docs/src/components/paginationControls/PaginationButtonControl.js

@@ -1,20 +0,0 @@
-import t from"../Button.js";import{css as e}from"../../lit-all.min.js";export default class n extends t{connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleActionClick);const t=this.pagination;t&&(this.boundPagination=t,this.pageChangeHandler=()=>this.requestUpdate(),t.addEventListener("page-change",this.pageChangeHandler),this.attrObserver=new MutationObserver(()=>this.requestUpdate()),this.attrObserver.observe(t,{attributes:!0,attributeFilter:["total-items","items-per-page","page-sizes"]}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleActionClick),this.boundPagination&&this.pageChangeHandler&&this.boundPagination.removeEventListener("page-change",this.pageChangeHandler),this.attrObserver?.disconnect(),this.boundPagination=null,this.pageChangeHandler=null,this.attrObserver=null}get pagination(){return this.closest("k-pagination")||(this.getRootNode()instanceof ShadowRoot?this.getRootNode().host:null)}handleAction(){}handleActionClick=()=>this.handleAction();static styles=[t.styles,e`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-				background: transparent;
-				border: 1px solid var(--c_border);
-				padding: var(--spacer_h);
-				color: inherit;
-      }
-			:host(:not([disabled]):hover) {
-				background: oklch(from var(--c_bg__inv) l c h / 0.2);
-				color: inherit;
-			}
-			:host(:not([disabled]):focus),
-			:host(:not([disabled]):focus-visible) {
-				box-shadow: var(--focus_shadow);
-				z-index: 1;
-			}
-    `]}

package/docs/src/components/paginationControls/PaginationControl.js

@@ -1,5 +0,0 @@
-import e from"../ShadowComponent.js";import{css as t}from"../../lit-all.min.js";export default class a extends e{connectedCallback(){super.connectedCallback();const e=this.pagination;e&&(this.boundPagination=e,this.pageChangeHandler=()=>this.requestUpdate(),e.addEventListener("page-change",this.pageChangeHandler),this.attrObserver=new MutationObserver(()=>this.requestUpdate()),this.attrObserver.observe(e,{attributes:!0,attributeFilter:["total-items","items-per-page","page-sizes"]}))}disconnectedCallback(){super.disconnectedCallback(),this.boundPagination&&this.pageChangeHandler&&this.boundPagination.removeEventListener("page-change",this.pageChangeHandler),this.attrObserver?.disconnect(),this.boundPagination=null,this.pageChangeHandler=null,this.attrObserver=null}get pagination(){return this.closest("k-pagination")||(this.getRootNode()instanceof ShadowRoot?this.getRootNode().host:null)}static styles=t`
-    :host {
-      display: inline-flex;
-    }
-  `}

package/docs/src/components/paginationControls/PrevPage.js

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

package/docs/src/components/tableControls/DeleteRecord.js

@@ -1,7 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class o extends e{delete=()=>{this.record&&this.table.deleteRecord(this.record)};render(){return t`
-			<button class="no-btn icon-btn" @click="${this.delete}">
-				<slot>
-					<k-icon name="delete"></k-icon>
-				</slot>
-			</button>
-		`}}customElements.define("k-tc-delete-record",o);

package/docs/src/components/tableControls/DeleteSelected.js

@@ -1,7 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class l extends e{deleteSelected=()=>{this.table.deleteSelected()};render(){return t`
-			<button class="no-btn icon-btn" title="Delete Selected" @click="${this.deleteSelected}">
-				<slot>
-					<k-icon name="delete_sweep"></k-icon>
-				</slot>
-			</button>
-		`}}customElements.define("k-tc-delete-selected",l);

package/docs/src/components/tableControls/Edit.js

@@ -1,18 +0,0 @@
-import t from"./TableControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static properties={isEditing:{type:Boolean}};static styles=[t.styles,i`
-			:host {
-				display: inline-flex;
-				width: max-content;
-				align-items: baseline;
-			}
-		`];constructor(){super({maxWidth:80})}connectedCallback(){super.connectedCallback(),this.onTableEvent("editingChange",this.handleEditingChange)}handleEditingChange=t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)};handleEdit=()=>{this.record&&this.table.editRecord(this.record)};handleSave=()=>{this.record&&this.table.saveEditedRecord(this.record)};handleCancel=()=>{this.record&&this.table.cancelEditedRecord(this.record)};render(){return this.isEditing?e`
-			<button class="no-btn icon-btn bg-success" @click="${this.handleSave}">
-				<k-icon name="check"></k-icon>
-			</button>
-			<button class="no-btn icon-btn bg-danger" @click="${this.handleCancel}">
-				<k-icon name="close"></k-icon>
-			</button>
-		`:e`
-			<button class="no-btn icon-btn" @click="${this.handleEdit}">
-				<k-icon name="edit"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-edit",n);

package/docs/src/components/tableControls/ExportCSV.js

@@ -1,8 +0,0 @@
-import t from"./TableControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.maxWidth=136}getCSV(){const t=this.table;if(!t)return"";let e="";const o=[];if(t.fields.forEach(({name:t,calculator:e})=>{e||o.push(t)}),e+=o.join(",")+"\n",this.record){const t=o.map(t=>this.record[t]||"");e+=t.join(",")+"\n"}else t.records.forEach(t=>{const r=o.map(e=>t[e]||"");e+=r.join(",")+"\n"});return e}export=()=>{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`
-			<button class="no-btn ph" @click="${this.export}">
-				<slot>
-					<k-icon name="export-file"></k-icon>
-					Export CSV
-				</slot>
-			</button>
-		`}}customElements.define("k-tc-export-csv",o);

package/docs/src/components/tableControls/ExportJson.js

@@ -1,8 +0,0 @@
-import t from"./TableControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.maxWidth=136}export=()=>{const t=this.record;if(t){const e=JSON.stringify(t),o=new Blob([e],{type:"application/json"}),n=URL.createObjectURL(o),r=document.createElement("a");r.href=n,r.download="data.json",r.click(),URL.revokeObjectURL(n)}else{const t=JSON.stringify(this.table.records),e=new Blob([t],{type:"application/json"}),o=URL.createObjectURL(e),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}};render(){return e`
-			<button class="no-btn ph" @click="${this.export}">
-				<slot>
-					<k-icon name="export-file"></k-icon>
-					Export JSON
-				</slot>
-			</button>
-		`}}customElements.define("k-tc-export-json",o);

package/docs/src/components/tableControls/FieldSortHide.js

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

package/docs/src/components/tableControls/Filters.js

@@ -1,46 +0,0 @@
-import t from"./TableControl.js";import{html as e,render as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";export default class n extends t{constructor(){super({maxWidth:40})}handleFilter=()=>{this.openDialog()};openDialog=()=>{const t={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"},n=document.createElement("div");l(e`
-			<div class="p">
-				${0===this.table.filters.length?e`
-					<p>No Current Filters.</p>
-				`:e`
-					<h5>Current Filters</h5>
-					<ul id="currentFilters">
-						${this.table.filters.map(({field:l,condition:i,value:n})=>e`
-							<li
-								data-field="${l}"
-								data-condition="${i}"
-								data-value="${n}"
-							>
-								${this.table.getFieldLabel(l)} ${t[i]} "${n}"
-								<button class="remove-filter no-btn pq" @click="${t=>{this.table.removeFilter(l,i,n),o.close(),this.openDialog()}}">
-									<k-icon name="close"></k-icon>
-								</button>
-							</li>
-						`)}
-					</ul>
-				`}
-				<hr />
-				<h5>Add A Filter</h5>
-				<form id="addFilter" @submit="${t=>{t.preventDefault();const e=t.target;this.table.addFilter(e.filterField.value,e.filterCondition.value,e.filterValue.value),o.close(),this.openDialog()}}">
-					<select id="filterField" class="mb">
-						${this.table.fields.map(({name:t,label:l})=>e`
-							<option value="${t}">${l}</option>
-						`)}
-					</select>
-					<select id="filterCondition" class="mb">
-						${Object.entries(t).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===this.table.filters.length?"":e`
-						<button type="button" class="btn danger mb mr" @click="${()=>{this.table.removeAllFilters(),o.close()}}">Clear All Filters</button>
-					`}
-				</form>
-			</div>
-		`,n);const o=i.create(n,{width:"600px",title:"Filters"})};render(){return e`
-			<button class="no-btn icon-btn" @click="${this.handleFilter}">
-				<k-icon name="filter"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-filters",n);

package/docs/src/components/tableControls/FirstPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.firstPage()};get isDisabled(){return!this.table||1===this.table.getCurrentPage()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron-line" direction="left"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-first-page",a);

package/docs/src/components/tableControls/HiddenCount.js

@@ -1,3 +0,0 @@
-import e from"./TableControl.js";import{html as d}from"../../lit-all.min.js";export default class n extends e{static properties={hiddenCount:{type:Number}};connectedCallback(){super.connectedCallback(),this.updateHiddenCount(),this.onTableEvent("recordHidden recordShown",this.handleHiddenChange)}handleHiddenChange=()=>{this.updateHiddenCount()};updateHiddenCount=()=>{this.hiddenCount=this.table?.getHiddenRecords().length||0};render(){return d`
-			<div class="pyq pxh"><span>${this.hiddenCount}</span>&nbsp;Hidden Records</div>
-		`}}customElements.define("k-tc-hidden-count",n);

package/docs/src/components/tableControls/Hide.js

@@ -1,5 +0,0 @@
-import t from"./TableControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super({maxWidth:40})}handleHide=()=>{this.record&&this.table.hideRecord(this.record)};render(){return e`
-			<button class="no-btn icon-btn" @click="${this.handleHide}">
-				<k-icon name="hide"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-hide",o);

package/docs/src/components/tableControls/LastPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.lastPage()};get isDisabled(){return!this.table||this.table.getCurrentPage()===this.table.getTotalPages()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron-line"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-last-page",a);

package/docs/src/components/tableControls/NextPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.nextPage()};get isDisabled(){return!this.table||this.table.getCurrentPage()===this.table.getTotalPages()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-next-page",a);

package/docs/src/components/tableControls/PageSelect.js

@@ -1,22 +0,0 @@
-import e from"./TableControl.js";import{html as t,css as a}from"../../lit-all.min.js";export default class l extends e{static properties={...e.properties};constructor(){super({maxWidth:null})}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange pageSizeChange pageCountChanged recordsSet",this.handleTableUpdate)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handleTableUpdate),this.table.removeEventListener("pageSizeChange",this.handleTableUpdate),this.table.removeEventListener("pageCountChanged",this.handleTableUpdate),this.table.removeEventListener("recordsSet",this.handleTableUpdate))}handleTableUpdate=()=>{this.requestUpdate()};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};get currentPage(){return this.table?this.table.getCurrentPage():1}get totalPages(){return this.table?this.table.getTotalPages():1}render(){if(!this.table)return t`<div>No table found</div>`;const e=[];for(let a=1;a<=this.totalPages;a++)e.push(t`<option value="${a}" ?selected="${a===this.currentPage}">Page ${a}</option>`);return t`
-			<div class="page-select">
-				<select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages<=1}">
-					${e}
-				</select>
-				<label> out of ${this.totalPages}</label>
-			</div>
-		`}static styles=a`
-		${e.styles}
-		
-		.page-select {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-			white-space: nowrap;
-		}
-		
-		label {
-			padding: 0;
-			margin: 0;
-		}
-	`}customElements.define("k-tc-page-select",l);

package/docs/src/components/tableControls/PageSize.js

@@ -1,5 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";export default class a extends e{constructor(){super({maxWidth:null}),this.pageChangeHandler=()=>this.requestUpdate(),this.pageSizeChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange",this.pageChangeHandler),this.onTableEvent("pageSizeChange",this.pageSizeChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.pageChangeHandler),this.table.removeEventListener("pageSizeChange",this.pageSizeChangeHandler))}handleChange=e=>{this.table&&this.table.setPageSize(parseInt(e.target.value))};get currentPageSize(){return this.table?this.table.getPageSize():10}get pageSizeOptions(){return this.table?this.table.pageSizeOptions:[10,25,50,100,500]}render(){return t`
-			<select class="no-btn ph b r" @change="${this.handleChange}">
-				${this.pageSizeOptions.map(e=>t`<option value="${e}" ?selected="${e===this.currentPageSize}">${e} per page</option>`)}
-			</select>
-		`}}customElements.define("k-tc-page-size",a);

package/docs/src/components/tableControls/PrevPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.prevPage()};get isDisabled(){return!this.table||1===this.table.getCurrentPage()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron" direction="left"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-prev-page",a);

package/docs/src/components/tableControls/Search.js

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

package/docs/src/components/tableControls/ShowAll.js

@@ -1,5 +0,0 @@
-import t from"./TableControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{constructor(){super({maxWidth:40})}handleShowAll=()=>{this.table&&this.table.showAllRecords()};render(){return o`
-			<button class="no-btn icon-btn" @click="${this.handleShowAll}">
-				<k-icon name="show"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-show-all",l);

package/docs/src/components/tableControls/TableControl.js

@@ -1,16 +0,0 @@
-import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={maxWidth:{type:Number,reflect:!0,attribute:"max-width"}};constructor({maxWidth:t=40}={}){super(),this.maxWidth=t}updated(t){super.updated(t),t.has("maxWidth")&&(this.maxWidth?this.style.setProperty("--max-width",`${this.maxWidth}px`):this.style.removeProperty("--max-width"))}firstUpdated(){this.maxWidth?this.style.setProperty("--max-width",`${this.maxWidth}px`):this.style.removeProperty("--max-width")}get table(){return this.getRootNode()instanceof ShadowRoot?this.getRootNode().host.closest("k-table"):this.closest("k-table")}get record(){if(this.getRootNode()instanceof ShadowRoot){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.table.records[e]}}return!1}async onTableEvent(t,e){if(await customElements.whenDefined("k-table"),this.table){t.split(" ").forEach(t=>{this.table.addEventListener(t,e)}),this.requestUpdate()}}static styles=i`
-		:host {
-			display: inline-flex;
-		}
-		
-		.icon-btn {
-			display: inline-flex !important;
-			align-items: center;
-			justify-content: center;
-			width: 40px;
-			height: 40px;
-		}
-		.icon-btn:disabled {
-			opacity: 0.6;
-		}
-	`}customElements.define("k-table-control",s);

package/src/components/codeEditorControls/CodeEditorControl.js

@@ -1,134 +0,0 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { css } from '../../lit-all.min.js';
-
-export default class CodeEditorControl extends ShadowComponent {
-	static properties = {
-		btnClass: { type: String, attribute: 'btn-class' },
-		groupBtnClass: { type: String, attribute: 'group-btn-class' },
-		groupLastBtnClass: { type: String, attribute: 'group-last-btn-class' },
-		hidden: { type: Boolean, reflect: true }
-	};
-
-	/*
-		Constructor
-	*/
-	constructor() {
-		super();
-		this.btnClass = 'b r mq ph';
-		this.groupBtnClass = 'br ph';
-		this.groupLastBtnClass = 'ph';
-		this.hidden = false;
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		this.updateModeVisibility();
-		const editor = this.editor;
-		if(editor?.tagName === 'K-HTML-EDITOR'){
-			this.modeHandler = () => this.updateModeVisibility();
-			editor.addEventListener('mode-changed', this.modeHandler);
-		}
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if(this.modeHandler){
-			this.editor?.removeEventListener('mode-changed', this.modeHandler);
-			this.modeHandler = null;
-		}
-	}
-
-	updated(changed) {
-		super.updated(changed);
-		if(changed.has('hidden')){
-			this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
-		}
-	}
-
-	/*
-		Mode Visibility
-	*/
-	updateModeVisibility() {
-		const editor = this.editor;
-		if(editor?.tagName === 'K-HTML-EDITOR'){
-			const shouldHide = editor.mode !== 'code';
-			if(this.hidden !== shouldHide){
-				this.hidden = shouldHide;
-				this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
-			}
-		}
-	}
-
-	/*
-		Getters for Editor Integration
-	*/
-	get editor() {
-		const isEditor = el => el?.tagName === 'K-CODE-EDITOR' || el?.tagName === 'K-HTML-EDITOR';
-		let current = this.getRootNode();
-		while(current instanceof ShadowRoot){
-			const host = current.host;
-			if(isEditor(host)) return host;
-			current = host.getRootNode();
-		}
-		let el = this.parentElement;
-		while(el){
-			if(isEditor(el)) return el;
-			el = el.parentElement;
-		}
-		return null;
-	}
-
-	/*
-		Getters for Group Detection
-	*/
-	get isInGroup() {
-		const parent = this.parentElement;
-		return parent && parent.tagName === 'K-CEC-GROUP';
-	}
-
-	get isLastInGroup() {
-		if(!this.isInGroup) return false;
-		const siblings = Array.from(this.parentElement.children).filter(
-			child => child.tagName.startsWith('K-CEC-') && child.tagName !== 'K-CEC-SPACER'
-		);
-		return siblings[siblings.length - 1] === this;
-	}
-
-	/*
-		Getters for Button Classes
-	*/
-	get buttonClasses() {
-		const baseClass = 'no-btn icon-btn';
-		let styleClass;
-		if(this.isInGroup){
-			styleClass = this.isLastInGroup ? this.groupLastBtnClass : this.groupBtnClass;
-		} else {
-			styleClass = this.btnClass;
-		}
-		return `${baseClass} ${styleClass}`.trim();
-	}
-
-	/*
-		Styles
-	*/
-	static styles = css`
-		:host {
-			display: inline-flex;
-			align-items: center;
-		}
-		:host([hidden]) {
-			display: none !important;
-		}
-		button {
-			cursor: pointer;
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			min-width: 2rem;
-			min-height: 2rem;
-		}
-	`;
-}

package/src/components/codeEditorControls/ControlSpacer.js

@@ -1,23 +0,0 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class ControlSpacer extends ShadowComponent {
-	/*
-		Styles
-	*/
-	static styles = css`
-		:host {
-			display: inline-flex;
-			flex: 1;
-		}
-	`;
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html``;
-	}
-}
-
-customElements.define('k-cec-spacer', ControlSpacer);