Apply BEM refactor for table

packages/components/src/components/@shared/_kol-table-stateless-mixin.scss

@@ -4,88 +4,88 @@
 
 @mixin kol-table-stateless-styles {
 	@layer kol-component {
-		:host,
-		.kol-table-stateless-wc {
+		.kol-table {
 			display: block;
 			font-size: rem(16);
-		}
 
-		.table {
 			max-width: 100%;
 			overflow-x: auto;
 			overflow-y: hidden;
-		}
-
-		table {
-			width: 100%;
-		}
 
-		caption {
-			text-align: start;
-		}
+			&__table {
+				width: 100%;
+			}
 
-		.focus-element {
-			font-size: 0;
-		}
+			&__caption {
+				text-align: start;
+			}
 
-		.focus-element:focus {
-			outline: 0 !important;
-		}
+			&__focus-element {
+				font-size: 0;
 
-		.table:has(.focus-element:focus) {
-			/* @see https://remysharp.com/til/css/focus-ring-default-styles */
-			outline: rem(5) auto Highlight;
-			outline: rem(5) auto -webkit-focus-ring-color;
-			outline-offset: rem(2);
-		}
+				&:focus {
+					outline: 0 !important;
+					/* @see https://remysharp.com/til/css/focus-ring-default-styles */
+					outline: rem(5) auto Highlight;
+					outline: rem(5) auto -webkit-focus-ring-color;
+					outline-offset: rem(2);
+				}
+			}
 
-		.table-sort-button .kol-button {
-			color: inherit;
-		}
+			&__sort-button {
+				.kol-button {
+					color: inherit;
+				}
+			}
 
-		// headings in table body default to text-align left, unless defined otherwise.
-		tbody th,
-		th.align-left {
-			text-align: left;
+			// headings in table body default to text-align left, unless defined otherwise.
+			&__body {
+				text-align: left;
 
-			& .table-sort-button .kol-button__text {
-				justify-items: start;
+				.kol-button__text {
+					justify-items: start;
+				}
 			}
-		}
 
-		th.align-center {
-			text-align: center;
+			&__cell {
+				&--align-left {
+					text-align: left;
 
-			& .table-sort-button .kol-button__text {
-				justify-items: center;
-			}
-		}
+					.kol-button__text {
+						justify-items: start;
+					}
+				}
 
-		th.align-right {
-			text-align: right;
+				&--align-center {
+					text-align: center;
 
-			& .table-sort-button .kol-button__text {
-				justify-items: end;
-			}
-		}
+					& .kol-button__text {
+						justify-items: center;
+					}
+				}
 
-		tr.foot-spacer,
-		tr.head-spacer {
-			display: none;
-		}
+				&--align-right {
+					text-align: right;
 
-		.selection-header-cell {
-			width: 0;
-		}
+					.kol-button__text {
+						justify-items: end;
+					}
+				}
+			}
 
-		.selection-cell {
-			width: var(--a11y-min-size);
-			height: var(--a11y-min-size);
-			white-space: nowrap;
-		}
+			&__cell {
+				&--selection {
+					width: var(--a11y-min-size);
+					height: var(--a11y-min-size);
+					white-space: nowrap;
+				}
+			}
 
-		.input {
-			label {
+			&__spacer {
+				display: none;
+			}
+
+			&__selection-label {
 				align-items: center;
 				cursor: pointer;
 				display: flex;
@@ -95,63 +95,60 @@
 				width: var(--a11y-min-size);
 			}
 
-			.icon {
+			&__selection-icon {
 				display: block;
 				inset: auto;
 				position: absolute;
 				z-index: 1;
 			}
 
-			input {
+			&__selection-input {
 				appearance: none;
 				border-style: solid;
 				cursor: pointer;
 				margin: 0;
-			}
-
-			input:before {
-				content: '';
-			}
-
-			input[type='checkbox'] {
-				position: relative;
-				display: flex;
-				height: calc(var(--a11y-min-size) / 2);
-				width: calc(var(--a11y-min-size) / 2);
-				align-items: center;
-				justify-content: center;
-				background-color: rgb(255, 255, 255);
-				border-width: rem(2);
-				line-height: 1.5;
-				transition: all 0.5s ease 0s;
-			}
-
-			input[type='radio'] {
-				display: flex;
-				border-width: rem(2);
-				border-radius: 100%;
-				height: 1.5em;
-				min-height: 1.5em;
-				min-width: 1.5em;
-				padding: 0;
-				width: 1.5em;
-			}
 
-			input[type='radio']:before {
-				border-radius: 100%;
-				margin: auto;
-				height: calc(1.5em / 2);
-				width: calc(1.5em / 2);
-			}
+				&:before {
+					content: '';
+				}
 
-			input[type='radio']:checked:before {
-				background-color: #000;
-			}
+				&--checkbox {
+					position: relative;
+					display: flex;
+					height: calc(var(--a11y-min-size) / 2);
+					width: calc(var(--a11y-min-size) / 2);
+					align-items: center;
+					justify-content: center;
+					background-color: rgb(255, 255, 255);
+					border-width: rem(2);
+					line-height: 1.5;
+					transition: all 0.5s ease 0s;
+				}
 
-			@media (forced-colors: active) {
-				input[type='radio']:checked:before {
-					/* Give it a visible background in forced colors mode */
-					background-color: selectedItem !important;
+				&--radio {
+					display: flex;
+					border-width: rem(2);
+					border-radius: 100%;
+					height: 1.5em;
+					min-height: 1.5em;
+					min-width: 1.5em;
+					padding: 0;
+					width: 1.5em;
+
+					&:before {
+						border-radius: 100%;
+						margin: auto;
+						height: calc(1.5em / 2);
+						width: calc(1.5em / 2);
+					}
+
+					&:checked:before {
+						background-color: #000;
+						@media (forced-colors: active) {
+							/* Give it a visible background in forced colors mode */
+							background-color: selectedItem !important;
+						}
+					}
 				}
 			}
 		}

packages/components/src/components/table-stateful/shadow.tsx

@@ -420,7 +420,7 @@ export class KolTableStateful implements TableAPI {
 	 */
 	private renderPagination(): JSX.Element {
 		return (
-			<div class="pagination">
+			<div class="kol-table-stateful__pagination">
 				<span>
 					{translate('kol-table-visible-range', {
 						placeholders: {
@@ -435,8 +435,9 @@ export class KolTableStateful implements TableAPI {
 						},
 					})}
 				</span>
-				<div>
+				<div class="kol-table-stateful__pagination-wrapper">
 					<KolPaginationTag
+						class="test"
 						_boundaryCount={this.state._pagination._boundaryCount}
 						_customClass={this.state._pagination._customClass}
 						_on={this.handlePagination}

packages/components/src/components/table-stateful/style.scss

@@ -2,38 +2,33 @@
 @import '../style';
 @import '../@shared/kol-table-stateless-mixin';
 
+@include kol-table-stateless-styles;
+
 @layer kol-component {
-	:root {
+	:host {
 		font-size: rem(16);
 	}
 
-	div.pagination .kol-pagination {
-		display: flex;
-		flex-wrap: wrap;
-	}
-
-	div.pagination,
-	div.pagination > div:last-child {
-		display: grid;
-		place-items: center;
-	}
-
-	@media (max-width: 1024px) {
-		div.pagination .kol-pagination {
-			flex-direction: column;
+	.kol-table-stateful {
+		&__pagination,
+		&__pagination-wrapper {
+			display: grid;
+			place-items: center;
+			@media (min-width: 1024px) {
+				grid-auto-flow: column;
+			}
 		}
 	}
 
-	@media (min-width: 1024px) {
-		div.pagination,
-		div.pagination > div:last-child {
-			grid-auto-flow: column;
+	.kol-pagination {
+		display: flex;
+		flex-wrap: wrap;
+		@media (min-width: 1024px) {
+			display: flex;
 		}
 
-		div.pagination .kol-pagination {
-			display: flex;
+		@media (max-width: 1024px) {
+			flex-direction: column;
 		}
 	}
 }
-
-@include kol-table-stateless-styles;