kempo-ui 0.3.7 → 0.3.8

package/docs/src/components/htmlEditorControls/BulletList.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class BulletList extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.unorderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.unorderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_list_bulleted"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-bullet-list",BulletList);
+		`}}customElements.define("k-hec-bullet-list",s);

package/docs/src/components/htmlEditorControls/CharacterCount.js

@@ -1,8 +1,8 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";export default class CharacterCount extends HtmlEditorControl{static properties={count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),this.editor&&(this.editor.addEventListener("ready",()=>{this.updateCount()}),this.editor.addEventListener("change",()=>{this.updateCount()}),setTimeout(()=>this.updateCount(),0))}updateCount=()=>{if(!this.editor)return;const t=(new DOMParser).parseFromString(this.editor.getValue(),"text/html").body.innerText||"";this.count=t.length};render(){return html`
+import t from"./HtmlEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";export default class s extends t{static properties={count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),this.editor&&(this.editor.addEventListener("ready",()=>{this.updateCount()}),this.editor.addEventListener("change",()=>{this.updateCount()}),setTimeout(()=>this.updateCount(),0))}updateCount=()=>{if(!this.editor)return;const t=(new DOMParser).parseFromString(this.editor.getValue(),"text/html").body.innerText||"";this.count=t.length};render(){return e`
 			<span class="character-count">
 				<slot name="label">Characters:</slot> ${this.count}
 			</span>
-		`}static styles=[HtmlEditorControl.styles,css`
+		`}static styles=[t.styles,r`
 			:host {
 				display: inline-flex;
 				align-items: center;
@@ -15,4 +15,4 @@ import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../..
 				align-items: center;
 				gap: 0.25rem;
 			}
-		`]}customElements.define("k-hec-character-count",CharacterCount);
+		`]}customElements.define("k-hec-character-count",s);

package/docs/src/components/htmlEditorControls/ClearFormatting.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class ClearFormatting extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.removeFormat()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.removeFormat()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_clear"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-clear-formatting",ClearFormatting);
+		`}}customElements.define("k-hec-clear-formatting",s);

package/docs/src/components/htmlEditorControls/CodeBlock.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class CodeBlock extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{const o=window.getSelection()?.toString();t.preventDefault(),t.stopPropagation(),this.editor&&(o?this.editor.wrapSelection("<pre>","</pre>",o):this.editor.formatBlock("pre"))};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.formatBlock(this.isInCodeBlock()?"p":"pre")};isInCodeBlock(){if(!this.editor?.lexicalEditor)return!1;let t=!1;const{lexical:e,code:o}=this.editor.lx;return this.editor.lexicalEditor.getEditorState().read(()=>{const i=e.$getSelection();if(!e.$isRangeSelection(i))return;const s=i.anchor.getNode().getTopLevelElementOrThrow();t=o.$isCodeNode(s)}),t}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
 			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="code_blocks"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-code-block",CodeBlock);
+		`}}customElements.define("k-hec-code-block",i);

package/docs/src/components/htmlEditorControls/ControlGroup.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class ControlGroup extends ShadowComponent{static properties={editorMode:{type:String,state:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.hasAttribute("class")||this.setAttribute("class","b r mq"),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}get editor(){return this.closest("k-html-editor")}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode,this.requestUpdate())}hasVisibleChildren(){return Array.from(this.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}static styles=css`
+import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={editorMode:{type:String,state:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.hasAttribute("class")||this.setAttribute("class","b r mq"),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}get editor(){return this.closest("k-html-editor")}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode,this.requestUpdate())}hasVisibleChildren(){return Array.from(this.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}static styles=i`
 		:host {
 			display: inline-flex;
 		}
@@ -11,4 +11,4 @@ import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../li
 			margin-top: -1px;
 			margin-bottom: -1px;
 		}
-	`;render(){return html`<slot></slot>`}updated(){super.updated(),requestAnimationFrame(()=>{this.hidden=!this.hasVisibleChildren()})}}customElements.define("k-hec-group",ControlGroup);
+	`;render(){return e`<slot></slot>`}updated(){super.updated(),requestAnimationFrame(()=>{this.hidden=!this.hasVisibleChildren()})}}customElements.define("k-hec-group",s);

package/docs/src/components/htmlEditorControls/ControlSpacer.js

@@ -1,6 +1,6 @@
-import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class ControlSpacer extends ShadowComponent{static styles=css`
+import e from"../ShadowComponent.js";import{html as t,css as s}from"../../lit-all.min.js";export default class l extends e{static styles=s`
 		:host {
 			display: inline-flex;
 			flex: 1;
 		}
-	`;render(){return html``}}customElements.define("k-hec-spacer",ControlSpacer);
+	`;render(){return t``}}customElements.define("k-hec-spacer",l);

package/docs/src/components/htmlEditorControls/CreateLink.js

@@ -1,4 +1,4 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";import Dialog from"../Dialog.js";export default class CreateLink extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=t=>{if(!this.editor)return;t.preventDefault(),t.stopPropagation();const e=this.editor.selection?.text||"",o=document.createElement("input");o.type="text",o.placeholder="https://example.com",o.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const i=document.createElement("input");i.type="text",i.placeholder="Enter link text",i.value=e,i.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const n=document.createElement("div");n.className="p",n.style.cssText="display: flex; flex-direction: column; gap: 1rem;",n.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">URL</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Link Text</label>\n\t\t\t</div>\n\t\t',n.children[0].appendChild(o),n.children[1].appendChild(i),Dialog.create(n,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:t=>{const e=o.value.trim(),n=i.value.trim();if(!e)return void(t.keepDialogOpen=!0);const l=document.createElement("a");l.href=e,l.textContent=n||e,this.editor.selection?this.editor.replaceSelectionWithElement(l,!0):this.editor.insertElementAtCursor(l,!0)}})};render(){return this.hidden="code"===this.editorMode,html`
+import e from"./HtmlEditorControl.js";import{html as t,css as i}from"../../lit-all.min.js";import"../Icon.js";import o from"../Dialog.js";export default class n extends e{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=e=>{if(!this.editor)return;e.preventDefault(),e.stopPropagation();const t=this.editor.selection?.text||"",i=document.createElement("input");i.type="text",i.placeholder="https://example.com",i.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const n=document.createElement("input");n.type="text",n.placeholder="Enter link text",n.value=t,n.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const s=document.createElement("div");s.className="p",s.style.cssText="display: flex; flex-direction: column; gap: 1rem;",s.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">URL</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Link Text</label>\n\t\t\t</div>\n\t\t',s.children[0].appendChild(i),s.children[1].appendChild(n),o.create(s,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:e=>{const o=i.value.trim(),s=n.value.trim();o?!this.editor.selection||s&&s!==t?this.editor.createLinkWithText(o,s||o):this.editor.createLink(o):e.keepDialogOpen=!0}})};render(){return this.hidden="code"===this.editorMode,t`
 			<button
 				class="${this.buttonClasses}"
 				@mousedown="${this.handleMouseDown}"
@@ -8,8 +8,8 @@ import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../..
 				</slot>
 				<slot></slot>
 			</button>
-		`}static styles=[HtmlEditorControl.styles,css`
+		`}static styles=[e.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`]}customElements.define("k-hec-create-link",CreateLink);
+		`]}customElements.define("k-hec-create-link",n);

package/docs/src/components/htmlEditorControls/DropdownControl.js

@@ -1,4 +1,4 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class DropdownControl extends HtmlEditorControl{static properties={opened:{type:Boolean,reflect:!0},editorMode:{type:String,state:!0}};constructor(){super(),this.opened=!1}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}updated(t){super.updated(t),t.has("editorMode")&&requestAnimationFrame(()=>{this.hidden="code"===this.editorMode&&!this.hasVisibleChildren()})}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}hasVisibleChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("slot")).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as o,css as e}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class n extends t{static properties={opened:{type:Boolean,reflect:!0},editorMode:{type:String,state:!0}};constructor(){super(),this.opened=!1}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}updated(t){super.updated(t),t.has("editorMode")&&requestAnimationFrame(()=>{this.hidden="code"===this.editorMode&&!this.hasVisibleChildren()})}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}hasVisibleChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("slot")).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}static styles=[t.styles,e`
       :host {
         display: inline-flex;
       }
@@ -37,7 +37,7 @@ import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../..
       ::slotted(:not([slot="icon"]):not([slot="label"]):last-of-type) button {
         border-bottom: none !important;
       }
-    `];handleToggle=()=>{this.opened=!this.opened};handleOpened=()=>{this.opened=!0};handleClosed=()=>{this.opened=!1};render(){return html`
+    `];handleToggle=()=>{this.opened=!this.opened};handleOpened=()=>{this.opened=!0};handleClosed=()=>{this.opened=!1};render(){return o`
       <k-dropdown 
         ?opened=${this.opened}
         @opened=${this.handleOpened}
@@ -54,4 +54,4 @@ import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../..
         </button>
         <slot></slot>
       </k-dropdown>
-    `}}customElements.define("k-hec-dropdown",DropdownControl);
+    `}}customElements.define("k-hec-dropdown",n);

package/docs/src/components/htmlEditorControls/FormatBlock.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class FormatBlock extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0},tag:{type:String},label:{type:String}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class a extends t{static properties={editorMode:{type:String,state:!0},tag:{type:String},label:{type:String}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];constructor(){super(),this.tag="p",this.label=""}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.formatBlock(this.tag)};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){this.hidden="code"===this.editorMode;this.label||this.getDefaultLabel();const t=this.getDefaultIcon();return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];constructor(){super(),this.tag="p",this.label=""}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.formatBlock(this.tag)};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){this.hidden="code"===this.editorMode;this.label||this.getDefaultLabel();const t=this.getDefaultIcon();return e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="${t}"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}getDefaultLabel(){return{h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Paragraph"}[this.tag]||this.tag.toUpperCase()}getDefaultIcon(){return{h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6",p:"format_paragraph"}[this.tag]||"format_paragraph"}}customElements.define("k-hec-format-block",FormatBlock);
+		`}getDefaultLabel(){return{h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Paragraph"}[this.tag]||this.tag.toUpperCase()}getDefaultIcon(){return{h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6",p:"format_paragraph"}[this.tag]||"format_paragraph"}}customElements.define("k-hec-format-block",a);

package/docs/src/components/htmlEditorControls/HtmlEditorControl.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class HtmlEditorControl extends ShadowComponent{static properties={btnClass:{type:String,attribute:"btn-class"},groupBtnClass:{type:String,attribute:"group-btn-class"},groupLastBtnClass:{type:String,attribute:"group-last-btn-class"},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="b r mq ph",this.groupBtnClass="br ph",this.groupLastBtnClass="ph"}get editor(){let t=this.getRootNode();for(;t instanceof ShadowRoot;){const o=t.host,n=o.closest("k-html-editor");if(n)return n;t=o.getRootNode()}return this.closest("k-html-editor")}get isInGroup(){const t=this.parentElement;return t&&"K-HEC-GROUP"===t.tagName}get isInDropdown(){const t=this.parentElement;return t&&"K-HEC-DROPDOWN"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=this.parentElement,o=Array.from(t.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName);return o[o.length-1]===this}get buttonClasses(){let t;return t=this.isInDropdown?"dropdown-item":this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}static styles=css`
+import t from"../ShadowComponent.js";import{html as n,css as o}from"../../lit-all.min.js";export default class r extends t{static properties={btnClass:{type:String,attribute:"btn-class"},groupBtnClass:{type:String,attribute:"group-btn-class"},groupLastBtnClass:{type:String,attribute:"group-last-btn-class"},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="b r mq ph",this.groupBtnClass="br ph",this.groupLastBtnClass="ph"}get editor(){let t=this.getRootNode();for(;t instanceof ShadowRoot;){const n=t.host,o=n.closest("k-html-editor");if(o)return o;t=n.getRootNode()}return this.closest("k-html-editor")}get isInGroup(){const t=this.parentElement;return t&&"K-HEC-GROUP"===t.tagName}get isInDropdown(){const t=this.parentElement;return t&&"K-HEC-DROPDOWN"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=this.parentElement,n=Array.from(t.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName);return n[n.length-1]===this}get buttonClasses(){let t;return t=this.isInDropdown?"dropdown-item":this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}static styles=o`
 		:host {
 			display: inline-flex;
 		}
@@ -41,4 +41,4 @@ import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../li
 		:host(:last-child) .icon-btn.dropdown-item {
 			border-bottom: none !important;
 		}
-	`}customElements.define("k-html-editor-control",HtmlEditorControl);
+	`}customElements.define("k-html-editor-control",r);

package/docs/src/components/htmlEditorControls/InlineCode.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class InlineCode extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{if(!this.editor)return;t.preventDefault(),t.stopPropagation();const e=document.createElement("code"),o=this.editor.getValueWithSelectionMarkers();o.hasSelection?(e.textContent=o.selectedText,this.editor.replaceSelectionWithElement(e,!0)):(e.textContent="​",this.editor.insertElementAtCursor(e,!0))};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.lexicalFormat("code")};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
 			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="code_blocks"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-inline-code",InlineCode);
+		`}}customElements.define("k-hec-inline-code",i);

package/docs/src/components/htmlEditorControls/InsertTable.js

@@ -1,4 +1,4 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";import Dialog from"../Dialog.js";export default class InsertTable extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=e=>{if(!this.editor)return;e.preventDefault(),e.stopPropagation();const t=this.editor.shadowRoot.getSelection()||window.getSelection();let o=null,l=null;if(t.rangeCount){let e=t.getRangeAt(0).startContainer;e.nodeType===Node.TEXT_NODE&&(e=e.parentElement),o=e.closest("table")}const n=!!o;let r=3,s=3,i=!0;if(n){const e=o.querySelector("thead"),t=o.querySelector("tbody"),n=!!e;if(l=[],n){const t=e.querySelector("tr"),o=Array.from(t.cells).map(e=>e.innerHTML);l.push(o),s=o.length}const d=t.querySelectorAll("tr");d.forEach(e=>{const t=Array.from(e.cells).map(e=>e.innerHTML);l.push(t),t.length>s&&(s=t.length)}),r=d.length,i=n,o.remove()}const d=document.createElement("input");d.type="number",d.min="1",d.max="20",d.value=r.toString(),d.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const c=document.createElement("input");c.type="number",c.min="1",c.max="10",c.value=s.toString(),c.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const a=document.createElement("input");a.type="checkbox",a.checked=i,a.id="table-headers-checkbox";const m=document.createElement("div");m.className="p",m.style.cssText="display: flex; flex-direction: column; gap: 1rem;",m.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Rows</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Columns</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; align-items: center; gap: 0.5rem;">\n\t\t\t\t<label for="table-headers-checkbox" style="font-weight: bold;">Include Headers</label>\n\t\t\t</div>\n\t\t',m.children[0].appendChild(d),m.children[1].appendChild(c),m.children[2].insertBefore(a,m.children[2].firstChild),Dialog.create(m,{title:n?"Edit Table":"Insert Table",cancelText:"Cancel",confirmText:n?"Update Table":"Insert Table",confirmClasses:"success",confirmAction:()=>{const e=parseInt(d.value)||3,t=parseInt(c.value)||3,o=a.checked;this.editor.insertTable(e,t,o,l)}})};render(){return this.hidden="code"===this.editorMode,html`
+import e from"./HtmlEditorControl.js";import{html as t,css as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";export default class o extends e{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=e=>{if(!this.editor)return;e.preventDefault(),e.stopPropagation();let t=!1,l=3,o=3,n=!0,r=null,s=null;if(this.editor.lexicalEditor){const{lexical:e,table:i}=this.editor.lx;this.editor.lexicalEditor.getEditorState().read(()=>{const d=e.$getSelection();if(!e.$isRangeSelection(d))return;let a=d.anchor.getNode();for(;a;){if(i.$isTableNode(a)){t=!0,s=a.getKey(),r=[];const e=a.getChildren();let d=!1;e.forEach((e,t)=>{const l=[];e.getChildren().forEach(e=>{0===t&&i.$isTableCellNode(e)&&e.getHeaderStyles()===i.TableCellHeaderStates.ROW&&(d=!0),l.push(e.getTextContent())}),r.push(l),l.length>o&&(o=l.length)}),n=d,l=d?e.length-1:e.length;break}a=a.getParent()}})}const d=document.createElement("input");d.type="number",d.min="1",d.max="20",d.value=l.toString(),d.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const a=document.createElement("input");a.type="number",a.min="1",a.max="10",a.value=o.toString(),a.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const c=document.createElement("input");c.type="checkbox",c.checked=n,c.id="table-headers-checkbox";const h=document.createElement("div");h.className="p",h.style.cssText="display: flex; flex-direction: column; gap: 1rem;",h.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Rows</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Columns</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; align-items: center; gap: 0.5rem;">\n\t\t\t\t<label for="table-headers-checkbox" style="font-weight: bold;">Include Headers</label>\n\t\t\t</div>\n\t\t',h.children[0].appendChild(d),h.children[1].appendChild(a),h.children[2].insertBefore(c,h.children[2].firstChild),i.create(h,{title:t?"Edit Table":"Insert Table",cancelText:"Cancel",confirmText:t?"Update Table":"Insert Table",confirmClasses:"success",confirmAction:()=>{const e=parseInt(d.value)||3,l=parseInt(a.value)||3,i=c.checked;if(t&&s){const{lexical:e}=this.editor.lx;this.editor.lexicalEditor.update(()=>{const t=e.$getNodeByKey(s);t&&t.remove()},{discrete:!0})}this.editor.insertTable(e,l,i,r)}})};render(){return this.hidden="code"===this.editorMode,t`
 			<button
 				class="${this.buttonClasses}"
 				@mousedown="${this.handleMouseDown}"
@@ -8,8 +8,8 @@ import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../..
 				</slot>
 				<slot></slot>
 			</button>
-		`}static styles=[HtmlEditorControl.styles,css`
+		`}static styles=[e.styles,l`
 			:host {
 				display: inline-flex;
 			}
-		`]}customElements.define("k-hec-insert-table",InsertTable);
+		`]}customElements.define("k-hec-insert-table",o);

package/docs/src/components/htmlEditorControls/Italic.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Italic extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.italic()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.italic()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_italic"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-italic",Italic);
+		`}}customElements.define("k-hec-italic",i);

package/docs/src/components/htmlEditorControls/Mode.js

@@ -1,9 +1,9 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Mode extends HtmlEditorControl{static properties={mode:{type:String,reflect:!0}};connectedCallback(){super.connectedCallback(),this.updateMode(),this.editor?.addEventListener("mode-changed",()=>this.updateMode())}handleClick=()=>{this.editor&&(this.editor.mode="visual"===this.editor.mode?"code":"visual")};updateMode(){this.editor&&(this.mode=this.editor.mode)}static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={mode:{type:String,reflect:!0}};connectedCallback(){super.connectedCallback(),this.updateMode(),this.editor?.addEventListener("mode-changed",()=>this.updateMode())}handleClick=()=>{this.editor&&this.editor.toggleMode()};updateMode(){this.editor&&(this.mode=this.editor.mode)}static styles=[t.styles,o`
       :host {
         display: inline-flex;
       }
-    `];render(){const t="code"===this.mode?`${this.buttonClasses} bg-primary`:this.buttonClasses;return html`
+    `];render(){const t="code"===this.mode?`${this.buttonClasses} bg-primary`:this.buttonClasses;return e`
       <button class="${t}" @click="${this.handleClick}">
         <k-icon name="code"></k-icon>
       </button>
-    `}}customElements.define("k-hec-mode",Mode);
+    `}}customElements.define("k-hec-mode",s);

package/docs/src/components/htmlEditorControls/NumberList.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class NumberList extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.orderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.orderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_list_numbered"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-number-list",NumberList);
+		`}}customElements.define("k-hec-number-list",s);

package/docs/src/components/htmlEditorControls/Strikethrough.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Strikethrough extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.strikethrough()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.strikethrough()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="strikethrough_s"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-strikethrough",Strikethrough);
+		`}}customElements.define("k-hec-strikethrough",s);

package/docs/src/components/htmlEditorControls/TextBackgroundColor.js

@@ -1,4 +1,4 @@
-import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class TextBackgroundColor extends DropdownControl{static properties={editorMode:{type:String,state:!0},colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};static styles=[DropdownControl.styles,css`
+import o from"./DropdownControl.js";import{html as e,css as t}from"../../lit-all.min.js";import"../Icon.js";export default class r extends o{static properties={editorMode:{type:String,state:!0},colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};static styles=[o.styles,t`
 			.dropdown-content {
 				padding: 8px;
 				min-width: 200px;
@@ -53,7 +53,7 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 				border-radius: 4px;
 				cursor: pointer;
 			}
-		`];constructor(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_fill"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{o.preventDefault(),o.stopPropagation(),this.editor&&this.editor.removeTextBackgroundColor(),this.opened=!1};handleSwatchClick=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextBackgroundColor(t)}this.opened=!1};handlePickerChange=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.value;this.editor&&e&&this.editor.setTextBackgroundColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=this.getColorArray();return html`
+		`];constructor(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_fill"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{o.preventDefault(),o.stopPropagation(),this.editor&&this.editor.removeTextBackgroundColor(),this.opened=!1};handleSwatchClick=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextBackgroundColor(t)}this.opened=!1};handlePickerChange=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.value;this.editor&&e&&this.editor.setTextBackgroundColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=this.getColorArray();return e`
 			<k-dropdown 
 				?opened=${this.opened}
 				@opened=${this.handleOpened}
@@ -67,14 +67,14 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 				</button>
 				
 				<div class="dropdown-content">
-					${this.disableRemove?"":html`
+					${this.disableRemove?"":e`
 						<button class="remove-btn" @click=${this.handleRemove}>
 							Remove Color
 						</button>
 					`}
 					
 					<div class="color-swatches">
-						${o.map(o=>html`
+						${o.map(o=>e`
 							<button 
 								class="color-swatch" 
 								style="background-color: ${o}"
@@ -83,7 +83,7 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 						`)}
 					</div>
 
-					${this.disablePicker?"":html`
+					${this.disablePicker?"":e`
 						<div class="picker-row">
 							<label>Custom:</label>
 							<input 
@@ -94,4 +94,4 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 					`}
 				</div>
 			</k-dropdown>
-		`}}customElements.define("k-hec-text-background-color",TextBackgroundColor);
+		`}}customElements.define("k-hec-text-background-color",r);

package/docs/src/components/htmlEditorControls/TextColor.js

@@ -1,4 +1,4 @@
-import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class TextColor extends DropdownControl{static properties={editorMode:{type:String,state:!0},colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};static styles=[DropdownControl.styles,css`
+import e from"./DropdownControl.js";import{html as o,css as t}from"../../lit-all.min.js";import"../Icon.js";export default class r extends e{static properties={editorMode:{type:String,state:!0},colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};static styles=[e.styles,t`
 			.dropdown-content {
 				padding: 8px;
 				min-width: 200px;
@@ -53,7 +53,7 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 				border-radius: 4px;
 				cursor: pointer;
 			}
-		`];constructor(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_text"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{o.preventDefault(),o.stopPropagation(),this.editor&&this.editor.removeTextColor(),this.opened=!1};handleSwatchClick=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextColor(t)}this.opened=!1};handlePickerChange=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.value;this.editor&&e&&this.editor.setTextColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=this.getColorArray();return html`
+		`];constructor(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_text"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=e=>{e.preventDefault(),e.stopPropagation(),this.editor&&this.editor.removeTextColor(),this.opened=!1};handleSwatchClick=e=>{e.preventDefault(),e.stopPropagation();const o=e.target.style.backgroundColor;if(this.editor&&o){const e=o.match(/\d+/g),t=e?"#"+e.map(e=>parseInt(e).toString(16).padStart(2,"0")).join(""):o;this.editor.setTextColor(t)}this.opened=!1};handlePickerChange=e=>{e.preventDefault(),e.stopPropagation();const o=e.target.value;this.editor&&o&&this.editor.setTextColor(o),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(e=>e.trim()).filter(e=>e)}render(){this.hidden="code"===this.editorMode;const e=this.getColorArray();return o`
 			<k-dropdown 
 				?opened=${this.opened}
 				@opened=${this.handleOpened}
@@ -67,23 +67,23 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 				</button>
 				
 				<div class="dropdown-content">
-					${this.disableRemove?"":html`
+					${this.disableRemove?"":o`
 						<button class="remove-btn" @click=${this.handleRemove}>
 							Remove Color
 						</button>
 					`}
 					
 					<div class="color-swatches">
-						${o.map(o=>html`
+						${e.map(e=>o`
 							<button 
 								class="color-swatch" 
-								style="background-color: ${o}"
+								style="background-color: ${e}"
 								@click=${this.handleSwatchClick}
 							></button>
 						`)}
 					</div>
 
-					${this.disablePicker?"":html`
+					${this.disablePicker?"":o`
 						<div class="picker-row">
 							<label>Custom:</label>
 							<input 
@@ -94,4 +94,4 @@ import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit
 					`}
 				</div>
 			</k-dropdown>
-		`}}customElements.define("k-hec-text-color",TextColor);
+		`}}customElements.define("k-hec-text-color",r);

package/docs/src/components/htmlEditorControls/Underline.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Underline extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.underline()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.underline()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_underlined"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-underline",Underline);
+		`}}customElements.define("k-hec-underline",i);

package/docs/src/components/htmlEditorControls/WordCount.js

@@ -1,8 +1,8 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";export default class WordCount extends HtmlEditorControl{static properties={count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),this.editor&&(this.editor.addEventListener("ready",()=>{this.updateCount()}),this.editor.addEventListener("change",()=>{this.updateCount()}),setTimeout(()=>this.updateCount(),0))}updateCount=()=>{if(!this.editor)return;const t=((new DOMParser).parseFromString(this.editor.getValue(),"text/html").body.innerText||"").trim().split(/\s+/).filter(t=>t.length>0);this.count=t.length};render(){return html`
+import t from"./HtmlEditorControl.js";import{html as e,css as s}from"../../lit-all.min.js";export default class r extends t{static properties={count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),this.editor&&(this.editor.addEventListener("ready",()=>{this.updateCount()}),this.editor.addEventListener("change",()=>{this.updateCount()}),setTimeout(()=>this.updateCount(),0))}updateCount=()=>{if(!this.editor)return;const t=((new DOMParser).parseFromString(this.editor.getValue(),"text/html").body.innerText||"").trim().split(/\s+/).filter(t=>t.length>0);this.count=t.length};render(){return e`
 			<span class="word-count">
 				<slot name="label">Words:</slot> ${this.count}
 			</span>
-		`}static styles=[HtmlEditorControl.styles,css`
+		`}static styles=[t.styles,s`
 			:host {
 				display: inline-flex;
 				align-items: center;
@@ -15,4 +15,4 @@ import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../..
 				align-items: center;
 				gap: 0.25rem;
 			}
-		`]}customElements.define("k-hec-word-count",WordCount);
+		`]}customElements.define("k-hec-word-count",r);

package/docs/src/components/htmlEditorNodes/HtmlComment.js

@@ -0,0 +1,24 @@
+import{html as t,render as e}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";const{DecoratorNode:o,$applyNodeReplacement:n,$getNodeByKey:m}=await import("https://esm.sh/lexical@0.43.0");class r extends o{static getType(){return"html-comment"}static clone(t){return new r(t.__comment,t.__key)}static isVisualCompatible(t){return t.nodeType===Node.COMMENT_NODE}static preprocessHtml(t){return t.replace(/<!--(.*?)-->/gs,(t,e)=>`<span data-html-comment="${e.replace(/"/g,"&quot;")}"></span>`)}static importDOM(){return{span:t=>t.hasAttribute("data-html-comment")?{conversion:t=>({node:s(t.getAttribute("data-html-comment")||"")}),priority:2}:null}}static importJSON(t){return s(t.comment||"")}constructor(t="",e){super(e),this.__comment=t}getComment(){return this.getLatest().__comment}setComment(t){const e=this.getWritable();return e.__comment=t,e}createDOM(o,n){const r=document.createElement("span"),s=this.__key;return e(t`
+      <k-dropdown close-on-select="false" open-direction="down left"
+        contenteditable="false"
+        data-html-comment=${this.__comment}
+        title=${this.__comment||"HTML Comment (empty)"}
+        @mousedown=${t=>t.stopPropagation()}
+      >
+        <k-icon slot="trigger" name="comment" class="tc-muted"
+          style="cursor:pointer"
+          @mousedown=${t=>{t.preventDefault(),t.stopPropagation()}}
+        ></k-icon>
+        <div class="pq">
+          <div class="small tc-muted mbh">HTML Comment</div>
+          <textarea class="ff-mono full p0"
+					style="resize: both"
+            .value=${this.__comment}
+            @input=${t=>{const e=t.target.closest("[data-html-comment]");e&&(e.setAttribute("data-html-comment",t.target.value),e.title=t.target.value)}}
+            @blur=${t=>{n.update(()=>{const e=m(s);e&&e.setComment(t.target.value)})}}
+            @keydown=${t=>t.stopPropagation()}
+            @beforeinput=${t=>t.stopPropagation()}
+          ></textarea>
+        </div>
+      </k-dropdown>
+    `,r),r.firstElementChild}updateDOM(t,e){return t.__comment!==this.__comment&&(e.setAttribute("data-html-comment",this.__comment),e.title=this.__comment||"HTML Comment (empty)"),!1}exportDOM(){return{element:document.createComment(this.__comment)}}exportJSON(){return{...super.exportJSON(),type:"html-comment",comment:this.__comment}}isInline(){return!0}isKeyboardSelectable(){return!0}decorate(){return null}}const s=(t="")=>n(new r(t)),a=t=>t instanceof r;export{r as HtmlCommentLexicalNode,s as $createHtmlCommentNode,a as $isHtmlCommentNode};export default class c extends HTMLElement{static lexicalNode=r}customElements.define("k-hen-html-comment",c);

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

@@ -1,7 +1,7 @@
-import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class DeleteRecord extends TableControl{delete=()=>{this.record&&this.table.deleteRecord(this.record)};render(){return html`
+import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class o extends e{delete=()=>{this.record&&this.table.deleteRecord(this.record)};render(){return t`
 			<button class="no-btn icon-btn" @click="${this.delete}">
 				<slot>
 					<k-icon name="delete"></k-icon>
 				</slot>
 			</button>
-		`}}customElements.define("k-tc-delete-record",DeleteRecord);
+		`}}customElements.define("k-tc-delete-record",o);

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

@@ -1,7 +1,7 @@
-import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class DeleteSelected extends TableControl{deleteSelected=()=>{this.table.deleteSelected()};render(){return html`
+import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class l extends e{deleteSelected=()=>{this.table.deleteSelected()};render(){return t`
 			<button class="no-btn icon-btn" title="Delete Selected" @click="${this.deleteSelected}">
 				<slot>
 					<k-icon name="delete_sweep"></k-icon>
 				</slot>
 			</button>
-		`}}customElements.define("k-tc-delete-selected",DeleteSelected);
+		`}}customElements.define("k-tc-delete-selected",l);

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

@@ -1,18 +1,18 @@
-import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Edit extends TableControl{static properties={isEditing:{type:Boolean}};static styles=[TableControl.styles,css`
+import t from"./TableControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static properties={isEditing:{type:Boolean}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 				width: max-content;
 				align-items: baseline;
 			}
-		`];constructor(){super({maxWidth:80})}connectedCallback(){super.connectedCallback(),this.onTableEvent("editingChange",this.handleEditingChange)}handleEditingChange=t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)};handleEdit=()=>{this.record&&this.table.editRecord(this.record)};handleSave=()=>{this.record&&this.table.saveEditedRecord(this.record)};handleCancel=()=>{this.record&&this.table.cancelEditedRecord(this.record)};render(){return this.isEditing?html`
+		`];constructor(){super({maxWidth:80})}connectedCallback(){super.connectedCallback(),this.onTableEvent("editingChange",this.handleEditingChange)}handleEditingChange=t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)};handleEdit=()=>{this.record&&this.table.editRecord(this.record)};handleSave=()=>{this.record&&this.table.saveEditedRecord(this.record)};handleCancel=()=>{this.record&&this.table.cancelEditedRecord(this.record)};render(){return this.isEditing?e`
 			<button class="no-btn icon-btn bg-success" @click="${this.handleSave}">
 				<k-icon name="check"></k-icon>
 			</button>
 			<button class="no-btn icon-btn bg-danger" @click="${this.handleCancel}">
 				<k-icon name="close"></k-icon>
 			</button>
-		`:html`
+		`:e`
 			<button class="no-btn icon-btn" @click="${this.handleEdit}">
 				<k-icon name="edit"></k-icon>
 			</button>
-		`}}customElements.define("k-tc-edit",Edit);
+		`}}customElements.define("k-tc-edit",n);

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

@@ -1,8 +1,8 @@
-import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ExportCSV extends TableControl{constructor(){super(),this.maxWidth=136}getCSV(){const t=this.table;if(!t)return"";let e="";const o=[];if(t.fields.forEach(({name:t,calculator:e})=>{e||o.push(t)}),e+=o.join(",")+"\n",this.record){const t=o.map(t=>this.record[t]||"");e+=t.join(",")+"\n"}else t.records.forEach(t=>{const r=o.map(e=>t[e]||"");e+=r.join(",")+"\n"});return e}export=()=>{const t=this.getCSV(),e=new Blob([t],{type:"text/csv"}),o=URL.createObjectURL(e),r=document.createElement("a");r.href=o,r.download="data.csv",r.click(),URL.revokeObjectURL(o)};render(){return html`
+import t from"./TableControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.maxWidth=136}getCSV(){const t=this.table;if(!t)return"";let e="";const o=[];if(t.fields.forEach(({name:t,calculator:e})=>{e||o.push(t)}),e+=o.join(",")+"\n",this.record){const t=o.map(t=>this.record[t]||"");e+=t.join(",")+"\n"}else t.records.forEach(t=>{const r=o.map(e=>t[e]||"");e+=r.join(",")+"\n"});return e}export=()=>{const t=this.getCSV(),e=new Blob([t],{type:"text/csv"}),o=URL.createObjectURL(e),r=document.createElement("a");r.href=o,r.download="data.csv",r.click(),URL.revokeObjectURL(o)};render(){return e`
 			<button class="no-btn ph" @click="${this.export}">
 				<slot>
 					<k-icon name="export-file"></k-icon>
 					Export CSV
 				</slot>
 			</button>
-		`}}customElements.define("k-tc-export-csv",ExportCSV);
+		`}}customElements.define("k-tc-export-csv",o);

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

@@ -1,8 +1,8 @@
-import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ExportJson extends TableControl{constructor(){super(),this.maxWidth=136}export=()=>{const t=this.record;if(t){const e=JSON.stringify(t),o=new Blob([e],{type:"application/json"}),n=URL.createObjectURL(o),r=document.createElement("a");r.href=n,r.download="data.json",r.click(),URL.revokeObjectURL(n)}else{const t=JSON.stringify(this.table.records),e=new Blob([t],{type:"application/json"}),o=URL.createObjectURL(e),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}};render(){return html`
+import t from"./TableControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.maxWidth=136}export=()=>{const t=this.record;if(t){const e=JSON.stringify(t),o=new Blob([e],{type:"application/json"}),n=URL.createObjectURL(o),r=document.createElement("a");r.href=n,r.download="data.json",r.click(),URL.revokeObjectURL(n)}else{const t=JSON.stringify(this.table.records),e=new Blob([t],{type:"application/json"}),o=URL.createObjectURL(e),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}};render(){return e`
 			<button class="no-btn ph" @click="${this.export}">
 				<slot>
 					<k-icon name="export-file"></k-icon>
 					Export JSON
 				</slot>
 			</button>
-		`}}customElements.define("k-tc-export-json",ExportJson);
+		`}}customElements.define("k-tc-export-json",o);