kempo-ui 0.4.19 → 0.4.21

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

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

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

@@ -1,20 +1,20 @@
 import '../../../src/components/HtmlEditor.js';
-import '../../../src/components/codeEditorControls/CopyCode.js';
-import '../../../src/components/codeEditorControls/WordWrap.js';
+import '../../../src/components/controls/CopyCode.js';
+import '../../../src/components/controls/WordWrap.js';
 
 const createHtmlEditorWithControls = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-cec-copy-code slot="toolbar-top-left"></k-cec-copy-code>
-			<k-cec-word-wrap slot="toolbar-top-left"></k-cec-word-wrap>
+			<kc-copy-code slot="toolbar-top-left"></kc-copy-code>
+			<kc-word-wrap slot="toolbar-top-left"></kc-word-wrap>
 		</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 copyCode = container.querySelector('k-cec-copy-code');
-	const wordWrap = container.querySelector('k-cec-word-wrap');
+	const copyCode = container.querySelector('kc-copy-code');
+	const wordWrap = container.querySelector('kc-word-wrap');
 	return { container, editor, copyCode, wordWrap };
 };
 
@@ -72,7 +72,7 @@ export default {
 
 	'controls should find HtmlEditor as parent': async ({pass, fail}) => {
 		const { container, editor, copyCode } = await createHtmlEditorWithControls();
-		if(copyCode.editor !== editor){
+		if(copyCode.host !== editor){
 			cleanup(container);
 			return fail('Should find k-html-editor as parent');
 		}

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

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

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

@@ -1,9 +1,9 @@
-import '../../../src/components/tableControls/FirstPage.js';
-import '../../../src/components/tableControls/LastPage.js';
-import '../../../src/components/tableControls/NextPage.js';
-import '../../../src/components/tableControls/PrevPage.js';
-import '../../../src/components/tableControls/PageSelect.js';
-import '../../../src/components/tableControls/PageSize.js';
+import '../../../src/components/controls/TcFirstPage.js';
+import '../../../src/components/controls/TcLastPage.js';
+import '../../../src/components/controls/TcNextPage.js';
+import '../../../src/components/controls/TcPrevPage.js';
+import '../../../src/components/controls/TcPageSelect.js';
+import '../../../src/components/controls/TcPageSize.js';
 import '../../../src/components/Table.js';
 
 const sampleRecords = [];
@@ -44,9 +44,9 @@ export default {
 		FirstPage Tests
 	*/
 	'FirstPage: should render first page button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-first-page');
+		const { container, control } = await createTableWithControl('kc-tc-first-page');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('FirstPage should render button');
@@ -65,13 +65,13 @@ export default {
 	},
 
 	'FirstPage: should be disabled on first page': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-first-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-first-page');
 		
 		table.currentPage = 1;
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn.disabled){
 			cleanup(container);
 			fail('FirstPage button should be disabled on page 1');
@@ -83,13 +83,13 @@ export default {
 	},
 
 	'FirstPage: should be enabled on other pages': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-first-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-first-page');
 		
 		table.setPage(3);
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(btn.disabled){
 			cleanup(container);
 			fail('FirstPage button should be enabled on page 3');
@@ -101,12 +101,12 @@ export default {
 	},
 
 	'FirstPage: should navigate to first page on click': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-first-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-first-page');
 		
 		table.setPage(3);
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		await table.updateComplete;
 		
@@ -124,9 +124,9 @@ export default {
 		LastPage Tests
 	*/
 	'LastPage: should render last page button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-last-page');
+		const { container, control } = await createTableWithControl('kc-tc-last-page');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('LastPage should render button');
@@ -145,14 +145,14 @@ export default {
 	},
 
 	'LastPage: should be disabled on last page': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-last-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-last-page');
 		
 		const totalPages = table.getTotalPages();
 		table.setPage(totalPages);
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn.disabled){
 			cleanup(container);
 			fail('LastPage button should be disabled on last page');
@@ -164,13 +164,13 @@ export default {
 	},
 
 	'LastPage: should be enabled on other pages': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-last-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-last-page');
 		
 		table.setPage(1);
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(btn.disabled){
 			cleanup(container);
 			fail('LastPage button should be enabled on page 1');
@@ -182,13 +182,13 @@ export default {
 	},
 
 	'LastPage: should navigate to last page on click': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-last-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-last-page');
 		
 		table.setPage(1);
 		await table.updateComplete;
 		
 		const totalPages = table.getTotalPages();
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		await table.updateComplete;
 		
@@ -206,9 +206,9 @@ export default {
 		NextPage Tests
 	*/
 	'NextPage: should render next page button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-next-page');
+		const { container, control } = await createTableWithControl('kc-tc-next-page');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('NextPage should render button');
@@ -227,14 +227,14 @@ export default {
 	},
 
 	'NextPage: should be disabled on last page': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-next-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-next-page');
 		
 		const totalPages = table.getTotalPages();
 		table.setPage(totalPages);
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn.disabled){
 			cleanup(container);
 			fail('NextPage button should be disabled on last page');
@@ -246,12 +246,12 @@ export default {
 	},
 
 	'NextPage: should advance page on click': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-next-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-next-page');
 		
 		table.setPage(1);
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		await table.updateComplete;
 		
@@ -269,9 +269,9 @@ export default {
 		PrevPage Tests
 	*/
 	'PrevPage: should render prev page button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-prev-page');
+		const { container, control } = await createTableWithControl('kc-tc-prev-page');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('PrevPage should render button');
@@ -290,13 +290,13 @@ export default {
 	},
 
 	'PrevPage: should be disabled on first page': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-prev-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-prev-page');
 		
 		table.setPage(1);
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn.disabled){
 			cleanup(container);
 			fail('PrevPage button should be disabled on page 1');
@@ -308,12 +308,12 @@ export default {
 	},
 
 	'PrevPage: should go back page on click': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-prev-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-prev-page');
 		
 		table.setPage(3);
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		await table.updateComplete;
 		
@@ -331,7 +331,7 @@ export default {
 		PageSelect Tests
 	*/
 	'PageSelect: should render page select dropdown': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-page-select');
+		const { container, control } = await createTableWithControl('kc-tc-page-select');
 		
 		const select = control.shadowRoot.querySelector('select');
 		if(!select){
@@ -345,7 +345,7 @@ export default {
 	},
 
 	'PageSelect: should have options for all pages': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-page-select');
+		const { container, table, control } = await createTableWithControl('kc-tc-page-select');
 		
 		// Wait for control to update after table records are set
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -365,7 +365,7 @@ export default {
 	},
 
 	'PageSelect: should change page on selection': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-page-select');
+		const { container, table, control } = await createTableWithControl('kc-tc-page-select');
 		
 		await new Promise(resolve => setTimeout(resolve, 50));
 		
@@ -385,7 +385,7 @@ export default {
 	},
 
 	'PageSelect: should show total pages label': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-page-select');
+		const { container, table, control } = await createTableWithControl('kc-tc-page-select');
 		
 		await new Promise(resolve => setTimeout(resolve, 50));
 		await control.updateComplete;
@@ -412,7 +412,7 @@ export default {
 		PageSize Tests
 	*/
 	'PageSize: should render page size dropdown': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-page-size');
+		const { container, control } = await createTableWithControl('kc-tc-page-size');
 		
 		const select = control.shadowRoot.querySelector('select');
 		if(!select){
@@ -426,7 +426,7 @@ export default {
 	},
 
 	'PageSize: should have page size options': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-page-size');
+		const { container, table, control } = await createTableWithControl('kc-tc-page-size');
 		
 		await new Promise(resolve => setTimeout(resolve, 50));
 		
@@ -442,7 +442,7 @@ export default {
 	},
 
 	'PageSize: should change page size on selection': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-page-size');
+		const { container, table, control } = await createTableWithControl('kc-tc-page-size');
 		
 		await new Promise(resolve => setTimeout(resolve, 50));
 		
@@ -462,7 +462,7 @@ export default {
 	},
 
 	'PageSize: should show current page size as selected': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-page-size');
+		const { container, table, control } = await createTableWithControl('kc-tc-page-size');
 		
 		table.setPageSize(25);
 		await table.updateComplete;
@@ -483,13 +483,13 @@ export default {
 		Update on Events Tests
 	*/
 	'controls should update on pageChange event': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-first-page');
+		const { container, table, control } = await createTableWithControl('kc-tc-first-page');
 		
 		table.setPage(3);
 		await table.updateComplete;
 		await control.updateComplete;
 		
-		let btnBefore = control.shadowRoot.querySelector('button');
+		let btnBefore = control;
 		if(btnBefore.disabled){
 			cleanup(container);
 			fail('Button should not be disabled before navigation');
@@ -501,7 +501,7 @@ export default {
 		await new Promise(resolve => setTimeout(resolve, 10));
 		await control.updateComplete;
 		
-		let btnAfter = control.shadowRoot.querySelector('button');
+		let btnAfter = control;
 		if(!btnAfter.disabled){
 			cleanup(container);
 			fail('Button should be disabled after navigating to first page');

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

@@ -1,7 +1,7 @@
-import '../../../src/components/tableControls/DeleteRecord.js';
-import '../../../src/components/tableControls/Edit.js';
-import '../../../src/components/tableControls/Hide.js';
-import '../../../src/components/tableControls/ShowAll.js';
+import '../../../src/components/controls/TcDeleteRecord.js';
+import '../../../src/components/controls/TcEdit.js';
+import '../../../src/components/controls/TcHide.js';
+import '../../../src/components/controls/TcShowAll.js';
 import '../../../src/components/Table.js';
 
 const sampleRecords = [
@@ -51,9 +51,9 @@ export default {
 		DeleteRecord Tests
 	*/
 	'DeleteRecord: should render delete button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-delete-record');
+		const { container, control } = await createTableWithControl('kc-tc-delete-record');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('DeleteRecord should render button');
@@ -72,7 +72,7 @@ export default {
 	},
 
 	'DeleteRecord: should have delete method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-delete-record');
+		const { container, control } = await createTableWithControl('kc-tc-delete-record');
 		
 		if(typeof control.delete !== 'function'){
 			cleanup(container);
@@ -89,7 +89,7 @@ export default {
 		container.innerHTML = `
 			<k-table>
 				<div slot="controls">
-					<k-tc-delete-record><span class="custom">Remove</span></k-tc-delete-record>
+					<kc-tc-delete-record><span class="custom">Remove</span></kc-tc-delete-record>
 				</div>
 			</k-table>
 		`;
@@ -99,7 +99,7 @@ export default {
 		table.setRecords(sampleRecords.map(r => ({...r})));
 		await table.updateComplete;
 		
-		const control = container.querySelector('k-tc-delete-record');
+		const control = container.querySelector('kc-tc-delete-record');
 		await control.updateComplete;
 		
 		const slot = control.shadowRoot.querySelector('slot');
@@ -117,9 +117,9 @@ export default {
 		Edit Tests
 	*/
 	'Edit: should render edit button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
+		const { container, control } = await createTableWithControl('kc-tc-edit');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('Edit should render button');
@@ -137,21 +137,9 @@ export default {
 		pass('Edit renders correctly');
 	},
 
-	'Edit: should have default maxWidth of 80': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
-		
-		if(control.maxWidth !== 80){
-			cleanup(container);
-			fail(`Expected maxWidth 80, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('Edit has default maxWidth of 80');
-	},
 
 	'Edit: should have isEditing property': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
+		const { container, control } = await createTableWithControl('kc-tc-edit');
 		
 		if(control.isEditing !== undefined && typeof control.isEditing !== 'boolean'){
 			cleanup(container);
@@ -164,7 +152,7 @@ export default {
 	},
 
 	'Edit: should have handleEdit method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
+		const { container, control } = await createTableWithControl('kc-tc-edit');
 		
 		if(typeof control.handleEdit !== 'function'){
 			cleanup(container);
@@ -177,7 +165,7 @@ export default {
 	},
 
 	'Edit: should have handleSave method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
+		const { container, control } = await createTableWithControl('kc-tc-edit');
 		
 		if(typeof control.handleSave !== 'function'){
 			cleanup(container);
@@ -190,7 +178,7 @@ export default {
 	},
 
 	'Edit: should have handleCancel method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
+		const { container, control } = await createTableWithControl('kc-tc-edit');
 		
 		if(typeof control.handleCancel !== 'function'){
 			cleanup(container);
@@ -203,7 +191,7 @@ export default {
 	},
 
 	'Edit: should show save/cancel buttons when editing': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-edit');
+		const { container, control } = await createTableWithControl('kc-tc-edit');
 		
 		control.isEditing = true;
 		await control.updateComplete;
@@ -232,9 +220,9 @@ export default {
 		Hide Tests
 	*/
 	'Hide: should render hide button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-hide');
+		const { container, control } = await createTableWithControl('kc-tc-hide');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('Hide should render button');
@@ -252,21 +240,9 @@ export default {
 		pass('Hide renders correctly');
 	},
 
-	'Hide: should have default maxWidth of 40': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-hide');
-		
-		if(control.maxWidth !== 40){
-			cleanup(container);
-			fail(`Expected maxWidth 40, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('Hide has default maxWidth of 40');
-	},
 
 	'Hide: should have handleHide method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-hide');
+		const { container, control } = await createTableWithControl('kc-tc-hide');
 		
 		if(typeof control.handleHide !== 'function'){
 			cleanup(container);
@@ -282,9 +258,9 @@ export default {
 		ShowAll Tests
 	*/
 	'ShowAll: should render show all button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-show-all');
+		const { container, control } = await createTableWithControl('kc-tc-show-all');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('ShowAll should render button');
@@ -302,21 +278,9 @@ export default {
 		pass('ShowAll renders correctly');
 	},
 
-	'ShowAll: should have default maxWidth of 40': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-show-all');
-		
-		if(control.maxWidth !== 40){
-			cleanup(container);
-			fail(`Expected maxWidth 40, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('ShowAll has default maxWidth of 40');
-	},
 
 	'ShowAll: should have handleShowAll method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-show-all');
+		const { container, control } = await createTableWithControl('kc-tc-show-all');
 		
 		if(typeof control.handleShowAll !== 'function'){
 			cleanup(container);
@@ -329,7 +293,7 @@ export default {
 	},
 
 	'ShowAll: should call table showAllRecords on click': async ({pass, fail}) => {
-		const { container, table, control } = await createTableWithControl('k-tc-show-all');
+		const { container, table, control } = await createTableWithControl('kc-tc-show-all');
 		
 		// Hide some records first
 		table.hideRecord(table.records[0]);
@@ -343,7 +307,7 @@ export default {
 			return;
 		}
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		await table.updateComplete;