build: release 3.0.0

docs/migrationGuide.adoc

@@ -4,6 +4,17 @@ As with every release you're recommended to do a visual regression testing for y
 
 Especially the following aspects have changed through the various different releases and would need your review and probably adaptions within your code base.
 
+== DB UI Core 3.0.0 Migration Guide
+
+=== Chip
+
+We needed to modify the `chip` elements HTML slightly due to digital accessibility reasons, which results in the following changes you'll need to make in your HTML code:
+remove `role="button"`, `tabindex="0"` and `aria-hidden="true"` from the `label` HTML element
+
+=== Header and tabs
+
+We've visually adapted the specification regarding header area and its included components as well as the tabs component. This leads to visually breaking changes, which might result in necessary changes within your implementation for customization.
+
 == DB UI Core 2.2.0 Migration Guide
 
 === progress element

source/_data/enterprise/mainnavigation.json

@@ -25,6 +25,36 @@
 							"href": "#",
 							"value": "Sub 01 Sub 03",
 							"rel": "news"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 04",
+							"rel": "index"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 05",
+							"rel": "offers"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 06",
+							"rel": "news"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 07",
+							"rel": "index"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 08",
+							"rel": "offers"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 09",
+							"rel": "news"
 						}
 					]
 				},

source/_patterns/01-elements/chips/_chip.hbs

@@ -1,39 +1,29 @@
 {{! TODO: This would need to get enhanced later on by the additional possible attributes }}
 {{#if selection}}
-	<!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
 	<input
 		class="elm-chip"
 		type="radio"
 		id="chip-single-{{ variant }}{{ id-suffix }}"
 		name="{{ name }}"
 		data-type="selection"
 		{{#if disabled }} disabled{{/if }}>
-	<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
 	<label
 		for="chip-single-{{ variant }}{{ id-suffix }}"
-		role="button"
 		{{#if variant }} data-variant="{{ variant }}"{{/if }}
 		{{#if icon }} data-icon="{{ icon }}"{{/if }}
 		{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
-		tabindex="0"
-		aria-hidden="true"
 		>{{ label }}</label>
 {{else}}
-	<!-- [html-validate-disable-next input-missing-label -- label get read out on the input field already and could get aria hidden] -->
 	<input
 		class="elm-chip"
 		type="checkbox"
-		id="chip-multiple-{{ variant }}{{ id-suffix }}"
+		id="chip-multiple{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
 		data-type="filter"
 		{{#if disabled }} disabled{{/if }}>
-	<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->
 	<label
-		for="chip-multiple-{{ variant }}{{ id-suffix }}"
-		role="button"
+		for="chip-multiple{{#if disabled }}-disabled{{/if}}-{{ variant }}{{ id-suffix }}"
 		{{#if variant }} data-variant="{{ variant }}"{{/if }}
 		{{#if icon }} data-icon="{{ icon }}"{{/if }}
 		{{#if iconAfter }} data-icon-after="{{ iconAfter }}"{{/if }}
-		tabindex="0"
-		aria-hidden="true"
 		>{{ label }}</label>
 {{/if }}

source/_patterns/01-elements/chips/_chip.json

@@ -0,0 +1,3 @@
+{
+	"label": "Title"
+}

source/_patterns/01-elements/chips/chip.scss

@@ -1,7 +1,10 @@
+@import "../../../css/partials.meta";
 @import "chip.variables";
 
 .elm-chip {
 	& + label {
+		--db-focus-outline-size: max(2px, 0.08em);
+
 		align-items: center;
 		border: solid 1px $db-color-cool-gray-400;
 		border-radius: $chip---radius;
@@ -116,8 +119,20 @@
 		}
 	}
 
+	&:focus-visible {
+		& + label {
+			outline: var(--db-focus-outline-size)
+				var(--db-focus-outline-style, solid)
+				var(--db-focus-outline-color, currentColor);
+			outline-offset: var(
+				--db-focus-outline-offset,
+				var(--db-focus-outline-size)
+			);
+		}
+	}
+
 	&[type="checkbox"],
 	&[type="radio"] {
-		display: none;
+		@include a11y-visually-hidden($partial: $partial);
 	}
 }

source/_patterns/01-elements/image/image.scss

@@ -1,13 +1,5 @@
 @import "image.variables";
 
 .elm-image {
-	&.is-logo {
-		height: auto;
-		margin: 0.2rem #{to-rem($pxValue: 16)} 0.2rem 0;
-		max-width: $image-logo--maxwidth;
-
-		.cmp-brand & {
-			width: $brand-image--width; // * TODO: possibly rework variable naming
-		}
-	}
+	// We removed logo styles here
 }

source/_patterns/02-components/brand/brand.scss

@@ -1,39 +1,23 @@
 @import "brand.variables";
 
 .cmp-brand {
-	.elm-image {
-		&.is-logo {
-			float: left;
-			margin-top: -#{to-rem($pxValue: 2)};
-		}
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+
+	a,
+	img {
+		height: 1.5rem;
+	}
+
+	img {
+		width: auto;
 	}
 
 	a {
 		color: inherit;
 		// Deactivate underline on site name being made clickable by added to the link as well
 		text-decoration: none;
 	}
-
-	.rea-header & {
-		padding-top: to-rem($pxValue: 18);
-		@media screen and (width > $db-break-the-header-max-width) {
-			padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming
-
-			.is-site-name {
-				&::before {
-					// * TODO: introduce is-icon as a mixin and change the following declarations afterwards
-					content: none !important;
-				}
-			}
-		}
-	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
-		.cmp-mainnavigation ~ & {
-			.rea-header & {
-				.is-site-name {
-					display: none;
-				}
-			}
-		}
-	}
 }

source/_patterns/02-components/dropdown/dropdown.scss

@@ -10,12 +10,6 @@
 		summary {
 			@include icon(glyph(account), 24, "outline", $partial: $partial);
 
-			&:hover {
-				&::before {
-					color: $db-color-red-500;
-				}
-			}
-
 			@media screen and (max-width: $metanavigation-iconOnly--maxWidth) {
 				// * TODO: possibly rework variable naming
 				@include is-icon-text-replace();

source/_patterns/02-components/language-switcher/_language-switcher.variables.scss

@@ -1,3 +1,5 @@
 @import "../../../css/helpers/functions";
 @import "../../00-base/icons/icons.helpers";
 @import "../../00-base/icons/icons.variables";
+
+$db-language-switcher---direction: var(--db-language-switcher---direction, 1);

source/_patterns/02-components/language-switcher/language-switcher.scss

@@ -1,6 +1,12 @@
 @import "../../../css/partials.meta";
 @import "language-switcher.variables";
 
+@mixin set-top($step: 1) {
+	top: calc(
+		#{$db-language-switcher---direction} * (100% * #{$step} + 1rem - 2px)
+	);
+}
+
 .cmp-language-switcher {
 	list-style: none;
 
@@ -29,41 +35,41 @@
 		top: to-rem($pxValue: 26);
 
 		.rea-header & {
-			top: to-rem($pxValue: 55);
+			@include set-top(1);
 
 			z-index: $z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming
 
 			// TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework
 			&:not([aria-current="page"], [aria-selected="true"])
 				~ li:not([aria-current="page"], [aria-selected="true"]) {
-				top: to-rem($pxValue: 54 * 2);
+				@include set-top(2);
 
 				& ~ li:not([aria-current="page"], [aria-selected="true"]) {
-					top: to-rem($pxValue: 54 * 3);
+					@include set-top(3);
 
 					& ~ li:not([aria-current="page"], [aria-selected="true"]) {
-						top: to-rem($pxValue: 54 * 4);
+						@include set-top(4);
 
 						&
 							~ li:not(
 								[aria-current="page"],
 								[aria-selected="true"]
 							) {
-							top: to-rem($pxValue: 54 * 5);
+							@include set-top(5);
 
 							&
 								~ li:not(
 									[aria-current="page"],
 									[aria-selected="true"]
 								) {
-								top: to-rem($pxValue: 54 * 6);
+								@include set-top(6);
 							}
 						}
 					}
 				}
 			}
 			@media screen and (width > $db-break-the-header-max-width) {
-				top: to-rem($pxValue: 56);
+				top: 100%;
 			}
 		}
 
@@ -78,9 +84,8 @@
 
 			.elm-link,
 			.elm-button {
-				padding-bottom: to-rem($pxValue: 15);
+				padding-block: 1rem;
 				padding-right: to-rem($pxValue: 34);
-				padding-top: to-rem($pxValue: 15);
 
 				&:hover,
 				&:focus {
@@ -95,8 +100,6 @@
 
 			.elm-link,
 			.elm-button {
-				padding-bottom: to-rem($pxValue: 22);
-
 				& {
 					@include icon(
 						glyph(expand-more),