From 8dd0cfb8ea023fecee218e4adf03d7475fa30706 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 19 Dec 2024 11:23:01 +0100
Subject: [PATCH 1/4] bem refactor toast

Refs: #7036
---
 .../src/components/toaster/shadow.tsx         |  4 +--
 .../src/components/toaster/style.scss         |  9 ++++---
 .../ToastItem/ToastItem.tsx                   |  4 +--
 .../__snapshots__/snapshot.test.tsx.snap      |  4 +--
 .../ToastItem/tests/snapshot.test.tsx         |  2 +-
 .../src/components/toast-container.scss       | 10 ++++---
 .../ecl-ec/components/toast-container.scss    | 18 +++++++------
 .../ecl-eu/components/toast-container.scss    | 26 ++++++++++---------
 .../src/components/toast-container.scss       | 17 ++++++------
 9 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/packages/components/src/components/toaster/shadow.tsx b/packages/components/src/components/toaster/shadow.tsx
index b6df0f6de1..55803ce3c7 100644
--- a/packages/components/src/components/toaster/shadow.tsx
+++ b/packages/components/src/components/toaster/shadow.tsx
@@ -114,11 +114,11 @@ export class KolToastContainer implements ToasterAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-toast-container">
+			<Host class="kol-toast">
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
 						_label={translate('kol-toast-close-all')}
-						class="close-all"
+						class="kol-toast__button-close-all"
 						_on={{
 							onClick: () => {
 								void this.closeAll();
diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss
index 142e72bc10..48364a427e 100644
--- a/packages/components/src/components/toaster/style.scss
+++ b/packages/components/src/components/toaster/style.scss
@@ -2,9 +2,8 @@
 @import '../style';
 @import '../@shared/kol-alert-mixin';
 
-@include kol-alert-styles;
-
 @layer kol-component {
+	@include kol-alert-styles;
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -13,7 +12,9 @@
 		z-index: 200;
 	}
 
-	.close-all {
-		align-self: flex-end;
+	.kol-toast {
+		&__close-all {
+			align-self: flex-end;
+		}
 	}
 }
diff --git a/packages/components/src/functional-components/ToastItem/ToastItem.tsx b/packages/components/src/functional-components/ToastItem/ToastItem.tsx
index e4713c23bd..4444af079c 100644
--- a/packages/components/src/functional-components/ToastItem/ToastItem.tsx
+++ b/packages/components/src/functional-components/ToastItem/ToastItem.tsx
@@ -15,9 +15,9 @@ const ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) =
 	const { type, label, description, variant, alertVariant } = toast;
 
 	return (
-		<div class={clsx('toast', status)}>
+		<div class={clsx('kol-toast__toast', `kol-toast__toast--${status}`)}>
 			<KolAlertFc
-				class="alert"
+				class="kol-toast__alert"
 				alert={true}
 				label={label}
 				level={0}
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index cf88a49a6b..a88398cdd2 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ToastItemFc should render with basic props and status 1`] = `
-<div class="settled toast">
-  <div class="alert kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info" role="alert">
+<div class="kol-toast__toast kol-toast__toast--settled">
+  <div class="kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info kol-toast__alert" role="alert">
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
diff --git a/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx b/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
index 848beafa50..248504a96a 100644
--- a/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
+++ b/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
@@ -26,7 +26,7 @@ describe('ToastItemFc', () => {
 		for (const status of statuses) {
 			const page = await renderFunctionalComponentToSpecPage(() => <ToastItemFc toast={basicToast} onClose={mockOnClose} status={status} />);
 
-			expect(page.root?.classList.contains(status)).toBeTruthy();
+			expect(page.root?.classList.contains(`kol-toast__toast--${status}`)).toBeTruthy();
 		}
 	});
 });
diff --git a/packages/themes/default/src/components/toast-container.scss b/packages/themes/default/src/components/toast-container.scss
index bbe390c842..a3f58331c6 100644
--- a/packages/themes/default/src/components/toast-container.scss
+++ b/packages/themes/default/src/components/toast-container.scss
@@ -2,15 +2,17 @@
 @import '../mixins/alert-wc';
 
 @layer kol-theme-component {
+	@include kol-alert-theme;
+
 	:host {
 		top: rem(16);
 		right: rem(16);
 		width: rem(440);
 	}
 
-	.toast {
-		margin-top: rem(16);
+	.kol-toast {
+		&__toast {
+			margin-top: rem(16);
+		}
 	}
-
-	@include kol-alert-theme;
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
index 2de3c774ec..e1f488f5bf 100644
--- a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
@@ -9,15 +9,17 @@
 		max-width: 100%;
 	}
 
-	.toast {
-		display: block;
-		background-color: #fff;
-		margin-top: rem(16);
+	.kol-toast {
+		&__toast {
+			display: block;
+			background-color: #fff;
+			margin-top: rem(16);
 
-		@include kol-alert-theme;
-	}
+			@include kol-alert-theme;
+		}
 
-	.alert {
-		display: block;
+		&__alert {
+			display: block;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
index 6d6188312c..5f613bcd8e 100644
--- a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
@@ -9,23 +9,25 @@
 		max-width: 100%;
 	}
 
-	.toast {
-		display: block;
-		background-color: #fff;
-		margin-top: rem(16);
+	.kol-toast {
+		&__toast {
+			display: block;
+			background-color: #fff;
+			margin-top: rem(16);
 
-		@include kol-alert-theme;
+			@include kol-alert-theme;
 
-		.heading {
-			width: 100%;
+			.heading {
+				width: 100%;
 
-			.heading-content {
-				flex: 1;
+				.heading-content {
+					flex: 1;
+				}
 			}
 		}
-	}
 
-	.alert {
-		display: block;
+		&__alert {
+			display: block;
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/toast-container.scss b/packages/themes/itzbund/src/components/toast-container.scss
index ed3be7e5d1..bfdece3589 100644
--- a/packages/themes/itzbund/src/components/toast-container.scss
+++ b/packages/themes/itzbund/src/components/toast-container.scss
@@ -9,16 +9,17 @@
 		left: 50%;
 		transform: translateX(-50%);
 	}
+	.kol-toast {
+		&__toast {
+			background-color: #fff;
+			margin-top: rem(16);
 
-	.toast {
-		background-color: #fff;
-		margin-top: rem(16);
+			.heading {
+				width: 100%;
 
-		.heading {
-			width: 100%;
-
-			.heading-content {
-				flex: 1;
+				.heading-content {
+					flex: 1;
+				}
 			}
 		}
 	}

From 6a92cce52fde62ecde3dc2cf4362b8aac1645f2a Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 19 Dec 2024 13:27:11 +0100
Subject: [PATCH 2/4] fixed footer background

Refs: #7036
---
 .../components/src/components/toaster/shadow.tsx   |  2 +-
 .../components/src/components/toaster/style.scss   |  5 +++--
 .../functional-components/ToastItem/ToastItem.tsx  |  4 ++--
 .../tests/__snapshots__/snapshot.test.tsx.snap     |  4 ++--
 .../ToastItem/tests/snapshot.test.tsx              |  2 +-
 .../default/src/components/toast-container.scss    |  4 ++--
 .../ecl/src/ecl-ec/components/toast-container.scss | 13 ++++++-------
 .../ecl/src/ecl-eu/components/toast-container.scss | 14 +++++++-------
 .../itzbund/src/components/toast-container.scss    |  5 +++--
 9 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/components/toaster/shadow.tsx b/packages/components/src/components/toaster/shadow.tsx
index 55803ce3c7..9e2c4f15df 100644
--- a/packages/components/src/components/toaster/shadow.tsx
+++ b/packages/components/src/components/toaster/shadow.tsx
@@ -114,7 +114,7 @@ export class KolToastContainer implements ToasterAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-toast">
+			<Host class="kol-toast-container">
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
 						_label={translate('kol-toast-close-all')}
diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss
index 48364a427e..6b7bb64b57 100644
--- a/packages/components/src/components/toaster/style.scss
+++ b/packages/components/src/components/toaster/style.scss
@@ -2,8 +2,9 @@
 @import '../style';
 @import '../@shared/kol-alert-mixin';
 
+@include kol-alert-styles;
+
 @layer kol-component {
-	@include kol-alert-styles;
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -12,7 +13,7 @@
 		z-index: 200;
 	}
 
-	.kol-toast {
+	.kol-toast-container {
 		&__close-all {
 			align-self: flex-end;
 		}
diff --git a/packages/components/src/functional-components/ToastItem/ToastItem.tsx b/packages/components/src/functional-components/ToastItem/ToastItem.tsx
index 4444af079c..f6cf34c522 100644
--- a/packages/components/src/functional-components/ToastItem/ToastItem.tsx
+++ b/packages/components/src/functional-components/ToastItem/ToastItem.tsx
@@ -15,9 +15,9 @@ const ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) =
 	const { type, label, description, variant, alertVariant } = toast;
 
 	return (
-		<div class={clsx('kol-toast__toast', `kol-toast__toast--${status}`)}>
+		<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>
 			<KolAlertFc
-				class="kol-toast__alert"
+				class="kol-toast-item__alert"
 				alert={true}
 				label={label}
 				level={0}
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 0a73ccb134..f47ffa3f36 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ToastItemFc should render with basic props and status 1`] = `
-<div class="kol-toast__toast kol-toast__toast--settled">
-  <div class="kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info kol-toast__alert" role="alert">
+<div class="kol-toast-item kol-toast-item--settled">
+  <div class="kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info kol-toast-item__alert" role="alert">
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
diff --git a/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx b/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
index 248504a96a..bd842909e1 100644
--- a/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
+++ b/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
@@ -26,7 +26,7 @@ describe('ToastItemFc', () => {
 		for (const status of statuses) {
 			const page = await renderFunctionalComponentToSpecPage(() => <ToastItemFc toast={basicToast} onClose={mockOnClose} status={status} />);
 
-			expect(page.root?.classList.contains(`kol-toast__toast--${status}`)).toBeTruthy();
+			expect(page.root?.classList.contains(`kol-toast-item--${status}`)).toBeTruthy();
 		}
 	});
 });
diff --git a/packages/themes/default/src/components/toast-container.scss b/packages/themes/default/src/components/toast-container.scss
index a3f58331c6..125353216f 100644
--- a/packages/themes/default/src/components/toast-container.scss
+++ b/packages/themes/default/src/components/toast-container.scss
@@ -10,8 +10,8 @@
 		width: rem(440);
 	}
 
-	.kol-toast {
-		&__toast {
+	.kol-toast-container {
+		.kol-toast-item {
 			margin-top: rem(16);
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
index e1f488f5bf..bbd411bb97 100644
--- a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
@@ -9,17 +9,16 @@
 		max-width: 100%;
 	}
 
-	.kol-toast {
-		&__toast {
+	.kol-toast-container {
+		.kol-toast-item {
+			@include kol-alert-theme;
 			display: block;
 			background-color: #fff;
 			margin-top: rem(16);
 
-			@include kol-alert-theme;
-		}
-
-		&__alert {
-			display: block;
+			&__alert {
+				display: block;
+			}
 		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
index 5f613bcd8e..9775777666 100644
--- a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
@@ -9,13 +9,17 @@
 		max-width: 100%;
 	}
 
-	.kol-toast {
-		&__toast {
+	.kol-toast-container {
+		.kol-toast-item {
+			@include kol-alert-theme;
+
 			display: block;
 			background-color: #fff;
 			margin-top: rem(16);
 
-			@include kol-alert-theme;
+			&__alert {
+				display: block;
+			}
 
 			.heading {
 				width: 100%;
@@ -25,9 +29,5 @@
 				}
 			}
 		}
-
-		&__alert {
-			display: block;
-		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/toast-container.scss b/packages/themes/itzbund/src/components/toast-container.scss
index bfdece3589..7787a91222 100644
--- a/packages/themes/itzbund/src/components/toast-container.scss
+++ b/packages/themes/itzbund/src/components/toast-container.scss
@@ -9,8 +9,9 @@
 		left: 50%;
 		transform: translateX(-50%);
 	}
-	.kol-toast {
-		&__toast {
+
+	.kol-toast-container {
+		.kol-toast-item {
 			background-color: #fff;
 			margin-top: rem(16);
 

From 5c23144ae00a859ba7b890b1dc0e622f3e12e7a8 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 19 Dec 2024 13:48:51 +0100
Subject: [PATCH 3/4] fixed wrong classname

Refs: #7036
---
 packages/components/src/components/toaster/shadow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/toaster/shadow.tsx b/packages/components/src/components/toaster/shadow.tsx
index 9e2c4f15df..ca93e73acb 100644
--- a/packages/components/src/components/toaster/shadow.tsx
+++ b/packages/components/src/components/toaster/shadow.tsx
@@ -118,7 +118,7 @@ export class KolToastContainer implements ToasterAPI {
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
 						_label={translate('kol-toast-close-all')}
-						class="kol-toast__button-close-all"
+						class="kol-toast-container__button-close-all"
 						_on={{
 							onClick: () => {
 								void this.closeAll();

From bce4058022f60ebc1e26f3ea58b1f8a2f286af49 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 19 Dec 2024 14:08:15 +0100
Subject: [PATCH 4/4] style fix

Refs: #7036
---
 .../src/components/toast-container.scss       |  6 ++---
 .../ecl-ec/components/toast-container.scss    | 16 +++++-------
 .../ecl-eu/components/toast-container.scss    | 26 +++++++++----------
 .../src/components/toast-container.scss       | 16 +++++-------
 4 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/packages/themes/default/src/components/toast-container.scss b/packages/themes/default/src/components/toast-container.scss
index 125353216f..a7008c9ab1 100644
--- a/packages/themes/default/src/components/toast-container.scss
+++ b/packages/themes/default/src/components/toast-container.scss
@@ -10,9 +10,7 @@
 		width: rem(440);
 	}
 
-	.kol-toast-container {
-		.kol-toast-item {
-			margin-top: rem(16);
-		}
+	.kol-toast-item {
+		margin-top: rem(16);
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
index bbd411bb97..c5ec504994 100644
--- a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
@@ -9,16 +9,14 @@
 		max-width: 100%;
 	}
 
-	.kol-toast-container {
-		.kol-toast-item {
-			@include kol-alert-theme;
-			display: block;
-			background-color: #fff;
-			margin-top: rem(16);
+	.kol-toast-item {
+		@include kol-alert-theme;
+		display: block;
+		background-color: #fff;
+		margin-top: rem(16);
 
-			&__alert {
-				display: block;
-			}
+		&__alert {
+			display: block;
 		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
index 9775777666..7634fdb7db 100644
--- a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
@@ -9,24 +9,22 @@
 		max-width: 100%;
 	}
 
-	.kol-toast-container {
-		.kol-toast-item {
-			@include kol-alert-theme;
+	.kol-toast-item {
+		@include kol-alert-theme;
 
-			display: block;
-			background-color: #fff;
-			margin-top: rem(16);
+		display: block;
+		background-color: #fff;
+		margin-top: rem(16);
 
-			&__alert {
-				display: block;
-			}
+		&__alert {
+			display: block;
+		}
 
-			.heading {
-				width: 100%;
+		.heading {
+			width: 100%;
 
-				.heading-content {
-					flex: 1;
-				}
+			.heading-content {
+				flex: 1;
 			}
 		}
 	}
diff --git a/packages/themes/itzbund/src/components/toast-container.scss b/packages/themes/itzbund/src/components/toast-container.scss
index 7787a91222..f3118c1768 100644
--- a/packages/themes/itzbund/src/components/toast-container.scss
+++ b/packages/themes/itzbund/src/components/toast-container.scss
@@ -10,17 +10,15 @@
 		transform: translateX(-50%);
 	}
 
-	.kol-toast-container {
-		.kol-toast-item {
-			background-color: #fff;
-			margin-top: rem(16);
+	.kol-toast-item {
+		background-color: #fff;
+		margin-top: rem(16);
 
-			.heading {
-				width: 100%;
+		.heading {
+			width: 100%;
 
-				.heading-content {
-					flex: 1;
-				}
+			.heading-content {
+				flex: 1;
 			}
 		}
 	}