kempo-ui 0.4.20 → 0.4.21

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

@@ -1,12 +0,0 @@
-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?.inlineCode()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
-				<slot name="icon">
-					<k-icon name="code_blocks"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`}}customElements.define("k-hec-inline-code",i);

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

@@ -1,15 +0,0 @@
-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 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)}))}handleClick=()=>{if(!this.editor)return;const e=this.editor.getTableAtSelection(),t=!!e,l=e?.rows??3,n=e?.cols??3,o=e?.hasHeaders??!0,s=e?.cellData??null,r=document.createElement("input");r.type="number",r.min="1",r.max="20",r.value=l.toString(),r.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const d=document.createElement("input");d.type="number",d.min="1",d.max="10",d.value=n.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="checkbox",c.checked=o,c.id="table-headers-checkbox";const a=document.createElement("div");a.className="p",a.style.cssText="display: flex; flex-direction: column; gap: 1rem;",a.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',a.children[0].appendChild(r),a.children[1].appendChild(d),a.children[2].insertBefore(c,a.children[2].firstChild),i.create(a,{title:t?"Edit Table":"Insert Table",cancelText:"Cancel",confirmText:t?"Update Table":"Insert Table",confirmClasses:"success",confirmAction:()=>{const l=parseInt(r.value)||3,i=parseInt(d.value)||3,n=c.checked;t&&this.editor.removeTableByKey(e.key),this.editor.insertTable(l,i,n,s)}})};render(){return this.hidden="code"===this.editorMode,t`
-			<button
-				class="${this.buttonClasses}"
-				@click="${this.handleClick}"
-			>
-				<slot name="icon">
-					<k-icon name="table"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`}static styles=[e.styles,l`
-			:host {
-				display: inline-flex;
-			}
-		`]}customElements.define("k-hec-insert-table",n);

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

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

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

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

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

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

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

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

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

@@ -1,97 +0,0 @@
-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;
-			}
-
-			.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=>{this.editor&&this.editor.removeTextBackgroundColor(),this.opened=!1};handleSwatchClick=o=>{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=>{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}
-				@closed=${this.handleClosed}
-			>
-				<button 
-					slot="trigger" 
-					class="${this.buttonClasses}"
-				>
-					<k-icon name="format_color_fill"></k-icon>
-				</button>
-				
-				<div class="dropdown-content">
-					${this.disableRemove?"":e`
-						<button class="remove-btn" @click=${this.handleRemove}>
-							Remove Color
-						</button>
-					`}
-					
-					<div class="color-swatches">
-						${o.map(o=>e`
-							<button 
-								class="color-swatch" 
-								style="background-color: ${o}"
-								@click=${this.handleSwatchClick}
-							></button>
-						`)}
-					</div>
-
-					${this.disablePicker?"":e`
-						<div class="picker-row">
-							<label>Custom:</label>
-							<input 
-								type="color" 
-								@input=${this.handlePickerChange}
-							/>
-						</div>
-					`}
-				</div>
-			</k-dropdown>
-		`}}customElements.define("k-hec-text-background-color",r);

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

@@ -1,97 +0,0 @@
-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;
-			}
-
-			.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=e=>{this.editor&&this.editor.removeTextColor(),this.opened=!1};handleSwatchClick=e=>{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=>{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}
-				@closed=${this.handleClosed}
-			>
-				<button 
-					slot="trigger" 
-					class="${this.buttonClasses}"
-				>
-					<k-icon name="format_color_text"></k-icon>
-				</button>
-				
-				<div class="dropdown-content">
-					${this.disableRemove?"":o`
-						<button class="remove-btn" @click=${this.handleRemove}>
-							Remove Color
-						</button>
-					`}
-					
-					<div class="color-swatches">
-						${e.map(e=>o`
-							<button 
-								class="color-swatch" 
-								style="background-color: ${e}"
-								@click=${this.handleSwatchClick}
-							></button>
-						`)}
-					</div>
-
-					${this.disablePicker?"":o`
-						<div class="picker-row">
-							<label>Custom:</label>
-							<input 
-								type="color" 
-								@input=${this.handlePickerChange}
-							/>
-						</div>
-					`}
-				</div>
-			</k-dropdown>
-		`}}customElements.define("k-hec-text-color",r);

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

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

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

@@ -1,18 +0,0 @@
-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=[t.styles,s`
-			: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",r);

package/docs/src/components/markdownEditorControls/Bold.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as l}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Bold (Cmd/Ctrl+B)"}command(){this.wrapSelection("**","**","bold text")}render(){return l`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_bold"></k-icon>
-      </button>
-    `}}customElements.define("k-md-bold",o);

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

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as l}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{constructor(){super(),this.label="Bulleted list"}command(){this.insertLinePrefix("- ")}render(){return l`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_list_bulleted"></k-icon>
-      </button>
-    `}}customElements.define("k-md-bullet-list",e);

package/docs/src/components/markdownEditorControls/Code.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Code"}command(){this.getSelection().text.includes("\n")?this.wrapSelection("```\n","\n```","code"):this.wrapSelection("`","`","code")}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="code"></k-icon>
-      </button>
-    `}}customElements.define("k-md-code",o);

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

@@ -1,30 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as s}from"../../lit-all.min.js";import"../Icon.js";const a={h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6"},i={h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6"};export default class o extends t{static properties={...t.properties,tag:{type:String,reflect:!0}};constructor(){super(),this.tag="h2",this.label=""}command(){const t=(this.tag||"h2").toLowerCase();if(/^h[1-6]$/.test(t)){const e=parseInt(t.slice(1),10);this.insertLinePrefix("#".repeat(e)+" ",/^#{1,6} /)}}get#t(){return this.label?this.label:a[(this.tag||"h2").toLowerCase()]||this.tag}get#e(){return i[(this.tag||"h2").toLowerCase()]||"format_h2"}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.#t}
-        aria-label=${this.#t}
-        @click=${this.handleClick}
-      >
-        <k-icon name=${this.#e}></k-icon>
-        <span class="fb-label">${this.#t}</span>
-      </button>
-    `}static styles=[t.styles,s`
-      :host {
-        display: inline-flex;
-      }
-      .ctrl {
-        gap: 0.5rem;
-        justify-content: flex-start;
-        white-space: nowrap;
-      }
-      /* When this is slotted into something that stretches it (a menu),
-         the button fills the row instead of staying compact. */
-      :host([slot]) .ctrl,
-      :host(*) .ctrl {
-        width: 100%;
-      }
-      .fb-label {
-        font-size: 0.875rem;
-      }
-    `]}customElements.define("k-md-format-block",o);

package/docs/src/components/markdownEditorControls/Heading.js

@@ -1,11 +0,0 @@
-import e from"./MarkdownEditorControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";import{bound as i}from"../../utils/number.js";export default class r extends e{static properties={...e.properties,level:{type:Number,reflect:!0}};constructor(){super(),this.level=2,this.label="Heading"}command(){const e=i(Number(this.level)||2,1,6);this.insertLinePrefix("#".repeat(e)+" ",/^#{1,6} /)}render(){const e=i(Number(this.level)||2,1,6);return t`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title="${this.label} ${e}"
-        aria-label="${this.label} ${e}"
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_h${e}"></k-icon>
-      </button>
-    `}}customElements.define("k-md-heading",r);

package/docs/src/components/markdownEditorControls/Image.js

@@ -1,93 +0,0 @@
-import e from"./MarkdownEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";import r from"../Dialog.js";export default class i extends e{static properties={...e.properties,popup:{type:String,reflect:!0}};constructor(){super(),this.label="Image",this.popup="dropdown"}command(){"dialog"===this.popup&&this.#e()}#t(e,t){return!!e&&(this.editor?.replaceSelection(`![${t}](${e})`,{selectInserted:!1}),!0)}handleDropdownOpened=()=>{requestAnimationFrame(()=>{this.#o?.focus();const e=this.getSelection();this.#r&&(this.#r.value=e.text||"")})};handleDropdownClosed=()=>{this.#o&&(this.#o.value=""),this.#r&&(this.#r.value="")};handleFormKeydown=e=>{"Enter"===e.key?(e.preventDefault(),this.#i()):"Escape"===e.key&&this.shadowRoot?.querySelector("k-dropdown")?.close()};handleInsertClick=()=>this.#i();handleCancelClick=()=>{this.shadowRoot?.querySelector("k-dropdown")?.close()};#i(){const e=this.#o?.value.trim()||"",t=this.#r?.value.trim()||"";e?(this.#t(e,t),this.shadowRoot?.querySelector("k-dropdown")?.close()):this.#o?.focus()}get#o(){return this.shadowRoot?.querySelector(".image-url")}get#r(){return this.shadowRoot?.querySelector(".image-alt")}#e(){if(!this.editor)return;const e=this.getSelection(),t=document.createElement("input");t.type="url",t.placeholder="https://example.com/image.png",t.required=!0,t.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const o=document.createElement("input");o.type="text",o.placeholder="Description for screen readers",o.value=e.text||"",o.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const i=document.createElement("div");i.className="p",i.style.cssText="display: flex; flex-direction: column; gap: 1rem;",i.innerHTML='\n      <div style="display: flex; flex-direction: column; gap: 0.25rem;">\n        <label style="font-weight: bold;">Image URL</label>\n      </div>\n      <div style="display: flex; flex-direction: column; gap: 0.25rem;">\n        <label style="font-weight: bold;">Alt text</label>\n      </div>\n    ',i.children[0].appendChild(t),i.children[1].appendChild(o),r.create(i,{title:"Insert Image",cancelText:"Cancel",confirmText:"Insert",confirmClasses:"success ml",confirmAction:e=>{const r=t.value.trim();if(!r)return e.keepDialogOpen=!0,void t.focus();this.#t(r,o.value.trim())}}),queueMicrotask(()=>t.focus())}render(){return"dialog"===this.popup?t`
-        <button
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-          @click=${this.handleClick}
-        >
-          <k-icon name="image"></k-icon>
-        </button>
-      `:t`
-      <k-dropdown
-        @opened=${this.handleDropdownOpened}
-        @closed=${this.handleDropdownClosed}
-      >
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <k-icon name="image"></k-icon>
-        </button>
-        <div class="image-form" @keydown=${this.handleFormKeydown}>
-          <label>Image URL</label>
-          <input
-            class="image-url"
-            type="url"
-            required
-            placeholder="https://example.com/image.png"
-          />
-          <label>Alt text</label>
-          <input
-            class="image-alt"
-            type="text"
-            placeholder="Description for screen readers"
-          />
-          <div class="image-actions">
-            <button type="button" class="no-btn" @click=${this.handleCancelClick}>Cancel</button>
-            <button type="button" class="no-btn primary" @click=${this.handleInsertClick}>Insert</button>
-          </div>
-        </div>
-      </k-dropdown>
-    `}static styles=[e.styles,o`
-      .image-form {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        padding: 0.75rem;
-        min-width: 16rem;
-      }
-      .image-form label {
-        font-weight: bold;
-        font-size: 0.875rem;
-      }
-      .image-form input {
-        padding: 0.5rem;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        font: inherit;
-        background: var(--c_bg);
-        color: var(--tc);
-      }
-      .image-form input:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-      .image-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.5rem;
-        margin-top: 0.25rem;
-      }
-      .image-actions button {
-        padding: 0.4rem 0.8rem;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        background: var(--c_bg);
-        color: var(--tc);
-        cursor: pointer;
-        font: inherit;
-      }
-      .image-actions button.primary {
-        background: var(--c_primary);
-        color: white;
-        border-color: var(--c_primary);
-      }
-      .image-actions button:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-    `]}customElements.define("k-md-image",i);

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

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{constructor(){super(),this.label="Italic (Cmd/Ctrl+I)"}command(){this.wrapSelection("_","_","italic text")}render(){return i`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_italic"></k-icon>
-      </button>
-    `}}customElements.define("k-md-italic",l);

package/docs/src/components/markdownEditorControls/Link.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{constructor(){super(),this.label="Link"}command(){const t=this.getSelection(),e=this.editor;if(!e)return;const n=e.textarea;if(!n)return;const s=(t,s,l)=>{n.value=t,n.selectionStart=s,n.selectionEnd=l,n.focus(),e.value=t,n.dispatchEvent(new Event("input",{bubbles:!0}))},l=/\[([^\]]*)\]\([^)]*\)/g;let i;for(;null!==(i=l.exec(n.value));){const e=i.index,l=e+i[0].length;if(t.start>=e&&t.end<=l){const t=i[1];return void s(n.value.substring(0,e)+t+n.value.substring(l),e,e+t.length)}}const r=t.text||"link text",o=`[${r}](url)`,a=n.value.substring(0,t.start)+o+n.value.substring(t.end),u=t.start+1+r.length+2;s(a,u,u+3)}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="link"></k-icon>
-      </button>
-    `}}customElements.define("k-md-link",n);

package/docs/src/components/markdownEditorControls/MarkdownEditorControl.js

@@ -1,39 +0,0 @@
-import e from"../ShadowComponent.js";import{html as t,css as i}from"../../lit-all.min.js";export default class n extends e{static properties={btnClass:{type:String,attribute:"btn-class"},label:{type:String,reflect:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="no-btn ctrl",this.label="",this.hidesInPreviewMode=!0}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.boundEditor=e,this.modeHandler=()=>{const e=this.hidesInPreviewMode&&"preview"===this.boundEditor.mode;this.hidden!==e&&(this.hidden=e)},this.modeHandler(),e.addEventListener("mode-change",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.boundEditor&&this.modeHandler&&this.boundEditor.removeEventListener("mode-change",this.modeHandler),this.boundEditor=null,this.modeHandler=null}get editor(){const e=this.closest("k-markdown-editor");if(e)return e;const t=this.getRootNode();return t instanceof ShadowRoot&&"K-MARKDOWN-EDITOR"===t.host?.tagName?t.host:null}wrapSelection(e,t,i){this.editor?.wrapSelection(e,t,i)}insertAtCursor(e){this.editor?.insertAtCursor(e)}insertLinePrefix(e,t){this.editor?.insertLinePrefix(e,t)}replaceInSelectedLines(e,t){this.editor?.replaceInSelectedLines(e,t)}replaceSelection(e,t){this.editor?.replaceSelection(e,t)}getSelection(){return this.editor?.getSelection()||{start:0,end:0,text:""}}command(){}handleClick=e=>{e.preventDefault(),this.hidden||this.command()};render(){return t`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <slot>${this.label}</slot>
-      </button>
-    `}static styles=i`
-    :host {
-      display: inline-flex;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-    .ctrl {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--spacer_h);
-      border: 1px solid transparent;
-      border-radius: var(--radius);
-      background: transparent;
-      color: var(--tc_muted);
-      cursor: pointer;
-      font: inherit;
-      transition: background var(--animation_ms), color var(--animation_ms);
-    }
-    .ctrl:hover {
-      background: var(--c_bg__alt);
-      color: var(--tc);
-    }
-    .ctrl:focus-visible {
-      outline: none;
-      box-shadow: var(--focus_shadow);
-    }
-  `}customElements.define("k-md-control",n);

package/docs/src/components/markdownEditorControls/Menu.js

@@ -1,30 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";export default class s extends t{constructor(){super(),this.label="Menu"}command(){}render(){return e`
-      <k-dropdown>
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <slot name="trigger">
-            <k-icon name="menu"></k-icon>
-          </slot>
-        </button>
-        <slot></slot>
-      </k-dropdown>
-    `}static styles=[t.styles,o`
-      :host {
-        display: inline-flex;
-      }
-      k-dropdown {
-        display: inline-flex;
-      }
-      /* Stretch slotted menu items so each one fills the dropdown
-         horizontally — Dropdown's built-in styles only target raw
-         <a>/<button> children, so custom-element items need this themselves. */
-      ::slotted(:not([slot="trigger"])) {
-        display: block;
-        width: 100%;
-      }
-    `]}customElements.define("k-md-menu",s);

package/docs/src/components/markdownEditorControls/NumberedList.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{constructor(){super(),this.label="Numbered list"}command(){const t=this.editor;if(!t)return;const e=t.textarea;e&&("write"!==t.mode&&(t.mode="write"),t.updateComplete.then(()=>{e.focus();const{selectionStart:n,selectionEnd:l,value:s}=e,i=s.lastIndexOf("\n",n-1)+1,r=s.indexOf("\n",l),o=-1===r?s.length:r,a=s.substring(i,o).split("\n"),c=/^\d+\. /,u=a.filter(t=>t.length>0);let d;if(u.length>0&&u.every(t=>c.test(t)))d=a.map(t=>t.replace(c,""));else{let t=1;d=a.map(e=>{if(!e)return e;const n=e.replace(c,"");return`${t++}. ${n}`})}const m=d.join("\n"),b=s.substring(0,i)+m+s.substring(o);e.value=b,e.selectionStart=i,e.selectionEnd=i+m.length,t.value=b,e.dispatchEvent(new Event("input",{bubbles:!0}))}))}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_list_numbered"></k-icon>
-      </button>
-    `}}customElements.define("k-md-numbered-list",n);

package/docs/src/components/markdownEditorControls/Quote.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Quote"}command(){this.insertLinePrefix("> ")}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_quote"></k-icon>
-      </button>
-    `}}customElements.define("k-md-quote",o);

package/docs/src/components/markdownEditorControls/SpeechToText.js

@@ -1,16 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../SpeechToText.js";export default class s extends t{static properties={...t.properties,language:{type:String,reflect:!0},continuous:{type:Boolean,reflect:!0}};constructor(){super(),this.label="Speech to text",this.language="en-US",this.continuous=!1}command(){}handleEnd=t=>{const e=(t.detail?.text||"").trim();e&&this.editor?.replaceSelection(e+" ",{selectInserted:!1})};render(){return e`
-      <k-speech-to-text
-        language=${this.language}
-        ?continuous=${this.continuous}
-        @end=${this.handleEnd}
-      ></k-speech-to-text>
-    `}static styles=[t.styles,o`
-    :host {
-      margin: var(--spacer_q);
-    }
-      k-speech-to-text {
-        /* Shrink the default 2.5rem circular mic button so it sits
-           comfortably alongside other toolbar controls. */
-        --btn_size: 2rem;
-      }
-    `]}customElements.define("k-md-speech-to-text",s);