kempo-ui 0.0.43 → 0.0.63

package/dist/components/SidePanel.js

@@ -1,8 +1,8 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0}};constructor(){super(),this.collapsed=!1,this.side="left"}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("collapsed")){const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0}};constructor(){super(),this.collapsed=!1,this.side="left"}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("collapsed")){const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
 			<div id="header">
 				<slot name="logo"></slot>
 				<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
-					<k-icon name="arrow-line" direction="${this.collapsed?"right":"left"}"></k-icon>
+					<k-icon name="arrow-line" direction="${(()=>"right"===this.side?this.collapsed?"left":"right":this.collapsed?"right":"left")()}"></k-icon>
 				</button>
 			</div>
 			<div id="content">
@@ -12,9 +12,9 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		:host {
 			--bg: var(--c_bg);
 			--width-expanded: 16rem;
-			--width-collapsed: 3.5rem;
 			--transition-duration: var(--animation_ms, 256ms);
-			display: block;
+			display: flex;
+			flex-direction: column;
 			position: fixed;
 			top: 0;
 			left: 0;
@@ -26,7 +26,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			z-index: 1000;
 		}
 		:host([collapsed]) {
-			width: var(--width-collapsed);
+			width: auto;
 		}
 		:host([side="right"]) {
 			left: auto;
@@ -41,20 +41,17 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			gap: var(--spacer_h);
 			padding: var(--spacer_h);
 			border-bottom: 1px solid var(--c_border);
+			flex-shrink: 0;
 		}
 		::slotted([slot="logo"]) {
 			margin-right: auto;
-		}
-		::slotted([slot="logo"]) {
 			flex: 1;
 			min-width: 0;
 			opacity: 1;
 			transition: opacity var(--transition-duration);
 		}
 		:host([collapsed]) ::slotted([slot="logo"]) {
-			opacity: 0;
-			width: 0;
-			overflow: hidden;
+			display: none;
 		}
 		#toggle {
 			flex-shrink: 0;
@@ -73,23 +70,31 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			background: var(--c_bg_hover);
 		}
 		#content {
-			height: calc(100% - 3rem);
+			flex: 1;
+			min-height: 0;
 			overflow-y: auto;
 			overflow-x: hidden;
 			display: flex;
 			flex-direction: column;
 		}
-	`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return html`
-			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}">
-				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:""}
-				<span class="label ${this.collapsed?"hidden":""}">
-					<slot></slot>
-				</span>
+		:host([collapsed]) #content {
+			align-items: flex-start;
+		}
+		:host(:not([collapsed])) #content {
+			/* scrollbar-gutter: stable; */
+		}
+	`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};handleClick=e=>{this.collapsed&&!this["no-expand"]&&this.panel&&(e.preventDefault(),this.panel.expand())};render(){return html`
+			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
+				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
+				${this.collapsed?nothing:html`<span class="label"><slot></slot></span>`}
 			</a>
 		`}static styles=css`
 		:host {
 			display: block;
 		}
+		:host([collapsed][hide-when-collapsed]) {
+			display: none;
+		}
 		.item {
 			display: flex;
 			align-items: center;
@@ -102,6 +107,8 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			transition: background var(--animation_ms), color var(--animation_ms);
 			white-space: nowrap;
 		}
+		:host([collapsed]) .item {
+		}
 		.item:hover {
 			background: var(--c_bg_hover);
 		}
@@ -119,18 +126,16 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			min-width: 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			opacity: 1;
-			transition: opacity var(--animation_ms);
-		}
-		.label.hidden {
-			opacity: 0;
-			width: 0;
 		}
-	`}class SidePanelLabel extends ShadowComponent{constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
+	`}class SidePanelLabel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0}};constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
 		:host {
 			display: block;
 			margin: var(--spacer_h) 0;
 		}
+		:host([collapsed]) {
+			margin: 0 var(--spacer_h);
+			align-self: stretch;
+		}
 		.label {
 			padding: 0 var(--spacer);
 			font-size: 0.75rem;
@@ -144,12 +149,15 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			border-top: 1px solid var(--c_border);
 			margin: var(--spacer_h) var(--spacer);
 		}
-	`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed||(this.open=!this.open)};render(){return html`
+		:host([collapsed]) hr {
+			margin: var(--spacer_h) 0;
+		}
+	`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed&&!this["no-expand"]&&this.panel?this.panel.expand():this.collapsed||(this.open=!this.open)};render(){return html`
 			<div class="menu-container">
-				<button class="menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
-					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:""}
-					<span class="label ${this.collapsed?"hidden":""}">${this.label}</span>
-					${this.collapsed?"":html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
+				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
+					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
+					${this.collapsed?nothing:html`<span class="label">${this.label}</span>`}
+					${this.collapsed?nothing:html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
 				</button>
 				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
 					<slot></slot>
@@ -159,6 +167,9 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		:host {
 			display: block;
 		}
+		:host([collapsed][hide-when-collapsed]) {
+			display: none;
+		}
 		.menu-container {
 			margin: 0;
 		}
@@ -181,6 +192,9 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			white-space: nowrap;
 			transition: background var(--animation_ms);
 		}
+		:host([collapsed]) .menu-header {
+			width: auto;
+		}
 		.menu-header:hover {
 			background: var(--c_bg_hover);
 		}
@@ -192,12 +206,6 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			min-width: 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			opacity: 1;
-			transition: opacity var(--animation_ms);
-		}
-		.label.hidden {
-			opacity: 0;
-			width: 0;
 		}
 		.chevron {
 			transition: transform var(--animation_ms);
@@ -208,6 +216,9 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			transition: max-height var(--animation_ms);
 			padding-left: calc(var(--spacer_h) * 2);
 		}
+		:host([collapsed]) .menu-content {
+			padding-left: 0;
+		}
 		.menu-content.open {
 			max-height: 500px;
 		}

package/dist/components/htmlEditorControls/AlignCenter.js

@@ -0,0 +1,12 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignCenter 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.alignCenter()};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_align_center"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-align-center",AlignCenter);

package/dist/components/htmlEditorControls/AlignJustify.js

@@ -0,0 +1,12 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignJustify 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.alignJustify()};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_align_justify"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-align-justify",AlignJustify);

package/dist/components/htmlEditorControls/AlignLeft.js

@@ -0,0 +1,12 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignLeft 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.alignLeft()};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_align_left"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-align-left",AlignLeft);

package/dist/components/htmlEditorControls/AlignRight.js

@@ -0,0 +1,12 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignRight 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.alignRight()};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_align_right"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-align-right",AlignRight);

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);