From d3c5fe3ac75378ec4d8e8d26b8f88a29e0317556 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 16 Dec 2024 10:48:16 +0100
Subject: [PATCH 1/5] bem refactor wrapper

Refs: #7036
---
 .../src/components/drawer/shadow.tsx          |  8 ++--
 .../src/components/drawer/style.scss          |  4 +-
 .../themes/default/src/components/drawer.scss | 45 ++++++++++---------
 .../ecl/src/ecl-ec/components/drawer.scss     |  6 ++-
 .../ecl/src/ecl-eu/components/drawer.scss     |  6 ++-
 .../themes/itzbund/src/components/drawer.scss |  6 ++-
 6 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/packages/components/src/components/drawer/shadow.tsx b/packages/components/src/components/drawer/shadow.tsx
index 9c5453908b..3a6fcbcbad 100644
--- a/packages/components/src/components/drawer/shadow.tsx
+++ b/packages/components/src/components/drawer/shadow.tsx
@@ -55,10 +55,10 @@ export class KolDrawer implements DrawerAPI {
 		return (
 			<div
 				ref={this.getWrapperRef}
-				class={`drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`}
+				class={`kol-drawer__wrapper kol-drawer__wrapper--${align} ${this.state._open ? 'kol-drawer__wrapper--open' : 'kol-drawer__wrapper--is-closing'}`}
 				aria-label={this.state._label}
 			>
-				<div class="drawer__content">
+				<div class="kol-drawer__content">
 					<slot />
 				</div>
 			</div>
@@ -69,8 +69,8 @@ export class KolDrawer implements DrawerAPI {
 	public render(): JSX.Element {
 		const isModal = this.state._modal;
 		return (
-			<Host class={`kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>
-				<dialog class="drawer__dialog" ref={this.getRef}>
+			<Host class={`kol-drawer ${isModal ? 'kol-drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>
+				<dialog class="kol-drawer__dialog" ref={this.getRef}>
 					{this.renderDialogContent()}
 				</dialog>
 			</Host>
diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss
index fce5a63908..fe6d61d5bf 100644
--- a/packages/components/src/components/drawer/style.scss
+++ b/packages/components/src/components/drawer/style.scss
@@ -6,7 +6,9 @@
 		font-size: rem(16);
 	}
 
-	.drawer {
+	.kol-drawer {
+		font-size: rem(16);
+
 		&__dialog {
 			padding: 0;
 			border: none;
diff --git a/packages/themes/default/src/components/drawer.scss b/packages/themes/default/src/components/drawer.scss
index f4991d72c9..09d8804afc 100644
--- a/packages/themes/default/src/components/drawer.scss
+++ b/packages/themes/default/src/components/drawer.scss
@@ -2,38 +2,41 @@
 
 $duration: 0.4s;
 @layer kol-theme-component {
-	.drawer__wrapper {
-		box-shadow: 0 0 rem(4) var(--color-subtle);
+	.kol-drawer {
+		background: purple !important;
+		&__wrapper {
+			box-shadow: 0 0 rem(4) var(--color-subtle);
 
-		&--left {
-			animation: slideInLeft $duration forwards;
+			&--left {
+				animation: slideInLeft $duration forwards;
 
-			&.is-closing {
-				animation: slideOutLeft $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutLeft $duration forwards;
+				}
 			}
-		}
 
-		&--right {
-			animation: slideInRight $duration forwards;
+			&--right {
+				animation: slideInRight $duration forwards;
 
-			&.is-closing {
-				animation: slideOutRight $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutRight $duration forwards;
+				}
 			}
-		}
 
-		&--top {
-			animation: slideInTop $duration forwards;
+			&--top {
+				animation: slideInTop $duration forwards;
 
-			&.is-closing {
-				animation: slideOutTop $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutTop $duration forwards;
+				}
 			}
-		}
 
-		&--bottom {
-			animation: slideInBottom $duration forwards;
+			&--bottom {
+				animation: slideInBottom $duration forwards;
 
-			&.is-closing {
-				animation: slideOutBottom $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutBottom $duration forwards;
+				}
 			}
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-ec/components/drawer.scss b/packages/themes/ecl/src/ecl-ec/components/drawer.scss
index dd8d8f3c41..a78a0b8301 100644
--- a/packages/themes/ecl/src/ecl-ec/components/drawer.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/drawer.scss b/packages/themes/ecl/src/ecl-eu/components/drawer.scss
index dd8d8f3c41..a78a0b8301 100644
--- a/packages/themes/ecl/src/ecl-eu/components/drawer.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/drawer.scss b/packages/themes/itzbund/src/components/drawer.scss
index 16410e2baf..22c4bbb57d 100644
--- a/packages/themes/itzbund/src/components/drawer.scss
+++ b/packages/themes/itzbund/src/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 0.25em gray;
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 0.25em gray;
+		}
 	}
 }

From 2b415f0c7745ee4ce340dcf655f8cf65a3b580dd Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 16 Dec 2024 10:48:59 +0100
Subject: [PATCH 2/5] removed test style

Refs: #7036
---
 packages/themes/default/src/components/drawer.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/themes/default/src/components/drawer.scss b/packages/themes/default/src/components/drawer.scss
index 09d8804afc..03961b1870 100644
--- a/packages/themes/default/src/components/drawer.scss
+++ b/packages/themes/default/src/components/drawer.scss
@@ -3,7 +3,6 @@
 $duration: 0.4s;
 @layer kol-theme-component {
 	.kol-drawer {
-		background: purple !important;
 		&__wrapper {
 			box-shadow: 0 0 rem(4) var(--color-subtle);
 

From c6d80a097a8cd0ca242f0b7d121e513dbbdfa06c Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 16 Dec 2024 11:09:20 +0100
Subject: [PATCH 3/5] teest update

Refs: #7036
---
 .../test/__snapshots__/snapshot.spec.tsx.snap | 96 +++++++++----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
index 82e9aed877..53eadffc27 100644
--- a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -15,11 +15,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="drawer kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -29,11 +29,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="drawer kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -43,11 +43,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="drawer kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -57,11 +57,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="drawer kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -71,11 +71,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`] = `
-<kol-drawer class="drawer drawer--modal kol-drawer">
+<kol-drawer class="kol-drawer kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -85,11 +85,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -99,11 +99,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -113,11 +113,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -127,11 +127,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -141,11 +141,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -155,11 +155,11 @@ exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
 `;
 
 exports[`kol-drawer should render with _label="Label" 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>

From 46439b20b7a35c17931a32b7c07ffa7da83ff15f Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 16 Dec 2024 14:08:28 +0100
Subject: [PATCH 4/5] review changes

Refs: #7036
---
 .../components/src/components/drawer/shadow.tsx     | 13 +++++++++++--
 .../components/src/components/drawer/style.scss     |  4 ----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/drawer/shadow.tsx b/packages/components/src/components/drawer/shadow.tsx
index 3a6fcbcbad..5fedc32817 100644
--- a/packages/components/src/components/drawer/shadow.tsx
+++ b/packages/components/src/components/drawer/shadow.tsx
@@ -4,6 +4,7 @@ import { setState, validateLabel, validateOpen, validateAlign, validateModal } f
 import { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import clsx from 'clsx';
 
 /**
  * @slot - The Content of drawer.
@@ -55,7 +56,10 @@ export class KolDrawer implements DrawerAPI {
 		return (
 			<div
 				ref={this.getWrapperRef}
-				class={`kol-drawer__wrapper kol-drawer__wrapper--${align} ${this.state._open ? 'kol-drawer__wrapper--open' : 'kol-drawer__wrapper--is-closing'}`}
+				class={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {
+					'kol-drawer__wrapper--open': this.state._open,
+					'kol-drawer__wrapper--is-closing': this.state._open === false,
+				})}
 				aria-label={this.state._label}
 			>
 				<div class="kol-drawer__content">
@@ -69,7 +73,12 @@ export class KolDrawer implements DrawerAPI {
 	public render(): JSX.Element {
 		const isModal = this.state._modal;
 		return (
-			<Host class={`kol-drawer ${isModal ? 'kol-drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>
+			<Host
+				class={clsx('kol-drawer--modal', {
+					'kol-drawer--modal': isModal,
+				})}
+				ref={(el) => (this.hostElement = el as HTMLElement)}
+			>
 				<dialog class="kol-drawer__dialog" ref={this.getRef}>
 					{this.renderDialogContent()}
 				</dialog>
diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss
index fe6d61d5bf..0d76e08942 100644
--- a/packages/components/src/components/drawer/style.scss
+++ b/packages/components/src/components/drawer/style.scss
@@ -2,10 +2,6 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
 	.kol-drawer {
 		font-size: rem(16);
 

From dc2417ec67d11a8772ce10fa96dc3c5a3221b278 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 16 Dec 2024 14:24:47 +0100
Subject: [PATCH 5/5] test-update

Refs: #7036
---
 .../test/__snapshots__/snapshot.spec.tsx.snap | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
index 53eadffc27..18d5cf0bd2 100644
--- a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1`] = `
-<kol-drawer class="kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
@@ -15,7 +15,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -29,7 +29,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -43,7 +43,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -57,7 +57,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -71,7 +71,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`] = `
-<kol-drawer class="kol-drawer kol-drawer--modal">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
@@ -85,7 +85,7 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="kol-drawer kol-drawer--modal">
+<kol-drawer _variant="bottom" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -99,7 +99,7 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="kol-drawer kol-drawer--modal">
+<kol-drawer _variant="left" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -113,7 +113,7 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="kol-drawer kol-drawer--modal">
+<kol-drawer _variant="right" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -127,7 +127,7 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="kol-drawer kol-drawer--modal">
+<kol-drawer _variant="top" class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
@@ -141,7 +141,7 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
-<kol-drawer class="kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
@@ -155,7 +155,7 @@ exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
 `;
 
 exports[`kol-drawer should render with _label="Label" 1`] = `
-<kol-drawer class="kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
     <dialog class="kol-drawer__dialog">
       <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">