kempo-ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,18 @@
+import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Edit extends TableControl{static properties={isEditing:{type:Boolean}};static styles=[TableControl.styles,css`
+			: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?html`
+			<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>
+		`:html`
+			<button class="no-btn icon-btn" @click="${this.handleEdit}">
+				<k-icon name="edit"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-edit",Edit);

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

@@ -0,0 +1,8 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ExportCSV extends TableControl{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 html`
+			<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",ExportCSV);

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

@@ -0,0 +1,8 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ExportJson extends TableControl{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 html`
+			<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",ExportJson);

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

@@ -0,0 +1,26 @@
+import TableControl from"./TableControl.js";import{html,render}from"../../lit-all.min.js";import"../Icon.js";import Dialog from"../Dialog.js";export default class FieldSortHide extends TableControl{constructor(){super({maxWidth:40})}handleClick=()=>{this.openDialog()};openDialog=()=>{import("../Sortable.js");const e=document.createElement("div");render(html`
+			<h3 class="m0 ph" slot="title">Show / Hide Fields</h3>
+			<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=>html`
+						<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),Dialog.create(e,{width:"400px",cancelText:"Close"})};render(){return html`
+			<button class="no-btn icon-btn" @click="${this.handleClick}">
+				<k-icon name="table-visibility"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-field-sort-hide",FieldSortHide);

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

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

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

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class FirstPage extends TableControl{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 html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="first"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-first-page",FirstPage);

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

@@ -0,0 +1,3 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";export default class HiddenCount extends TableControl{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 html`
+			<div class="pyq pxh"><span>${this.hiddenCount}</span>&nbsp;Hidden Records</div>
+		`}}customElements.define("k-tc-hidden-count",HiddenCount);

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

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

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

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class LastPage extends TableControl{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 html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="last"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-last-page",LastPage);

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

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class NextPage extends TableControl{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 html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="chevron-right"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-next-page",NextPage);

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

@@ -0,0 +1,22 @@
+import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";export default class PageSelect extends TableControl{static properties={...TableControl.properties,currentPage:{type:Number,state:!0},totalPages:{type:Number,state:!0}};constructor(){super({maxWidth:null}),this.currentPage=1,this.totalPages=1}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange",this.handlePageChange),this.onTableEvent("pageSizeChange",this.handlePageSizeChange),this.onTableEvent("pageCountChanged",this.handlePageCountChange)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handlePageChange),this.table.removeEventListener("pageSizeChange",this.handlePageSizeChange),this.table.removeEventListener("pageCountChanged",this.handlePageCountChange))}handlePageChange=()=>{this.table&&(this.currentPage=this.table.getCurrentPage())};handlePageSizeChange=()=>{this.table&&(this.currentPage=this.table.getCurrentPage(),this.totalPages=this.table.getTotalPages())};handlePageCountChange=()=>{this.table&&(this.totalPages=this.table.getTotalPages())};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};render(){if(!this.table)return html`<div>No table found</div>`;const e=[];for(let t=1;t<=this.totalPages;t++)e.push(html`<option value="${t}" ?selected="${t===this.currentPage}">Page ${t}</option>`);return html`
+			<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=css`
+		${TableControl.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",PageSelect);

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

@@ -0,0 +1,5 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";export default class PageSize extends TableControl{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 html`
+			<select class="no-btn ph b r" @change="${this.handleChange}">
+				${this.pageSizeOptions.map(e=>html`<option value="${e}" ?selected="${e===this.currentPageSize}">${e} per page</option>`)}
+			</select>
+		`}}customElements.define("k-tc-page-size",PageSize);

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

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class PrevPage extends TableControl{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 html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="chevron-left"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-prev-page",PrevPage);

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

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import debounce from"../../utils/debounce.js";export default class Search extends TableControl{static properties={searchTerm:{type:String}};constructor(){super({maxWidth:200}),this.debouncedSearch=debounce(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 html`
+			<input
+				type="search"
+				placeholder="Search"
+				class="px pyh"
+				.value="${this.searchTerm||""}"
+				@input="${this.handleInput}"
+			/>
+		`}}customElements.define("k-tc-search",Search);

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

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

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

@@ -0,0 +1,16 @@
+import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class TableControl extends ShadowComponent{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=css`
+		: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",TableControl);

package/docs/src/utils/toTitleCase.js

@@ -0,0 +1 @@
+const toTitleCase=e=>e.replace(/([A-Z])/g," $1").split(/[\s_-]+/).filter(e=>e.length>0).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(" ");export default toTitleCase;

package/docs/utils/drag.html

@@ -29,6 +29,7 @@
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#options">Options</a><br />
         <a href="#callbacks">Callbacks</a><br />
+        <a href="#returnValue">Return Value</a><br />
         <a href="#examples">Examples</a><br />
       </div>
     </details>
@@ -37,16 +38,8 @@
     <p>The <code>drag</code> utility function enables drag interactions on DOM elements. It handles both mouse and touch events, providing callbacks for drag start, move, and end events.</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Import and use the drag function to make elements draggable:</p>
-    <pre><code class="hljs javascript">import drag from './utils/drag.js';
-
-const element = document.querySelector('.draggable');
-drag({
-  element,
-  callback: (diff) => {
-    console.log('Dragged:', diff.x, diff.y);
-  }
-});</code></pre>
+    <p>Import and use the drag function to make elements draggable. The function returns a cleanup function that should be called to remove all event listeners:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> drag <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/drag.js'</span>;<br /><br /><span class="hljs-keyword">const</span> element = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.draggable'</span>);<br /><span class="hljs-keyword">const</span> cleanup = <span class="hljs-title function_">drag</span>({<br />  element,<br />  <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =&gt;</span> {<br />    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Dragged:'</span>, diff.x, diff.y);<br />  }<br />});<br /><br /><span class="hljs-comment">// Later, when you need to remove the drag functionality</span><br /><span class="hljs-title function_">cleanup</span>();</code></pre>
 
     <h3 id="options"><a href="#options" class="no-link">Options</a></h3>
     <h5><code>element<i>: HTMLElement</i></code></h5>
@@ -58,11 +51,16 @@ drag({
     <h5><code>callback<i>: Function</i></code> (optional)</h5>
     <p>Called on every drag move. Receives a diff object with x, y coordinates and original options.</p>
     <h5><code>startCallback<i>: Function</i></code> (optional)</h5>
-    <p>Called when drag starts. Receives the starting event.</p>
+    <p>Called when drag starts. Receives a diff object with x: 0, y: 0 and original options.</p>
     <h5><code>moveCallback<i>: Function</i></code> (optional)</h5>
     <p>Called on every drag move (in addition to callback). Receives a diff object.</p>
     <h5><code>endCallback<i>: Function</i></code> (optional)</h5>
-    <p>Called when drag ends. Receives the ending event.</p>
+    <p>Called when drag ends. Receives a diff object with the final position.</p>
+
+    <h3 id="returnValue"><a href="#returnValue" class="no-link">Return Value</a></h3>
+    <h5><code>cleanup<i>: Function</i></code></h5>
+    <p>The drag function returns a cleanup function. Call this function to remove all event listeners and stop the drag functionality. This is important for preventing memory leaks when removing or destroying components.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> cleanup = <span class="hljs-title function_">drag</span>({ element, callback });<br /><br /><span class="hljs-comment">// Later, when component is destroyed or drag is no longer needed</span><br /><span class="hljs-title function_">cleanup</span>();</code></pre>
 
     <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
     
@@ -80,23 +78,10 @@ drag({
 });</code></pre>
 
     <h4>Resize Handle</h4>
-    <pre><code class="hljs javascript">const resizeHandle = document.querySelector('.resize-handle');
-const panel = document.querySelector('.panel');
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> resizeHandle = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.resize-handle'</span>);<br /><span class="hljs-keyword">const</span> panel = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.panel'</span>);<br /><br /><span class="hljs-title function_">drag</span>({<br />  <span class="hljs-attr">element</span>: resizeHandle,<br />  <span class="hljs-attr">preventScroll</span>: <span class="hljs-literal">true</span>,<br />  <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =&gt;</span> {<br />    <span class="hljs-keyword">const</span> newWidth = panel.offsetWidth + diff.x;<br />    panel.style.width = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(<span class="hljs-number">100</span>, newWidth) + <span class="hljs-string">'px'</span>;<br />  },<br />  <span class="hljs-attr">startCallback</span>: <span class="hljs-function">() =&gt;</span> {<br />    panel.classList.<span class="hljs-title function_">add</span>(<span class="hljs-string">'resizing'</span>);<br />  },<br />  <span class="hljs-attr">endCallback</span>: <span class="hljs-function">() =&gt;</span> {<br />    panel.classList.<span class="hljs-title function_">remove</span>(<span class="hljs-string">'resizing'</span>);<br />  }<br />});</code></pre>
 
-drag({
-  element: resizeHandle,
-  preventScroll: true,
-  callback: (diff) => {
-    const newWidth = panel.offsetWidth + diff.x;
-    panel.style.width = Math.max(100, newWidth) + 'px';
-  },
-  startCallback: () => {
-    panel.classList.add('resizing');
-  },
-  endCallback: () => {
-    panel.classList.remove('resizing');
-  }
-});</code></pre>
+    <h4>Component with Cleanup</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> drag <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/drag.js'</span>;<br /><br /><span class="hljs-keyword">class</span> <span class="hljs-title class_">DraggableComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br />  <span class="hljs-title function_">constructor</span>() {<br />    <span class="hljs-variable language_">super</span>();<br />    <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-literal">null</span>;<br />  }<br /><br />  <span class="hljs-title function_">firstUpdated</span>() {<br />    <span class="hljs-keyword">const</span> handle = <span class="hljs-variable language_">this</span>.shadowRoot.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.drag-handle'</span>);<br />    <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-title function_">drag</span>({<br />      <span class="hljs-attr">element</span>: handle,<br />      <span class="hljs-attr">moveCallback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =&gt;</span> {<br />        <span class="hljs-variable language_">this</span>.style.transform = <span class="hljs-string">`translate(<span class="hljs-subst">${diff.x}</span>px, <span class="hljs-subst">${diff.y}</span>px)`</span>;<br />      }<br />    });<br />  }<br /><br />  <span class="hljs-title function_">disconnectedCallback</span>() {<br />    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">disconnectedCallback</span>();<br />    <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.cleanupDrag) {<br />      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cleanupDrag</span>();<br />      <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-literal">null</span>;<br />    }<br />  }<br />}</code></pre>
 
   </main>
   <div style="height:33vh"></div>

package/docs/utils/toTitleCase.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>toTitleCase - Kempo UI</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <main>
+    <h1>toTitleCase</h1>
+    
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#parameters">Parameters</a><br />
+        <a href="#returnValue">Return Value</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The <code>toTitleCase</code> utility function converts strings to title case format. It handles camelCase, snake_case, kebab-case, and regular text, converting them into properly capitalized title case with spaces between words.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the toTitleCase function to convert strings to title case:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> toTitleCase <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/toTitleCase.js'</span>;<br /><br /><span class="hljs-keyword">const</span> result = <span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'helloWorld'</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// "Hello World"</span></code></pre>
+
+    <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
+    <h5><code>str<i>: string</i></code></h5>
+    <p>The string to convert to title case. Can be in any format (camelCase, snake_case, kebab-case, or regular text).</p>
+
+    <h3 id="returnValue"><a href="#returnValue" class="no-link">Return Value</a></h3>
+    <h5><code><i>string</i></code></h5>
+    <p>The input string converted to title case with proper spacing and capitalization.</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    
+    <h4>Converting camelCase</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'firstName'</span>);     <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customerAddress'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'userId'</span>);         <span class="hljs-comment">// "User Id"</span></code></pre>
+
+    <h4>Converting snake_case</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'first_name'</span>);     <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customer_address'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'user_id'</span>);         <span class="hljs-comment">// "User Id"</span></code></pre>
+
+    <h4>Converting kebab-case</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'first-name'</span>);     <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customer-address'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'user-id'</span>);         <span class="hljs-comment">// "User Id"</span></code></pre>
+
+    <h4>Converting regular text</h4>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'hello world'</span>);     <span class="hljs-comment">// "Hello World"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'the quick brown fox'</span>); <span class="hljs-comment">// "The Quick Brown Fox"</span></code></pre>
+
+    <h4>Practical Use Case: Table Column Headers</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> columns = [<span class="hljs-string">'firstName'</span>, <span class="hljs-string">'lastName'</span>, <span class="hljs-string">'emailAddress'</span>];<br /><br /><span class="hljs-keyword">const</span> headers = columns.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">col</span> =&gt;</span> <span class="hljs-title function_">toTitleCase</span>(col));<br /><span class="hljs-comment">// ["First Name", "Last Name", "Email Address"]</span></code></pre>
+
+  </main>
+  <div style="height:33vh"></div>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -26,7 +26,7 @@
   "homepage": "https://github.com/dustinpoissant/kempo-ui#readme",
   "devDependencies": {
     "kempo-server": "^1.7.10",
-    "kempo-testing-framework": "^1.3.6",
+    "kempo-testing-framework": "^1.4.0",
     "terser": "^5.43.1"
   },
   "dependencies": {

package/scripts/build.js

@@ -89,6 +89,9 @@ const minifiedKempoHljsCSS = kempoHljsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*
 console.log('Saving kempo-hljs.css');
 await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
 
+console.log('Cleaning docs/src/ directory');
+await emptyDir('./docs/src/');
+
 console.log('Copying dist/ to docs/');
 await ensureDir('./docs/');
 await copyDir('./dist', './docs/');

package/src/components/Dialog.js

@@ -2,6 +2,7 @@ import ShadowComponent from './ShadowComponent.js';
 import { html, css } from '../lit-all.min.js';
 import { boolExists } from '../utils/propConverters.js';
 import './Icon.js';
+import './FocusCapture.js';
 
 const firstFocusable = element => {
 	const focusableElements = element.querySelectorAll(
@@ -200,6 +201,11 @@ export default class Dialog extends ShadowComponent {
 			background: transparent;
 			box-shadow: 0 0 0 transparent;
 			color: var(--tc);
+			transition: box-shadow var(--animation_ms);
+			border-radius: var(--radius);
+		}
+		#close:focus {
+			box-shadow: var(--focus_shadow);
 		}
 		#close k-icon {
 			pointer-events: none;
@@ -227,36 +233,38 @@ export default class Dialog extends ShadowComponent {
 					aria-modal="true"
 					aria-labelledby="title"
 				>
-					<div
-						id="header"
-						class="${this.hasTitle() ? 'has-title' : ''}"
-					>
-						<div id="title">
-							<slot name="title"></slot>
-						</div>
-						${this.closeBtn ? html`
-							<button id="close" @click=${this.handleClick}>
-								<k-icon name="close"></k-icon>
-							</button>
-						` : ''}
-					</div>
-					<div id="body">
-						<slot></slot>
-					</div>
-					${this.cancelText || this.confirmText ? html`
-						<div id="footer">
-							${this.cancelText ? html`
-								<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
-									${this.cancelText}
-								</button>
-							` : ''}
-							${this.confirmText ? html`
-								<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
-									${this.confirmText}
+					<k-focus-capture>
+						<div
+							id="header"
+							class="${this.hasTitle() ? 'has-title' : ''}"
+						>
+							<div id="title">
+								<slot name="title"></slot>
+							</div>
+							${this.closeBtn ? html`
+								<button id="close" @click=${this.handleClick}>
+									<k-icon name="close"></k-icon>
 								</button>
 							` : ''}
 						</div>
-					` : ''}
+						<div id="body">
+							<slot></slot>
+						</div>
+						${this.cancelText || this.confirmText ? html`
+							<div id="footer">
+								${this.cancelText ? html`
+									<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
+										${this.cancelText}
+									</button>
+								` : ''}
+								${this.confirmText ? html`
+									<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
+										${this.confirmText}
+									</button>
+								` : ''}
+							</div>
+						` : ''}
+					</k-focus-capture>
 				</div>
 			</div>
 		`;

package/tests/{HybridComponent.browser-test.js → components/HybridComponent.browser-test.js}

@@ -1,5 +1,5 @@
-import HybridComponent from '/src/components/HybridComponent.js';
-import { html } from '/src/lit-all.min.js';
+import HybridComponent from '../../src/components/HybridComponent.js';
+import { html } from '../../src/lit-all.min.js';
 
 class TestHybridComponent extends HybridComponent {
 	render() {

package/tests/{LightComponent.browser-test.js → components/LightComponent.browser-test.js}

@@ -1,5 +1,5 @@
-import LightComponent from '/src/components/LightComponent.js';
-import { html } from '/src/lit-all.min.js';
+import LightComponent from '../../src/components/LightComponent.js';
+import { html } from '../../src/lit-all.min.js';
 
 class TestLightComponent extends LightComponent {
 	renderLightDom() {

package/tests/{ShadowComponent.browser-test.js → components/ShadowComponent.browser-test.js}

@@ -1,5 +1,5 @@
-import ShadowComponent from '/src/components/ShadowComponent.js';
-import { html } from '/src/lit-all.min.js';
+import ShadowComponent from '../../src/components/ShadowComponent.js';
+import { html } from '../../src/lit-all.min.js';
 
 class TestShadowComponent extends ShadowComponent {
 	render() {