kempo-ui 0.4.20 → 0.4.21

package/docs/components/tableServerSync.html

@@ -557,16 +557,16 @@
       Toasts are used to notify the user of success or failure.
     </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">serverSyncExample</span> <span class="hljs-attr">enable-selection</span> <span class="hljs-attr">request-edit</span> <span class="hljs-attr">request-delete</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-selected</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-selected</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">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;/src/components/Toast.js&#x27;</span>;<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-keyword">const</span> table = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;serverSyncExample&#x27;</span>);<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">mockServer</span> = (<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() &lt; <span class="hljs-number">0.8</span> ? <span class="hljs-title function_">resolve</span>() : <span class="hljs-title function_">reject</span>();<br>    }, <span class="hljs-number">1000</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">2000</span>);<br>  });<br>  table.<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: contacts,<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">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>      <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;phoneNumber&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Phone Number&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;gender&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Gender&#x27;</span>,<br>      <span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">v</span> =&gt;</span> v === <span class="hljs-string">&#x27;m&#x27;</span> ? <span class="hljs-string">&#x27;Male&#x27;</span> : <span class="hljs-string">&#x27;Female&#x27;</span><br>    }]<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestSave&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;Record saved.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Save failed. The record remains open for editing.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestDelete&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      records,<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">const</span> count = records.<span class="hljs-property">length</span>;<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(count === <span class="hljs-number">1</span> ? <span class="hljs-string">&#x27;1 record deleted.&#x27;</span> : count + <span class="hljs-string">&#x27; records deleted.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Delete failed. Please try again.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <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">serverSyncExample</span> <span class="hljs-attr">enable-selection</span> <span class="hljs-attr">request-edit</span> <span class="hljs-attr">request-delete</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-edit</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-delete-record</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-delete-selected</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-delete-selected</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">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;/src/components/Toast.js&#x27;</span>;<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-keyword">const</span> table = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;serverSyncExample&#x27;</span>);<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">mockServer</span> = (<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() &lt; <span class="hljs-number">0.8</span> ? <span class="hljs-title function_">resolve</span>() : <span class="hljs-title function_">reject</span>();<br>    }, <span class="hljs-number">1000</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">2000</span>);<br>  });<br>  table.<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: contacts,<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">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>      <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;phoneNumber&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Phone Number&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;gender&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Gender&#x27;</span>,<br>      <span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">v</span> =&gt;</span> v === <span class="hljs-string">&#x27;m&#x27;</span> ? <span class="hljs-string">&#x27;Male&#x27;</span> : <span class="hljs-string">&#x27;Female&#x27;</span><br>    }]<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestSave&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;Record saved.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Save failed. The record remains open for editing.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestDelete&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      records,<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">const</span> count = records.<span class="hljs-property">length</span>;<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(count === <span class="hljs-number">1</span> ? <span class="hljs-string">&#x27;1 record deleted.&#x27;</span> : count + <span class="hljs-string">&#x27; records deleted.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Delete failed. Please try again.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="serverSyncExample"
       enable-selection
       request-edit
       request-delete
     >
-      <k-tc-edit slot="after"></k-tc-edit>
-      <k-tc-delete-record slot="after"></k-tc-delete-record>
-      <k-tc-delete-selected slot="top"></k-tc-delete-selected>
+      <kc-tc-edit slot="after"></kc-tc-edit>
+      <kc-tc-delete-record slot="after"></kc-tc-delete-record>
+      <kc-tc-delete-selected slot="top"></kc-tc-delete-selected>
     </k-table>
     <script type="module">
       import Toast from '../src/components/Toast.js';
@@ -619,9 +619,9 @@
   <script type="module" src="../src/components/Main.js"></script>
   
     <script type="module" src="../src/components/Table.js"></script>
-    <script type="module" src="../src/components/tableControls/Edit.js"></script>
-    <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
-    <script type="module" src="../src/components/tableControls/DeleteSelected.js"></script>
+    <script type="module" src="../src/components/controls/TcEdit.js"></script>
+    <script type="module" src="../src/components/controls/TcDeleteRecord.js"></script>
+    <script type="module" src="../src/components/controls/TcDeleteSelected.js"></script>
     <script type="module" src="../src/components/Toast.js"></script>
   
 </body>

package/docs/src/components/Chat.js

@@ -1,4 +1,4 @@
-import{html as e,css as t,nothing as s}from"../lit-all.min.js";import i from"./ShadowComponent.js";import o from"../utils/sanitizeHtml.js";import a from"../utils/renderMarkdown.js";import"./MarkdownEditor.js";import"./markdownEditorControls/Bold.js";import"./markdownEditorControls/Italic.js";import"./markdownEditorControls/Code.js";import"./markdownEditorControls/Link.js";import"./markdownEditorControls/BulletList.js";import"./markdownEditorControls/NumberedList.js";import"./markdownEditorControls/Quote.js";import"./Spinner.js";import"./Icon.js";const r=new Set(["sending","delivered","read","failed"]);export default class n extends i{static properties={enterNewline:{type:Boolean,reflect:!0,attribute:"enter-newline"},showStatus:{type:String,reflect:!0,attribute:"show-status"},placeholder:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},messages:{state:!0}};constructor(){super(),this.enterNewline=!1,this.showStatus=null,this.placeholder="Type a message...",this.disabled=!1,this.messages=[]}updated(e){super.updated(e),e.has("messages")&&this.#e()}addMessage(e={}){const t="outgoing"===e.type?"outgoing":"incoming",s=e.id||("undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`msg-${Date.now()}-${Math.random().toString(36).slice(2,10)}`),i={id:s,type:t,html:o(e.html||""),status:r.has(e.status)?e.status:"outgoing"===t?"delivered":"read",sender:e.sender||"",timestamp:e.timestamp instanceof Date?e.timestamp:new Date};return this.messages=[...this.messages,i],s}updateMessage(e,t={}){let s=!1;return this.messages=this.messages.map(i=>{if(i.id!==e)return i;s=!0;const a={...i};return void 0!==t.html&&(a.html=o(t.html)),void 0!==t.status&&r.has(t.status)&&(a.status=t.status),void 0!==t.sender&&(a.sender=t.sender),t.timestamp instanceof Date&&(a.timestamp=t.timestamp),a}),s}removeMessage(e){const t=this.messages.length;return this.messages=this.messages.filter(t=>t.id!==e),this.messages.length!==t}clear(){this.messages=[]}send(){if(this.disabled)return null;const e=this.shadowRoot?.querySelector("k-markdown-editor");if(!e)return null;const t=(e.value||"").trim();if(!t)return null;const s=o(a(t,{breaks:!0})),i=this.addMessage({type:"outgoing",html:s,status:this.#t?"sending":"delivered"});return e.clear(),this.dispatchEvent(new CustomEvent("send",{detail:{id:i,html:s,markdown:t},bubbles:!0})),i}handleSendClick=()=>this.send();handleEditorKeydown=e=>{if(this.disabled)return;if("Enter"!==e.key||e.ctrlKey||e.metaKey||e.altKey)return;(this.enterNewline?e.shiftKey:!e.shiftKey)&&(e.preventDefault(),this.send())};#e=()=>{this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector(".window");e&&(e.scrollTop=e.scrollHeight)})};get#s(){for(let e=this.messages.length-1;e>=0;e--)if("outgoing"===this.messages[e].type)return this.messages[e].id;return null}get#t(){return null!=this.showStatus&&"false"!==this.showStatus}get#i(){return"icons"===this.showStatus?"icons":"text"}#o(e,t){return!!this.#t&&("outgoing"===e.type&&("sending"===e.status||"failed"===e.status||e.id===t))}#a(e){return"icons"===this.#i?this.#r(e):this.#n(e)}#n(t){return"sending"===t?e`<span class="status sending"><k-spinner size="xs"></k-spinner> Sending&hellip;</span>`:"delivered"===t?e`<span class="status">Delivered</span>`:"read"===t?e`<span class="status">Read</span>`:"failed"===t?e`<span class="status failed"><k-icon name="error"></k-icon> Not Delivered</span>`:s}#r(t){return"sending"===t?e`<span class="status status-icon-only"><k-spinner size="xs" title="Sending"></k-spinner></span>`:"delivered"===t?e`<span class="status status-icon-only"><k-icon name="check" title="Delivered"></k-icon></span>`:"read"===t?e`<span class="status status-icon-only"><k-icon name="done_all" title="Read"></k-icon></span>`:"failed"===t?e`<span class="status status-icon-only failed"><k-icon name="error" title="Not Delivered"></k-icon></span>`:s}#d(t,i){const o=this.#o(t,i);return e`
+import{html as e,css as t,nothing as s}from"../lit-all.min.js";import i from"./ShadowComponent.js";import a from"../utils/sanitizeHtml.js";import n from"../utils/renderMarkdown.js";import"./MarkdownEditor.js";import"./controls/Bold.js";import"./controls/Italic.js";import"./controls/InlineCode.js";import"./controls/MdLink.js";import"./controls/BulletList.js";import"./controls/NumberList.js";import"./controls/Quote.js";import"./Spinner.js";import"./Icon.js";const o=new Set(["sending","delivered","read","failed"]);export default class r extends i{static properties={enterNewline:{type:Boolean,reflect:!0,attribute:"enter-newline"},showStatus:{type:String,reflect:!0,attribute:"show-status"},placeholder:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},messages:{state:!0}};constructor(){super(),this.enterNewline=!1,this.showStatus=null,this.placeholder="Type a message...",this.disabled=!1,this.messages=[]}updated(e){super.updated(e),e.has("messages")&&this.#e()}addMessage(e={}){const t="outgoing"===e.type?"outgoing":"incoming",s=e.id||("undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`msg-${Date.now()}-${Math.random().toString(36).slice(2,10)}`),i={id:s,type:t,html:a(e.html||""),status:o.has(e.status)?e.status:"outgoing"===t?"delivered":"read",sender:e.sender||"",timestamp:e.timestamp instanceof Date?e.timestamp:new Date};return this.messages=[...this.messages,i],s}updateMessage(e,t={}){let s=!1;return this.messages=this.messages.map(i=>{if(i.id!==e)return i;s=!0;const n={...i};return void 0!==t.html&&(n.html=a(t.html)),void 0!==t.status&&o.has(t.status)&&(n.status=t.status),void 0!==t.sender&&(n.sender=t.sender),t.timestamp instanceof Date&&(n.timestamp=t.timestamp),n}),s}removeMessage(e){const t=this.messages.length;return this.messages=this.messages.filter(t=>t.id!==e),this.messages.length!==t}clear(){this.messages=[]}send(){if(this.disabled)return null;const e=this.shadowRoot?.querySelector("k-markdown-editor");if(!e)return null;const t=(e.value||"").trim();if(!t)return null;const s=a(n(t,{breaks:!0})),i=this.addMessage({type:"outgoing",html:s,status:this.#t?"sending":"delivered"});return e.clear(),this.dispatchEvent(new CustomEvent("send",{detail:{id:i,html:s,markdown:t},bubbles:!0})),i}handleSendClick=()=>this.send();handleEditorKeydown=e=>{if(this.disabled)return;if("Enter"!==e.key||e.ctrlKey||e.metaKey||e.altKey)return;(this.enterNewline?e.shiftKey:!e.shiftKey)&&(e.preventDefault(),this.send())};#e=()=>{this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector(".window");e&&(e.scrollTop=e.scrollHeight)})};get#s(){for(let e=this.messages.length-1;e>=0;e--)if("outgoing"===this.messages[e].type)return this.messages[e].id;return null}get#t(){return null!=this.showStatus&&"false"!==this.showStatus}get#i(){return"icons"===this.showStatus?"icons":"text"}#a(e,t){return!!this.#t&&("outgoing"===e.type&&("sending"===e.status||"failed"===e.status||e.id===t))}#n(e){return"icons"===this.#i?this.#o(e):this.#r(e)}#r(t){return"sending"===t?e`<span class="status sending"><k-spinner size="xs"></k-spinner> Sending&hellip;</span>`:"delivered"===t?e`<span class="status">Delivered</span>`:"read"===t?e`<span class="status">Read</span>`:"failed"===t?e`<span class="status failed"><k-icon name="error"></k-icon> Not Delivered</span>`:s}#o(t){return"sending"===t?e`<span class="status status-icon-only"><k-spinner size="xs" title="Sending"></k-spinner></span>`:"delivered"===t?e`<span class="status status-icon-only"><k-icon name="check" title="Delivered"></k-icon></span>`:"read"===t?e`<span class="status status-icon-only"><k-icon name="done_all" title="Read"></k-icon></span>`:"failed"===t?e`<span class="status status-icon-only failed"><k-icon name="error" title="Not Delivered"></k-icon></span>`:s}#d(t,i){const a=this.#a(t,i);return e`
       <div
         class="message ${t.type} ${t.status}"
         data-id=${t.id}
@@ -7,7 +7,7 @@ import{html as e,css as t,nothing as s}from"../lit-all.min.js";import i from"./S
         <div class="bubble">
           <div class="content" .innerHTML=${t.html}></div>
         </div>
-        ${o?this.#a(t.status):s}
+        ${a?this.#n(t.status):s}
       </div>
     `}render(){const t=this.#s;return e`
       <div class="window" role="log" aria-live="polite">
@@ -22,13 +22,13 @@ import{html as e,css as t,nothing as s}from"../lit-all.min.js";import i from"./S
         >
           <div slot="controls-top" class="controls-top">
             <slot name="controls-top">
-              <k-md-bold></k-md-bold>
-              <k-md-italic></k-md-italic>
-              <k-md-code></k-md-code>
-              <k-md-link></k-md-link>
-              <k-md-bullet-list></k-md-bullet-list>
-              <k-md-numbered-list></k-md-numbered-list>
-              <k-md-quote></k-md-quote>
+              <kc-bold></kc-bold>
+              <kc-italic></kc-italic>
+              <kc-inline-code></kc-inline-code>
+              <kc-md-link></kc-md-link>
+              <kc-bullet-list></kc-bullet-list>
+              <kc-number-list></kc-number-list>
+              <kc-quote></kc-quote>
             </slot>
           </div>
           <div slot="controls-bottom" class="controls-bottom">
@@ -198,4 +198,4 @@ import{html as e,css as t,nothing as s}from"../lit-all.min.js";import i from"./S
       cursor: not-allowed;
       opacity: 0.5;
     }
-  `}customElements.define("k-chat",n);
+  `}customElements.define("k-chat",r);

package/docs/src/components/CodeEditor.js

@@ -1,23 +1,23 @@
-import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponent.js";import i from"../utils/formatCode.js";import{getCalculatedTheme as s,subscribeToTheme as a}from"../utils/theme.js";export default class r extends o{static formAssociated=!0;static properties={name:{type:String,reflect:!0},value:{type:String,reflect:!0},language:{type:String,reflect:!0},monacoSrc:{type:String,attribute:"monaco-src"},controls:{type:String,reflect:!0},editorTheme:{type:String,attribute:"editor-theme",reflect:!0},hasTopToolbar:{type:Boolean,state:!0},hasBottomToolbar:{type:Boolean,state:!0},fullscreen:{type:Boolean,reflect:!0},wordWrap:{type:Boolean},minimapEnabled:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0}};constructor(){super(),this.internals=this.attachInternals(),this.name="",this.value="",this.language="javascript",this.monacoSrc="",this.controls="",this.hasTopToolbar=!1,this.hasBottomToolbar=!1,this.monacoEditor=null,this.skipValueSync=!1,this.editorTheme="auto",this.wordWrap=!0,this.minimapEnabled=!1,this.fontSize=14,this.fullscreen=!1,this.disabled=!1,this.readonly=!1,this.required=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")&&(this.value=this.getAttribute("value")),this.slotObserver=new MutationObserver(()=>this.updateToolbarVisibility()),this.slotObserver.observe(this,{childList:!0,subtree:!0}),this.updateToolbarVisibility()}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.monacoEditor?.dispose(),this.unsubscribeTheme?.(),this.fullscreen&&this.exitFullscreen()}updateToolbarVisibility(){const t=new Set(Array.from(this.children).map(t=>t.getAttribute("slot"))),e=this.constructor.controlSets[this.controls]??null;this.hasTopToolbar=!(!e?.topLeft&&!e?.topRight)||["toolbar-top","toolbar-top-left","toolbar-top-right"].some(e=>t.has(e)),this.hasBottomToolbar=!(!e?.bottomLeft&&!e?.bottomRight)||["toolbar-bottom","toolbar-bottom-left","toolbar-bottom-right"].some(e=>t.has(e))}updated(t){if(super.updated(t),t.has("controls")&&(this.updateToolbarVisibility(),this.controls&&"none"!==this.controls&&this.loadControls()),t.has("value")&&!this.skipValueSync&&(this.monacoEditor&&this.monacoEditor.getValue()!==this.value&&this.monacoEditor.setValue(this.value),this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))),t.has("language")&&this.monacoEditor){const t=this.monacoEditor.getModel();t&&window.monaco.editor.setModelLanguage(t,this.language),this.dispatchEvent(new CustomEvent("language-changed",{detail:{language:this.language},bubbles:!0}))}t.has("editorTheme")&&this.monacoEditor&&(window.monaco.editor.setTheme(this.resolveMonacoTheme()),this.dispatchEvent(new CustomEvent("editor-theme-changed",{detail:{editorTheme:this.editorTheme},bubbles:!0}))),t.has("wordWrap")&&(this.monacoEditor?.updateOptions({wordWrap:this.wordWrap?"on":"off"}),this.dispatchEvent(new CustomEvent("word-wrap-changed",{detail:{wordWrap:this.wordWrap},bubbles:!0}))),t.has("minimapEnabled")&&(this.monacoEditor?.updateOptions({minimap:{enabled:this.minimapEnabled}}),this.dispatchEvent(new CustomEvent("minimap-changed",{detail:{minimapEnabled:this.minimapEnabled},bubbles:!0}))),t.has("fullscreen")&&(this.fullscreen||this.monacoEditor?.layout({width:0,height:0}),requestAnimationFrame(()=>this.monacoEditor?.layout())),(t.has("disabled")||t.has("readonly"))&&this.monacoEditor?.updateOptions({readOnly:this.disabled||this.readonly}),(t.has("value")||t.has("required")||t.has("disabled"))&&this.#t()}#t=()=>{this.disabled?this.internals.setValidity({}):this.required&&!(this.getValue()||"").trim()?this.internals.setValidity({valueMissing:!0},"Please fill out this field.",this.monacoContainer||this):this.internals.setValidity({})};async firstUpdated(){this.monacoContainer=this.shadowRoot.querySelector(".monaco-editor-container"),await this.initMonaco(),this.dispatchEvent(new CustomEvent("ready",{detail:{value:this.value},bubbles:!0}))}loadControls(){const t=this.constructor.controlModules[this.controls];if(!t?.length)return;const e=this.constructor.loadedModules,o=new URL("./codeEditorControls/",import.meta.url).href;t.filter(t=>!e.has(t)).forEach(t=>{e.add(t),import(`${o}${t}.js`)})}async initMonaco(){if(!this.monacoEditor){if(this.monacoInitPromise)return this.monacoInitPromise;this.monacoInitPromise=this._initMonaco(),await this.monacoInitPromise,this.monacoInitPromise=null}}async _initMonaco(){const t=this.monacoSrc||window.kempo?.monacoUrl||"https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min";await new Promise((e,o)=>{if(window.monaco)return void e();if(window.require?.defined?.("vs/editor/editor.main"))return void e();const i=document.querySelector(`script[src="${t}/vs/loader.js"]`);if(i)return void i.addEventListener("load",()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)});const s=document.createElement("script");s.src=`${t}/vs/loader.js`,s.onload=()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)},s.onerror=o,document.head.appendChild(s)}),this.monacoEditor=window.monaco.editor.create(this.monacoContainer,{value:this.value,language:this.language,theme:this.resolveMonacoTheme(),minimap:{enabled:!1},wordWrap:"on",fontSize:14,scrollBeyondLastLine:!1,automaticLayout:!0,tabSize:2,padding:{top:8},readOnly:this.disabled||this.readonly});const e=document.querySelector('link[href*="monaco"][href*="editor.main.css"]');if(e){const t=document.createElement("link");t.rel="stylesheet",t.href=e.href,this.shadowRoot.appendChild(t)}this.unsubscribeTheme=a(()=>{this.monacoEditor&&"auto"===this.editorTheme&&window.monaco.editor.setTheme(this.resolveMonacoTheme())}),this.monacoEditor.onDidChangeModelContent(()=>{this.skipValueSync=!0,this.value=this.monacoEditor.getValue(),this.skipValueSync=!1,this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0}))})}updateFormValue(){this.internals.setFormValue(this.getValue())}formResetCallback(){this.value=""}formStateRestoreCallback(t){this.value=t}formDisabledCallback(t){this.disabled=t}getValue(){return this.monacoEditor?this.monacoEditor.getValue():this.value}setValue(t){return this.skipValueSync=!0,this.value=t,this.monacoEditor&&this.monacoEditor.setValue(t),this.updateFormValue(),this.skipValueSync=!1,this}clear(){return this.setValue("")}formatCode(){return this.monacoEditor?.getAction("editor.action.formatDocument")?.run(),this}selectAll(){if(!this.monacoEditor)return this;const t=this.monacoEditor.getModel();return t&&this.monacoEditor.setSelection(t.getFullModelRange()),this}getSelectedText(){return this.monacoEditor&&this.monacoEditor.getModel()?.getValueInRange(this.monacoEditor.getSelection())||""}focus(){return this.monacoEditor?.focus(),this}setLanguage(t){return this.language=t,this}setEditorTheme(t){return["auto","light","dark"].includes(t)&&(this.editorTheme=t),this}copyToClipboard(){return navigator.clipboard.writeText(this.getValue()),this}undo(){return this.monacoEditor?.trigger("toolbar","undo"),this}redo(){return this.monacoEditor?.trigger("toolbar","redo"),this}setWordWrap(t){return this.wordWrap=t,this}setMinimap(t){return this.minimapEnabled=t,this}toggleWordWrap(){return this.setWordWrap(!this.wordWrap)}toggleMinimap(){return this.setMinimap(!this.minimapEnabled)}openFind(){return this.monacoEditor?.getAction("actions.find")?.run(),this}increaseFontSize(){return this.fontSize=Math.min(this.fontSize+2,40),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}decreaseFontSize(){return this.fontSize=Math.max(this.fontSize-2,8),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}foldAll(){return this.monacoEditor?.getAction("editor.foldAll")?.run(),this}unfoldAll(){return this.monacoEditor?.getAction("editor.unfoldAll")?.run(),this}enterFullscreen(){return this.fullscreen=!0,document.body.classList.add("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!0},bubbles:!0})),this}exitFullscreen(){return this.fullscreen=!1,document.body.classList.remove("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!1},bubbles:!0})),this}toggleFullscreen(){return this.fullscreen?this.exitFullscreen():this.enterFullscreen()}resolveMonacoTheme(){return"dark"===this.editorTheme?"vs-dark":"light"===this.editorTheme?"vs":"dark"===s()?"vs-dark":"vs"}static loadedModules=new Set;static controlModules={full:["FormatCode","CopyCode","EditorTheme","Undo","Redo","WordWrap","Minimap","FindReplace","FontSize","FoldAll","LanguageSelect","Fullscreen","ControlGroup","ControlSpacer"]};static controlSets={full:{topLeft:t`
-				<k-cec-group>
-					<k-cec-undo></k-cec-undo>
-					<k-cec-redo></k-cec-redo>
-				</k-cec-group>
-				<k-cec-group>
-					<k-cec-format-code></k-cec-format-code>
-					<k-cec-copy-code></k-cec-copy-code>
-					<k-cec-find-replace></k-cec-find-replace>
-				</k-cec-group>
-				<k-cec-group>
-					<k-cec-word-wrap></k-cec-word-wrap>
-					<k-cec-minimap></k-cec-minimap>
-					<k-cec-fold-all></k-cec-fold-all>
-				</k-cec-group>
-				<k-cec-font-size></k-cec-font-size>
+import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponent.js";import i from"../utils/formatCode.js";import{getCalculatedTheme as s,subscribeToTheme as a}from"../utils/theme.js";import r from"./controls/Control.js";export default class n extends o{static formAssociated=!0;static properties={name:{type:String,reflect:!0},value:{type:String,reflect:!0},language:{type:String,reflect:!0},monacoSrc:{type:String,attribute:"monaco-src"},controls:{type:String,reflect:!0},editorTheme:{type:String,attribute:"editor-theme",reflect:!0},hasTopToolbar:{type:Boolean,state:!0},hasBottomToolbar:{type:Boolean,state:!0},fullscreen:{type:Boolean,reflect:!0},wordWrap:{type:Boolean},minimapEnabled:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0}};constructor(){super(),this.internals=this.attachInternals(),this.name="",this.value="",this.language="javascript",this.monacoSrc="",this.controls="",this.hasTopToolbar=!1,this.hasBottomToolbar=!1,this.monacoEditor=null,this.skipValueSync=!1,this.editorTheme="auto",this.wordWrap=!0,this.minimapEnabled=!1,this.fontSize=14,this.fullscreen=!1,this.disabled=!1,this.readonly=!1,this.required=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("controlled")||this.setAttribute("controlled",""),this.hasAttribute("value")&&(this.value=this.getAttribute("value")),this.slotObserver=new MutationObserver(()=>this.updateToolbarVisibility()),this.slotObserver.observe(this,{childList:!0,subtree:!0}),this.updateToolbarVisibility()}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.monacoEditor?.dispose(),this.unsubscribeTheme?.(),this.fullscreen&&this.exitFullscreen()}updateToolbarVisibility(){const t=new Set(Array.from(this.children).map(t=>t.getAttribute("slot"))),e=this.constructor.controlSets[this.controls]??null;this.hasTopToolbar=!(!e?.topLeft&&!e?.topRight)||["toolbar-top","toolbar-top-left","toolbar-top-right"].some(e=>t.has(e)),this.hasBottomToolbar=!(!e?.bottomLeft&&!e?.bottomRight)||["toolbar-bottom","toolbar-bottom-left","toolbar-bottom-right"].some(e=>t.has(e))}updated(t){if(super.updated(t),t.has("controls")&&(this.updateToolbarVisibility(),this.controls&&"none"!==this.controls&&this.loadControls()),t.has("value")&&!this.skipValueSync&&(this.monacoEditor&&this.monacoEditor.getValue()!==this.value&&this.monacoEditor.setValue(this.value),this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))),t.has("language")&&this.monacoEditor){const t=this.monacoEditor.getModel();t&&window.monaco.editor.setModelLanguage(t,this.language),this.dispatchEvent(new CustomEvent("language-changed",{detail:{language:this.language},bubbles:!0}))}t.has("editorTheme")&&this.monacoEditor&&(window.monaco.editor.setTheme(this.resolveMonacoTheme()),this.dispatchEvent(new CustomEvent("editor-theme-changed",{detail:{editorTheme:this.editorTheme},bubbles:!0}))),t.has("wordWrap")&&(this.monacoEditor?.updateOptions({wordWrap:this.wordWrap?"on":"off"}),this.dispatchEvent(new CustomEvent("word-wrap-changed",{detail:{wordWrap:this.wordWrap},bubbles:!0}))),t.has("minimapEnabled")&&(this.monacoEditor?.updateOptions({minimap:{enabled:this.minimapEnabled}}),this.dispatchEvent(new CustomEvent("minimap-changed",{detail:{minimapEnabled:this.minimapEnabled},bubbles:!0}))),t.has("fullscreen")&&(this.fullscreen||this.monacoEditor?.layout({width:0,height:0}),requestAnimationFrame(()=>this.monacoEditor?.layout())),(t.has("disabled")||t.has("readonly"))&&this.monacoEditor?.updateOptions({readOnly:this.disabled||this.readonly}),(t.has("value")||t.has("required")||t.has("disabled"))&&this.#t()}#t=()=>{this.disabled?this.internals.setValidity({}):this.required&&!(this.getValue()||"").trim()?this.internals.setValidity({valueMissing:!0},"Please fill out this field.",this.monacoContainer||this):this.internals.setValidity({})};async firstUpdated(){this.monacoContainer=this.shadowRoot.querySelector(".monaco-editor-container"),await this.initMonaco(),this.dispatchEvent(new CustomEvent("ready",{detail:{value:this.value},bubbles:!0}))}loadControls(){const t=this.constructor.controlSets[this.controls];t&&r.load(Object.values(t))}async initMonaco(){if(!this.monacoEditor){if(this.monacoInitPromise)return this.monacoInitPromise;this.monacoInitPromise=this._initMonaco(),await this.monacoInitPromise,this.monacoInitPromise=null}}async _initMonaco(){const t=this.monacoSrc||window.kempo?.monacoUrl||"https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min";await new Promise((e,o)=>{if(window.monaco)return void e();if(window.require?.defined?.("vs/editor/editor.main"))return void e();const i=document.querySelector(`script[src="${t}/vs/loader.js"]`);if(i)return void i.addEventListener("load",()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)});const s=document.createElement("script");s.src=`${t}/vs/loader.js`,s.onload=()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)},s.onerror=o,document.head.appendChild(s)}),this.monacoEditor=window.monaco.editor.create(this.monacoContainer,{value:this.value,language:this.language,theme:this.resolveMonacoTheme(),minimap:{enabled:!1},wordWrap:"on",fontSize:14,scrollBeyondLastLine:!1,automaticLayout:!0,tabSize:2,padding:{top:8},readOnly:this.disabled||this.readonly});const e=document.querySelector('link[href*="monaco"][href*="editor.main.css"]');if(e){const t=document.createElement("link");t.rel="stylesheet",t.href=e.href,this.shadowRoot.appendChild(t)}this.unsubscribeTheme=a(()=>{this.monacoEditor&&"auto"===this.editorTheme&&window.monaco.editor.setTheme(this.resolveMonacoTheme())}),this.monacoEditor.onDidChangeModelContent(()=>{this.skipValueSync=!0,this.value=this.monacoEditor.getValue(),this.skipValueSync=!1,this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0}))})}updateFormValue(){this.internals.setFormValue(this.getValue())}formResetCallback(){this.value=""}formStateRestoreCallback(t){this.value=t}formDisabledCallback(t){this.disabled=t}getValue(){return this.monacoEditor?this.monacoEditor.getValue():this.value}setValue(t){return this.skipValueSync=!0,this.value=t,this.monacoEditor&&this.monacoEditor.setValue(t),this.updateFormValue(),this.skipValueSync=!1,this}clear(){return this.setValue("")}formatCode(){return this.monacoEditor?.getAction("editor.action.formatDocument")?.run(),this}selectAll(){if(!this.monacoEditor)return this;const t=this.monacoEditor.getModel();return t&&this.monacoEditor.setSelection(t.getFullModelRange()),this}getSelectedText(){return this.monacoEditor&&this.monacoEditor.getModel()?.getValueInRange(this.monacoEditor.getSelection())||""}focus(){return this.monacoEditor?.focus(),this}setLanguage(t){return this.language=t,this}setEditorTheme(t){return["auto","light","dark"].includes(t)&&(this.editorTheme=t),this}copyToClipboard(){return navigator.clipboard.writeText(this.getValue()),this}undo(){return this.monacoEditor?.trigger("toolbar","undo"),this}redo(){return this.monacoEditor?.trigger("toolbar","redo"),this}setWordWrap(t){return this.wordWrap=t,this}setMinimap(t){return this.minimapEnabled=t,this}toggleWordWrap(){return this.setWordWrap(!this.wordWrap)}toggleMinimap(){return this.setMinimap(!this.minimapEnabled)}openFind(){return this.monacoEditor?.getAction("actions.find")?.run(),this}increaseFontSize(){return this.fontSize=Math.min(this.fontSize+2,40),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}decreaseFontSize(){return this.fontSize=Math.max(this.fontSize-2,8),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}foldAll(){return this.monacoEditor?.getAction("editor.foldAll")?.run(),this}unfoldAll(){return this.monacoEditor?.getAction("editor.unfoldAll")?.run(),this}enterFullscreen(){return this.fullscreen=!0,document.body.classList.add("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!0},bubbles:!0})),this}exitFullscreen(){return this.fullscreen=!1,document.body.classList.remove("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!1},bubbles:!0})),this}toggleFullscreen(){return this.fullscreen?this.exitFullscreen():this.enterFullscreen()}resolveMonacoTheme(){return"dark"===this.editorTheme?"vs-dark":"light"===this.editorTheme?"vs":"dark"===s()?"vs-dark":"vs"}static controlSets={full:{topLeft:t`
+				<k-control-group>
+					<kc-undo></kc-undo>
+					<kc-redo></kc-redo>
+				</k-control-group>
+				<k-control-group>
+					<kc-format-code></kc-format-code>
+					<kc-copy-code></kc-copy-code>
+					<kc-find-replace></kc-find-replace>
+				</k-control-group>
+				<k-control-group>
+					<kc-word-wrap></kc-word-wrap>
+					<kc-minimap></kc-minimap>
+					<kc-fold-all></kc-fold-all>
+				</k-control-group>
+				<kc-font-size></kc-font-size>
 			`,topRight:t`
-				<k-cec-language></k-cec-language>
-				<k-cec-editor-theme></k-cec-editor-theme>
-				<k-cec-fullscreen></k-cec-fullscreen>
+				<kc-language></kc-language>
+				<kc-editor-theme></kc-editor-theme>
+				<kc-fullscreen></kc-fullscreen>
 			`,bottomLeft:null,bottomRight:null}};static styles=e`
 		:host {
 			display: flex;
@@ -28,10 +28,9 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 		}
 		:host([fullscreen]) {
 			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100vw;
-			height: 100vh;
+			inset: 0;
+			width: auto;
+			height: auto;
 			z-index: 10000;
 		}
 		.toolbar-top,
@@ -112,4 +111,4 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 					</div>
 				</div>
 			`:""}
-		`}}customElements.define("k-code-editor",r);
+		`}}customElements.define("k-code-editor",n);

package/docs/src/components/ControlGroup.js

@@ -0,0 +1,17 @@
+import t from"./ShadowComponent.js";import{html as e,css as i}from"../lit-all.min.js";export default class s extends t{static properties={hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.hidden=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("class")||this.setAttribute("class","b r mq"),this.addEventListener("control_visibility_change",this.checkVisibility)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("control_visibility_change",this.checkVisibility)}checkVisibility=t=>{if(t.target===this)return;const e=this.hidden;this.hidden=Array.from(this.children).every(t=>!0===t.hidden),this.hidden!==e&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))};static styles=i`
+		:host {
+			display: inline-flex;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+		::slotted(*) {
+			border: 0;
+			border-right: 1px solid var(--c_border);
+			border-radius: 0;
+			margin: 0;
+		}
+		::slotted(*:last-child) {
+			border-right: 0;
+		}
+	`;render(){return e`<slot></slot>`}}customElements.define("k-control-group",s);