kempo-ui 0.3.1 → 0.3.3

package/dist/components/Table.js

@@ -1,4 +1,4 @@
-import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-delete"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}}renderColgroupTemplate(){const e=[];return this.enableSelection&&e.push(html`<col style="width: 40px" />`),this.hasBeforeControls()&&e.push(html`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:t,hidden:s})=>{s||e.push(t?html`<col style="width: ${t}px" />`:html`<col />`)}),this.hasAfterControls()&&e.push(html`<col style="width: ${this.columnSizes.afterControls}px" />`),e}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const e=[];return this.enableSelection&&e.push(html`
+import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-delete"},placeholder:{type:String,reflect:!0},filteredPlaceholder:{type:String,reflect:!0,attribute:"filtered-placeholder"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1),void 0===this.placeholder&&(this.placeholder="No Records"),void 0===this.filteredPlaceholder&&(this.filteredPlaceholder="")}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.getDisplayedRecords().length>0&&this.allOnPageSelected())}}renderColgroupTemplate(){const e=[];return this.enableSelection&&e.push(html`<col style="width: 40px" />`),this.hasBeforeControls()&&e.push(html`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:t,hidden:s})=>{s||e.push(t?html`<col style="width: ${t}px" />`:html`<col />`)}),this.hasAfterControls()&&e.push(html`<col style="width: ${this.columnSizes.afterControls}px" />`),e}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const e=[];return this.enableSelection&&e.push(html`
         <th class="controls field-select">
           <input type="checkbox" id="select-all" @change=${this.handleSelectAllChange} />
         </th>
@@ -11,7 +11,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
           ${s}
           ${o?html`<k-icon name="arrow" direction="${r.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
         </th>
-      `)}),this.hasAfterControls()&&e.push(html`<th class="controls field-after-controls"></th>`),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s));let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`));return null===i||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:i,count:r},bubbles:!0}))},0),o}renderRecordTemplate(e){const t=[];return this.enableSelection&&t.push(html`
+      `)}),this.hasAfterControls()&&e.push(html`<th class="controls field-after-controls"></th>`),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;if(this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s)),0===e.length){const e=this.records.filter(e=>null!==e).length>0?this.filteredPlaceholder:this.placeholder;if(e)return[html`<tr class="placeholder"><td colspan="${this.getColumnCount()}">${e}</td></tr>`]}let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`));return null===i||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:i,count:r},bubbles:!0}))},0),o}renderRecordTemplate(e){const t=[];return this.enableSelection&&t.push(html`
         <td class="cell selection controls">
           <input
             type="checkbox"
@@ -192,4 +192,10 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
     :host(:not([bottom-controls])) #bottom {
       display: none;
     }
+    tr.placeholder td {
+      text-align: center;
+      color: var(--c_text__muted);
+      font-style: italic;
+      padding: var(--spacer);
+    }
   `;static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach(e=>{Object.keys(e).forEach(e=>s.add(e))}),[...s].map(e=>({name:e,label:toTitleCase(e)}))}static format(e){return(Array.isArray(e)?Table.formatters.array:Table.formatters[typeof e])(e)}static formatters={string:e=>e,number:e=>`${e}`,date:e=>e.toLocaleDateString(),boolean:e=>e?"True":"False",array:e=>e.map(e=>Table.format(e)).join(", "),undefined:e=>"",null:e=>"<code>null</code>"};static editors={string:e=>{const t=document.createElement("input");return t.value=e,t},number:e=>{const t=document.createElement("input");return t.type="number",t.value=e,t},date:e=>{const t=document.createElement("input");return t.type="date",t.value=e,t},boolean:e=>{const t=document.createElement("select");return t.innerHTML=`\n        <option value="true" ${e?"selected":""}>True</option>\n        <option value="false" ${e?"":"selected"}>False</option>\n      `,t.value=e,t},calculated:e=>{const t=document.createElement("input");return t.disabled=!0,t.value=e,t}}}window.customElements.define("k-table",Table);

package/dist/components/Toggle.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.disabled=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.disabled||this.toggle()};handleKeyDown=e=>{this.disabled||["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
       <div id="switch">
         <div id="handle"></div>
       </div>
@@ -26,6 +26,11 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       outline: none;
     }
 
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
     #switch {
       display: flex;
       align-items: center;

package/docs/components/table.html

@@ -35,6 +35,7 @@
           <a href="./tableFieldSortHide.html">Field Sorting and Hiding</a><br />
           <a href="./tableFetchRecords.html">Fetching Records</a><br />
           <a href="./tableServerSync.html">Server Sync</a><br />
+          <a href="./tablePlaceholder.html">Placeholder</a><br />
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
           <a href="#requirements">Requirements</a><br />
@@ -103,6 +104,7 @@
       <li><a href="./tableFieldSortHide.html">Field Sorting and Hiding</a></li>
       <li><a href="./tableFetchRecords.html">Fetching Records</a></li>
       <li><a href="./tableServerSync.html">Server Sync</a></li>
+      <li><a href="./tablePlaceholder.html">Placeholder</a></li>
     </ul>
 
     <br />
@@ -159,6 +161,12 @@
     <h5><code>pageSizeOptions<i>: &lt;Array>number</i></code></h5>
     <p>An array of numbers representing the available page size options.</p>
 
+    <h5><code>placeholder<i>: string</i></code></h5>
+    <p>Text shown when the table has no records. Defaults to <code>"No Records"</code>. Set to an empty string to suppress. See <a href="./tablePlaceholder.html">Placeholder</a>.</p>
+
+    <h5><code>filtered-placeholder<i>: string</i></code></h5>
+    <p>Text shown when records exist but all are currently filtered or hidden. Defaults to <code>""</code> (no row shown). See <a href="./tablePlaceholder.html">Placeholder</a>.</p>
+
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
 
     <h5><code>setData(<i>object</i> options)<i>: undefined</i></code></h5>

package/docs/components/tablePlaceholder.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Placeholder - Table - Kempo Docs</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script>window.litDisableBundleWarning = true;</script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Table - Placeholder</h1>
+  <k-main>
+
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+
+    <p>The <code>placeholder</code> attribute sets the message shown when the table has no records at all. It defaults to <code>"No Records"</code>. The separate <code>filtered-placeholder</code> attribute sets the message shown when records exist but all have been filtered or hidden — if not set, no row is shown in that case.</p>
+
+    <h3>Default Placeholder</h3>
+    <p>An empty table shows <code>"No Records"</code> by default. No attribute needed.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">emptyTableExample</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;emptyTableExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;role&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Role&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: []<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-card label="Result">
+      <k-table id="emptyTableExample"></k-table>
+      <script type="module">
+        await window.customElements.whenDefined('k-table');
+        document.getElementById('emptyTableExample').setData({
+          fields: [
+            { name: 'name', label: 'Name' },
+            { name: 'role', label: 'Role' }
+          ],
+          records: []
+        });
+      </script>
+    </k-card>
+
+    <h3>Custom Placeholder</h3>
+    <p>Set the <code>placeholder</code> attribute to override the default text.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">customPlaceholderExample</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&#x27;No contacts found.&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;customPlaceholderExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;email&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Email&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: []<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-card label="Result">
+      <k-table id="customPlaceholderExample" placeholder="No contacts found."></k-table>
+      <script type="module">
+        await window.customElements.whenDefined('k-table');
+        document.getElementById('customPlaceholderExample').setData({
+          fields: [
+            { name: 'name', label: 'Name' },
+            { name: 'email', label: 'Email' }
+          ],
+          records: []
+        });
+      </script>
+    </k-card>
+
+    <h3>Filtered Placeholder</h3>
+    <p>Use <code>filtered-placeholder</code> to show a distinct message when records exist but all are filtered out. Try searching for something that does not match any record below.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filteredTableExample</span> <span class="hljs-attr">filtered-placeholder</span>=<span class="hljs-string">&#x27;No records match your search.&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#x27;width: 20rem&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span> <span class="hljs-attr">src</span>=<span class="hljs-string">/src/components/tableControls/Search.js</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filteredTableExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Houston&#x27;</span><br>    }]<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-card label="Result">
+      <k-table id="filteredTableExample" filtered-placeholder="No records match your search.">
+        <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
+      </k-table>
+      <script type="module" src="../src/components/tableControls/Search.js"></script>
+      <script type="module">
+        await window.customElements.whenDefined('k-table');
+        document.getElementById('filteredTableExample').setData({
+          fields: [
+            { name: 'name', label: 'Name' },
+            { name: 'city', label: 'City' }
+          ],
+          records: [
+            { name: 'Alice', city: 'New York' },
+            { name: 'Bob', city: 'Chicago' },
+            { name: 'Charlie', city: 'Houston' }
+          ]
+        });
+      </script>
+    </k-card>
+
+  </k-main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Card.js"></script>
+  <div style="height: 33vh"></div>
+  <script type="module" src="../src/components/Main.js"></script>
+</body>
+</html>

package/docs/components/toggle.html

@@ -26,6 +26,7 @@
         <a href="#responsiveBehavior">Responsive Behavior</a><br />
         <a href="#customStyles">Custom Styles</a><br />
         <a href="#javascriptUsage">JavaScript Usage</a><br />
+        <a href="#disabled">Disabled</a><br />
         
         <h6 class="mt"><a href="jsRef" class="no-link">JavaScript Reference</a></h6>
         <a href="#constructor">Constructor</a><br />
@@ -137,6 +138,22 @@
       </div>
     </div>
 
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>The <code>disabled</code> attribute prevents the user from changing the toggle's state while still displaying its current value.</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-toggle</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled Off<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>&gt;</span>Disabled On<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-toggle disabled>Disabled Off</k-toggle>
+          <k-toggle disabled value>Disabled On</k-toggle>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef"><a href="jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -155,6 +172,9 @@
     <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>. Syncs to <code>value</code> attribute.</p>
     <p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
 
+    <h5><code>disabled<i>: boolean</i></code></h5>
+    <p>When <code>true</code>, the toggle cannot be changed by user interaction. The current state is still displayed. The element will appear at 50% opacity. Syncs to <code>disabled</code> attribute.</p>
+
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>on()<i>: this</i></code></h5>
     <p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>

package/docs/nav.inc.js

@@ -58,7 +58,8 @@ searchInput.addEventListener('blur', () => {
 });
 
 document.addEventListener('keydown', e => {
-	const active = document.activeElement;
+	let active = document.activeElement;
+	while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
 	const tag = active?.tagName;
 	if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
 	if(e.metaKey || e.ctrlKey || e.altKey) return;

package/docs/src/components/Table.js

@@ -1,4 +1,4 @@
-import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-delete"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}}renderColgroupTemplate(){const e=[];return this.enableSelection&&e.push(html`<col style="width: 40px" />`),this.hasBeforeControls()&&e.push(html`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:t,hidden:s})=>{s||e.push(t?html`<col style="width: ${t}px" />`:html`<col />`)}),this.hasAfterControls()&&e.push(html`<col style="width: ${this.columnSizes.afterControls}px" />`),e}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const e=[];return this.enableSelection&&e.push(html`
+import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-delete"},placeholder:{type:String,reflect:!0},filteredPlaceholder:{type:String,reflect:!0,attribute:"filtered-placeholder"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1),void 0===this.placeholder&&(this.placeholder="No Records"),void 0===this.filteredPlaceholder&&(this.filteredPlaceholder="")}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.getDisplayedRecords().length>0&&this.allOnPageSelected())}}renderColgroupTemplate(){const e=[];return this.enableSelection&&e.push(html`<col style="width: 40px" />`),this.hasBeforeControls()&&e.push(html`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:t,hidden:s})=>{s||e.push(t?html`<col style="width: ${t}px" />`:html`<col />`)}),this.hasAfterControls()&&e.push(html`<col style="width: ${this.columnSizes.afterControls}px" />`),e}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const e=[];return this.enableSelection&&e.push(html`
         <th class="controls field-select">
           <input type="checkbox" id="select-all" @change=${this.handleSelectAllChange} />
         </th>
@@ -11,7 +11,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
           ${s}
           ${o?html`<k-icon name="arrow" direction="${r.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
         </th>
-      `)}),this.hasAfterControls()&&e.push(html`<th class="controls field-after-controls"></th>`),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s));let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`));return null===i||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:i,count:r},bubbles:!0}))},0),o}renderRecordTemplate(e){const t=[];return this.enableSelection&&t.push(html`
+      `)}),this.hasAfterControls()&&e.push(html`<th class="controls field-after-controls"></th>`),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;if(this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s)),0===e.length){const e=this.records.filter(e=>null!==e).length>0?this.filteredPlaceholder:this.placeholder;if(e)return[html`<tr class="placeholder"><td colspan="${this.getColumnCount()}">${e}</td></tr>`]}let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`));return null===i||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:i,count:r},bubbles:!0}))},0),o}renderRecordTemplate(e){const t=[];return this.enableSelection&&t.push(html`
         <td class="cell selection controls">
           <input
             type="checkbox"
@@ -192,4 +192,10 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
     :host(:not([bottom-controls])) #bottom {
       display: none;
     }
+    tr.placeholder td {
+      text-align: center;
+      color: var(--c_text__muted);
+      font-style: italic;
+      padding: var(--spacer);
+    }
   `;static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach(e=>{Object.keys(e).forEach(e=>s.add(e))}),[...s].map(e=>({name:e,label:toTitleCase(e)}))}static format(e){return(Array.isArray(e)?Table.formatters.array:Table.formatters[typeof e])(e)}static formatters={string:e=>e,number:e=>`${e}`,date:e=>e.toLocaleDateString(),boolean:e=>e?"True":"False",array:e=>e.map(e=>Table.format(e)).join(", "),undefined:e=>"",null:e=>"<code>null</code>"};static editors={string:e=>{const t=document.createElement("input");return t.value=e,t},number:e=>{const t=document.createElement("input");return t.type="number",t.value=e,t},date:e=>{const t=document.createElement("input");return t.type="date",t.value=e,t},boolean:e=>{const t=document.createElement("select");return t.innerHTML=`\n        <option value="true" ${e?"selected":""}>True</option>\n        <option value="false" ${e?"":"selected"}>False</option>\n      `,t.value=e,t},calculated:e=>{const t=document.createElement("input");return t.disabled=!0,t.value=e,t}}}window.customElements.define("k-table",Table);

package/docs/src/components/Toggle.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.disabled=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.disabled||this.toggle()};handleKeyDown=e=>{this.disabled||["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
       <div id="switch">
         <div id="handle"></div>
       </div>
@@ -26,6 +26,11 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       outline: none;
     }
 
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
     #switch {
       display: flex;
       align-items: center;

package/llm.txt

@@ -73,7 +73,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-sortable>` `<k-sortable-item>` | `Sortable.js` | Drag-to-reorder list | [sortable.html](https://dustinpoissant.github.io/kempo-ui/components/sortable.html) |
 | `<k-spinner>` | `Spinner.js` | Loading indicator; `size` (xs/sm/md/lg/xl), `variant` (spinner/dots/bar) | [spinner.html](https://dustinpoissant.github.io/kempo-ui/components/spinner.html) |
 | `<k-split>` | `Split.js` | Resizable split panes | [split.html](https://dustinpoissant.github.io/kempo-ui/components/split.html) |
-| `<k-table>` | `Table.js` | Data table with sorting, filtering, pagination, row selection, server sync | [table.html](https://dustinpoissant.github.io/kempo-ui/components/table.html) |
+| `<k-table>` | `Table.js` | Data table with sorting, filtering, pagination, row selection, server sync; `placeholder` (default "No Records") shown when empty; `filtered-placeholder` shown when all records are filtered/hidden | [table.html](https://dustinpoissant.github.io/kempo-ui/components/table.html) |
 | `<k-tabs>` `<k-tab>` `<k-tab-content>` `<k-tab-spacer>` | `Tabs.js` | Tabbed interface; `<k-tab for-content="id">` links to `<k-tab-content name="id">` | [tabs.html](https://dustinpoissant.github.io/kempo-ui/components/tabs.html) |
 | `<k-tags>` `<k-tag>` | `Tags.js` | Tag input; add/remove tags; fires `change` | [tags.html](https://dustinpoissant.github.io/kempo-ui/components/tags.html) |
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Table.js

@@ -19,6 +19,8 @@ export default class Table extends ShadowComponent {
     caseSensitiveFilters: { type: Boolean, reflect: true, converter: boolExists, attribute: 'case-sensitive-filters' },
     requestEdit: { type: Boolean, reflect: true, converter: boolExists, attribute: 'request-edit' },
     requestDelete: { type: Boolean, reflect: true, converter: boolExists, attribute: 'request-delete' },
+    placeholder: { type: String, reflect: true },
+    filteredPlaceholder: { type: String, reflect: true, attribute: 'filtered-placeholder' },
     fields: { type: Array },
     records: { type: Array },
     filters: { type: Array },
@@ -42,6 +44,8 @@ export default class Table extends ShadowComponent {
     if(this.fetchPending === undefined) this.fetchPending = false;
     if(this.requestEdit === undefined) this.requestEdit = false;
     if(this.requestDelete === undefined) this.requestDelete = false;
+    if(this.placeholder === undefined) this.placeholder = 'No Records';
+    if(this.filteredPlaceholder === undefined) this.filteredPlaceholder = '';
   }
 
   /*
@@ -88,7 +92,7 @@ export default class Table extends ShadowComponent {
     if(this.enableSelection) {
       const selectAllCheckbox = this.shadowRoot.getElementById('select-all');
       if(selectAllCheckbox) {
-        selectAllCheckbox.checked = this.allOnPageSelected();
+        selectAllCheckbox.checked = this.getDisplayedRecords().length > 0 && this.allOnPageSelected();
       }
     }
   }
@@ -163,6 +167,12 @@ export default class Table extends ShadowComponent {
       displayedRecords = displayedRecords.slice(start, end);
     }
     
+    if(displayedRecords.length === 0) {
+      const hasRecords = this.records.filter(r => r !== null).length > 0;
+      const message = hasRecords ? this.filteredPlaceholder : this.placeholder;
+      if(message) return [html`<tr class="placeholder"><td colspan="${this.getColumnCount()}">${message}</td></tr>`];
+    }
+
     let fetchStart = null;
     let fetchCount = 0;
     
@@ -1171,6 +1181,12 @@ export default class Table extends ShadowComponent {
     :host(:not([bottom-controls])) #bottom {
       display: none;
     }
+    tr.placeholder td {
+      text-align: center;
+      color: var(--c_text__muted);
+      font-style: italic;
+      padding: var(--spacer);
+    }
   `;
 
   /*

package/src/components/Toggle.js

@@ -3,12 +3,14 @@ import ShadowComponent from './ShadowComponent.js';
 
 export default class Toggle extends ShadowComponent {
   static properties = {
-    value: { type: Boolean, reflect: true }
+    value: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
     this.value = false;
+    this.disabled = false;
     this.tabIndex = 0;
   }
 
@@ -42,10 +44,12 @@ export default class Toggle extends ShadowComponent {
     Event Handlers
   */
   handleClick = () => {
+    if(this.disabled) return;
     this.toggle();
   };
 
   handleKeyDown = (event) => {
+    if(this.disabled) return;
     if (['Space', 'Enter'].includes(event.code)) {
       event.preventDefault();
       this.toggle();
@@ -120,6 +124,11 @@ export default class Toggle extends ShadowComponent {
       outline: none;
     }
 
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
     #switch {
       display: flex;
       align-items: center;

package/tests/components/Table.browser-test.js

@@ -1247,5 +1247,198 @@ export default {
 
 		cleanup(table);
 		pass('Field without editable property defaults to editable');
+	},
+
+	/*
+		Placeholder Tests
+	*/
+	'should default placeholder to "No Records"': async ({pass, fail}) => {
+		const table = await createTable();
+		if(table.placeholder !== 'No Records'){
+			cleanup(table);
+			fail(`placeholder should default to 'No Records', got '${table.placeholder}'`);
+			return;
+		}
+		cleanup(table);
+		pass('placeholder defaults to "No Records"');
+	},
+
+	'should default filteredPlaceholder to empty string': async ({pass, fail}) => {
+		const table = await createTable();
+		if(table.filteredPlaceholder !== ''){
+			cleanup(table);
+			fail(`filteredPlaceholder should default to empty string, got '${table.filteredPlaceholder}'`);
+			return;
+		}
+		cleanup(table);
+		pass('filteredPlaceholder defaults to empty string');
+	},
+
+	'should show placeholder row when records are empty': async ({pass, fail}) => {
+		const table = await createTable();
+		table.setData({
+			fields: [...sampleFields],
+			records: []
+		});
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(!placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should exist in shadow DOM when records are empty');
+			return;
+		}
+
+		if(!placeholderRow.textContent.includes('No Records')){
+			cleanup(table);
+			fail(`Placeholder row should contain default placeholder text, got '${placeholderRow.textContent}'`);
+			return;
+		}
+
+		cleanup(table);
+		pass('Placeholder row shown with default text when records are empty');
+	},
+
+	'should show custom placeholder text when set': async ({pass, fail}) => {
+		const table = await createTable();
+		table.placeholder = 'Nothing here.';
+		table.setData({
+			fields: [...sampleFields],
+			records: []
+		});
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(!placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should exist when records are empty');
+			return;
+		}
+
+		if(!placeholderRow.textContent.includes('Nothing here.')){
+			cleanup(table);
+			fail(`Placeholder row should contain custom text, got '${placeholderRow.textContent}'`);
+			return;
+		}
+
+		cleanup(table);
+		pass('Placeholder row shows custom placeholder text');
+	},
+
+	'should not show placeholder row when records exist': async ({pass, fail}) => {
+		const table = await createTable();
+		table.setData({
+			fields: [...sampleFields],
+			records: [...sampleRecords]
+		});
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should not exist when records are present');
+			return;
+		}
+
+		cleanup(table);
+		pass('Placeholder row not shown when records exist');
+	},
+
+	'should not show placeholder row when placeholder is empty string': async ({pass, fail}) => {
+		const table = await createTable();
+		table.placeholder = '';
+		table.setData({
+			fields: [...sampleFields],
+			records: []
+		});
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should not exist when placeholder is empty string');
+			return;
+		}
+
+		cleanup(table);
+		pass('Placeholder row not shown when placeholder is empty string');
+	},
+
+	'should show filteredPlaceholder after all records are filtered out': async ({pass, fail}) => {
+		const table = await createTable();
+		table.filteredPlaceholder = 'No results match your filter.';
+		table.setData({
+			fields: [...sampleFields],
+			records: [...sampleRecords]
+		});
+		await table.updateComplete;
+
+		table.addFilter('city', 'equals', 'Nonexistent City');
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(!placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should appear after all records are filtered out');
+			return;
+		}
+
+		if(!placeholderRow.textContent.includes('No results match your filter.')){
+			cleanup(table);
+			fail(`Placeholder should show filteredPlaceholder text, got '${placeholderRow.textContent}'`);
+			return;
+		}
+
+		cleanup(table);
+		pass('filteredPlaceholder shown after all records filtered out');
+	},
+
+	'should not show placeholder when filtered and filteredPlaceholder is not set': async ({pass, fail}) => {
+		const table = await createTable();
+		table.setData({
+			fields: [...sampleFields],
+			records: [...sampleRecords]
+		});
+		await table.updateComplete;
+
+		table.addFilter('city', 'equals', 'Nonexistent City');
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should not appear when filteredPlaceholder is empty and records are filtered');
+			return;
+		}
+
+		cleanup(table);
+		pass('No placeholder shown when filteredPlaceholder is not set and records are filtered');
+	},
+
+	'should show placeholder (not filteredPlaceholder) when records array is empty': async ({pass, fail}) => {
+		const table = await createTable();
+		table.placeholder = 'No Records';
+		table.filteredPlaceholder = 'No matches.';
+		table.setData({
+			fields: [...sampleFields],
+			records: []
+		});
+		await table.updateComplete;
+
+		const placeholderRow = table.shadowRoot.querySelector('tr.placeholder');
+		if(!placeholderRow){
+			cleanup(table);
+			fail('Placeholder row should exist when records are empty');
+			return;
+		}
+
+		if(!placeholderRow.textContent.includes('No Records')){
+			cleanup(table);
+			fail(`Should use placeholder text, not filteredPlaceholder, got '${placeholderRow.textContent}'`);
+			return;
+		}
+
+		cleanup(table);
+		pass('placeholder used (not filteredPlaceholder) when records array is empty');
 	}
 };

package/tests/components/Toggle.browser-test.js

@@ -584,5 +584,67 @@ export default {
 		toggle.remove();
 		cleanup(container);
 		pass('Handles disconnection and reconnection');
+	},
+
+	/*
+		Disabled
+	*/
+	'disabled should default to false': async ({pass, fail}) => {
+		const { container, toggle } = await createToggle();
+		if(toggle.disabled !== false){
+			cleanup(container);
+			return fail(`Expected disabled to be false, got ${toggle.disabled}`);
+		}
+		cleanup(container);
+		pass('disabled defaults to false');
+	},
+
+	'should reflect disabled attribute': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-toggle disabled></k-toggle>';
+		document.body.appendChild(container);
+		const toggle = container.querySelector('k-toggle');
+		await toggle.updateComplete;
+		if(!toggle.hasAttribute('disabled')){
+			cleanup(container);
+			return fail('Toggle should have disabled attribute');
+		}
+		if(toggle.disabled !== true){
+			cleanup(container);
+			return fail(`Expected disabled property to be true, got ${toggle.disabled}`);
+		}
+		cleanup(container);
+		pass('disabled attribute reflects correctly');
+	},
+
+	'click should not change value when disabled': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-toggle disabled></k-toggle>';
+		document.body.appendChild(container);
+		const toggle = container.querySelector('k-toggle');
+		await toggle.updateComplete;
+		toggle.click();
+		if(toggle.value !== false){
+			cleanup(container);
+			return fail(`Expected value to remain false after click when disabled, got ${toggle.value}`);
+		}
+		cleanup(container);
+		pass('Click does not change value when disabled');
+	},
+
+	'keydown should not change value when disabled': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-toggle disabled></k-toggle>';
+		document.body.appendChild(container);
+		const toggle = container.querySelector('k-toggle');
+		await toggle.updateComplete;
+		const event = new KeyboardEvent('keydown', { code: 'Space', bubbles: true });
+		toggle.dispatchEvent(event);
+		if(toggle.value !== false){
+			cleanup(container);
+			return fail(`Expected value to remain false after Space key when disabled, got ${toggle.value}`);
+		}
+		cleanup(container);
+		pass('Keydown does not change value when disabled');
 	}
 };