From a827bb342a5f32c26ae2423fc05119c3c6007e30 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 23 Apr 2024 08:59:51 +0200
Subject: [PATCH 1/6] refactor: removed obsolete build step

---
 packages/foundations/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/foundations/package.json b/packages/foundations/package.json
index 2e1e1b0c468..98369d843b8 100644
--- a/packages/foundations/package.json
+++ b/packages/foundations/package.json
@@ -17,7 +17,6 @@
   ],
   "scripts": {
     "build": "npm-run-all build:*",
-    "build:01_normalize": "npm run copy-normalize",
     "build:02_copy": "npm run copy:scss",
     "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/scss/:build/css/ --future-deprecation=import",
     "build:04_tailwind": "cpr tailwind build/tailwind -o",

From 4a8c46684965445f65152b37c4d06cc813eff8b6 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 23 Apr 2024 09:00:47 +0200
Subject: [PATCH 2/6] Revert "refactor: removed obsolete build step"

This reverts commit a827bb342a5f32c26ae2423fc05119c3c6007e30.
---
 packages/foundations/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/foundations/package.json b/packages/foundations/package.json
index 98369d843b8..2e1e1b0c468 100644
--- a/packages/foundations/package.json
+++ b/packages/foundations/package.json
@@ -17,6 +17,7 @@
   ],
   "scripts": {
     "build": "npm-run-all build:*",
+    "build:01_normalize": "npm run copy-normalize",
     "build:02_copy": "npm run copy:scss",
     "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/scss/:build/css/ --future-deprecation=import",
     "build:04_tailwind": "cpr tailwind build/tailwind -o",

From d7f03af9bf288ab504860b0cff4c4b2e597f526e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 23 Apr 2024 09:02:50 +0200
Subject: [PATCH 3/6] refactor: further optimization

---
 packages/foundations/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/foundations/package.json b/packages/foundations/package.json
index 2e1e1b0c468..5c1a381418e 100644
--- a/packages/foundations/package.json
+++ b/packages/foundations/package.json
@@ -34,7 +34,7 @@
     "generate:icon-fonts": "npx @db-ui/gif --src ./assets/icons/functional --variants filled inverted --fontName db-ux --withSizes true --debug true",
     "prepare": "npm run copy-normalize",
     "regenerate:screenshots": "npx playwright test -c ./test/playwright.config.mjs --update-snapshots",
-    "start": "nodemon --watch tokens/ --watch scss --watch scripts -e json,scss,js -x \"npm run build\"",
+    "start": "nodemon --watch tokens/ --watch scss --watch scripts -e json,scss,js -x \"npm run build\" --ignore scss/_normalize.scss",
     "test:e2e": "npx playwright test --config=./test/playwright.config.mjs"
   },
   "devDependencies": {

From 9eac2e3619c3411a6407a4b45c2e9b145aaf1364 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 23 Apr 2024 09:47:26 +0200
Subject: [PATCH 4/6] refactor: extracted config

---
 packages/foundations/nodemon.json | 6 ++++++
 packages/foundations/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 packages/foundations/nodemon.json

diff --git a/packages/foundations/nodemon.json b/packages/foundations/nodemon.json
new file mode 100644
index 00000000000..e2bbcf6696c
--- /dev/null
+++ b/packages/foundations/nodemon.json
@@ -0,0 +1,6 @@
+{
+	"ignore": ["scss/_normalize.scss"],
+	"ext": "json,scss,js",
+	"watch": ["scss", "scripts", "tokens/"],
+	"exec": "npm run build"
+}
diff --git a/packages/foundations/package.json b/packages/foundations/package.json
index 5c1a381418e..9119d3c9b97 100644
--- a/packages/foundations/package.json
+++ b/packages/foundations/package.json
@@ -34,7 +34,7 @@
     "generate:icon-fonts": "npx @db-ui/gif --src ./assets/icons/functional --variants filled inverted --fontName db-ux --withSizes true --debug true",
     "prepare": "npm run copy-normalize",
     "regenerate:screenshots": "npx playwright test -c ./test/playwright.config.mjs --update-snapshots",
-    "start": "nodemon --watch tokens/ --watch scss --watch scripts -e json,scss,js -x \"npm run build\" --ignore scss/_normalize.scss",
+    "start": "nodemon --config nodemon.json",
     "test:e2e": "npx playwright test --config=./test/playwright.config.mjs"
   },
   "devDependencies": {

From 42da5ec9627bc0e9aa392a0543b3b7f8ac29e5b0 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 23 Apr 2024 17:17:10 +0200
Subject: [PATCH 5/6] fix: remove tokens from nodemon.json

---
 packages/foundations/nodemon.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/foundations/nodemon.json b/packages/foundations/nodemon.json
index e2bbcf6696c..d70273d3e5e 100644
--- a/packages/foundations/nodemon.json
+++ b/packages/foundations/nodemon.json
@@ -1,6 +1,6 @@
 {
 	"ignore": ["scss/_normalize.scss"],
 	"ext": "json,scss,js",
-	"watch": ["scss", "scripts", "tokens/"],
+	"watch": ["scss", "scripts"],
 	"exec": "npm run build"
 }

From 4df2e3dcc53a0e8a73bebb4f0b1141c0b912fa19 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 23 Apr 2024 17:55:03 +0200
Subject: [PATCH 6/6] feat: add invisible variant for drawer (#2550)

---
 .../components/src/components/drawer/model.ts |  3 +-
 .../components/src/styles/_dialog-init.scss   | 32 +++++++++----------
 showcases/patternhub/styles/globals.scss      |  3 +-
 showcases/shared/drawer.json                  | 13 ++++++++
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/components/drawer/model.ts b/packages/components/src/components/drawer/model.ts
index 1e325fb3551..8f0a91dcb03 100644
--- a/packages/components/src/components/drawer/model.ts
+++ b/packages/components/src/components/drawer/model.ts
@@ -16,8 +16,9 @@ export interface DBDrawerDefaultProps {
 
 	/**
 	 * The backdrop attribute changes the opacity of the backdrop.
+	 * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
 	 */
-	backdrop?: 'strong' | 'weak' | 'none';
+	backdrop?: 'strong' | 'weak' | 'invisible' | 'none';
 
 	/**
 	 * The open attribute opens or closes the drawer based on the state.
diff --git a/packages/components/src/styles/_dialog-init.scss b/packages/components/src/styles/_dialog-init.scss
index 6192fa3a5d4..2fa3c266581 100644
--- a/packages/components/src/styles/_dialog-init.scss
+++ b/packages/components/src/styles/_dialog-init.scss
@@ -1,19 +1,12 @@
 @use "@db-ui/foundations/build/scss/colors";
 
 $backdrop-color: var(
-	--db-current-color-enabled,
-	var(--db-neutral-on-bg-enabled, #242629)
+	#{colors.$db-current-color-enabled},
+	#{colors.$db-neutral-on-bg-enabled}
 );
 
-%backdrop {
-	background-color: $backdrop-color;
-	opacity: 0.64;
-}
-
-%backdrop-weak {
-	background-color: $backdrop-color;
-	opacity: 0.32;
-}
+$backdrop-opacity-strong: 0.64;
+$backdrop-opacity-weak: 0.32;
 
 %dialog-container {
 	position: fixed;
@@ -34,13 +27,20 @@ dialog {
 
 	&:not([data-backdrop="none"]) {
 		&::backdrop {
-			@extend %backdrop;
+			background-color: $backdrop-color;
+			opacity: $backdrop-opacity-strong;
 		}
-	}
 
-	&[data-backdrop="weak"] {
-		&::backdrop {
-			@extend %backdrop-weak;
+		&[data-backdrop="invisible"] {
+			&::backdrop {
+				opacity: 0;
+			}
+		}
+
+		&[data-backdrop="weak"] {
+			&::backdrop {
+				opacity: $backdrop-opacity-weak;
+			}
 		}
 	}
 }
diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
index ba4f0a9c3d6..5af9a5ef54a 100644
--- a/showcases/patternhub/styles/globals.scss
+++ b/showcases/patternhub/styles/globals.scss
@@ -397,7 +397,8 @@ h6 {
 
 		.backdrop {
 			border-radius: variables.$db-border-radius-sm;
-			@extend %backdrop;
+			background-color: dialog-init.$backdrop-color;
+			opacity: dialog-init.$backdrop-opacity-strong;
 			position: absolute;
 			inset: 0;
 		}
diff --git a/showcases/shared/drawer.json b/showcases/shared/drawer.json
index b916b94a0ce..f1dbcb9b68a 100644
--- a/showcases/shared/drawer.json
+++ b/showcases/shared/drawer.json
@@ -181,6 +181,19 @@
 					"vue": "<DBDrawer backdrop=\"weak\" :withCloseButton=\"true\" :open=\"openDrawer\" @close=\"toggleDrawer(false)\">Backdrop-weak</DBDrawer>"
 				}
 			},
+			{
+				"name": "Invisible",
+				"props": {
+					"withCloseButton": true,
+					"backdrop": "invisible"
+				},
+				"code": {
+					"html": "<dialog class=\"db-drawer\" data-backdrop=\"invisible\" open>\n\t\t<article class=\"db-drawer-container\">\n\t\t\t<header class=\"db-drawer-header\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"db-button button-close-drawer is-icon-text-replace\"\n\t\t\t\t\tdata-icon=\"close\"\n\t\t\t\t\tdata-variant=\"text\"\n\t\t\t\t>\n\t\t\t\t\tClose Button\n\t\t\t\t</button>\n\t\t\t</header>\n\t\t\t<div class=\"db-drawer-content\">No Backdrop</div>\n\t\t</article>\n\t</dialog>",
+					"angular": "<db-drawer backdrop=\"invisible\" [withCloseButton]=\"true\" [open]=\"openDrawer\" (onClose)=\"toggleDrawer(false)\">\n\tNo Backdrop\n</db-drawer>",
+					"react": "<DBDrawer\n\t\t\t\tbackdrop=\"invisible\"\n\t\t\t\twithCloseButton\n\t\t\t\topen={open}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNo Backdrop\n\t\t\t</DBDrawer>",
+					"vue": "<DBDrawer backdrop=\"invisible\" :withCloseButton=\"true\" :open=\"openDrawer\" @close=\"toggleDrawer(false)\">No Backdrop</DBDrawer>"
+				}
+			},
 			{
 				"name": "No Backdrop",
 				"props": {