kempo-ui 0.3.6 → 0.3.8

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

@@ -1,7 +1,7 @@
-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`
+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=>html`
+					${this.table.fields.map(e=>t`
 						<k-sortable-item data-field="${e.name}">
 							<label class="field pb0">
 								<input
@@ -18,8 +18,8 @@ import TableControl from"./TableControl.js";import{html,render}from"../../lit-al
 					`)}
 				</k-sortable>
 			</div>
-		`,e),Dialog.create(e,{title:"Show / Hide / Order Fields",width:"400px",cancelText:"Close"})};render(){return html`
+		`,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",FieldSortHide);
+		`}}customElements.define("k-tc-field-sort-hide",a);

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

@@ -1,18 +1,18 @@
-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`
+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?html`
+				${0===this.table.filters.length?e`
 					<p>No Current Filters.</p>
-				`:html`
+				`:e`
 					<h5>Current Filters</h5>
 					<ul id="currentFilters">
-						${this.table.filters.map(({field:e,condition:i,value:o})=>html`
+						${this.table.filters.map(({field:l,condition:i,value:n})=>e`
 							<li
-								data-field="${e}"
+								data-field="${l}"
 								data-condition="${i}"
-								data-value="${o}"
+								data-value="${n}"
 							>
-								${this.table.getFieldLabel(e)} ${t[i]} "${o}"
-								<button class="remove-filter no-btn pq" @click="${t=>{this.table.removeFilter(e,i,o),l.close(),this.openDialog()}}">
+								${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>
@@ -21,26 +21,26 @@ import TableControl from"./TableControl.js";import{html,render}from"../../lit-al
 				`}
 				<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()}}">
+				<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:e})=>html`
-							<option value="${t}">${e}</option>
+						${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,e])=>html`
-							<option value="${t}" ?selected="${"contains"===t}">${e}</option>
+						${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?"":html`
-						<button type="button" class="btn danger mb mr" @click="${()=>{this.table.removeAllFilters(),l.close()}}">Clear All Filters</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>
-		`,e);const l=Dialog.create(e,{width:"600px",title:"Filters"})};render(){return html`
+		`,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",Filters);
+		`}}customElements.define("k-tc-filters",n);

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

@@ -1,4 +1,4 @@
-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`
+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}"
@@ -6,4 +6,4 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 			>
 				<k-icon name="chevron-line" direction="left"></k-icon>
 			</button>
-		`}}customElements.define("k-tc-first-page",FirstPage);
+		`}}customElements.define("k-tc-first-page",a);

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

@@ -1,3 +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`
+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",HiddenCount);
+		`}}customElements.define("k-tc-hidden-count",n);

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

@@ -1,5 +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`
+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",Hide);
+		`}}customElements.define("k-tc-hide",o);

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

@@ -1,4 +1,4 @@
-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`
+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}"
@@ -6,4 +6,4 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 			>
 				<k-icon name="chevron-line"></k-icon>
 			</button>
-		`}}customElements.define("k-tc-last-page",LastPage);
+		`}}customElements.define("k-tc-last-page",a);

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

@@ -1,4 +1,4 @@
-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`
+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}"
@@ -6,4 +6,4 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 			>
 				<k-icon name="chevron"></k-icon>
 			</button>
-		`}}customElements.define("k-tc-next-page",NextPage);
+		`}}customElements.define("k-tc-next-page",a);

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

@@ -1,12 +1,12 @@
-import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";export default class PageSelect extends TableControl{static properties={...TableControl.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 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`
+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=css`
-		${TableControl.styles}
+		`}static styles=a`
+		${e.styles}
 		
 		.page-select {
 			display: flex;
@@ -19,4 +19,4 @@ import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.m
 			padding: 0;
 			margin: 0;
 		}
-	`}customElements.define("k-tc-page-select",PageSelect);
+	`}customElements.define("k-tc-page-select",l);

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

@@ -1,5 +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`
+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=>html`<option value="${e}" ?selected="${e===this.currentPageSize}">${e} per page</option>`)}
+				${this.pageSizeOptions.map(e=>t`<option value="${e}" ?selected="${e===this.currentPageSize}">${e} per page</option>`)}
 			</select>
-		`}}customElements.define("k-tc-page-size",PageSize);
+		`}}customElements.define("k-tc-page-size",a);

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

@@ -1,4 +1,4 @@
-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`
+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}"
@@ -6,4 +6,4 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 			>
 				<k-icon name="chevron" direction="left"></k-icon>
 			</button>
-		`}}customElements.define("k-tc-prev-page",PrevPage);
+		`}}customElements.define("k-tc-prev-page",a);

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

@@ -1,4 +1,4 @@
-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`
+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"
@@ -6,4 +6,4 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 				.value="${this.searchTerm||""}"
 				@input="${this.handleInput}"
 			/>
-		`}}customElements.define("k-tc-search",Search);
+		`}}customElements.define("k-tc-search",s);

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

@@ -1,5 +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`
+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",ShowAll);
+		`}}customElements.define("k-tc-show-all",l);

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

@@ -1,4 +1,4 @@
-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`
+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;
 		}
@@ -13,4 +13,4 @@ import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../li
 		.icon-btn:disabled {
 			opacity: 0.6;
 		}
-	`}customElements.define("k-table-control",TableControl);
+	`}customElements.define("k-table-control",s);

package/docs/src/utils/context.js

@@ -1 +1 @@
-const contexts={},getContext=e=>(contexts[e]||(contexts[e]={value:void 0,subscribers:new Set}),contexts[e]);export const createContext=(e="global",t)=>{const s=getContext(e);return void 0!==t&&void 0===s.value&&(s.value=t),{get:()=>s.value,set:e=>{s.value=e,s.subscribers.forEach(t=>t(e))},subscribe:e=>(s.subscribers.add(e),e(s.value),()=>s.subscribers.delete(e)),unsubscribe:e=>s.subscribers.delete(e)}};export default createContext;
+const e={};export const createContext=(s="global",r)=>{const t=(s=>(e[s]||(e[s]={value:void 0,subscribers:new Set}),e[s]))(s);return void 0!==r&&void 0===t.value&&(t.value=r),{get:()=>t.value,set:e=>{t.value=e,t.subscribers.forEach(s=>s(e))},subscribe:e=>(t.subscribers.add(e),e(t.value),()=>t.subscribers.delete(e)),unsubscribe:e=>t.subscribers.delete(e)}};export default createContext;

package/docs/src/utils/debounce.js

@@ -1 +1 @@
-function debounce(e,t=300){let u;return(...o)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,o)},t)}}export default debounce;
+function t(t,e=300){let u;return(...i)=>{clearTimeout(u),u=setTimeout(()=>{t.apply(this,i)},e)}}export default t;

package/docs/src/utils/object.js

@@ -1 +1 @@
-import{typeOf}from"./type.js";export const toJson=e=>JSON.stringify(e,(t,n)=>""!==t&&n===e?"<<Circular Reference>>":"undefined"!=typeof Element&&n instanceof Element?n.outerHTML:"function"===typeOf(n)?`<<Function ${t}>>`:n);export const flattenObject=(e,t=100,n=0,o=[])=>{const r=n+1;return null===e?{}:Object.keys(e).reduce((n,c)=>{const s=e[c],l=[...o,c].join(".");return"undefined"!==typeOf(Element)&&s instanceof Element?{...n,[l]:s.outerHTML}:null===s?{...n,[l]:null}:"object"==typeof s?t<=r?{...n,[l]:"<<Max Depth Reached>>"}:{...n,...flattenObject(s,t,r,[...o,c])}:{...n,[l]:s}},{})};export const flattenedObjects=(...e)=>e.map(e=>flattenObject(e));export const objectSummary=(e,t=100)=>{if("object"==typeof e){const n=flattenObject(e),o=[];return Object.keys(n).forEach(e=>{o.push(`${e} = ${objectSummary(n[e])}`)}),o.join(", ").substring(0,t)}return`${e}`.substring(0,t)};export const clone=e=>{const t=typeof e,n="undefined"==typeof window?class{}:window.Element;return e instanceof n?e.outerHTML:null===e?null:["string","number","boolean","undefined","bigint"].includes(t)?e:"symbol"===t?"<<SYMBOL>>":"function"===t?"<<function>>":e instanceof Array?e.map(e=>clone(e)):"object"===t?Object.keys(e).reduce((t,n)=>({...t,[n]:clone(e[n])}),{}):e};export const equalObjs=(...e)=>{if(e.length<2)return!0;const t=toJson(e[0]);for(let n=1;n<e.length;n++)if(t!==toJson(e[n]))return!1;return!0};const pruneVar=e=>void 0===e?[void 0,!0]:"string"==typeof e?[e,""===e]:e instanceof Array?[e,0===e.length]:null===e?[e,!1]:"object"==typeof e?pruneObject(e):[e,!1],pruneObject=e=>{const t={};return Object.keys(e).forEach(n=>{const[o,r]=pruneVar(e[n]);r||(t[n]=o)}),[t,0===Object.keys(t).length]};export const prune=e=>pruneObject(e)[0];export const getAllKeys=(...e)=>[...new Set(e.map(e=>Object.keys(e)).flat())];export const getDifferencesKeys=(...e)=>getAllKeys(...e).map(t=>1!==new Set(e.map(e=>e[t])).size?t:null).filter(e=>null!==e);export const diff=(e,t)=>{const n={};function o(e,t,o){Array.isArray(t)&&Array.isArray(o)?t.length===o.length&&t.every((e,t)=>e===o[t])||(n[e.join(".")]={newValue:t,oldValue:o}):"object"==typeof t&&"object"==typeof o?r([...e],t,o):t!==o&&(n[e.join(".")]={newValue:t,oldValue:o})}function r(e,t,n){for(const r in t)if(t.hasOwnProperty(r)){o([...e,r],t[r],n[r])}}return r([],e,t),n};export const mapObject=(e,t)=>Object.entries(e).reduce((e,[n,o])=>{const[r,c]=t(n,o);return e[r]=c,e},{});export default{toJson:toJson,flattenObject:flattenObject,flattenedObjects:flattenedObjects,objectSummary:objectSummary,clone:clone,equalObjs:equalObjs,pruneVar:pruneVar,pruneObject:pruneObject,prune:prune,getAllKeys:getAllKeys,getDifferencesKeys:getDifferencesKeys,diff:diff,mapObject:mapObject};
+import{typeOf as e}from"./type.js";export const toJson=t=>JSON.stringify(t,(n,o)=>""!==n&&o===t?"<<Circular Reference>>":"undefined"!=typeof Element&&o instanceof Element?o.outerHTML:"function"===e(o)?`<<Function ${n}>>`:o);export const flattenObject=(t,n=100,o=0,r=[])=>{const c=o+1;return null===t?{}:Object.keys(t).reduce((o,s)=>{const l=t[s],f=[...r,s].join(".");return"undefined"!==e(Element)&&l instanceof Element?{...o,[f]:l.outerHTML}:null===l?{...o,[f]:null}:"object"==typeof l?n<=c?{...o,[f]:"<<Max Depth Reached>>"}:{...o,...flattenObject(l,n,c,[...r,s])}:{...o,[f]:l}},{})};export const flattenedObjects=(...e)=>e.map(e=>flattenObject(e));export const objectSummary=(e,t=100)=>{if("object"==typeof e){const n=flattenObject(e),o=[];return Object.keys(n).forEach(e=>{o.push(`${e} = ${objectSummary(n[e])}`)}),o.join(", ").substring(0,t)}return`${e}`.substring(0,t)};export const clone=e=>{const t=typeof e,n="undefined"==typeof window?class{}:window.Element;return e instanceof n?e.outerHTML:null===e?null:["string","number","boolean","undefined","bigint"].includes(t)?e:"symbol"===t?"<<SYMBOL>>":"function"===t?"<<function>>":e instanceof Array?e.map(e=>clone(e)):"object"===t?Object.keys(e).reduce((t,n)=>({...t,[n]:clone(e[n])}),{}):e};export const equalObjs=(...e)=>{if(e.length<2)return!0;const t=toJson(e[0]);for(let n=1;n<e.length;n++)if(t!==toJson(e[n]))return!1;return!0};const t=e=>void 0===e?[void 0,!0]:"string"==typeof e?[e,""===e]:e instanceof Array?[e,0===e.length]:null===e?[e,!1]:"object"==typeof e?n(e):[e,!1],n=e=>{const n={};return Object.keys(e).forEach(o=>{const[r,c]=t(e[o]);c||(n[o]=r)}),[n,0===Object.keys(n).length]};export const prune=e=>n(e)[0];export const getAllKeys=(...e)=>[...new Set(e.map(e=>Object.keys(e)).flat())];export const getDifferencesKeys=(...e)=>getAllKeys(...e).map(t=>1!==new Set(e.map(e=>e[t])).size?t:null).filter(e=>null!==e);export const diff=(e,t)=>{const n={};function o(e,t,o){Array.isArray(t)&&Array.isArray(o)?t.length===o.length&&t.every((e,t)=>e===o[t])||(n[e.join(".")]={newValue:t,oldValue:o}):"object"==typeof t&&"object"==typeof o?r([...e],t,o):t!==o&&(n[e.join(".")]={newValue:t,oldValue:o})}function r(e,t,n){for(const r in t)if(t.hasOwnProperty(r)){o([...e,r],t[r],n[r])}}return r([],e,t),n};export const mapObject=(e,t)=>Object.entries(e).reduce((e,[n,o])=>{const[r,c]=t(n,o);return e[r]=c,e},{});export default{toJson:toJson,flattenObject:flattenObject,flattenedObjects:flattenedObjects,objectSummary:objectSummary,clone:clone,equalObjs:equalObjs,pruneVar:t,pruneObject:n,prune:prune,getAllKeys:getAllKeys,getDifferencesKeys:getDifferencesKeys,diff:diff,mapObject:mapObject};

package/docs/src/utils/theme.js

@@ -1 +1 @@
-import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme()),applyTheme=e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)};themeContext.subscribe(applyTheme),window.addEventListener("storage",e=>{"theme"===e.key&&e.newValue&&themeContext.set(e.newValue)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const initTheme=()=>{const e=getInitialTheme();applyTheme(e),themeContext.set(e)};export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme,init:initTheme};
+import e from"./context.js";const t=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},o=e("theme",t()),s=e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)};o.subscribe(s),window.addEventListener("storage",e=>{"theme"===e.key&&e.newValue&&o.set(e.newValue)});export const setTheme=e=>o.set(e);export const getTheme=()=>o.get();export const subscribeToTheme=e=>o.subscribe(e);export const initTheme=()=>{const e=t();s(e),o.set(e)};export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};const m=window.matchMedia("(prefers-color-scheme: dark)"),c=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");m.addEventListener("change",c),c(m);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme,init:initTheme};

package/docs/src/utils/wait.js

@@ -1 +0,0 @@
-const wait=e=>new Promise(i=>new Timeout(i,e)),waitFrmaes=(e=1)=>new Promise(i=>{let n=0;requestAnimationFrame(function t(){n++,n>=e?i():requestAnimationFrame(t)})});

package/docs/utils/context.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/cookie.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/debounce.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/drag.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/elevation.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/formatTimestamp.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>
@@ -247,18 +249,18 @@
     
     <h1>formatTimestamp</h1>
     
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m">
         <h6>Usage</h6>
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#parameters">Parameters</a><br />
         <a href="#formatTokens">Format Tokens</a><br />
         <a href="#examples">Examples</a><br />
       </div>
-    </details>
+      </k-accordion-panel>
+    </k-accordion>
 
     <h3>Description</h3>
     <p>The <code>formatTimestamp</code> utility function formats timestamps using custom format tokens or locale-specific formatting.</p>

package/docs/utils/object.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/propConverters.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/string.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/theme.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>

package/docs/utils/toTitleCase.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>
@@ -247,18 +249,18 @@
     
     <h1>toTitleCase</h1>
     
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m">
         <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>
+      </k-accordion-panel>
+    </k-accordion>
 
     <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>

package/docs/utils/type.html

@@ -41,6 +41,7 @@
           <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
@@ -118,6 +119,7 @@
         <a href="../components/icon.html">Icon</a>
         <a href="../components/import.html">Import</a>
         <a href="../components/nav.html">Nav</a>
+        <a href="../components/nav-spacer.html">Nav Spacer</a>
         <a href="../components/photo-viewer.html">Photo Viewer</a>
         <a href="../components/resize.html">Resize</a>
         <a href="../components/show-more.html">Show More</a>