kempo-ui 0.4.20 → 0.4.21

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

@@ -1,17 +1,19 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/FontSize.js';
+import '../../../src/components/controls/FontSize.js';
+import '../../../src/components/controls/FontSizeDecrease.js';
+import '../../../src/components/controls/FontSizeIncrease.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-font-size slot="toolbar-top-left"></k-cec-font-size>
+			<kc-font-size slot="toolbar-top-left"></kc-font-size>
 		</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-font-size');
+	const control = container.querySelector('kc-font-size');
 	return { container, editor, control };
 };
 
@@ -20,13 +22,14 @@ const cleanup = container => {
 };
 
 export default {
-	'should render two buttons': async ({pass, fail}) => {
+	'should render two button sub-components': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const buttons = control.shadowRoot.querySelectorAll('button');
-		if(buttons.length !== 2){
+		const decrease = control.shadowRoot.querySelector('kc-font-size-decrease');
+		const increase = control.shadowRoot.querySelector('kc-font-size-increase');
+		if(!decrease || !increase){
 			cleanup(container);
-			return fail(`Expected 2 buttons, got ${buttons.length}`);
+			return fail(`Expected decrease and increase sub-components, got decrease=${!!decrease}, increase=${!!increase}`);
 		}
 		cleanup(container);
 		pass();
@@ -34,7 +37,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');
 		}
@@ -45,13 +48,14 @@ export default {
 	'increase click should call editor.increaseFontSize()': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
 		await control.updateComplete;
+		const increase = control.shadowRoot.querySelector('kc-font-size-increase');
+		await increase.updateComplete;
 		let called = false;
 		editor.increaseFontSize = () => { called = true; return editor; };
-		const buttons = control.shadowRoot.querySelectorAll('button');
-		buttons[1].click();
+		increase.click();
 		if(!called){
 			cleanup(container);
-			return fail('Should call editor.increaseFontSize() on second button click');
+			return fail('Should call editor.increaseFontSize() on increase click');
 		}
 		cleanup(container);
 		pass();
@@ -60,13 +64,14 @@ export default {
 	'decrease click should call editor.decreaseFontSize()': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
 		await control.updateComplete;
+		const decrease = control.shadowRoot.querySelector('kc-font-size-decrease');
+		await decrease.updateComplete;
 		let called = false;
 		editor.decreaseFontSize = () => { called = true; return editor; };
-		const buttons = control.shadowRoot.querySelectorAll('button');
-		buttons[0].click();
+		decrease.click();
 		if(!called){
 			cleanup(container);
-			return fail('Should call editor.decreaseFontSize() on first button click');
+			return fail('Should call editor.decreaseFontSize() on decrease click');
 		}
 		cleanup(container);
 		pass();

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

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import FormatBlock from '../../../src/components/htmlEditorControls/FormatBlock.js';
+import FormatBlock from '../../../src/components/controls/FormatBlock.js';
 
 const createEditorWithControl = async (tag = 'h1') => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-format-block tag="${tag}" slot="toolbar-top-left"></k-hec-format-block>
+			<kc-format-block tag="${tag}" slot="toolbar-top-left"></kc-format-block>
 		</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-format-block');
+	const control = container.querySelector('kc-format-block');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-format-block element': async ({pass, fail}) => {
+	'should create kc-format-block element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof FormatBlock)){
 			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('FormatBlock should render a button');
@@ -62,13 +62,13 @@ export default {
 		const container = document.createElement('div');
 		container.innerHTML = `
 			<k-html-editor>
-				<k-hec-format-block slot="toolbar-top-left"></k-hec-format-block>
+				<kc-format-block slot="toolbar-top-left"></kc-format-block>
 			</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-format-block');
+		const control = container.querySelector('kc-format-block');
 		if(control.tag !== 'p'){
 			cleanup(container);
 			return fail(`Expected default tag "p", got "${control.tag}"`);
@@ -92,7 +92,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('FormatBlock should find its parent k-html-editor');
 		}
@@ -105,7 +105,7 @@ export default {
 		await control.updateComplete;
 		let calledWith = null;
 		editor.formatBlock = tag => { calledWith = tag; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(calledWith !== 'h3'){
 			cleanup(container);
 			return fail(`Expected formatBlock("h3"), got formatBlock("${calledWith}")`);

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

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import FormatCode from '../../../src/components/codeEditorControls/FormatCode.js';
+import FormatCode from '../../../src/components/controls/FormatCode.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-cec-format-code slot="toolbar-top-right"></k-cec-format-code>
+			<kc-format-code slot="toolbar-top-right"></kc-format-code>
 		</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-cec-format-code');
+	const control = container.querySelector('kc-format-code');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-cec-format-code element': async ({pass, fail}) => {
+	'should create kc-format-code element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof FormatCode)){
 			cleanup(container);
@@ -43,18 +43,17 @@ export default {
 		pass('FormatCode has shadow root');
 	},
 
-	'should render a button': async ({pass, fail}) => {
+	'should have button role': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
 		editor.mode = 'code';
 		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
-		if(!button){
+		if(control.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('FormatCode should render a button');
+			return fail('FormatCode should have role="button"');
 		}
 		cleanup(container);
-		pass('FormatCode renders a button');
+		pass('FormatCode has button role');
 	},
 
 	'should render an icon': async ({pass, fail}) => {
@@ -76,7 +75,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('FormatCode should find its parent k-html-editor');
 		}
@@ -90,7 +89,7 @@ export default {
 		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
 		await control.updateComplete;
 		try {
-			control.shadowRoot.querySelector('button').click();
+			control.click();
 			cleanup(container);
 			pass('Click with no monacoEditor does not throw');
 		} catch(e) {
@@ -99,30 +98,30 @@ export default {
 		}
 	},
 
-	'handleClick should call formatCode on editor': async ({pass, fail}) => {
+	'handleAction should call formatCode on editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
 		let called = false;
 		editor.formatCode = () => { called = true; };
-		control.handleClick();
+		control.handleAction();
 		if(!called){
 			cleanup(container);
-			return fail('handleClick should call editor.formatCode()');
+			return fail('handleAction should call editor.formatCode()');
 		}
 		cleanup(container);
 		pass();
 	},
 
-	'handleClick should do nothing when no editor': async ({pass, fail}) => {
-		const control = document.createElement('k-cec-format-code');
+	'handleAction should do nothing when no editor': async ({pass, fail}) => {
+		const control = document.createElement('kc-format-code');
 		document.body.appendChild(control);
 		await control.updateComplete;
 		try {
-			control.handleClick();
+			control.handleAction();
 			document.body.removeChild(control);
 			pass();
 		} catch(e) {
 			document.body.removeChild(control);
-			fail(`handleClick threw when no editor: ${e.message}`);
+			fail(`handleAction threw when no editor: ${e.message}`);
 		}
 	},
 

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

@@ -1,18 +1,18 @@
 import '../../../src/components/CodeEditor.js';
 import '../../../src/components/HtmlEditor.js';
-import '../../../src/components/codeEditorControls/Fullscreen.js';
+import '../../../src/components/controls/Fullscreen.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
+			<kc-fullscreen slot="toolbar-top-right"></kc-fullscreen>
 		</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-fullscreen');
+	const control = container.querySelector('kc-fullscreen');
 	return { container, editor, control };
 };
 
@@ -31,12 +31,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();
@@ -44,7 +44,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');
 		}
@@ -68,7 +68,7 @@ export default {
 		let called = false;
 		const orig = editor.toggleFullscreen.bind(editor);
 		editor.toggleFullscreen = () => { called = true; return orig(); };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call toggleFullscreen on click');
@@ -80,7 +80,7 @@ export default {
 	'click should toggle control fullscreen state to true': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		await control.updateComplete;
 		if(!control.fullscreen){
 			cleanup(container);
@@ -90,27 +90,6 @@ export default {
 		pass();
 	},
 
-	'button title should update on fullscreen': async ({pass, fail}) => {
-		const { container, editor, control } = await createEditorWithControl();
-		await control.updateComplete;
-		const btnBefore = control.shadowRoot.querySelector('button');
-		if(btnBefore.title !== 'Fullscreen'){
-			cleanup(container);
-			return fail(`Expected title "Fullscreen", got "${btnBefore.title}"`);
-		}
-		editor.enterFullscreen();
-		await control.updateComplete;
-		const btnAfter = control.shadowRoot.querySelector('button');
-		if(btnAfter.title !== 'Exit Fullscreen'){
-			cleanup(container);
-			editor.exitFullscreen();
-			return fail(`Expected title "Exit Fullscreen", got "${btnAfter.title}"`);
-		}
-		editor.exitFullscreen();
-		cleanup(container);
-		pass();
-	},
-
 	'control should sync state when editor dispatches fullscreen-changed': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
 		editor.enterFullscreen();
@@ -134,13 +113,13 @@ export default {
 		const container = document.createElement('div');
 		container.innerHTML = `
 			<k-html-editor>
-				<k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
+				<kc-fullscreen slot="toolbar-top-right"></kc-fullscreen>
 			</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-cec-fullscreen');
+		const control = container.querySelector('kc-fullscreen');
 		await control.updateComplete;
 		if(control.hidden){
 			cleanup(container);

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

@@ -1,4 +1,4 @@
-import '../../../src/components/tableControls/HiddenCount.js';
+import '../../../src/components/controls/TcHiddenCount.js';
 import '../../../src/components/Table.js';
 
 const sampleRecords = [
@@ -14,7 +14,7 @@ const createTableWithHiddenCount = async () => {
 	container.innerHTML = `
 		<k-table>
 			<div slot="controls">
-				<k-tc-hidden-count></k-tc-hidden-count>
+				<kc-tc-hidden-count></kc-tc-hidden-count>
 			</div>
 		</k-table>
 	`;
@@ -24,7 +24,7 @@ const createTableWithHiddenCount = async () => {
 	table.setRecords(sampleRecords.map(r => ({...r})));
 	await table.updateComplete;
 	
-	const control = container.querySelector('k-tc-hidden-count');
+	const control = container.querySelector('kc-tc-hidden-count');
 	await control.updateComplete;
 	
 	return { container, table, control };
@@ -246,7 +246,7 @@ export default {
 		Standalone Tests
 	*/
 	'HiddenCount: should handle missing table gracefully': async ({pass, fail}) => {
-		const control = document.createElement('k-tc-hidden-count');
+		const control = document.createElement('kc-tc-hidden-count');
 		document.body.appendChild(control);
 		await control.updateComplete;
 		

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

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import InlineCode from '../../../src/components/htmlEditorControls/InlineCode.js';
+import InlineCode from '../../../src/components/controls/InlineCode.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-inline-code slot="toolbar-top-left"></k-hec-inline-code>
+			<kc-inline-code slot="toolbar-top-left"></kc-inline-code>
 		</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-inline-code');
+	const control = container.querySelector('kc-inline-code');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-inline-code element': async ({pass, fail}) => {
+	'should create kc-inline-code element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof InlineCode)){
 			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('InlineCode 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('InlineCode should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.inlineCode = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.inlineCode()');

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

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import InsertTable from '../../../src/components/htmlEditorControls/InsertTable.js';
+import InsertTable from '../../../src/components/controls/InsertTable.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-insert-table slot="toolbar-top-left"></k-hec-insert-table>
+			<kc-insert-table slot="toolbar-top-left"></kc-insert-table>
 		</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-insert-table');
+	const control = container.querySelector('kc-insert-table');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-insert-table element': async ({pass, fail}) => {
+	'should create kc-insert-table element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof InsertTable)){
 			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('InsertTable 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('InsertTable should find its parent k-html-editor');
 		}
@@ -88,7 +88,7 @@ export default {
 		const { container, editor, control } = await createEditorWithControl();
 		await control.updateComplete;
 		editor.getTableAtSelection = () => null;
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		await new Promise(r => setTimeout(r, 100));
 		const dialog = document.querySelector('k-dialog');
 		if(!dialog){

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

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import Italic from '../../../src/components/htmlEditorControls/Italic.js';
+import Italic from '../../../src/components/controls/Italic.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-italic slot="toolbar-top-left"></k-hec-italic>
+			<kc-italic slot="toolbar-top-left"></kc-italic>
 		</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-italic');
+	const control = container.querySelector('kc-italic');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-italic element': async ({pass, fail}) => {
+	'should create kc-italic element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof Italic)){
 			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('Italic 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('Italic should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.italic = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.italic()');

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

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/LanguageSelect.js';
+import '../../../src/components/controls/Language.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-language slot="toolbar-top-right"></k-cec-language>
+			<kc-language slot="toolbar-top-right"></kc-language>
 		</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-language');
+	const control = container.querySelector('kc-language');
 	return { container, editor, control };
 };
 
@@ -33,7 +33,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');
 		}

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

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/Minimap.js';
+import '../../../src/components/controls/Minimap.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-minimap slot="toolbar-top-left"></k-cec-minimap>
+			<kc-minimap slot="toolbar-top-left"></kc-minimap>
 		</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-minimap');
+	const control = container.querySelector('kc-minimap');
 	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.toggleMinimap.bind(editor);
 		editor.toggleMinimap = () => { called = true; return orig(); };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		await editor.updateComplete;
 		await control.updateComplete;
 		if(!called){