@db-ux/core-components 4.0.4 → 4.2.0

package/build/components/notification/notification.scss

@@ -11,8 +11,8 @@
 @use "./notification-grid-overlay";
 @use "./notification-grid-non-overlay";
 
-%ugly-line-height-workarounds {
-	// resets line-height to smaller height based on timestamp
+%timestamp-line-height-adjustments {
+	// Adjusts line-height for elements when timestamp is present
 	&:has(span) {
 		header,
 		p,
@@ -27,7 +27,7 @@
 .db-notification {
 	@extend %component-border;
 	@extend %grid-layout-default;
-	@extend %ugly-line-height-workarounds;
+	@extend %timestamp-line-height-adjustments;
 	@include helpers.display(grid);
 
 	padding: variables.$db-spacing-fixed-md;
@@ -42,9 +42,6 @@
 	a {
 		@extend %db-default-link;
 
-		grid-area: link;
-		white-space: nowrap;
-
 		// Overwrite settings for db-link ALWAYS
 		&::before,
 		&::after {
@@ -92,12 +89,15 @@
 		margin: 0;
 	}
 
+	// Image styling and grid positioning
 	img {
 		min-block-size: variables.$db-sizing-md;
 		min-inline-size: variables.$db-sizing-md;
 		max-block-size: variables.$db-sizing-md;
 		max-inline-size: variables.$db-sizing-md;
 		border-radius: variables.$db-border-radius-xs;
+		object-fit: cover;
+		grid-area: icon;
 	}
 
 	// timestamp
@@ -106,22 +106,47 @@
 
 		grid-area: timestamp;
 		white-space: nowrap;
+		justify-self: end;
 	}
 
 	.db-button {
 		grid-area: close;
 	}
 
-	&:has(img) {
-		// we don't show a icon if we have an image
-		::before {
-			content: none !important;
+	// Inline links stay within content flow
+	&[data-link-variant="inline"] a {
+		// 1. Assign the link to the "timestamp" area.
+		//    All layouts (overlay and default) must recognize this area.
+		grid-area: timestamp;
+		white-space: nowrap;
+
+		// 2. Align the link at the end (right) of its grid cell
+		justify-self: end;
+
+		// 3. Inline links should use 'md' size (like <p>),
+		//    not 'sm' (like <span>)
+		@extend %db-overwrite-font-size-md;
+	}
+
+	// If an inline link is present, it takes precedence over the timestamp
+	// Note: :has() pseudo-class has limited browser support (Firefox < 121)
+	// Progressive enhancement - timestamps gracefully shown in older browsers
+	&[data-link-variant="inline"]:has(a) {
+		> span {
+			display: none;
 		}
 	}
 
+	// Block links get placed in grid area (default behavior)
+	// This applies when linkVariant is "block" or not specified
+	&:not([data-link-variant="inline"]) a {
+		grid-area: link;
+		white-space: nowrap;
+	}
+
+	// Icon grid positioning
 	&[data-icon]::before,
-	&::before,
-	img {
+	&::before {
 		--db-icon-margin-end: 0;
 
 		@include icons.to-filled-icon;
@@ -129,60 +154,18 @@
 		grid-area: icon;
 	}
 
-	// has link inline or overlay
-	&:has(a) {
-		&[data-link-variant="inline"],
-		&[data-variant="overlay"] {
-			// 1. only content (min. requirement)
-			grid-template-areas: "content link";
-			grid-template-columns: 1fr min-content;
-
-			&:has(.db-button) {
-				grid-template-columns: 1fr min-content min-content;
-				grid-template-areas: "content link close";
-			}
-
-			// 2. headline
-			&:has(header) {
-				grid-template-columns: 1fr min-content;
-				grid-template-areas:
-					"head link"
-					"content content";
-
-				&:has(.db-button) {
-					grid-template-columns: 1fr min-content min-content;
-					grid-template-areas:
-						"head link close"
-						"content content content";
-				}
-			}
+	// If showIcon is explicitly set to false, hide the generated icon
+	// pseudo-element.
+	&[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;
+	}
 
-			// 3. icon or img
-			&[data-icon],
-			&[data-semantic]:not([data-semantic="adaptive"]),
-			&:has(img) {
-				grid-template-areas: "icon content link";
-				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 link close";
-				}
-
-				&:has(header) {
-					grid-template-columns: min-content 1fr min-content;
-					grid-template-areas:
-						"icon head link"
-						"icon content content";
-
-					&:has(.db-button) {
-						grid-template-columns: min-content 1fr min-content min-content;
-						grid-template-areas:
-							"icon head link close"
-							"icon content content content";
-					}
-				}
-			}
+	&:has(img) {
+		// Hide icon when image is present to avoid conflicts
+		&::before {
+			content: none !important;
 		}
 	}
 
@@ -192,8 +175,13 @@
 		box-shadow: variables.$db-elevation-md;
 	}
 
+	// Apply non-overlay grid layout for notifications with block links
+	// This applies when linkVariant is "block" (explicit or default when links are present)
 	&:not([data-variant="overlay"]) {
-		@extend %grid-layout-variant-not-overlay;
+		&[data-link-variant="block"],
+		&:not([data-link-variant]):has(a) {
+			@extend %grid-layout-variant-not-overlay;
+		}
 	}
 
 	&[data-variant="overlay"],

package/build/components/select/select.css

@@ -668,7 +668,17 @@ input[type=radio]:checked) > label {
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   transition: none;
   opacity: 0;
 }
@@ -723,7 +733,17 @@ input[type=radio]:checked) select:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
@@ -739,7 +759,17 @@ input[type=radio]:checked) select:is([type=date],
   [type=datetime-local],
   [type=month],
   [type=week],
-  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+  [type=time]):not(:user-valid,
+  [value*="1"],
+  [value*="2"],
+  [value*="3"],
+  [value*="4"],
+  [value*="5"],
+  [value*="6"],
+  [value*="7"],
+  [value*="8"],
+  [value*="9"],
+  [value*="0"])::-webkit-datetime-edit {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
@@ -859,7 +889,17 @@ input[type=radio]:checked) select:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;

package/build/components/tag/tag.css

@@ -1009,7 +1009,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-tag {
   font-weight: 700;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: pre-line;
   justify-content: center;
   text-align: center;
   align-items: center;

package/build/components/textarea/textarea.css

@@ -434,7 +434,17 @@ input[type=radio]:checked) > label {
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   transition: none;
   opacity: 0;
 }
@@ -487,7 +497,17 @@ input[type=radio]:checked) textarea:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
@@ -501,7 +521,17 @@ input[type=radio]:checked) textarea:is([type=date],
   [type=datetime-local],
   [type=month],
   [type=week],
-  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+  [type=time]):not(:user-valid,
+  [value*="1"],
+  [value*="2"],
+  [value*="3"],
+  [value*="4"],
+  [value*="5"],
+  [value*="6"],
+  [value*="7"],
+  [value*="8"],
+  [value*="9"],
+  [value*="0"])::-webkit-datetime-edit {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
@@ -747,7 +777,17 @@ input[type=radio]:checked) textarea:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;