fix: issue with form elements new user-valid

packages/components/src/styles/_form-components.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:string";
 @use "@db-ui/foundations/build/scss/icons";
 @use "@db-ui/foundations/build/scss/tonality";
 @use "@db-ui/foundations/build/scss/variables";
@@ -116,7 +117,7 @@ $floating-label-size: calc(
 	--db-current-bg-color: #{map.get($color-variant, "bg")};
 }
 
-@mixin get-validity-color($key: "valid") {
+@mixin get-validity-color($selector, $key: "valid") {
 	$variant: "successful";
 
 	@if ($key != "valid") {
@@ -129,39 +130,66 @@ $floating-label-size: calc(
 		@include set-current-colors($color-variant);
 	}
 
-	textarea,
-	input,
-	select,
+	#{$selector},
 	[id$="-placeholder"] {
 		color: map.get($color-variant, "on-bg");
 	}
 }
 
-@mixin get-validity($key: "valid") {
+@function get-validations($selector, $key) {
+	$has-selectors: "";
+
+	$validations: ":required";
+	$user: "user-";
+
+	// Differentiating form elements
+	@if ($selector == select or $selector == check) {
+		$user: "";
+	} @else {
+		// TODO: add validations for input & textarea as well
+		//  https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
+		$validations: ":required";
+	}
+
+	// We need to do a more complicated check for non-typed-input-elements
+	@if ($selector == input) {
+		$validations: ':not([type="text"], [type="password"], [type="search"]),:is([type="text"], [type="password"], [type="search"]):required';
+	}
+
+	// Check elements (radio and checkbox) should get selected by their native HTML tag `input`
+	@if ($selector == check) {
+		$selector: input;
+	}
+
+	$has-selectors: $has-selectors +
+		"&:has(#{$selector}:not([aria-invalid]):is(#{$validations}):#{$user}#{$key}),";
+
+	@return string.unquote(string.slice($has-selectors, 1, -2));
+}
+
+@mixin get-validity($selector, $key: "valid") {
 	$boolean: "true";
 	@if ($key == "valid") {
 		$boolean: "false";
 	}
 
-	&:has(input:not([aria-invalid]):user-#{$key}),
-	&:has(textarea:not([aria-invalid]):user-#{$key}),
-	&:has(select:not([aria-invalid]):user-#{$key}) {
+	#{get-validations($selector,$key)} {
 		@content;
 	}
 
-	// :user-valid workaround
+	@if ($selector == check) {
+		$selector: input;
+	}
+
+	// :user-valid or :user-invalid workaround
 	@supports not selector(:user-#{$key}) {
-		&:has(input:not([aria-invalid]):required:#{$key}),
-		&:has(textarea:not([aria-invalid]):required:#{$key}),
-		&:has(select:not([aria-invalid]):required:#{$key}) {
+		&:has(#{$selector}:not([aria-invalid]):required:#{$key}) {
 			@content;
 		}
 	}
 
 	// If aria-invalid is set we overwrite the selectors above
-	&:has(input[aria-invalid="#{$boolean}"]),
-	&:has(textarea[aria-invalid="#{$boolean}"]),
-	&:has(select[aria-invalid="#{$boolean}"]) {
+	&:has(#{$selector}[aria-invalid="#{$boolean}"]) {
 		@content;
 	}
 }
@@ -189,11 +217,11 @@ $floating-label-size: calc(
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	@include get-validity() {
-		@include get-validity-color("valid");
+	@include get-validity($selector) {
+		@include get-validity-color($selector, "valid");
 	}
-	@include get-validity("invalid") {
-		@include get-validity-color("invalid");
+	@include get-validity($selector, "invalid") {
+		@include get-validity-color($selector, "invalid");
 	}
 
 	#{$selector} {
@@ -341,10 +369,10 @@ $floating-label-size: calc(
 %check-element {
 	@include set-required-label(input);
 
-	@include get-validity() {
+	@include get-validity(check) {
 		@include get-validity-color-check("valid");
 	}
-	@include get-validity("invalid") {
+	@include get-validity(check, "invalid") {
 		@include get-validity-color-check("invalid");
 	}
 

showcases/shared/input.json

@@ -135,7 +135,7 @@
 				"props": {
 					"label": "Label",
 					"value": "Filled - Valid",
-					"required": true
+					"invalid": false
 				}
 			},
 			{
@@ -187,7 +187,7 @@
 				"props": {
 					"label": "Label",
 					"value": "Filled - Valid",
-					"required": true,
+					"invalid": false,
 					"labelVariant": "floating"
 				}
 			},

showcases/shared/select.json

@@ -311,7 +311,7 @@
 					],
 					"label": "Label",
 					"value": "Filled - Valid",
-					"required": true
+					"invalid": false
 				}
 			},
 			{
@@ -410,7 +410,7 @@
 					],
 					"label": "Label",
 					"value": "Filled - Valid",
-					"required": true,
+					"invalid": false,
 					"labelVariant": "floating"
 				}
 			},

showcases/shared/textarea.json

@@ -135,7 +135,7 @@
 				"props": {
 					"label": "Label",
 					"value": "Filled - Valid",
-					"required": true
+					"invalid": false
 				}
 			},
 			{
@@ -187,7 +187,7 @@
 				"props": {
 					"label": "Label",
 					"value": "Filled - Valid",
-					"required": true,
+					"invalid": false,
 					"labelVariant": "floating"
 				}
 			},