Merge branch 'develop' of https://github.com/public-ui/kolibri into 7…

…077-clean-console Refs: #7077
public-ui · Dec 24, 2024 · 9bea864 · 9bea864
2 parents be0d7af + b3b141d
commit 9bea864
Show file tree

Hide file tree

Showing 54 changed files with 1,845 additions and 2,066 deletions.
diff --git a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss b/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;
+						}
+					}
 				}
 			}
 		}