@db-ux/core-components 4.0.4 → 4.2.0

package/build/components/notification/notification-grid-overlay.scss

@@ -1,55 +1,156 @@
+@use "notification-grid-shared" as shared;
+
+// Wrapper mixins for overlay variants that use shared grid logic
+@mixin overlay-base-grid($areas, $columns) {
+	@include shared.shared-base-grid($areas, $columns);
+}
+
+@mixin overlay-with-close($areas, $columns) {
+	@include shared.shared-with-close($areas, $columns);
+}
+
+@mixin overlay-with-header($areas, $columns) {
+	@include shared.shared-with-header($areas, $columns);
+}
+
+@mixin overlay-with-header-close($areas, $columns) {
+	@include shared.shared-with-header-close($areas, $columns);
+}
+
+@mixin overlay-with-icon($areas, $columns) {
+	@include shared.shared-with-icon($areas, $columns);
+}
+
+@mixin overlay-with-icon-close($areas, $columns) {
+	@include shared.shared-with-icon-close($areas, $columns);
+}
+
+@mixin overlay-with-icon-header($areas, $columns) {
+	@include shared.shared-with-icon-header($areas, $columns);
+}
+
+@mixin overlay-with-icon-header-close($areas, $columns) {
+	@include shared.shared-with-icon-header-close($areas, $columns);
+}
+
+@mixin overlay-timestamp-area-layouts() {
+	// 1. Base layout: content + timestamp
+	@include overlay-base-grid("content timestamp", 1fr min-content);
+	@include overlay-with-close(
+		"content timestamp close",
+		1fr min-content min-content
+	);
+
+	// 2. Progressive enhancement: adds headline
+	@include overlay-with-header(
+		"head timestamp" "content content",
+		1fr min-content
+	);
+	@include overlay-with-header-close(
+		"head timestamp close" "content content content",
+		1fr min-content min-content
+	);
+
+	// 3. Progressive enhancement: adds icon or image
+	@include overlay-with-icon(
+		"icon content timestamp",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-close(
+		"icon content timestamp close",
+		min-content 1fr min-content min-content
+	);
+	@include overlay-with-icon-header(
+		"icon head timestamp" "icon content content",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-header-close(
+		"icon head timestamp close" "icon content content content",
+		min-content 1fr min-content min-content
+	);
+}
+
+@mixin overlay-block-layouts-without-timestamp() {
+	// 1. Base layout: content + block link (overridden by subsequent mixins when additional elements detected)
+	@include overlay-base-grid("content" "link", 1fr);
+	@include overlay-with-close("content close" "link link", 1fr min-content);
+
+	// 2. Progressive enhancement: adds headline
+	@include overlay-with-header("head" "content" "link", 1fr);
+	@include overlay-with-header-close(
+		"head close" "content content" "link link",
+		1fr min-content
+	);
+
+	// 3. Progressive enhancement: adds icon or image
+	@include overlay-with-icon("icon content" "icon link", min-content 1fr);
+	@include overlay-with-icon-close(
+		"icon content close" "icon link link",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-header(
+		"icon head" "icon content" "icon link",
+		min-content 1fr
+	);
+	@include overlay-with-icon-header-close(
+		"icon head close" "icon content content" "icon link link",
+		min-content 1fr min-content
+	);
+}
+
+@mixin overlay-block-layouts() {
+	// 1. Base layout when content, timestamp, and block link are present (more specific rules apply when additional elements are detected)
+	@include overlay-base-grid(
+		"content timestamp" "link link",
+		1fr min-content
+	);
+	@include overlay-with-close(
+		"content timestamp close" "link link link",
+		1fr min-content min-content
+	);
+
+	// 2. Progressive enhancement: adds headline
+	@include overlay-with-header(
+		"head timestamp" "content content" "link link",
+		1fr min-content
+	);
+	@include overlay-with-header-close(
+		"head timestamp close" "content content content" "link link link",
+		1fr min-content min-content
+	);
+
+	// 3. Progressive enhancement: adds icon or image
+	@include overlay-with-icon(
+		"icon content timestamp" "icon link link",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-close(
+		"icon content timestamp close" "icon link link link",
+		min-content 1fr min-content min-content
+	);
+	@include overlay-with-icon-header(
+		"icon head timestamp" "icon content content" "icon link link",
+		min-content 1fr min-content
+	);
+	@include overlay-with-icon-header-close(
+		"icon head timestamp close" "icon content content content"
+			"icon link link link",
+		min-content 1fr min-content min-content
+	);
+}
+
 %grid-layout-variant-overlay {
-	// has timestamp
-	&:has(span) {
-		// 1. only content (min. requirement)
-		grid-template-areas: "content timestamp";
-		grid-template-columns: 1fr min-content;
-
-		&:has(.db-button) {
-			grid-template-columns: 1fr min-content min-content;
-			grid-template-areas: "content timestamp close";
-		}
-
-		// 2. headline
-		&:has(header) {
-			grid-template-columns: 1fr min-content;
-			grid-template-areas:
-				"head timestamp"
-				"content content";
-
-			&:has(.db-button) {
-				grid-template-columns: 1fr min-content min-content;
-				grid-template-areas:
-					"head timestamp close"
-					"content content content";
-			}
-		}
-
-		// 3. icon or img
-		&[data-icon],
-		&[data-semantic]:not([data-semantic="adaptive"]),
-		&:has(img) {
-			grid-template-areas: "icon content timestamp";
-			grid-template-columns: min-content 1fr min-content;
-
-			&:has(.db-button) {
-				grid-template-columns: min-content 1fr min-content min-content;
-				grid-template-areas: "icon content timestamp close";
-			}
-
-			&:has(header) {
-				grid-template-columns: min-content 1fr min-content;
-				grid-template-areas:
-					"icon head timestamp"
-					"icon content content";
-
-				&:has(.db-button) {
-					grid-template-columns: min-content 1fr min-content min-content;
-					grid-template-areas:
-						"icon head timestamp close"
-						"icon content content content";
-				}
-			}
-		}
+	// 1. Standard: Layout for inline links AND timestamps
+	//    Both use the 'timestamp' area, which moves to the header when a header is present.
+	@include overlay-timestamp-area-layouts;
+
+	// 2. Override: When explicitly "block" link variant with timestamp
+	&:has(span)[data-link-variant="block"] {
+		@include overlay-block-layouts;
+	}
+
+	// 3. Override: When "block" link variant WITHOUT timestamp
+	&:not(:has(span))[data-link-variant="block"] {
+		@include overlay-block-layouts-without-timestamp;
 	}
 }

package/build/components/notification/notification-grid-shared.css

@@ -0,0 +1 @@
+

package/build/components/notification/notification-grid-shared.scss

@@ -0,0 +1,80 @@
+// Shared grid mixins for notification layouts
+// These mixins contain the common grid logic used by both overlay and non-overlay variants
+
+@mixin shared-base-grid($areas, $columns) {
+	grid-template-areas: $areas;
+	grid-template-columns: $columns;
+}
+
+@mixin shared-with-close($areas, $columns) {
+	&:has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-header($areas, $columns) {
+	&:has(header) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-header-close($areas, $columns) {
+	&:has(header):has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon($areas, $columns) {
+	// Only treat the element as having an icon when the "data-show-icon"
+	// attribute is not explicitly set to "false". This prevents reserving
+	// grid space for an icon when the component has an `icon` prop but
+	// `showIcon` is false (the common cause for unintended left padding).
+	&[data-icon]:not([data-show-icon="false"]),
+	&[data-semantic]:not([data-semantic="adaptive"], [data-show-icon="false"]),
+	&:has(img) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon-close($areas, $columns) {
+	// Same as shared-with-icon but for variants that also have a close button
+	&[data-icon]:not([data-show-icon="false"]):has(.db-button),
+	&[data-semantic]:not(
+			[data-semantic="adaptive"],
+			[data-show-icon="false"]
+		):has(.db-button),
+	&:has(img):has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon-header($areas, $columns) {
+	// Same as shared-with-icon but for variants that also have a header
+	&[data-icon]:not([data-show-icon="false"]):has(header),
+	&[data-semantic]:not(
+			[data-semantic="adaptive"],
+			[data-show-icon="false"]
+		):has(header),
+	&:has(img):has(header) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}
+
+@mixin shared-with-icon-header-close($areas, $columns) {
+	// Same as shared-with-icon but for variants that have a header and close button
+	&[data-icon]:not([data-show-icon="false"]):has(header):has(.db-button),
+	&[data-semantic]:not(
+			[data-semantic="adaptive"],
+			[data-show-icon="false"]
+		):has(header):has(.db-button),
+	&:has(img):has(header):has(.db-button) {
+		grid-template-areas: $areas;
+		grid-template-columns: $columns;
+	}
+}

package/build/components/notification/notification.css

@@ -840,12 +840,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-notification a[data-size=small], .db-notification p {
+.db-notification a[data-size=small], .db-notification p, .db-notification[data-link-variant=inline] a {
   font: var(--db-type-body-md);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-notification a[data-size=small], .db-notification p {
+  .db-notification a[data-size=small], .db-notification p, .db-notification[data-link-variant=inline] a {
     /* Those variables are only for components to calculate heights and change icons */
     --db-icon-font-weight: var(--db-base-body-icon-weight-md);
     --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -1100,98 +1100,213 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   grid-template-areas: "content";
   grid-template-columns: 1fr;
 }
+[data-link-variant=inline].db-notification {
+  grid-template-columns: 1fr min-content;
+  grid-template-areas: "content timestamp";
+}
 .db-notification:has(.db-button) {
   grid-template-columns: 1fr min-content;
   grid-template-areas: "content close";
 }
+.db-notification:has(.db-button)[data-link-variant=inline] {
+  grid-template-columns: 1fr min-content min-content;
+  grid-template-areas: "content timestamp close";
+}
 .db-notification:has(header) {
   grid-template-columns: 1fr;
   grid-template-areas: "head" "content";
 }
+.db-notification:has(header)[data-link-variant=inline] {
+  grid-template-columns: 1fr min-content;
+  grid-template-areas: "head timestamp" "content content";
+}
 .db-notification:has(header):has(.db-button) {
   grid-template-columns: 1fr min-content;
   grid-template-areas: "head close" "content content";
 }
+.db-notification:has(header):has(.db-button)[data-link-variant=inline] {
+  grid-template-columns: 1fr min-content min-content;
+  grid-template-areas: "head timestamp close" "content content .";
+}
 [data-icon].db-notification, [data-semantic].db-notification:not([data-semantic=adaptive]), .db-notification:has(img) {
   grid-template-areas: "icon content";
   grid-template-columns: min-content 1fr;
 }
+[data-icon][data-link-variant=inline].db-notification, [data-semantic].db-notification:not([data-semantic=adaptive])[data-link-variant=inline], .db-notification:has(img)[data-link-variant=inline] {
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-areas: "icon content timestamp";
+}
 [data-icon].db-notification:has(.db-button), [data-semantic].db-notification:not([data-semantic=adaptive]):has(.db-button), .db-notification:has(img):has(.db-button) {
   grid-template-columns: min-content 1fr min-content;
   grid-template-areas: "icon content close";
 }
+[data-icon].db-notification:has(.db-button)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive]):has(.db-button)[data-link-variant=inline], .db-notification:has(img):has(.db-button)[data-link-variant=inline] {
+  grid-template-columns: min-content 1fr min-content min-content;
+  grid-template-areas: "icon content timestamp close";
+}
 [data-icon].db-notification:has(header), [data-semantic].db-notification:not([data-semantic=adaptive]):has(header), .db-notification:has(img):has(header) {
   grid-template-columns: min-content 1fr;
   grid-template-areas: "icon head" "icon content";
 }
+[data-icon].db-notification:has(header)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive]):has(header)[data-link-variant=inline], .db-notification:has(img):has(header)[data-link-variant=inline] {
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-areas: "icon head timestamp" "icon content content";
+}
 [data-icon].db-notification:has(header):has(.db-button), [data-semantic].db-notification:not([data-semantic=adaptive]):has(header):has(.db-button), .db-notification:has(img):has(header):has(.db-button) {
   grid-template-columns: min-content 1fr min-content;
   grid-template-areas: "icon head close" "icon content content";
 }
+[data-icon].db-notification:has(header):has(.db-button)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive]):has(header):has(.db-button)[data-link-variant=inline], .db-notification:has(img):has(header):has(.db-button)[data-link-variant=inline] {
+  grid-template-columns: min-content 1fr min-content min-content;
+  grid-template-areas: "icon head timestamp close" "icon content content .";
+}
 
-.db-notification[data-variant=overlay]:has(span) {
+.db-notification[data-variant=overlay] {
   grid-template-areas: "content timestamp";
   grid-template-columns: 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span):has(.db-button) {
-  grid-template-columns: 1fr min-content min-content;
+.db-notification[data-variant=overlay]:has(.db-button) {
   grid-template-areas: "content timestamp close";
+  grid-template-columns: 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span):has(header) {
-  grid-template-columns: 1fr min-content;
+.db-notification[data-variant=overlay]:has(header) {
   grid-template-areas: "head timestamp" "content content";
+  grid-template-columns: 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span):has(header):has(.db-button) {
-  grid-template-columns: 1fr min-content min-content;
+.db-notification[data-variant=overlay]:has(header):has(.db-button) {
   grid-template-areas: "head timestamp close" "content content content";
+  grid-template-columns: 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-icon], .db-notification[data-variant=overlay]:has(span)[data-semantic]:not([data-semantic=adaptive]), .db-notification[data-variant=overlay]:has(span):has(img) {
+[data-icon].db-notification[data-variant=overlay]:not([data-show-icon=false]), [data-semantic].db-notification[data-variant=overlay]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:has(img) {
   grid-template-areas: "icon content timestamp";
   grid-template-columns: min-content 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-icon]:has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-semantic]:not([data-semantic=adaptive]):has(.db-button), .db-notification[data-variant=overlay]:has(span):has(img):has(.db-button) {
-  grid-template-columns: min-content 1fr min-content min-content;
+[data-icon].db-notification[data-variant=overlay]:not([data-show-icon=false]):has(.db-button), [data-semantic].db-notification[data-variant=overlay]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has(img):has(.db-button) {
   grid-template-areas: "icon content timestamp close";
+  grid-template-columns: min-content 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-icon]:has(header), .db-notification[data-variant=overlay]:has(span)[data-semantic]:not([data-semantic=adaptive]):has(header), .db-notification[data-variant=overlay]:has(span):has(img):has(header) {
-  grid-template-columns: min-content 1fr min-content;
+[data-icon].db-notification[data-variant=overlay]:not([data-show-icon=false]):has(header), [data-semantic].db-notification[data-variant=overlay]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has(img):has(header) {
   grid-template-areas: "icon head timestamp" "icon content content";
+  grid-template-columns: min-content 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-icon]:has(header):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-semantic]:not([data-semantic=adaptive]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has(span):has(img):has(header):has(.db-button) {
-  grid-template-columns: min-content 1fr min-content min-content;
+[data-icon].db-notification[data-variant=overlay]:not([data-show-icon=false]):has(header):has(.db-button), [data-semantic].db-notification[data-variant=overlay]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has(img):has(header):has(.db-button) {
   grid-template-areas: "icon head timestamp close" "icon content content content";
+  grid-template-columns: min-content 1fr min-content min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block] {
+  grid-template-areas: "content timestamp" "link link";
+  grid-template-columns: 1fr min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(.db-button) {
+  grid-template-areas: "content timestamp close" "link link link";
+  grid-template-columns: 1fr min-content min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(header) {
+  grid-template-areas: "head timestamp" "content content" "link link";
+  grid-template-columns: 1fr min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(header):has(.db-button) {
+  grid-template-areas: "head timestamp close" "content content content" "link link link";
+  grid-template-columns: 1fr min-content min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img) {
+  grid-template-areas: "icon content timestamp" "icon link link";
+  grid-template-columns: min-content 1fr min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img):has(.db-button) {
+  grid-template-areas: "icon content timestamp close" "icon link link link";
+  grid-template-columns: min-content 1fr min-content min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img):has(header) {
+  grid-template-areas: "icon head timestamp" "icon content content" "icon link link";
+  grid-template-columns: min-content 1fr min-content;
+}
+.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img):has(header):has(.db-button) {
+  grid-template-areas: "icon head timestamp close" "icon content content content" "icon link link link";
+  grid-template-columns: min-content 1fr min-content min-content;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block] {
+  grid-template-areas: "content" "link";
+  grid-template-columns: 1fr;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(.db-button) {
+  grid-template-areas: "content close" "link link";
+  grid-template-columns: 1fr min-content;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(header) {
+  grid-template-areas: "head" "content" "link";
+  grid-template-columns: 1fr;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(header):has(.db-button) {
+  grid-template-areas: "head close" "content content" "link link";
+  grid-template-columns: 1fr min-content;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img) {
+  grid-template-areas: "icon content" "icon link";
+  grid-template-columns: min-content 1fr;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img):has(.db-button) {
+  grid-template-areas: "icon content close" "icon link link";
+  grid-template-columns: min-content 1fr min-content;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img):has(header) {
+  grid-template-areas: "icon head" "icon content" "icon link";
+  grid-template-columns: min-content 1fr;
+}
+.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img):has(header):has(.db-button) {
+  grid-template-areas: "icon head close" "icon content content" "icon link link";
+  grid-template-columns: min-content 1fr min-content;
 }
 
-.db-notification:not([data-variant=overlay]) span {
+.db-notification:not([data-variant=overlay])[data-link-variant=block] span, .db-notification:not([data-variant=overlay]):not([data-link-variant]):has(a) span {
   display: none;
 }
-.db-notification:has(a):not([data-link-variant=inline]):not([data-variant=overlay]) {
+[data-link-variant=block].db-notification:not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):not([data-variant=overlay]) {
   grid-template-areas: "content" "link";
   grid-template-columns: 1fr;
 }
-.db-notification:has(a):not([data-link-variant=inline]):has(.db-button):not([data-variant=overlay]) {
-  grid-template-columns: 1fr min-content;
+[data-link-variant=block].db-notification:has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(.db-button):not([data-variant=overlay]) {
   grid-template-areas: "content close" "link link";
+  grid-template-columns: 1fr min-content;
 }
-.db-notification:has(a):not([data-link-variant=inline]):has(header):not([data-variant=overlay]) {
-  grid-template-columns: 1fr;
+[data-link-variant=block].db-notification:has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(header):not([data-variant=overlay]) {
   grid-template-areas: "head" "content" "link";
+  grid-template-columns: 1fr;
 }
-.db-notification:has(a):not([data-link-variant=inline]):has(header):has(.db-button):not([data-variant=overlay]) {
-  grid-template-columns: 1fr min-content;
+[data-link-variant=block].db-notification:has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(header):has(.db-button):not([data-variant=overlay]) {
   grid-template-areas: "head close" "content content" "link link";
+  grid-template-columns: 1fr min-content;
 }
-.db-notification:has(a):not([data-link-variant=inline])[data-icon]:not([data-variant=overlay]), .db-notification:has(a):not([data-link-variant=inline])[data-semantic]:not([data-semantic=adaptive]):not([data-variant=overlay]), .db-notification:has(a):not([data-link-variant=inline]):has(img):not([data-variant=overlay]) {
+[data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):not([data-variant=overlay]) {
   grid-template-areas: "icon content" "icon link";
   grid-template-columns: min-content 1fr;
 }
-.db-notification:has(a):not([data-link-variant=inline])[data-icon]:has(header):not([data-variant=overlay]), .db-notification:has(a):not([data-link-variant=inline])[data-semantic]:not([data-semantic=adaptive]):has(header):not([data-variant=overlay]), .db-notification:has(a):not([data-link-variant=inline]):has(img):has(header):not([data-variant=overlay]) {
-  grid-template-columns: min-content 1fr;
+[data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):has(.db-button):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):has(.db-button):not([data-variant=overlay]) {
+  grid-template-areas: "icon content close" "icon link link";
+  grid-template-columns: min-content 1fr min-content;
+}
+[data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):has(header):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):has(header):not([data-variant=overlay]) {
   grid-template-areas: "icon head" "icon content" "icon link";
+  grid-template-columns: min-content 1fr;
 }
-.db-notification:has(a):not([data-link-variant=inline])[data-icon]:has(header):has(.db-button):not([data-variant=overlay]), .db-notification:has(a):not([data-link-variant=inline])[data-semantic]:not([data-semantic=adaptive]):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:has(a):not([data-link-variant=inline]):has(img):has(header):has(.db-button):not([data-variant=overlay]) {
-  grid-template-columns: min-content 1fr min-content;
+[data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):has(header):has(.db-button):not([data-variant=overlay]) {
   grid-template-areas: "icon head close" "icon content content" "icon link link";
+  grid-template-columns: min-content 1fr min-content;
 }
 
 .db-notification:has(span) header,
@@ -1213,10 +1328,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-notification::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
-.db-notification a {
-  grid-area: link;
-  white-space: nowrap;
-}
 .db-notification a::before, .db-notification a::after {
   content: none !important;
   margin: 0 !important;
@@ -1261,19 +1372,30 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   max-block-size: var(--db-sizing-md);
   max-inline-size: var(--db-sizing-md);
   border-radius: var(--db-border-radius-xs);
+  object-fit: cover;
+  grid-area: icon;
 }
 .db-notification span {
   grid-area: timestamp;
   white-space: nowrap;
+  justify-self: end;
 }
 .db-notification .db-button {
   grid-area: close;
 }
-.db-notification:has(img) ::before {
-  content: none !important;
+.db-notification[data-link-variant=inline] a {
+  grid-area: timestamp;
+  white-space: nowrap;
+  justify-self: end;
 }
-.db-notification[data-icon]::before, .db-notification::before,
-.db-notification img {
+.db-notification[data-link-variant=inline]:has(a) > span {
+  display: none;
+}
+.db-notification:not([data-link-variant=inline]) a {
+  grid-area: link;
+  white-space: nowrap;
+}
+.db-notification[data-icon]::before, .db-notification::before {
   --db-icon-margin-end: 0;
   --db-icon-font-family: var(
   	--db-icon-filled-font-family,
@@ -1282,37 +1404,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
   grid-area: icon;
 }
-.db-notification:has(a)[data-link-variant=inline], .db-notification:has(a)[data-variant=overlay] {
-  grid-template-areas: "content link";
-  grid-template-columns: 1fr min-content;
-}
-.db-notification:has(a)[data-link-variant=inline]:has(.db-button), .db-notification:has(a)[data-variant=overlay]:has(.db-button) {
-  grid-template-columns: 1fr min-content min-content;
-  grid-template-areas: "content link close";
-}
-.db-notification:has(a)[data-link-variant=inline]:has(header), .db-notification:has(a)[data-variant=overlay]:has(header) {
-  grid-template-columns: 1fr min-content;
-  grid-template-areas: "head link" "content content";
-}
-.db-notification:has(a)[data-link-variant=inline]:has(header):has(.db-button), .db-notification:has(a)[data-variant=overlay]:has(header):has(.db-button) {
-  grid-template-columns: 1fr min-content min-content;
-  grid-template-areas: "head link close" "content content content";
-}
-.db-notification:has(a)[data-link-variant=inline][data-icon], .db-notification:has(a)[data-link-variant=inline][data-semantic]:not([data-semantic=adaptive]), .db-notification:has(a)[data-link-variant=inline]:has(img), .db-notification:has(a)[data-variant=overlay][data-icon], .db-notification:has(a)[data-variant=overlay][data-semantic]:not([data-semantic=adaptive]), .db-notification:has(a)[data-variant=overlay]:has(img) {
-  grid-template-areas: "icon content link";
-  grid-template-columns: min-content 1fr min-content;
-}
-.db-notification:has(a)[data-link-variant=inline][data-icon]:has(.db-button), .db-notification:has(a)[data-link-variant=inline][data-semantic]:not([data-semantic=adaptive]):has(.db-button), .db-notification:has(a)[data-link-variant=inline]:has(img):has(.db-button), .db-notification:has(a)[data-variant=overlay][data-icon]:has(.db-button), .db-notification:has(a)[data-variant=overlay][data-semantic]:not([data-semantic=adaptive]):has(.db-button), .db-notification:has(a)[data-variant=overlay]:has(img):has(.db-button) {
-  grid-template-columns: min-content 1fr min-content min-content;
-  grid-template-areas: "icon content link close";
-}
-.db-notification:has(a)[data-link-variant=inline][data-icon]:has(header), .db-notification:has(a)[data-link-variant=inline][data-semantic]:not([data-semantic=adaptive]):has(header), .db-notification:has(a)[data-link-variant=inline]:has(img):has(header), .db-notification:has(a)[data-variant=overlay][data-icon]:has(header), .db-notification:has(a)[data-variant=overlay][data-semantic]:not([data-semantic=adaptive]):has(header), .db-notification:has(a)[data-variant=overlay]:has(img):has(header) {
-  grid-template-columns: min-content 1fr min-content;
-  grid-template-areas: "icon head link" "icon content content";
+.db-notification[data-show-icon=false]::before {
+  /* Hidden when showIcon is explicitly false. Using `display:none`
+     is sufficient; avoid extra properties that don't affect layout. */
+  display: none;
 }
-.db-notification:has(a)[data-link-variant=inline][data-icon]:has(header):has(.db-button), .db-notification:has(a)[data-link-variant=inline][data-semantic]:not([data-semantic=adaptive]):has(header):has(.db-button), .db-notification:has(a)[data-link-variant=inline]:has(img):has(header):has(.db-button), .db-notification:has(a)[data-variant=overlay][data-icon]:has(header):has(.db-button), .db-notification:has(a)[data-variant=overlay][data-semantic]:not([data-semantic=adaptive]):has(header):has(.db-button), .db-notification:has(a)[data-variant=overlay]:has(img):has(header):has(.db-button) {
-  grid-template-columns: min-content 1fr min-content min-content;
-  grid-template-areas: "icon head link close" "icon content content content";
+.db-notification:has(img)::before {
+  content: none !important;
 }
 .db-notification[data-variant=overlay] {
   box-shadow: var(--db-elevation-md);