kempo-ui 0.0.4 → 0.0.5

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/components/focus-capture.html

@@ -22,6 +22,7 @@
       <div class="m mt0 pl">
         <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#dialogExample">Dialog Example</a><br />
         
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
@@ -31,37 +32,81 @@
       </div>
     </details>
 
-    <h3>Description</h3>
-    <p>The <code>FocusCapture</code> class extends the <a href="./lazy-component.html">LazyComponent</a> class and provides functionality to capture focus within the component.</p>
-
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Use the <code>FocusCapture</code> component to capture focus within the component. When the focus moves out of the component, it will automatically move back to the first focusable element inside the component.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-focus-capture</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Button 1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Button 2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-focus-capture</span>&gt;</span></code></pre>
-    <k-focus-capture>
-      <button>Button 1</button>
-      <button>Button 2</button>
-    </k-focus-capture>
+    <p>The <code>k-focus-capture</code> component traps focus within its children. When focus reaches the end of the focusable elements, it cycles back to the first focusable element. This is useful for modal dialogs, side menus, or any UI where you want to keep focus contained within a specific area.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-focus-capture</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>First Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input field"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>Second Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-b mb"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-focus-capture</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <p class="mb"><em>Tab through the elements below. Focus will cycle back to the first element after the last one.</em></p>
+          <k-focus-capture>
+            <div class="card">
+              <button class="mb">First Button</button>
+              <input type="text" placeholder="Input field" class="mb" />
+              <button class="mb">Second Button</button>
+              <a href="#" class="d-b mb">Link</a>
+            </div>
+          </k-focus-capture>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dialogExample"><a href="#dialogExample" class="no-link">Dialog Example</a></h3>
+    <p>FocusCapture is used internally by the <a href="dialog.html">Dialog</a> and <a href="side-menu.html">SideMenu</a> components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"focusDialog"</span> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Submit"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span>&gt;</span>Focus Capture Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Tab through the elements. Focus stays trapped in the dialog.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('focusDialog').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <button onclick="document.getElementById('focusDialog').open()">Open Dialog</button>
+          <k-dialog
+            id="focusDialog"
+            cancel-text="Close"
+            confirm-text="Submit"
+          >
+            <h6 slot="title" class="m0 px">Focus Capture Dialog</h6>
+            <div class="p">
+              <p>Tab through the elements. Focus stays trapped in the dialog.</p>
+              <input type="text" placeholder="Name" class="mb" />
+              <input type="email" placeholder="Email" class="mb" />
+            </div>
+          </k-dialog>
+        </k-card>
+      </div>
+    </div>
 
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
+    <h6>Extends LitElement</h6>
     <h5>
       <code>new FocusCapture()</code>
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./lazy-component.html">LazyComponent</a></li>
+      <li>Lit</li>
     </ul>
 
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <p>The <code>FocusCapture</code> class does not introduce any new properties beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
+    <h5><code>afterFocus<i>: function</i></code></h5>
+    <p>A method that is called when focus reaches the end capture element. By default, it finds the first focusable element within the component and focuses it. Focusable elements include: <code>button</code>, <code>[href]</code>, <code>input</code>, <code>select</code>, <code>textarea</code>, and <code>[tabindex]:not([tabindex="-1"])</code>.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <p>The <code>FocusCapture</code> class does not introduce any new methods beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
+    <h5><code>render()<i>: TemplateResult</i></code></h5>
+    <p>Renders the component with a slot for children and an invisible div with <code>tabindex="0"</code> that captures focus and cycles it back to the beginning.</p>
 
   </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script> 
+  <script type="module" src="../src/components/FocusCapture.js"></script> 
+  <script type="module" src="../src/components/Dialog.js"></script> 
 </body>
 </html>

package/docs/components/hybrid-component.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <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>
+  <h1 class="ta-center">HybridComponent</h1>
+  <main>
+    <details class="b r mb">
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Guide</h6>
+        <a href="#overview">Overview</a><br />
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#whenToUse">When to Use</a><br />
+        
+        <h6 class="mt">JavaScript Reference</h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+
+    <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
+    <p>HybridComponent is a base class that extends <a href="shadow-component.html">ShadowComponent</a> and provides both shadow DOM rendering with Kempo CSS styles AND light DOM rendering. Use this when you want your component to:</p>
+    <ul>
+      <li>Have shadow DOM with Kempo CSS for internal UI elements</li>
+      <li>Also render content to the light DOM alongside natural children</li>
+      <li>Combine the benefits of both shadow and light DOM</li>
+    </ul>
+    <p>Components like <a href="collapsible.html">Collapsible</a>, <a href="dialog.html">Dialog</a>, and <a href="side-menu.html">SideMenu</a> extend HybridComponent.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create a custom component by extending HybridComponent and implementing both <code>render()</code> for shadow DOM and <code>renderLightDom()</code> for light DOM:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> HybridComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./HybridComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyHybridComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">HybridComponent</span> {<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">title</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br />  };<br /><br />  <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br />    :host {<br />      display: block;<br />    }<br />    .shadow-content {<br />      background: var(--c_primary);<br />      color: var(--tc_on_primary);<br />      padding: var(--spacer);<br />    }<br />  `</span>;<br /><br />  <span class="hljs-title function_">constructor</span>() {<br />    <span class="hljs-variable language_">super</span>();<br />    <span class="hljs-variable language_">this</span>.title = <span class="hljs-string">'Hybrid'</span>;<br />  }<br /><br />  <span class="hljs-comment">// Shadow DOM content with Kempo CSS styles</span><br />  <span class="hljs-title function_">render</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;div class="shadow-content"&gt;<br />        &lt;h3&gt;<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.title}</span> Component&lt;/h3&gt;<br />        &lt;slot name="lightRoot"&gt;&lt;/slot&gt;<br />      &lt;/div&gt;<br />    `</span>;<br />  }<br /><br />  <span class="hljs-comment">// Light DOM content alongside natural children</span><br />  <span class="hljs-title function_">renderLightDom</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;p class="p"&gt;This is rendered to light DOM&lt;/p&gt;<br />      &lt;slot&gt;&lt;/slot&gt;<br />    `</span>;<br />  }<br />}<br /><br /><span class="hljs-variable language_">customElements</span>.<span class="hljs-title function_">define</span>(<span class="hljs-string">'my-hybrid-component'</span>, MyHybridComponent);</code></pre>
+
+    <p><strong>Important:</strong> The default <code>render()</code> method includes <code>&lt;slot name="lightRoot"&gt;&lt;/slot&gt;</code> which is where the light DOM content appears. If you override <code>render()</code>, make sure to include this slot.</p>
+
+    <p><strong>Also Important:</strong> Always call <code>super.updated()</code> when overriding the <code>updated()</code> lifecycle method:</p>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">updated</span>(changedProperties) {<br />  <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">updated</span>(); <span class="hljs-comment">// Required!</span><br />  <br />  <span class="hljs-comment">// Your custom logic here</span><br />}</code></pre>
+
+    <h3 id="whenToUse"><a href="#whenToUse" class="no-link">When to Use</a></h3>
+    <p>Use HybridComponent when:</p>
+    <ul>
+      <li>You need styled internal UI elements (buttons, headers, etc.) in shadow DOM</li>
+      <li>You also need to render content to light DOM alongside natural children</li>
+      <li>You want Kempo CSS styles for your component UI but need flexibility for user content</li>
+    </ul>
+    
+    <p><strong>Example use cases:</strong></p>
+    <ul>
+      <li><strong>Dialog:</strong> Shadow DOM for styled dialog chrome (header, footer, overlay), light DOM for user content</li>
+      <li><strong>Collapsible:</strong> Shadow DOM for toggle button, light DOM for collapsible content</li>
+      <li><strong>SideMenu:</strong> Shadow DOM for menu structure and styling, light DOM for menu items</li>
+    </ul>
+
+    <p>Use <a href="shadow-component.html">ShadowComponent</a> instead when you only need shadow DOM.</p>
+    <p>Use <a href="light-component.html">LightComponent</a> instead when you only need light DOM.</p>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends ShadowComponent</h6>
+    <h5><code>new HybridComponent()</code></h5>
+    <p>Creates a new HybridComponent instance with both shadow DOM (with Kempo CSS) and light DOM rendering.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Lit (html, render)</li>
+      <li><a href="shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>lightRoot<i>: HTMLElement</i></code></h5>
+    <p>A container element with <code>display: contents</code> that holds the rendered light DOM content. It has <code>slot="lightRoot"</code> to connect it to the shadow DOM slot. Created automatically by <code>createRenderRoot()</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>createRenderRoot()<i>: Element</i></code></h5>
+    <p>Creates both shadow DOM (via <code>super.createRenderRoot()</code>) and light DOM render containers. This method:</p>
+    <ul>
+      <li>Calls the parent ShadowComponent's <code>createRenderRoot()</code> to set up shadow DOM with Kempo CSS</li>
+      <li>Creates a <code>lightRoot</code> div with <code>display: contents</code> and <code>slot="lightRoot"</code></li>
+      <li>Appends <code>lightRoot</code> to the component element</li>
+      <li>Returns the shadow render container</li>
+    </ul>
+
+    <h5><code>updated()<i>: void</i></code></h5>
+    <p>Called automatically by Lit when the component updates. Renders the result of <code>renderLightDom()</code> into <code>lightRoot</code>. Override this method if needed, but always call <code>super.updated()</code>.</p>
+
+    <h5><code>renderLightDom()<i>: TemplateResult</i></code></h5>
+    <p>Override this method to define what should be rendered to the light DOM. Returns an empty template by default. Use Lit's <code>html</code> tagged template literal to return your content. Typically includes a <code>&lt;slot&gt;&lt;/slot&gt;</code> for natural children.</p>
+
+    <h5><code>render()<i>: TemplateResult</i></code></h5>
+    <p>Override this method to define what should be rendered to the shadow DOM. The default implementation returns <code>html`&lt;slot name="lightRoot"&gt;&lt;/slot&gt;`</code> which displays the light DOM content. When overriding, make sure to include this slot where you want the light DOM content to appear.</p>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/icon.html

@@ -10,10 +10,8 @@
   <script type="module">
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
-    // import Search from '../src/components/Search.js';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
-    // Search.searchDataUrl = '../search.json';
   </script>
 </head>
 <body>

package/docs/components/light-component.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LightComponent - Base Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <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>
+  <h1 class="ta-center">LightComponent</h1>
+  <main>
+    <details class="b r mb">
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Guide</h6>
+        <a href="#overview">Overview</a><br />
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#whenToUse">When to Use</a><br />
+        
+        <h6 class="mt">JavaScript Reference</h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+
+    <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
+    <p>LightComponent is a base class that extends LitElement and renders directly to the light DOM instead of shadow DOM. Use this when you want your component to:</p>
+    <ul>
+      <li>Render content in the light DOM (no shadow DOM encapsulation)</li>
+      <li>Allow global CSS to style component content</li>
+      <li>Interact naturally with parent page styles</li>
+      <li>Support natural children alongside rendered content</li>
+    </ul>
+    <p>Components like <a href="persistant-collapsible.html">PersistantCollapsible</a> and <a href="theme-switcher.html">ThemeSwitcher</a> extend LightComponent.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create a custom component by extending LightComponent and implementing <code>renderLightDom()</code>:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LightComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./LightComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyLightComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">LightComponent</span> {<br />  <span class="hljs-keyword">static</span> properties = {<br />    <span class="hljs-attr">message</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br />  };<br /><br />  <span class="hljs-title function_">constructor</span>() {<br />    <span class="hljs-variable language_">super</span>();<br />    <span class="hljs-variable language_">this</span>.message = <span class="hljs-string">'Hello'</span>;<br />  }<br /><br />  <span class="hljs-title function_">renderLightDom</span>() {<br />    <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br />      &lt;div class="card p"&gt;<br />        &lt;p&gt;<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.message}</span> from Light DOM!&lt;/p&gt;<br />      &lt;/div&gt;<br />    `</span>;<br />  }<br />}<br /><br /><span class="hljs-variable language_">customElements</span>.<span class="hljs-title function_">define</span>(<span class="hljs-string">'my-light-component'</span>, MyLightComponent);</code></pre>
+
+    <p><strong>Important:</strong> Always call <code>super.updated()</code> when overriding the <code>updated()</code> lifecycle method:</p>
+    <pre><code class="hljs javascript"><span class="hljs-title function_">updated</span>(changedProperties) {<br />  <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">updated</span>(); <span class="hljs-comment">// Required!</span><br />  <br />  <span class="hljs-comment">// Your custom logic here</span><br />  <span class="hljs-keyword">if</span>(changedProperties.<span class="hljs-title function_">has</span>(<span class="hljs-string">'message'</span>)) {<br />    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Message changed'</span>);<br />  }<br />}</code></pre>
+
+    <h3 id="whenToUse"><a href="#whenToUse" class="no-link">When to Use</a></h3>
+    <p>Use LightComponent when:</p>
+    <ul>
+      <li>You want global page styles to apply to your component</li>
+      <li>You need to render alongside natural children</li>
+      <li>Shadow DOM encapsulation would interfere with your component's purpose</li>
+      <li>You're working with third-party libraries that expect light DOM</li>
+    </ul>
+    <p>Use <a href="shadow-component.html">ShadowComponent</a> instead when you need style encapsulation and scoped CSS.</p>
+    <p>Use <a href="hybrid-component.html">HybridComponent</a> when you need both shadow DOM styles and light DOM rendering.</p>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends LitElement</h6>
+    <h5><code>new LightComponent()</code></h5>
+    <p>Creates a new LightComponent instance that renders to the light DOM.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Lit (LitElement, html, render)</li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>lightRoot<i>: HTMLElement</i></code></h5>
+    <p>A container element with <code>display: contents</code> that holds the rendered light DOM content. Created automatically by <code>createRenderRoot()</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>createRenderRoot()<i>: Element</i></code></h5>
+    <p>Creates the light DOM render container instead of shadow DOM. This method:</p>
+    <ul>
+      <li>Creates a <code>div</code> with <code>display: contents</code> for layout transparency</li>
+      <li>Appends it to the component as <code>lightRoot</code></li>
+      <li>Returns <code>this</code> instead of a shadow root</li>
+    </ul>
+
+    <h5><code>updated()<i>: void</i></code></h5>
+    <p>Called automatically by Lit when the component updates. Renders the result of <code>renderLightDom()</code> into <code>lightRoot</code>. Override this method if needed, but always call <code>super.updated()</code>.</p>
+
+    <h5><code>renderLightDom()<i>: TemplateResult</i></code></h5>
+    <p>Override this method to define what should be rendered to the light DOM. Returns an empty template by default. Use Lit's <code>html</code> tagged template literal to return your content.</p>
+
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>