kempo-ui 0.0.43 → 0.0.62

package/dist/components/htmlEditorControls/Bold.js

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

package/dist/components/htmlEditorControls/BulletList.js

@@ -0,0 +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`
+			: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}">
+				<slot name="icon">
+					<k-icon name="format_list_bulleted"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-bullet-list",BulletList);

package/dist/components/htmlEditorControls/CharacterCount.js

@@ -0,0 +1,18 @@
+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`
+			<span class="character-count">
+				<slot name="label">Characters:</slot> ${this.count}
+			</span>
+		`}static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				padding: 0 0.5rem;
+				font-size: 0.875rem;
+				color: var(--text-color-secondary, #666);
+			}
+			.character-count {
+				display: flex;
+				align-items: center;
+				gap: 0.25rem;
+			}
+		`]}customElements.define("k-hec-character-count",CharacterCount);

package/dist/components/htmlEditorControls/ClearFormatting.js

@@ -0,0 +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`
+			: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}">
+				<slot name="icon">
+					<k-icon name="format_clear"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-clear-formatting",ClearFormatting);

package/dist/components/htmlEditorControls/CodeBlock.js

@@ -0,0 +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`
+			: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`
+			<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);

package/dist/components/htmlEditorControls/ControlGroup.js

@@ -0,0 +1,14 @@
+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`
+		:host {
+			display: inline-flex;
+		}
+		
+		:host([hidden]) {
+			display: none !important;
+		}
+		
+		::slotted(*) {
+			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);

package/dist/components/htmlEditorControls/ControlSpacer.js

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

package/dist/components/htmlEditorControls/CreateLink.js

@@ -0,0 +1,15 @@
+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`
+			<button
+				class="${this.buttonClasses}"
+				@mousedown="${this.handleMouseDown}"
+			>
+				<slot name="icon">
+					<k-icon name="link"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`]}customElements.define("k-hec-create-link",CreateLink);

package/dist/components/htmlEditorControls/DropdownControl.js

@@ -0,0 +1,57 @@
+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`
+      :host {
+        display: inline-flex;
+      }
+      
+      k-dropdown {
+        display: inline-flex;
+      }
+      
+      /* Override fixed sizing for dropdown trigger */
+      button[slot="trigger"] {
+        width: auto !important;
+        height: auto !important;
+        min-width: 40px;
+        min-height: 40px;
+      }
+      
+      /* Style slotted items (not icon or label) */
+      ::slotted(:not([slot="icon"]):not([slot="label"])) {
+        display: block !important;
+      }
+      
+      ::slotted(:not([slot="icon"]):not([slot="label"])) .icon-btn,
+      ::slotted(:not([slot="icon"]):not([slot="label"])) button {
+        display: flex !important;
+        width: 100% !important;
+        height: auto !important;
+        justify-content: flex-start !important;
+        padding: 0.5rem 0.75rem !important;
+        margin: 0 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        border-bottom: 1px solid var(--c_border) !important;
+      }
+      
+      ::slotted(:not([slot="icon"]):not([slot="label"]):last-of-type) .icon-btn,
+      ::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`
+      <k-dropdown 
+        ?opened=${this.opened}
+        @opened=${this.handleOpened}
+        @closed=${this.handleClosed}
+      >
+        <button 
+          slot="trigger" 
+          class="${this.buttonClasses}"
+        >
+          <slot name="icon">
+            <k-icon name="arrow_drop_down"></k-icon>
+          </slot>
+          <slot name="label"></slot>
+        </button>
+        <slot></slot>
+      </k-dropdown>
+    `}}customElements.define("k-hec-dropdown",DropdownControl);

package/dist/components/htmlEditorControls/FormatBlock.js

@@ -0,0 +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`
+			: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}">
+				<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);

package/dist/components/htmlEditorControls/HtmlEditorControl.js

@@ -0,0 +1,44 @@
+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`
+		:host {
+			display: inline-flex;
+		}
+		
+		:host([hidden]) {
+			display: none !important;
+		}
+		
+		.icon-btn {
+			display: inline-flex !important;
+			align-items: center;
+			justify-content: center;
+			width: 40px;
+			height: 40px;
+			gap: 0.5rem;
+		}
+		.icon-btn:disabled {
+			opacity: 0.6;
+		}
+		
+		.icon-btn:has(slot:not([name])) {
+			width: auto;
+			padding-left: 0.75rem;
+			padding-right: 0.75rem;
+		}
+		
+		/* Styles for controls in dropdown */
+		.icon-btn.dropdown-item {
+			display: flex !important;
+			width: 100% !important;
+			height: auto !important;
+			justify-content: flex-start !important;
+			padding: 0.5rem 0.75rem !important;
+			margin: 0 !important;
+			border: none !important;
+			border-radius: 0 !important;
+			border-bottom: 1px solid var(--c_border) !important;
+		}
+		
+		:host(:last-child) .icon-btn.dropdown-item {
+			border-bottom: none !important;
+		}
+	`}customElements.define("k-html-editor-control",HtmlEditorControl);

package/dist/components/htmlEditorControls/InlineCode.js

@@ -0,0 +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`
+			: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`
+			<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);

package/dist/components/htmlEditorControls/InsertTable.js

@@ -0,0 +1,15 @@
+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`
+			<button
+				class="${this.buttonClasses}"
+				@mousedown="${this.handleMouseDown}"
+			>
+				<slot name="icon">
+					<k-icon name="table"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`]}customElements.define("k-hec-insert-table",InsertTable);

package/dist/components/htmlEditorControls/Italic.js

@@ -0,0 +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`
+			: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}">
+				<slot name="icon">
+					<k-icon name="format_italic"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-italic",Italic);

package/dist/components/htmlEditorControls/Mode.js

@@ -0,0 +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`
+      :host {
+        display: inline-flex;
+      }
+    `];render(){const t="code"===this.mode?`${this.buttonClasses} bg-primary`:this.buttonClasses;return html`
+      <button class="${t}" @click="${this.handleClick}">
+        <k-icon name="code"></k-icon>
+      </button>
+    `}}customElements.define("k-hec-mode",Mode);

package/dist/components/htmlEditorControls/NumberList.js

@@ -0,0 +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`
+			: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}">
+				<slot name="icon">
+					<k-icon name="format_list_numbered"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-number-list",NumberList);

package/dist/components/htmlEditorControls/Strikethrough.js

@@ -0,0 +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`
+			: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}">
+				<slot name="icon">
+					<k-icon name="strikethrough_s"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-strikethrough",Strikethrough);

package/dist/components/htmlEditorControls/TextBackgroundColor.js

@@ -0,0 +1,97 @@
+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`
+			.dropdown-content {
+				padding: 8px;
+				min-width: 200px;
+			}
+
+			.remove-btn {
+				width: 100%;
+				padding: 8px;
+				margin-bottom: 8px;
+				border: 1px solid var(--border-color, #ccc);
+				background: var(--background-color, white);
+				cursor: pointer;
+				border-radius: 4px;
+			}
+
+			.remove-btn:hover {
+				background: var(--hover-background-color, #f5f5f5);
+			}
+
+			.color-swatches {
+				display: grid;
+			grid-template-columns: repeat(6, 1fr);
+			}
+
+			.color-swatch {
+				width: 32px;
+				height: 32px;
+				border: 1px solid var(--border-color, #ccc);
+				cursor: pointer;
+				border-radius: 4px;
+			}
+
+			.color-swatch:hover {
+				border-color: var(--primary-color, #007acc);
+				box-shadow: 0 0 4px rgba(0, 122, 204, 0.3);
+			}
+
+			.picker-row {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.picker-row label {
+				flex-shrink: 0;
+			}
+
+			.picker-row input[type="color"] {
+				flex: 1;
+				height: 32px;
+				border: 1px solid var(--border-color, #ccc);
+				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`
+			<k-dropdown 
+				?opened=${this.opened}
+				@opened=${this.handleOpened}
+				@closed=${this.handleClosed}
+			>
+				<button 
+					slot="trigger" 
+					class="${this.buttonClasses}"
+				>
+					<k-icon name="format_color_fill"></k-icon>
+				</button>
+				
+				<div class="dropdown-content">
+					${this.disableRemove?"":html`
+						<button class="remove-btn" @click=${this.handleRemove}>
+							Remove Color
+						</button>
+					`}
+					
+					<div class="color-swatches">
+						${o.map(o=>html`
+							<button 
+								class="color-swatch" 
+								style="background-color: ${o}"
+								@click=${this.handleSwatchClick}
+							></button>
+						`)}
+					</div>
+
+					${this.disablePicker?"":html`
+						<div class="picker-row">
+							<label>Custom:</label>
+							<input 
+								type="color" 
+								@input=${this.handlePickerChange}
+							/>
+						</div>
+					`}
+				</div>
+			</k-dropdown>
+		`}}customElements.define("k-hec-text-background-color",TextBackgroundColor);

package/dist/components/htmlEditorControls/TextColor.js

@@ -0,0 +1,97 @@
+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`
+			.dropdown-content {
+				padding: 8px;
+				min-width: 200px;
+			}
+
+			.remove-btn {
+				width: 100%;
+				padding: 8px;
+				margin-bottom: 8px;
+				border: 1px solid var(--border-color, #ccc);
+				background: var(--background-color, white);
+				cursor: pointer;
+				border-radius: 4px;
+			}
+
+			.remove-btn:hover {
+				background: var(--hover-background-color, #f5f5f5);
+			}
+
+			.color-swatches {
+				display: grid;
+			grid-template-columns: repeat(6, 1fr);
+			}
+
+			.color-swatch {
+				width: 32px;
+				height: 32px;
+				border: 1px solid var(--border-color, #ccc);
+				cursor: pointer;
+				border-radius: 4px;
+			}
+
+			.color-swatch:hover {
+				border-color: var(--primary-color, #007acc);
+				box-shadow: 0 0 4px rgba(0, 122, 204, 0.3);
+			}
+
+			.picker-row {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.picker-row label {
+				flex-shrink: 0;
+			}
+
+			.picker-row input[type="color"] {
+				flex: 1;
+				height: 32px;
+				border: 1px solid var(--border-color, #ccc);
+				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`
+			<k-dropdown 
+				?opened=${this.opened}
+				@opened=${this.handleOpened}
+				@closed=${this.handleClosed}
+			>
+				<button 
+					slot="trigger" 
+					class="${this.buttonClasses}"
+				>
+					<k-icon name="format_color_text"></k-icon>
+				</button>
+				
+				<div class="dropdown-content">
+					${this.disableRemove?"":html`
+						<button class="remove-btn" @click=${this.handleRemove}>
+							Remove Color
+						</button>
+					`}
+					
+					<div class="color-swatches">
+						${o.map(o=>html`
+							<button 
+								class="color-swatch" 
+								style="background-color: ${o}"
+								@click=${this.handleSwatchClick}
+							></button>
+						`)}
+					</div>
+
+					${this.disablePicker?"":html`
+						<div class="picker-row">
+							<label>Custom:</label>
+							<input 
+								type="color" 
+								@input=${this.handlePickerChange}
+							/>
+						</div>
+					`}
+				</div>
+			</k-dropdown>
+		`}}customElements.define("k-hec-text-color",TextColor);

package/dist/components/htmlEditorControls/Underline.js

@@ -0,0 +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`
+			: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}">
+				<slot name="icon">
+					<k-icon name="format_underlined"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-underline",Underline);

package/dist/components/htmlEditorControls/WordCount.js

@@ -0,0 +1,18 @@
+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`
+			<span class="word-count">
+				<slot name="label">Words:</slot> ${this.count}
+			</span>
+		`}static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				padding: 0 0.5rem;
+				font-size: 0.875rem;
+				color: var(--text-color-secondary, #666);
+			}
+			.word-count {
+				display: flex;
+				align-items: center;
+				gap: 0.25rem;
+			}
+		`]}customElements.define("k-hec-word-count",WordCount);

package/dist/utils/formatCode.js

@@ -0,0 +1 @@
+export default(t,e={})=>{if(!t)return"";const{indent:n="  ",blockTags:r=["div","p","pre","h1","h2","h3","h4","h5","h6","ul","ol","li","table","thead","tbody","tr","td","th","form","fieldset","section","article","header","footer","nav","main","aside"],selfClosingTags:s=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]}=e;let o="",a=0;const i=[];let c=0;const l=/<[^>]+>/g;let h;for(;null!==(h=l.exec(t));){if(h.index>c){const e=t.substring(c,h.index).trim();e&&i.push({type:"text",content:e})}i.push({type:"tag",content:h[0]}),c=h.index+h[0].length}if(c<t.length){const e=t.substring(c).trim();e&&i.push({type:"text",content:e})}let d=!1;return i.forEach((t,e)=>{if("text"===t.type)o+=t.content,d=!1;else{const e=t.content,i=e.startsWith("</"),c=(t=>{const e=t.match(/<\/?(\w+)/)?.[1]?.toLowerCase();return e&&r.includes(e)})(e),l=(t=>{const e=t.match(/<(\w+)/)?.[1]?.toLowerCase();return e&&s.includes(e)||t.endsWith("/>")})(e);i&&c?(a=Math.max(0,a-1),o+=d?"\n"+n.repeat(a)+e:e,d=!0):c&&!l?(d&&o.length>0||o.length>0?o+="\n"+n.repeat(a)+e:o+=n.repeat(a)+e,a++,d=!0):(o+=e,d=!1)}}),o.trim()};

package/docs/components/dropdown.html

@@ -64,7 +64,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"more_vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Edit<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"copy"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"content_copy"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Copy<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Delete<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"more_vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Edit<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"copy"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"copy"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Copy<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Delete<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -77,7 +77,7 @@
               <k-icon name="edit"></k-icon> Edit
             </button>
             <button data-value="copy">
-              <k-icon name="content_copy"></k-icon> Copy
+              <k-icon name="copy"></k-icon> Copy
             </button>
             <button data-value="delete" class="tc-danger">
               <k-icon name="delete"></k-icon> Delete