refactor: enabling hidden attribute

packages/components/src/components/accordion-item/accordion-item.scss

@@ -49,7 +49,9 @@
 
 			background-color: colors.$db-adaptive-bg-basic-level-1-default;
 			list-style: none;
-			display: flex;
+
+			@include helpers.display(flex);
+
 			justify-content: space-between;
 			padding: variables.$db-spacing-fixed-md;
 			gap: variables.$db-spacing-fixed-md;

packages/components/src/components/brand/brand.scss

@@ -1,11 +1,12 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-brand {
 	@extend %db-overwrite-font-size-md;
+	@include display.display(flex);
 
-	display: flex;
 	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;
 	font-weight: 700;

packages/components/src/components/card/card.scss

@@ -30,8 +30,8 @@
 
 	@extend %default-card;
 	@include component.get-data-spacing;
+	@include helpers.display(flex);
 
-	display: flex;
 	flex-direction: column;
 	background-color: var(--db-card-background-color-default);
 

packages/components/src/components/checkbox/checkbox.scss

@@ -94,7 +94,8 @@
 	}
 
 	input {
-		display: flex;
+		@include helpers.display(flex);
+
 		border-radius: variables.$db-border-radius-2xs;
 		align-items: center;
 		justify-content: center;

packages/components/src/components/custom-select-dropdown/custom-select-dropdown.scss

@@ -64,7 +64,7 @@
 			@include helpers.divider("top", "after");
 
 			@include screen-sizes.screen("sm") {
-				display: none;
+				@include helpers.display(none);
 			}
 		}
 	}

packages/components/src/components/custom-select-form-field/custom-select-form-field.scss

@@ -5,7 +5,9 @@
 .db-custom-select-form-field {
 	&:is(summary) {
 		list-style: none;
-		display: flex;
+
+		@include helpers.display(flex);
+
 		align-items: center;
 		justify-content: space-between;
 		gap: variables.$db-spacing-fixed-sm;
@@ -17,7 +19,8 @@
 		}
 
 		> div {
-			display: flex;
+			@include helpers.display(flex);
+
 			gap: variables.$db-spacing-fixed-sm;
 		}
 	}

packages/components/src/components/custom-select-list-item/custom-select-list-item.scss

@@ -14,7 +14,8 @@ db-custom-select-list-item:not(:last-of-type) {
 }
 
 .db-custom-select-list-item {
-	display: flex;
+	@include helpers.display(flex);
+
 	block-size: 100%;
 	position: relative;
 	padding: variables.$db-spacing-fixed-sm;

packages/components/src/components/custom-select-list/custom-select-list.scss

@@ -1,5 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "../../styles/internal/form-components";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-custom-select-list {
 	all: unset;
@@ -26,7 +27,9 @@
 
 	> ul {
 		all: unset;
-		display: flex;
+
+		@include display.display(flex);
+
 		flex-direction: column;
 
 		&:has(span) {

packages/components/src/components/custom-select/custom-select.scss

@@ -57,7 +57,7 @@
 
 	&:has(summary span) {
 		[id$="-placeholder"] {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 

packages/components/src/components/drawer/drawer.scss

@@ -125,8 +125,8 @@ $spacings: (
 	.db-drawer-container {
 		@extend %direction-right;
 		@extend %spacing-drawer;
+		@include helpers.display(flex);
 
-		display: flex;
 		flex-direction: column;
 		background-color: colors.$db-adaptive-bg-basic-level-1-default;
 		block-size: 100%;
@@ -179,8 +179,7 @@ $spacings: (
 		}
 
 		.db-drawer-header {
-			display: none;
-
+			@include helpers.display(none);
 			@include helpers.divider("bottom");
 
 			.db-drawer-header-text {
@@ -199,7 +198,7 @@ $spacings: (
 
 			&:has(.button-close-drawer),
 			&:has(:not(.db-drawer-header-text:empty)) {
-				display: flex;
+				@include helpers.display(flex);
 			}
 		}
 	}
@@ -213,7 +212,7 @@ $spacings: (
 		background-color: transparent;
 
 		&[open] {
-			display: flex;
+			@include helpers.display(flex);
 		}
 
 		&:not([data-direction]),

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

@@ -7,7 +7,9 @@
 
 .db-header {
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	display: flex;
+
+	@include helpers.display(flex);
+
 	flex-direction: column;
 	position: relative;
 	min-block-size: component.$min-mobile-header-height;
@@ -34,7 +36,7 @@
 	}
 
 	.db-link {
-		display: inline-block;
+		@include helpers.display(inline-block);
 	}
 
 	&[data-on-forcing-mobile="true"] {
@@ -59,7 +61,7 @@
 			.db-header-meta-navigation:empty
 		):has(.db-header-secondary-action:empty) {
 		.db-header-burger-menu-container {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 
@@ -73,7 +75,8 @@
 }
 
 .db-header-navigation-bar {
-	display: flex;
+	@include helpers.display(flex);
+
 	position: relative;
 	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
 	inline-size: 100%;
@@ -86,8 +89,8 @@
 
 .db-header-meta-navigation {
 	@extend %db-density-functional;
+	@include helpers.display(flex);
 
-	display: flex;
 	flex-direction: column;
 	gap: variables.$db-spacing-fixed-sm;
 	justify-content: flex-end;
@@ -107,17 +110,18 @@
 		}
 
 		&:empty {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 
 	&:empty {
-		display: none;
+		@include helpers.display(none);
 	}
 }
 
 .db-header-navigation-container {
-	display: inherit;
+	@include helpers.display(inherit);
+
 	flex: 1 1 auto;
 	inline-size: 100%;
 	align-items: center;
@@ -139,12 +143,12 @@
 }
 
 .db-header-brand-container:not(:has(> :nth-child(1))) {
-	display: none;
+	@include helpers.display(none);
 }
 
 .db-header-action-container:has(> .db-header-secondary-action:empty) {
 	@include screen-sizes.screen("md") {
-		display: none;
+		@include helpers.display(none);
 	}
 }
 
@@ -172,7 +176,9 @@
 .db-header-action-container {
 	align-items: center;
 	block-size: 100%;
-	display: inherit;
+
+	@include helpers.display(inherit);
+
 	gap: inherit;
 	flex: 0 1 auto;
 	flex-grow: 0;
@@ -195,7 +201,8 @@
 }
 
 .db-header-drawer-navigation {
-	display: flex;
+	@include helpers.display(flex);
+
 	flex-direction: column;
 	flex: 1 1 auto;
 	block-size: 100%;
@@ -213,7 +220,8 @@
 
 .db-header-navigation,
 .db-header-secondary-action {
-	display: flex;
+	@include helpers.display(flex);
+
 	gap: variables.$db-spacing-fixed-sm;
 	padding-inline: variables.$db-spacing-fixed-md;
 
@@ -234,7 +242,8 @@
 	padding-block-end: 0;
 
 	.db-drawer-content {
-		display: flex;
+		@include helpers.display(flex);
+
 		flex-direction: column;
 		block-size: 100%;
 		overflow: hidden;
@@ -245,21 +254,21 @@
 .db-header-meta-navigation,
 .db-header-navigation-container > .db-header-navigation,
 .db-header-action-container > .db-header-secondary-action {
-	display: none;
+	@include helpers.display(none);
 
 	@include screen-sizes.screen("md") {
-		display: inherit;
+		@include helpers.display(inherit);
 	}
 }
 
 /* Only for Mobile */
 .db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
-	display: inherit;
+	@include helpers.display(inherit);
 }
 
 .db-header-drawer,
 .db-header-burger-menu-container {
 	@include screen-sizes.screen("md") {
-		display: none;
+		@include helpers.display(none);
 	}
 }

packages/components/src/components/icon/icon.scss

@@ -1,11 +1,12 @@
 @use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-icon {
 	@include icons.is-icon-text-replace;
 
 	/* Safari hack */
 	@supports (-webkit-hyphens: none) {
-		display: inline-block;
+		@include display.display(inline-block);
 
 		&::before {
 			block-size: auto;

packages/components/src/components/infotext/infotext.scss

@@ -1,15 +1,15 @@
 @use "sass:map";
 @use "@db-ux/core-foundations/build/styles/fonts";
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/icons";
 
 .db-infotext {
 	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
 
 	@extend %db-overwrite-font-size-sm;
-
-	display: flex;
+	@include display.display(flex);
 
 	@include icons.has-no-icon {
 		@include icons.to-filled-icon;