fix: enable multiline for navigation-items links but not buttons (#4065)

* fix: enable multiline for navigation-items that are links and not buttons

* fix: adapted angular and vue showcases

* test: updated snapshots

* test: updated snapshots

* fix: adapted react showcases

* test: updated snapshots

* test: updated snapshots

* chore: update snapshots

---------

Co-authored-by: Nicolas Merget <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

Author: michaelmkraus

__snapshots__/header/showcase/mobile-chrome/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png

@@ -30,9 +30,6 @@
   - link "Examples arrow_up_right\" / \""
   - text: brand" / " DBHeader
   - button "menu\" / \" BurgerMenu"
-  - text: brand" / " DBHeader
-  - button "menu\" / \" BurgerMenu"
-  - text: brand" / "
+  - text: brand" / " DBHeader brand" / "
   - button "menu\" / \" BurgerMenu"
-  - text: brand" / "
-  - button "menu\" / \" BurgerMenu"
+  - text: brand" / "

__snapshots__/header/showcase/mobile-chrome/should-have-same-aria-snapshot/DBHeader-should-have-same-aria-snapshot.yaml

@@ -30,9 +30,6 @@
   - link "Examples arrow_up_right\" / \""
   - text: brand" / " DBHeader
   - button "menu\" / \" BurgerMenu"
-  - text: brand" / " DBHeader
-  - button "menu\" / \" BurgerMenu"
-  - text: brand" / "
+  - text: brand" / " DBHeader brand" / "
   - button "menu\" / \" BurgerMenu"
-  - text: brand" / "
-  - button "menu\" / \" BurgerMenu"
+  - text: brand" / "

__snapshots__/header/showcase/mobile-safari/should-have-same-aria-snapshot/DBHeader-should-have-same-aria-snapshot.yaml

@@ -52,6 +52,19 @@
 			display: none;
 		}
 	}
+
+	// Hide the burger menu if there is no navigation
+	&:has(.db-header-navigation:empty) {
+		.db-header-burger-menu-container {
+			display: none;
+		}
+
+		&:has(.db-header-secondary-action:empty) {
+			.db-header-action-container::before {
+				display: none;
+			}
+		}
+	}
 }
 
 .db-header-navigation-bar {

packages/components/src/components/header/header.scss

@@ -4,7 +4,7 @@ We're [testing our components with playwright](../../foundations/test-table) on
 
 This may leave some older browser versions behind. If you need to take care of these older browsers, you may not want to migrate to DB UX Design System v3 right now, but stay with DB UI Core or Elements for a little longer. In particular, the following features we use may be related to an evaluation of your browser strategy:
 
-| Web Feature                                                                                                                     | Google Chrome    | Mozilla Firefox  | Apple Safari      |
-| ------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | ----------------- |
-| [`@property` / typed CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property)                         | 85 (25.08.2022)  | 128 (09.07.2024) | 16.4 (27.03.2023) |
-| [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)                                       | 123 (19.03.2024) | 120 (21.11.2023) | 17.5 (13.05.2024) |
+| Web Feature                                                                                             | Google Chrome    | Mozilla Firefox  | Apple Safari      |
+| ------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | ----------------- |
+| [`@property` / typed CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | 85 (25.08.2022)  | 128 (09.07.2024) | 16.4 (27.03.2023) |
+| [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)               | 123 (19.03.2024) | 120 (21.11.2023) | 17.5 (13.05.2024) |

packages/foundations/docs/BrowserSupport.md

@@ -347,14 +347,11 @@
 	--db-border-radius-3xl: 2rem;
 	--db-border-radius-full: 500rem;
 	--db-elevation-sm:
-		0 0 1px -1px #0003, 0 0 4px 1px #0000001f,
-		0 0 2px #00000024;
+		0 0 1px -1px #0003, 0 0 4px 1px #0000001f, 0 0 2px #00000024;
 	--db-elevation-md:
-		0 0 2px -1px #0003, 0 0 8px 1px #0000001f,
-		0 0 4px #00000024;
+		0 0 2px -1px #0003, 0 0 8px 1px #0000001f, 0 0 4px #00000024;
 	--db-elevation-lg:
-		0 0 4px -3px #0003, 0 0 16px 3px #0000001f,
-		0 0 8px 1px #00000024;
+		0 0 4px -3px #0003, 0 0 16px 3px #0000001f, 0 0 8px 1px #00000024;
 	--db-font-family-sans: "OpenSans", helvetica, arial, sans-serif;
 	--db-font-family-head: "OpenSans Head", helvetica, arial, sans-serif;
 	--db-sizing-fixed-mobile-header: 3.5rem;