@db-ux/core-components 4.0.4 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @db-ux/core-components
 
+## 4.2.0
+
+_version bump_
+
+
+## 4.1.0
+
+### Minor Changes
+
+- refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
+
+- fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
+  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+
+### Patch Changes
+
+- fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
+  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+  - This listener detects form resets and updates the component's internal value/checked state accordingly.
+  - > **Note**: This does not work for `ngModel` in Angular.
+
+- fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
+
+- fix(input): Date or time types – initial value gets displayed as placeholder [see commit e3c7ce7](e3c7ce7718803624557bc8fc66f7b662b42ff0be)
+
 ## 4.0.4
 
 ### Patch Changes

package/build/assets/fonts/generate-eu-fonts.ts

@@ -27,7 +27,7 @@ const generateFonts = async () => {
 	try {
 		const files = await glob(`${__dirname}/*.ttf`);
 
-		for (const file of files) {
+		for (const file of files.map(f=> f.replaceAll('\\', '/'))) {
 			// Security: Validate that the file is within the expected directory
 			// and has the expected extension to prevent path traversal attacks
 			if (!file.startsWith(__dirname) || !file.endsWith('.ttf')) {

package/build/assets/fonts/unicode-eu.txt

@@ -12,3 +12,4 @@ U+010C, U+010D, U+010E, U+010F, U+011A, U+011B, U+0147, U+0148, U+0158, U+0159,
 U+00E9, U+00E8, U+00EB, U+00E4, U+00FC, U+00F6, U+00EF, U+00C9, U+00C8, U+00CB, U+00C4, U+00DC, U+00D6, U+00CF # Netherlands characters
 U+0391-03A9, U+03B1-03C9 # Greek characters
 U+0410-042F, U+0430-044F # Cyrillic characters
+U+0404,U+0406-0407,U+0456-0457,U+0413-0419,U+0433-0439,U+041A-041F,U+043A-043F,U+0420-0429,U+0440-0449,U+0490-0491 # Ukrainian characters

package/build/components/badge/badge.css

@@ -131,7 +131,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Use for headline tags like <h1> */
 .db-badge {
   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/button/button.css

@@ -143,7 +143,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-button {
   font-weight: 700;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: pre-line;
   justify-content: center;
   text-align: center;
   align-items: center;
@@ -154,16 +155,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-button {
+  max-inline-size: 100%;
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  block-size: var(--db-sizing-md);
+  min-block-size: var(--db-sizing-md);
+  block-size: max-content;
   inline-size: fit-content;
-  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
+  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
   text-decoration: none;
 }
 .db-button[data-no-text=true] {
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */
   padding: 0;
+  aspect-ratio: 1;
   inline-size: var(--db-sizing-md);
 }
 .db-button[data-no-text=true]::before {
@@ -174,10 +178,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-button[data-size=small] {
   font-weight: 700;
-  block-size: var(--db-sizing-sm);
+  min-block-size: var(--db-sizing-sm);
 }
 .db-button[data-size=small]:not([data-no-text=true]) {
-  padding: var(--db-spacing-fixed-3xs) var(--db-spacing-fixed-sm);
+  padding: 1px var(--db-spacing-fixed-sm);
 }
 .db-button[data-size=small]:not([data-no-text=true])::before {
   margin-inline-end: var(--db-spacing-fixed-2xs);
@@ -270,6 +274,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-button:has(> .db-button) {
   margin: 0;
   padding: 0;
+  block-size: var(--db-sizing-md);
 }
 .db-button:has(> .db-button)::before {
   content: none;

package/build/components/button/button.scss

@@ -7,15 +7,18 @@
 @use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
 
+// generic styles can be found in _button-components.scss
 .db-button {
 	@extend %default-interactive-component;
 	@extend %default-button;
 	@extend %db-overwrite-font-size-md;
 
+	max-inline-size: 100%;
 	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-	block-size: variables.$db-sizing-md;
+	min-block-size: variables.$db-sizing-md;
+	block-size: max-content;
 	inline-size: fit-content;
-	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-md;
 
 	// disable text-decoration if someone wants to use the button for an <a> tag
 	text-decoration: none;
@@ -25,6 +28,7 @@
 		@include icons.is-icon-text-replace;
 
 		padding: 0;
+		aspect-ratio: 1;
 		inline-size: variables.$db-sizing-md;
 
 		&::before {
@@ -36,11 +40,11 @@
 		@extend %db-overwrite-font-size-sm;
 
 		font-weight: 700;
-		block-size: variables.$db-sizing-sm;
+		min-block-size: variables.$db-sizing-sm;
 
 		&:not([data-no-text="true"]) {
-			padding: variables.$db-spacing-fixed-3xs
-				variables.$db-spacing-fixed-sm;
+			// stylelint-disable-next-line db-ux/use-spacings
+			padding: 1px variables.$db-spacing-fixed-sm;
 
 			&::before {
 				margin-inline-end: variables.$db-spacing-fixed-2xs;
@@ -113,6 +117,7 @@
 	&:has(> .db-button) {
 		margin: 0;
 		padding: 0;
+		block-size: variables.$db-sizing-md;
 
 		&::before {
 			content: none;

package/build/components/custom-select/custom-select.css

@@ -869,7 +869,17 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 [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;
 }
@@ -924,7 +934,17 @@ input[type=radio]:checked) summary: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;
@@ -940,7 +960,17 @@ input[type=radio]:checked) summary: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);
   }
 }
@@ -1060,7 +1090,17 @@ input[type=radio]:checked) summary: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;
@@ -1202,6 +1242,9 @@ summary[aria-disabled=true]) {
     opacity: var(--db-opacity-lg);
   }
 }
+.db-custom-select > details[open] > summary > span > span::after {
+  content: ": ";
+}
 .db-custom-select[data-variant=floating] .db-custom-select-form-field > span {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: calc(var(--db-type-body-font-size-2xs) + var(--db-spacing-fixed-3xs));

package/build/components/custom-select/custom-select.scss

@@ -120,6 +120,10 @@
 					opacity: variables.$db-opacity-lg;
 				}
 			}
+
+			> span > span::after {
+				content: ": ";
+			}
 		}
 	}
 

package/build/components/input/input.css

@@ -570,7 +570,8 @@ input[type=radio]:checked) > label {
 
 .db-input input::file-selector-button {
   font-weight: 700;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: pre-line;
   justify-content: center;
   text-align: center;
   align-items: center;
@@ -642,7 +643,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;
 }
@@ -695,7 +706,17 @@ input[type=radio]:checked) input: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;
@@ -709,7 +730,17 @@ input[type=radio]:checked) input: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);
   }
 }
@@ -844,7 +875,17 @@ input[type=radio]:checked) input: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/notification/notification-grid-default.scss

@@ -3,9 +3,21 @@
 	grid-template-areas: "content";
 	grid-template-columns: 1fr;
 
+	// Add a layout for inline links
+	&[data-link-variant="inline"] {
+		grid-template-columns: 1fr min-content;
+		grid-template-areas: "content timestamp";
+	}
+
 	&:has(.db-button) {
 		grid-template-columns: 1fr min-content;
 		grid-template-areas: "content close";
+
+		// Inline link + close button
+		&[data-link-variant="inline"] {
+			grid-template-columns: 1fr min-content min-content;
+			grid-template-areas: "content timestamp close";
+		}
 	}
 
 	// 2. headline
@@ -15,11 +27,25 @@
 			"head"
 			"content";
 
+		&[data-link-variant="inline"] {
+			grid-template-columns: 1fr min-content;
+			grid-template-areas:
+				"head timestamp"
+				"content content";
+		}
+
 		&:has(.db-button) {
 			grid-template-columns: 1fr min-content;
 			grid-template-areas:
 				"head close"
 				"content content";
+
+			&[data-link-variant="inline"] {
+				grid-template-columns: 1fr min-content min-content;
+				grid-template-areas:
+					"head timestamp close"
+					"content content ."; // Empty cell aligns content column with head row
+			}
 		}
 	}
 
@@ -30,9 +56,19 @@
 		grid-template-areas: "icon content";
 		grid-template-columns: min-content 1fr;
 
+		&[data-link-variant="inline"] {
+			grid-template-columns: min-content 1fr min-content;
+			grid-template-areas: "icon content timestamp";
+		}
+
 		&:has(.db-button) {
 			grid-template-columns: min-content 1fr min-content;
 			grid-template-areas: "icon content close";
+
+			&[data-link-variant="inline"] {
+				grid-template-columns: min-content 1fr min-content min-content;
+				grid-template-areas: "icon content timestamp close";
+			}
 		}
 
 		&:has(header) {
@@ -41,11 +77,25 @@
 				"icon head"
 				"icon content";
 
+			&[data-link-variant="inline"] {
+				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;
 				grid-template-areas:
 					"icon head close"
 					"icon content content";
+
+				&[data-link-variant="inline"] {
+					grid-template-columns: min-content 1fr min-content min-content;
+					grid-template-areas:
+						"icon head timestamp close"
+						"icon content content ."; // Empty cell aligns content column with head row
+				}
 			}
 		}
 	}

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

@@ -1,66 +1,80 @@
-%grid-layout-variant-not-overlay {
-	span {
-		display: none;
-	}
+@use "notification-grid-shared" as shared;
+
+
+// Wrapper mixins for non-overlay variants that use shared grid logic
+@mixin non-overlay-base-grid($areas, $columns) {
+	@include shared.shared-base-grid($areas, $columns);
+}
+
+@mixin non-overlay-with-close($areas, $columns) {
+	@include shared.shared-with-close($areas, $columns);
+}
+
+@mixin non-overlay-with-header($areas, $columns) {
+	@include shared.shared-with-header($areas, $columns);
+}
+
+@mixin non-overlay-with-header-close($areas, $columns) {
+	@include shared.shared-with-header-close($areas, $columns);
+}
+
+@mixin non-overlay-with-icon($areas, $columns) {
+	@include shared.shared-with-icon($areas, $columns);
+}
 
-	// has link
-	&:has(a) {
-		&:not([data-link-variant="inline"]) {
-			// 1. only content (min. requirement)
-			grid-template-areas:
-				"content"
-				"link";
-			grid-template-columns: 1fr;
+@mixin non-overlay-with-icon-close($areas, $columns) {
+	@include shared.shared-with-icon-close($areas, $columns);
+}
+
+@mixin non-overlay-with-icon-header($areas, $columns) {
+	@include shared.shared-with-icon-header($areas, $columns);
+}
 
-			&:has(.db-button) {
-				grid-template-columns: 1fr min-content;
-				grid-template-areas:
-					"content close"
-					"link link";
-			}
+@mixin non-overlay-with-icon-header-close($areas, $columns) {
+	@include shared.shared-with-icon-header-close($areas, $columns);
+}
 
-			// 2. headline
-			&:has(header) {
-				grid-template-columns: 1fr;
-				grid-template-areas:
-					"head"
-					"content"
-					"link";
+@mixin non-overlay-block-link-layouts() {
+	// 1. Base: content + block link (no additional elements)
+	@include non-overlay-base-grid("content" "link", 1fr);
+	@include non-overlay-with-close(
+		"content close" "link link",
+		1fr min-content
+	);
 
-				&:has(.db-button) {
-					grid-template-columns: 1fr min-content;
-					grid-template-areas:
-						"head close"
-						"content content"
-						"link link";
-				}
-			}
+	// 2. Adds: headline
+	@include non-overlay-with-header("head" "content" "link", 1fr);
+	@include non-overlay-with-header-close(
+		"head close" "content content" "link link",
+		1fr min-content
+	);
 
-			// 3. icon or img
-			&[data-icon],
-			&[data-semantic]:not([data-semantic="adaptive"]),
-			&:has(img) {
-				grid-template-areas:
-					"icon content"
-					"icon link";
-				grid-template-columns: min-content 1fr;
+	// 3. Adds: icon or image
+	@include non-overlay-with-icon("icon content" "icon link", min-content 1fr);
+	@include non-overlay-with-icon-close(
+		"icon content close" "icon link link",
+		min-content 1fr min-content
+	);
+	@include non-overlay-with-icon-header(
+		"icon head" "icon content" "icon link",
+		min-content 1fr
+	);
+	@include non-overlay-with-icon-header-close(
+		"icon head close" "icon content content" "icon link link",
+		min-content 1fr min-content
+	);
+}
 
-				&:has(header) {
-					grid-template-columns: min-content 1fr;
-					grid-template-areas:
-						"icon head"
-						"icon content"
-						"icon link";
+%grid-layout-variant-not-overlay {
+	// Hide timestamp for non-overlay variants only
+	span {
+		display: none;
+	}
 
-					&:has(.db-button) {
-						grid-template-columns: min-content 1fr min-content;
-						grid-template-areas:
-							"icon head close"
-							"icon content content"
-							"icon link link";
-					}
-				}
-			}
-		}
+	// Apply block link layout when linkVariant is "block" (explicit or default)
+	// Only applies to non-overlay variants with block links
+	&[data-link-variant="block"],
+	&:not([data-link-variant]):has(a) {
+		@include non-overlay-block-link-layouts;
 	}
 }