fix(cosmoz-tab): correct getIcon

lib/render.js

@@ -95,10 +95,11 @@ const style = `
 		elected,
 		onElect
 	}) => tab => {
-		const icon = getIcon(tab);
+		const isSelected = elected === tab,
+			icon = getIcon(tab, isSelected);
 		return html`<a class="tab" tabindex="-1" role="tab"
 			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
-			?aria-selected=${ elected === tab }
+			?aria-selected=${ isSelected }
 			@click=${ onElect }
 			.tab=${ tab }
 		>

lib/utils.js

@@ -1,14 +1,13 @@
-const isInvalid = tab => tab.hidden || tab.disabled,
-
-	isValid = tab => !isInvalid(tab),
+const isValid = tab => !tab.hidden && !tab.disabled,
 
 	/**
 	 * Gets the element icon name.
 	 *
 	 * @param {HTMLElement} tab The tab to compute icon for
+	 * @param {boolean} isSelected Is the tab selected
 	 * @returns {string} Name of the element icon.
 	 */
-	getIcon = tab => tab.isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
+	getIcon = (tab, isSelected) => isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
 
 	/**
 	 * Gets the element icon style property and value if icon color is
@@ -23,23 +22,6 @@ const isInvalid = tab => tab.hidden || tab.disabled,
 			.join(';');
 	},
 
-	encloses = (ancestor, descendant, _limits = []) => {
-		const limits = [..._limits, document.body];
-		let parent = descendant;
-		while (parent && !limits.includes(parent)) {
-			if (parent === ancestor) {
-				return true;
-			}
-			const nextParent = parent.parentNode;
-			if (nextParent == null && parent instanceof ShadowRoot) {
-				parent = parent.host;
-				continue;
-			}
-			parent = nextParent;
-
-		}
-		return false;
-	},
 	elect = (tabs, selected) => {
 		if (selected == null) {
 			return tabs.find(isValid);
@@ -50,9 +32,7 @@ const isInvalid = tab => tab.hidden || tab.disabled,
 
 
 export {
-	encloses,
 	elect,
-	isInvalid,
 	isValid,
 	getIcon,
 	getIconStyle

test/cosmoz-tabs-basic.test.js

@@ -11,7 +11,7 @@ suite('cosmoz-tabs', () => {
 		tabs = await fixture(html`
 			<cosmoz-tabs>
 				<cosmoz-tab name="tab0" heading="Tab0">1</cosmoz-tab>
-				<cosmoz-tab name="tab1" heading="Tab1" badge="2">2</cosmoz-tab>
+				<cosmoz-tab name="tab1" heading="Tab1" badge="2" icon="radio-button-unchecked" selected-icon="radio-button-checked">2</cosmoz-tab>
 				<cosmoz-tab name="tab2" hidden>3</cosmoz-tab>
 				<cosmoz-tab name="tab3" heading="Tab3" disabled>3</cosmoz-tab>
 			</cosmoz-tabs>
@@ -35,6 +35,14 @@ suite('cosmoz-tabs', () => {
 		assert.lengthOf(tabs.shadowRoot.querySelectorAll('[role=tab]'), tabs.querySelectorAll('cosmoz-tab').length);
 	});
 
+	test('sets icon inside tab', async () => {
+		const icon = tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon');
+		assert.equal(icon.getAttribute('icon'), 'radio-button-unchecked');
+		tabs.selected = 'tab1';
+		await nextFrame();
+		assert.equal(tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon').getAttribute('icon'), 'radio-button-checked');
+	});
+
 	test('sets heading inside tab', () => {
 		assert.deepEqual(
 			Array.from(tabs.shadowRoot.querySelectorAll('[role=tab]>span')).map(e => e.innerText),

test/cosmoz-tabs-events.test.js

@@ -2,8 +2,6 @@ import {
 	assert,
 	html,
 	fixtureSync,
-	fixture,
-	nextFrame,
 	oneEvent
 } from '@open-wc/testing';
 import {