Merge branch 'main' into 2567-tabs-a11y-validity

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.

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;
+			}
 		}
 	}
 }

packages/foundations/nodemon.json

@@ -0,0 +1,6 @@
+{
+	"ignore": ["scss/_normalize.scss"],
+	"ext": "json,scss,js",
+	"watch": ["scss", "scripts"],
+	"exec": "npm run build"
+}

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 --config nodemon.json",
     "test:e2e": "npx playwright test --config=./test/playwright.config.mjs"
   },
   "devDependencies": {

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;
 		}

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": {