@db-ux/core-components 3.1.16 → 3.1.18

package/build/styles/internal/_button-components.scss

@@ -1,9 +1,13 @@
+@use "@db-ux/core-foundations/build/styles/helpers/display";
+
 %default-button {
 	font-weight: 700;
 	white-space: nowrap; // we don't want to break buttons
 	justify-content: center;
 	text-align: center;
-	display: inline-flex;
+
+	@include display.display(inline-flex);
+
 	align-items: center; // Centering the content vertically and horizontally
 	vertical-align: top; // Alignment of inline-flex buttons with different content
 }

package/build/styles/internal/_form-components.scss

@@ -61,7 +61,7 @@ $db-min-inline-size: var(
 		margin-block-start: variables.$db-spacing-fixed-2xs;
 
 		&:is([data-semantic="successful"], [data-semantic="critical"]) {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 }
@@ -160,17 +160,17 @@ $db-min-inline-size: var(
 	> .db-infotext {
 		@if $key == "valid" {
 			&[data-semantic="successful"] {
-				display: flex;
+				@include helpers.display(flex);
 			}
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else {
 			&[data-semantic="critical"] {
-				display: flex;
+				@include helpers.display(flex);
 			}
 		}
 
 		&:not([data-semantic]) {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 }
@@ -312,8 +312,9 @@ $input-valid-types:
 
 		// we use absolute icons
 		position: relative;
-		display: flex;
 		flex-direction: column;
+
+		@include helpers.display(flex);
 	}
 
 	&[data-variant="floating"],
@@ -513,7 +514,8 @@ $input-valid-types:
 
 	&:is(label),
 	> label {
-		display: flex;
+		@include helpers.display(flex);
+
 		align-items: flex-start;
 		position: relative;
 		color: var(

package/build/styles/internal/_link-components.scss

@@ -5,7 +5,7 @@
 @use "./component";
 
 %db-link-height {
-	display: inline-block;
+	@include helpers.display(inline-block);
 
 	&:not([data-wrap="true"]) {
 		block-size: variables.$db-sizing-sm;
@@ -50,7 +50,7 @@
 	}
 
 	&[data-variant="inline"] {
-		display: inline;
+		@include helpers.display(inline);
 	}
 
 	&:focus-visible {

package/build/styles/internal/_select-components.scss

@@ -23,6 +23,15 @@ $select-icon-padding: calc(
 	position: absolute;
 	inset-block-start: 0;
 	inset-inline-start: 0;
+	opacity: 0;
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition:
+			opacity #{variables.$db-transition-straight-emotional},
+			outline #{variables.$db-transition-duration-extra-fast},
+			border-color #{variables.$db-transition-straight-emotional},
+			background-color #{variables.$db-transition-straight-emotional};
+	}
 }
 
 %select-placeholder {

package/build/styles/internal/_stack-components.scss

@@ -68,7 +68,8 @@ $stack-gaps: (
 }
 
 %default-stack {
-	display: flex;
+	@include helpers.display(flex);
+
 	gap: variables.$db-spacing-fixed-sm;
 	justify-content: flex-start;
 	block-size: 100%;