kempo-ui 0.4.20 → 0.4.21

package/tests/components/{tableControls → controls}/Search.browser-test.js

@@ -1,4 +1,4 @@
-import '../../../src/components/tableControls/Search.js';
+import '../../../src/components/controls/TcSearch.js';
 import '../../../src/components/Table.js';
 
 const sampleRecords = [
@@ -14,7 +14,7 @@ const createTableWithSearch = async () => {
 	container.innerHTML = `
 		<k-table>
 			<div slot="controls">
-				<k-tc-search></k-tc-search>
+				<kc-tc-search></kc-tc-search>
 			</div>
 		</k-table>
 	`;
@@ -25,7 +25,7 @@ const createTableWithSearch = async () => {
 	table.setRecords([...sampleRecords]);
 	await table.updateComplete;
 	
-	const search = container.querySelector('k-tc-search');
+	const search = container.querySelector('kc-tc-search');
 	await search.updateComplete;
 	
 	return { container, table, search };
@@ -72,18 +72,6 @@ export default {
 	/*
 		Default Values Tests
 	*/
-	'should have default maxWidth of 200': async ({pass, fail}) => {
-		const { container, search } = await createTableWithSearch();
-		
-		if(search.maxWidth !== 200){
-			cleanup(container);
-			fail(`Expected maxWidth 200, got ${search.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('Search has default maxWidth of 200');
-	},
 
 	/*
 		Search Behavior Tests
@@ -262,7 +250,7 @@ export default {
 		No Table Tests
 	*/
 	'should handle missing table gracefully': async ({pass, fail}) => {
-		const search = document.createElement('k-tc-search');
+		const search = document.createElement('kc-tc-search');
 		document.body.appendChild(search);
 		await search.updateComplete;
 		

package/tests/components/{htmlEditorControls → controls}/Strikethrough.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import Strikethrough from '../../../src/components/htmlEditorControls/Strikethrough.js';
+import Strikethrough from '../../../src/components/controls/Strikethrough.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-strikethrough slot="toolbar-top-left"></k-hec-strikethrough>
+			<kc-strikethrough slot="toolbar-top-left"></kc-strikethrough>
 		</k-html-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-html-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-hec-strikethrough');
+	const control = container.querySelector('kc-strikethrough');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-strikethrough element': async ({pass, fail}) => {
+	'should create kc-strikethrough element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof Strikethrough)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('Strikethrough should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Strikethrough should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.strikethrough = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.strikethrough()');

package/tests/components/{htmlEditorControls → controls}/TextBackgroundColor.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import TextBackgroundColor from '../../../src/components/htmlEditorControls/TextBackgroundColor.js';
+import TextBackgroundColor from '../../../src/components/controls/TextBackgroundColor.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-text-background-color slot="toolbar-top-left"></k-hec-text-background-color>
+			<kc-text-background-color slot="toolbar-top-left"></kc-text-background-color>
 		</k-html-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-html-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-hec-text-background-color');
+	const control = container.querySelector('kc-text-background-color');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-text-bg-color element': async ({pass, fail}) => {
+	'should create kc-text-bg-color element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof TextBackgroundColor)){
 			cleanup(container);
@@ -62,7 +62,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('TextBackgroundColor should find its parent k-html-editor');
 		}

package/tests/components/{htmlEditorControls → controls}/TextColor.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import TextColor from '../../../src/components/htmlEditorControls/TextColor.js';
+import TextColor from '../../../src/components/controls/TextColor.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-text-color slot="toolbar-top-left"></k-hec-text-color>
+			<kc-text-color slot="toolbar-top-left"></kc-text-color>
 		</k-html-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-html-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-hec-text-color');
+	const control = container.querySelector('kc-text-color');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-text-color element': async ({pass, fail}) => {
+	'should create kc-text-color element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof TextColor)){
 			cleanup(container);
@@ -62,7 +62,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('TextColor should find its parent k-html-editor');
 		}

package/tests/components/{htmlEditorControls → controls}/Underline.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import Underline from '../../../src/components/htmlEditorControls/Underline.js';
+import Underline from '../../../src/components/controls/Underline.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-underline slot="toolbar-top-left"></k-hec-underline>
+			<kc-underline slot="toolbar-top-left"></kc-underline>
 		</k-html-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-html-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-hec-underline');
+	const control = container.querySelector('kc-underline');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-underline element': async ({pass, fail}) => {
+	'should create kc-underline element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof Underline)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('Underline should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Underline should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.underline = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.underline()');

package/tests/components/{codeEditorControls → controls}/UndoRedo.browser-test.js

@@ -1,20 +1,20 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/Undo.js';
-import '../../../src/components/codeEditorControls/Redo.js';
+import '../../../src/components/controls/Undo.js';
+import '../../../src/components/controls/Redo.js';
 
 const createEditorWithControls = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-undo slot="toolbar-top-left"></k-cec-undo>
-			<k-cec-redo slot="toolbar-top-left"></k-cec-redo>
+			<kc-undo slot="toolbar-top-left"></kc-undo>
+			<kc-redo slot="toolbar-top-left"></kc-redo>
 		</k-code-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-code-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const undo = container.querySelector('k-cec-undo');
-	const redo = container.querySelector('k-cec-redo');
+	const undo = container.querySelector('kc-undo');
+	const redo = container.querySelector('kc-redo');
 	return { container, editor, undo, redo };
 };
 
@@ -23,23 +23,23 @@ const cleanup = container => {
 };
 
 export default {
-	'undo should create element with button': async ({pass, fail}) => {
+	'undo should have button role': async ({pass, fail}) => {
 		const { container, undo } = await createEditorWithControls();
 		await undo.updateComplete;
-		if(!undo.shadowRoot.querySelector('button')){
+		if(undo.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('Undo should render a button');
+			return fail('Undo should have role="button"');
 		}
 		cleanup(container);
 		pass();
 	},
 
-	'redo should create element with button': async ({pass, fail}) => {
+	'redo should have button role': async ({pass, fail}) => {
 		const { container, redo } = await createEditorWithControls();
 		await redo.updateComplete;
-		if(!redo.shadowRoot.querySelector('button')){
+		if(redo.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('Redo should render a button');
+			return fail('Redo should have role="button"');
 		}
 		cleanup(container);
 		pass();
@@ -47,7 +47,7 @@ export default {
 
 	'undo should find parent editor': async ({pass, fail}) => {
 		const { container, editor, undo } = await createEditorWithControls();
-		if(undo.editor !== editor){
+		if(undo.host !== editor){
 			cleanup(container);
 			return fail('Undo should find parent k-code-editor');
 		}
@@ -60,7 +60,7 @@ export default {
 		await undo.updateComplete;
 		let called = false;
 		editor.undo = () => { called = true; };
-		undo.shadowRoot.querySelector('button').click();
+		undo.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call editor.undo() on click');
@@ -74,7 +74,7 @@ export default {
 		await redo.updateComplete;
 		let called = false;
 		editor.redo = () => { called = true; };
-		redo.shadowRoot.querySelector('button').click();
+		redo.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call editor.redo() on click');

package/tests/components/{htmlEditorControls → controls}/WordCount.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import WordCount from '../../../src/components/htmlEditorControls/WordCount.js';
+import WordCount from '../../../src/components/controls/WordCount.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-word-count slot="toolbar-bottom-left"></k-hec-word-count>
+			<kc-word-count slot="toolbar-bottom-left"></kc-word-count>
 		</k-html-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-html-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-hec-word-count');
+	const control = container.querySelector('kc-word-count');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-word-count element': async ({pass, fail}) => {
+	'should create kc-word-count element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof WordCount)){
 			cleanup(container);
@@ -48,7 +48,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('WordCount should find its parent k-html-editor');
 		}

package/tests/components/{codeEditorControls → controls}/WordWrap.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/WordWrap.js';
+import '../../../src/components/controls/WordWrap.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-word-wrap slot="toolbar-top-left"></k-cec-word-wrap>
+			<kc-word-wrap slot="toolbar-top-left"></kc-word-wrap>
 		</k-code-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-code-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-cec-word-wrap');
+	const control = container.querySelector('kc-word-wrap');
 	return { container, editor, control };
 };
 
@@ -30,12 +30,12 @@ export default {
 		pass();
 	},
 
-	'should render a button': async ({pass, fail}) => {
+	'should have button role': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		if(!control.shadowRoot.querySelector('button')){
+		if(control.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('Should render a button');
+			return fail('Should have role="button"');
 		}
 		cleanup(container);
 		pass();
@@ -43,7 +43,7 @@ export default {
 
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Should find parent k-code-editor');
 		}
@@ -67,7 +67,7 @@ export default {
 		let called = false;
 		const orig = editor.toggleWordWrap.bind(editor);
 		editor.toggleWordWrap = () => { called = true; return orig(); };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		await editor.updateComplete;
 		await control.updateComplete;
 		if(!called){

package/dist/components/codeEditorControls/CodeEditorControl.js

@@ -1,17 +0,0 @@
-import t from"../ShadowComponent.js";import{css as e}from"../../lit-all.min.js";export default class s extends t{static properties={btnClass:{type:String,attribute:"btn-class"},groupBtnClass:{type:String,attribute:"group-btn-class"},groupLastBtnClass:{type:String,attribute:"group-last-btn-class"},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="b r mq ph",this.groupBtnClass="br ph",this.groupLastBtnClass="ph",this.hidden=!1}connectedCallback(){super.connectedCallback(),this.updateModeVisibility();const t=this.editor;"K-HTML-EDITOR"===t?.tagName&&(this.modeHandler=()=>this.updateModeVisibility(),t.addEventListener("mode-changed",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.modeHandler&&(this.editor?.removeEventListener("mode-changed",this.modeHandler),this.modeHandler=null)}updated(t){super.updated(t),t.has("hidden")&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))}updateModeVisibility(){const t=this.editor;if("K-HTML-EDITOR"===t?.tagName){const e="code"!==t.mode;this.hidden!==e&&(this.hidden=e,this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0})))}}get editor(){const t=t=>"K-CODE-EDITOR"===t?.tagName||"K-HTML-EDITOR"===t?.tagName;let e=this.getRootNode();for(;e instanceof ShadowRoot;){const s=e.host;if(t(s))return s;e=s.getRootNode()}let s=this.parentElement;for(;s;){if(t(s))return s;s=s.parentElement}return null}get isInGroup(){const t=this.parentElement;return t&&"K-CEC-GROUP"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=Array.from(this.parentElement.children).filter(t=>t.tagName.startsWith("K-CEC-")&&"K-CEC-SPACER"!==t.tagName);return t[t.length-1]===this}get buttonClasses(){let t;return t=this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}static styles=e`
-		:host {
-			display: inline-flex;
-			align-items: center;
-		}
-		:host([hidden]) {
-			display: none !important;
-		}
-		button {
-			cursor: pointer;
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			min-width: 2rem;
-			min-height: 2rem;
-		}
-	`}

package/dist/components/codeEditorControls/ControlGroup.js

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

package/dist/components/codeEditorControls/ControlSpacer.js

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

package/dist/components/codeEditorControls/CopyCode.js

@@ -1,9 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as o,css as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,e`
-			:host {
-				display: inline-flex;
-			}
-		`];handleClick=()=>{this.editor?.copyToClipboard()};render(){return o`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Copy Code">
-				<k-icon name="content_copy"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-copy-code",s);

package/dist/components/codeEditorControls/EditorTheme.js

@@ -1,26 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends e{static properties={value:{type:String,state:!0}};constructor(){super(),this.value="auto"}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.value=e.editorTheme||"auto",this.themeHandler=e=>{this.value=e.detail.editorTheme},e.addEventListener("editor-theme-changed",this.themeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("editor-theme-changed",this.themeHandler),this.themeHandler=null}handleChange=e=>{this.editor?.setEditorTheme(e.target.value)};static styles=[e.styles,o`
-			:host {
-				background-color: var(--input_bg);
-				color: var(--input_tc);
-				border: var(--input_border_width) solid var(--c_input_border);
-				border-radius: var(--radius);
-				transition: box-shadow var(--animation_ms);
-				position: relative;
-			}
-			k-icon {
-				pointer-events: none;
-				position: absolute;
-				left: 0.5rem;
-			}
-			select {
-				padding-left: 2rem;
-				border: 0;
-			}
-		`];render(){return t`
-			<k-icon name="contrast" style="font-size: 1.125rem; opacity: 0.7;"></k-icon>
-			<select .value=${this.value} @change=${this.handleChange} title="Editor Theme">
-				<option value="auto">Auto</option>
-				<option value="light">Light</option>
-				<option value="dark">Dark</option>
-			</select>
-		`}}customElements.define("k-cec-editor-theme",i);

package/dist/components/codeEditorControls/FindReplace.js

@@ -1,7 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as t,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class s extends e{static styles=[e.styles,i`
-			:host { display: inline-flex; }
-		`];handleClick=()=>{this.editor?.openFind()};render(){return t`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Find & Replace">
-				<k-icon name="search"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-find-replace",s);

package/dist/components/codeEditorControls/FoldAll.js

@@ -1,7 +0,0 @@
-import l from"./CodeEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends l{static properties={folded:{type:Boolean,state:!0}};constructor(){super(),this.folded=!1}handleClick=()=>{this.folded=!this.folded,this.folded?this.editor?.foldAll():this.editor?.unfoldAll()};static styles=[l.styles,o`
-			:host { display: inline-flex; }
-		`];render(){return t`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="${this.folded?"Unfold All":"Fold All"}">
-				<k-icon name="${this.folded?"unfold_more":"unfold_less"}"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-fold-all",e);

package/dist/components/codeEditorControls/FontSize.js

@@ -1,13 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as t,css as s}from"../../lit-all.min.js";import"../Icon.js";export default class n extends e{static styles=[e.styles,s`
-			:host {
-				display: inline-flex;
-				gap: 0;
-			}
-		`];handleIncrease=()=>{this.editor?.increaseFontSize()};handleDecrease=()=>{this.editor?.decreaseFontSize()};render(){return t`
-			<button class="${this.buttonClasses}" @click="${this.handleDecrease}" title="Decrease Font Size">
-				<k-icon name="text_decrease"></k-icon>
-			</button>
-			<button class="${this.buttonClasses}" @click="${this.handleIncrease}" title="Increase Font Size">
-				<k-icon name="text_increase"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-font-size",n);

package/dist/components/codeEditorControls/FormatCode.js

@@ -1,9 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,o`
-			:host {
-				display: inline-flex;
-			}
-		`];handleClick=()=>{this.editor?.formatCode()};render(){return e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Format Code">
-				<k-icon name="frame_source"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-format-code",s);

package/dist/components/codeEditorControls/Fullscreen.js

@@ -1,12 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as l,css as s}from"../../lit-all.min.js";import"../Icon.js";export default class t extends e{static properties={fullscreen:{type:Boolean,state:!0}};constructor(){super(),this.fullscreen=!1}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.fullscreen=e.fullscreen,this.fullscreenHandler=()=>{this.fullscreen=e.fullscreen},e.addEventListener("fullscreen-changed",this.fullscreenHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("fullscreen-changed",this.fullscreenHandler),this.fullscreenHandler=null}updateModeVisibility(){}handleClick=()=>{this.editor?.toggleFullscreen()};static styles=[e.styles,s`
-			:host { display: inline-flex; }
-			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
-		`];render(){return l`
-			<button
-				class="${this.buttonClasses} ${this.fullscreen?"active":""}"
-				@click="${this.handleClick}"
-				title="${this.fullscreen?"Exit Fullscreen":"Fullscreen"}"
-			>
-				<k-icon name="${this.fullscreen?"fullscreen_exit":"fullscreen"}"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-fullscreen",t);

package/dist/components/codeEditorControls/LanguageSelect.js

@@ -1,15 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as a,css as t}from"../../lit-all.min.js";import"../Icon.js";const l=["javascript","typescript","html","css","json","markdown","python","java","csharp","cpp","go","rust","php","ruby","sql","xml","yaml","shell","plaintext"];export default class n extends e{static properties={value:{type:String,state:!0}};constructor(){super(),this.value="javascript"}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.value=e.language||"javascript",this.languageHandler=e=>{this.value=e.detail.language},e.addEventListener("language-changed",this.languageHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("language-changed",this.languageHandler),this.languageHandler=null}handleChange=e=>{this.editor?.setLanguage(e.target.value)};static styles=[e.styles,t`
-			:host {
-				display: inline-flex;
-				align-items: center;
-				padding: 0 0.25rem;
-				gap: 0.25rem;
-				background-color: 
-			}
-		`];render(){return a`
-			<select .value=${this.value} @change=${this.handleChange} title="Language">
-				${l.map(e=>a`
-					<option value="${e}" ?selected=${this.value===e}>${e}</option>
-				`)}
-			</select>
-		`}}customElements.define("k-cec-language",n);

package/dist/components/codeEditorControls/Minimap.js

@@ -1,8 +0,0 @@
-import i from"./CodeEditorControl.js";import{html as t,css as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends i{static properties={active:{type:Boolean,state:!0}};constructor(){super(),this.active=!1}connectedCallback(){super.connectedCallback();const i=this.editor;i&&(this.active=i.minimapEnabled,this.minimapHandler=i=>{this.active=i.detail.minimapEnabled},i.addEventListener("minimap-changed",this.minimapHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("minimap-changed",this.minimapHandler),this.minimapHandler=null}handleClick=()=>{this.editor?.toggleMinimap()};static styles=[i.styles,e`
-			:host { display: inline-flex; }
-			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
-		`];render(){return t`
-			<button class="${this.buttonClasses} ${this.active?"active":""}" @click="${this.handleClick}" title="Toggle Minimap">
-				<k-icon name="map"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-minimap",n);

package/dist/components/codeEditorControls/Redo.js

@@ -1,7 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,o`
-			:host { display: inline-flex; }
-		`];handleClick=()=>{this.editor?.redo()};render(){return e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Redo">
-				<k-icon name="redo"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-redo",s);

package/dist/components/codeEditorControls/Undo.js

@@ -1,7 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,o`
-			:host { display: inline-flex; }
-		`];handleClick=()=>{this.editor?.undo()};render(){return e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Undo">
-				<k-icon name="undo"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-undo",s);

package/dist/components/codeEditorControls/WordWrap.js

@@ -1,8 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Icon.js";export default class a extends t{static properties={active:{type:Boolean,state:!0}};constructor(){super(),this.active=!0}connectedCallback(){super.connectedCallback();const t=this.editor;t&&(this.active=t.wordWrap,this.wordWrapHandler=t=>{this.active=t.detail.wordWrap},t.addEventListener("word-wrap-changed",this.wordWrapHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("word-wrap-changed",this.wordWrapHandler),this.wordWrapHandler=null}handleClick=()=>{this.editor?.toggleWordWrap()};static styles=[t.styles,r`
-			:host { display: inline-flex; }
-			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
-		`];render(){return e`
-			<button class="${this.buttonClasses} ${this.active?"active":""}" @click="${this.handleClick}" title="Word Wrap">
-				<k-icon name="wrap_text"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-word-wrap",a);

package/dist/components/htmlEditorControls/AlignCenter.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.alignCenter()};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_align_center"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`}}customElements.define("k-hec-align-center",o);