refactor: replace paper-icon-button with button

Replace paper-icon-button with button in preparation of toggling expand
with css.

cosmoz-omnitable-styles.js

@@ -452,7 +452,7 @@ export default css`
 	.itemRow:hover .checkbox:not(:checked):not(:hover) {
 		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.54) inset;
 	}
-	.groupRow:hover .fold:not(:hover),
+	.groupRow:hover .expand:not(:hover),
 	.itemRow:hover .expand:not(:hover) {
 		color: rgba(0, 0, 0, 0.54);
 	}
@@ -468,17 +468,30 @@ export default css`
 		height: 24px;
 		padding: 0;
 		flex: none;
-	}
-
-	.expand,
-	.fold {
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+		background: none;
+		transition: 0.15s background ease-in;
+		outline: none;
 		color: rgba(0, 0, 0, 0.16);
-	}
 
-	.expand:hover,
-	.fold:hover {
+	}
+	.expand svg {
+		fill: currentColor;
+	}
+	.expand:not([aria-expanded]) svg {
+		transform: scaleY(-1);
+	}
+	.expand:active {
+		background: rgba(33,33,33,0.25)
+	}
+	.expand:hover {
 		color: #000;
 	}
+	.groupRow .expand {
+		margin: 8px;
+	}
 
 	.sg {
 		display: inline-flex;

cosmoz-omnitable.js

@@ -2,7 +2,6 @@
 /* eslint-disable max-lines */
 import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
-import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-spinner/paper-spinner-lite';
 
 import '@neovici/cosmoz-grouped-list';

lib/use-list.js

@@ -4,6 +4,18 @@ import { indexSymbol } from './utils';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { onItemChange as _onItemChange } from './utils-data';
 
+const arrow = html`
+	<svg
+		viewBox="0 0 24 24"
+		preserveAspectRatio="xMidYMid meet"
+		focusable="false"
+	>
+		<g>
+			<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
+		</g>
+	</svg>
+`;
+
 const _getGroupRowClasses = (folded) =>
 		folded ? 'groupRow groupRow-folded' : 'groupRow',
 	_getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
@@ -22,7 +34,11 @@ const _getGroupRowClasses = (folded) =>
 			html` <div class="item-row-wrapper">
 				<div
 					?selected=${selected}
-					part="${['itemRow', `itemRow-${item[indexSymbol]}`, rowPartFn?.(item, index)]
+					part="${[
+						'itemRow',
+						`itemRow-${item[indexSymbol]}`,
+						rowPartFn?.(item, index),
+					]
 						.filter(Boolean)
 						.join(' ')}"
 					.dataIndex=${item[indexSymbol]}
@@ -49,12 +65,15 @@ const _getGroupRowClasses = (folded) =>
 						.onItemChange=${onItemChange}
 					>
 					</cosmoz-omnitable-item-row>
-					<paper-icon-button
+
+					<button
 						class="expand"
-						?hidden=${isEmpty(collapsedColumns.length)}
-						.icon=${_getFoldIcon(expanded)}
-						@click=${toggleCollapse}
-					></paper-icon-button>
+						?hidden="${isEmpty(collapsedColumns.length)}"
+						?aria-expanded="${expanded}"
+						@click="${toggleCollapse}"
+					>
+						${arrow}
+					</button>
 				</div>
 				<cosmoz-omnitable-item-expand
 					.columns=${collapsedColumns}
@@ -92,11 +111,9 @@ const _getGroupRowClasses = (folded) =>
 					></cosmoz-omnitable-group-row>
 				</h3>
 				<div class="groupRow-badge">${item.items.length}</div>
-				<paper-icon-button
-					class="fold"
-					.icon=${_getFoldIcon(folded)}
-					@click=${toggleFold}
-				></paper-icon-button>
+				<button class="expand" ?aria-expanded="${folded}" @click=${toggleFold}>
+					${arrow}
+				</button>
 			</div>`;
 	};