Add layers to all component styles

packages/components/src/components/abbr/style.css

@@ -1,4 +1,6 @@
 @import url(../style.css);
-:host > abbr {
-	cursor: help;
+@layer kol-component {
+	:host > abbr {
+		cursor: help;
+	}
 }

packages/components/src/components/accordion/style.css

@@ -1,33 +1,39 @@
 @import url(../style.css);
 @import url(../host-display-block.css);
-/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */
-.wrapper {
-	display: grid;
-	grid-template-rows: 0fr;
-	overflow: hidden;
-	transition: grid-template-rows 0.3s;
-}
-.accordion.open .wrapper {
-	grid-template-rows: 1fr;
-}
-.animation-wrapper {
-	min-height: 0;
-	transition: visibility 0.3s;
-	/* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */
-	visibility: hidden;
-}
-.accordion.open .animation-wrapper {
-	visibility: visible;
-}
-@media (prefers-reduced-motion) {
-	.animation-wrapper,
+@layer kol-component {
+	/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */
 	.wrapper {
-		transition-duration: 0s;
+		display: grid;
+		grid-template-rows: 0fr;
+		overflow: hidden;
+		transition: grid-template-rows 0.3s;
 	}
-} /*
+
+	.accordion.open .wrapper {
+		grid-template-rows: 1fr;
+	}
+
+	.animation-wrapper {
+		min-height: 0;
+		transition: visibility 0.3s;
+		/* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */
+		visibility: hidden;
+	}
+
+	.accordion.open .animation-wrapper {
+		visibility: visible;
+	}
+
+	@media (prefers-reduced-motion) {
+		.animation-wrapper,
+		.wrapper {
+			transition-duration: 0s;
+		}
+	} /*
  * Inside a button, the caption text is always centered.
  * So we have to align the text to the left.
  */
-.accordion kol-heading-wc kol-button-wc button kol-span-wc {
-	justify-items: start;
+	.accordion kol-heading-wc kol-button-wc button kol-span-wc {
+		justify-items: start;
+	}
 }

packages/components/src/components/alert/style.css

@@ -1,12 +1,16 @@
 @import url(../style.css);
 @import url(../host-display-block.css);
-kol-alert-wc {
-	display: grid;
-}
-kol-alert-wc .heading {
-	display: flex;
-	place-items: center;
-}
-kol-alert-wc .heading > div {
-	flex-grow: 1;
+@layer kol-component {
+	kol-alert-wc {
+		display: grid;
+	}
+
+	kol-alert-wc .heading {
+		display: flex;
+		place-items: center;
+	}
+
+	kol-alert-wc .heading > div {
+		flex-grow: 1;
+	}
 }

packages/components/src/components/avatar/style.css

@@ -1,23 +1,27 @@
 @import url(../style.css);
 @import url(../host-display-block.css);
-.container {
-	border-radius: 50%;
-	overflow: hidden;
-	/*theme?*/
-	width: 100px;
-	height: 100px;
-}
-.image {
-	width: 100%;
-	height: 100%;
-}
-.initials {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	/*theme?*/
-	background: #d3d3d3;
-	font-size: 2rem;
+@layer kol-component {
+	.container {
+		border-radius: 50%;
+		overflow: hidden;
+		/*theme?*/
+		width: 100px;
+		height: 100px;
+	}
+
+	.image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.initials {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		/*theme?*/
+		background: #d3d3d3;
+		font-size: 2rem;
+	}
 }

packages/components/src/components/badge/style.css

@@ -1,8 +1,11 @@
 @import url(../style.css);
-:host > span {
-	display: inline-flex;
-	place-items: center;
-}
-:host > span > kol-button-wc button {
-	color: inherit;
+@layer kol-component {
+	:host > span {
+		display: inline-flex;
+		place-items: center;
+	}
+
+	:host > span > kol-button-wc button {
+		color: inherit;
+	}
 }

packages/components/src/components/breadcrumb/style.css

@@ -1,19 +1,23 @@
 @import url(../style.css);
-li,
-ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	display: flex;
-	gap: 0.5em;
-	flex-wrap: wrap;
-	place-items: center;
-}
-kol-icon::part(separator) {
-	font-weight: 900;
-	font-size: 0.7em;
-}
-kol-icon::part(separator):before {
-	content: '\f054';
-	font-family: 'Font Awesome 6 Free';
+@layer kol-component {
+	li,
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		gap: 0.5em;
+		flex-wrap: wrap;
+		place-items: center;
+	}
+
+	kol-icon::part(separator) {
+		font-weight: 900;
+		font-size: 0.7em;
+	}
+
+	kol-icon::part(separator):before {
+		content: '\f054';
+		font-family: 'Font Awesome 6 Free';
+	}
 }

packages/components/src/components/button-group/style.css

@@ -1,5 +1,7 @@
 @import url(../style.css);
-:host > kol-button-group-wc {
-	display: flex;
-	flex-wrap: wrap;
+@layer kol-component {
+	:host > kol-button-group-wc {
+		display: flex;
+		flex-wrap: wrap;
+	}
 }

packages/components/src/components/card/style.css

@@ -1,10 +1,13 @@
 @import url(../style.css);
-:host > div.card {
-	height: 100%;
-	position: relative;
-}
-.close {
-	position: absolute;
-	top: 0;
-	right: 0;
+@layer kol-component {
+	:host > div.card {
+		height: 100%;
+		position: relative;
+	}
+
+	.close {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
 }

packages/components/src/components/details/style.css

@@ -1,22 +1,28 @@
 @import url(../style.css);
 @import url(../host-display-block.css);
-details {
-	display: grid;
-}
-details > summary {
-	cursor: pointer;
-	display: flex;
-	place-items: center;
-}
-details > summary > span {
-	border-bottom-color: grey;
-	border-bottom-style: solid;
-}
-details > summary:focus > span,
-details > summary:hover > span,
-details[open] > summary > span {
-	border-bottom-color: #000;
-}
-details > kol-indented-text {
-	margin: 0.25em 0 0 0.5em;
+@layer kol-component {
+	details {
+		display: grid;
+	}
+
+	details > summary {
+		cursor: pointer;
+		display: flex;
+		place-items: center;
+	}
+
+	details > summary > span {
+		border-bottom-color: grey;
+		border-bottom-style: solid;
+	}
+
+	details > summary:focus > span,
+	details > summary:hover > span,
+	details[open] > summary > span {
+		border-bottom-color: #000;
+	}
+
+	details > kol-indented-text {
+		margin: 0.25em 0 0 0.5em;
+	}
 }

packages/components/src/components/heading/style.css

@@ -1,10 +1,14 @@
 @import url(../style.css);
-:host > kol-heading-wc {
-	display: grid;
-}
-:host > kol-heading-wc > .overline {
-	order: 1;
-}
-:host > kol-heading-wc > .headline {
-	order: 2;
+@layer kol-component {
+	:host > kol-heading-wc {
+		display: grid;
+	}
+
+	:host > kol-heading-wc > .overline {
+		order: 1;
+	}
+
+	:host > kol-heading-wc > .headline {
+		order: 2;
+	}
 }

packages/components/src/components/host-display-block.css

@@ -1,3 +1,5 @@
-:host {
-	display: block;
+@layer kol-component {
+	:host {
+		display: block;
+	}
 }

packages/components/src/components/icon/style.css

@@ -1,19 +1,23 @@
 @import url(../../assets/codicons/codicon.css);
-:host {
-	color: inherit;
-	display: contents;
-	height: 1em;
-	line-height: inherit;
-	width: 1em;
-}
-:host > i {
-	height: 1em;
-	width: 1em;
-}
-/*
- * The <code>:important</code> is important, because we should always override the font icon style.
- */
-:host > i,
-:host > i:before {
-	font-size: inherit !important;
+@layer kol-component {
+	:host {
+		color: inherit;
+		display: contents;
+		height: 1em;
+		line-height: inherit;
+		width: 1em;
+	}
+
+	:host > i {
+		height: 1em;
+		width: 1em;
+	}
+
+	/*
+   * The <code>:important</code> is important, because we should always override the font icon style.
+   */
+	:host > i,
+	:host > i:before {
+		font-size: inherit !important;
+	}
 }

packages/components/src/components/image/style.css

@@ -1,4 +1,6 @@
-img {
-	max-height: 100%;
-	max-width: 100%;
+@layer kol-component {
+	img {
+		max-height: 100%;
+		max-width: 100%;
+	}
 }

packages/components/src/components/indented-text/style.css

@@ -1,6 +1,8 @@
 @import url(../style.css);
 @import url(../host-display-block.css);
-:host > div {
-	border-left-style: solid;
-	padding-left: 0.5em;
+@layer kol-component {
+	:host > div {
+		border-left-style: solid;
+		padding-left: 0.5em;
+	}
 }