@db-ux/core-components 2.4.0 → 2.4.2

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

@@ -123,12 +123,12 @@ $db-min-inline-size: var(
 		}
 
 		&:has(
-				#{$selector}:focus-within,
-				#{$selector}:is(input, textarea):not(:placeholder-shown),
-				> select option:checked:not([hidden]),
-				input[type="checkbox"]:checked,
-				input[type="radio"]:checked
-			) {
+			#{$selector}:focus-within,
+			#{$selector}:is(input, textarea):not(:placeholder-shown),
+			> select option:checked:not([hidden]),
+			input[type="checkbox"]:checked,
+			input[type="radio"]:checked
+		) {
 			> label {
 				@extend %db-overwrite-font-size-2xs;
 
@@ -227,6 +227,7 @@ $input-valid-types:
 	$validations: ":required";
 
 	@if ($selector == input) {
+		/* We use all client side form-validation for input here */
 		// https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
 		$validations: ":required, [minlength], [maxlength], [pattern]";
 
@@ -235,6 +236,7 @@ $input-valid-types:
 		}
 		/* stylelint-disable-next-line at-rule-empty-line-before */
 	} @else if($selector == textarea) {
+		/* We use all client side form-validation for textarea here */
 		$validations: ":required, [minlength], [maxlength]";
 	}
 
@@ -254,10 +256,8 @@ $input-valid-types:
 		$selector: input;
 
 		&:has(
-				#{$selector}:not(
-						[data-custom-validity]
-					):required:#{$user}#{$key}
-			) {
+			#{$selector}:not([data-custom-validity]):required:#{$user}#{$key}
+		) {
 			@content;
 		}
 		/* stylelint-disable-next-line at-rule-empty-line-before */
@@ -279,8 +279,8 @@ $input-valid-types:
 }
 
 @mixin set-required-label($selector) {
-	&:has(#{$selector}:required):not([data-hide-asterisk="true"]),
-	&[data-required="true"]:not([data-hide-asterisk="true"]) {
+	&:has(#{$selector}:required),
+	&[data-required="true"] {
 		&:is(label),
 		> label {
 			&::after {
@@ -315,14 +315,17 @@ $input-valid-types:
 		--db-label-visible-above: 0;
 	}
 
+	&:not([data-hide-asterisk="true"]) {
+		@include set-required-label($selector);
+	}
+
 	@include set-floating-label-overwrites($selector);
-	@include set-required-label($selector);
 
 	@include get-validity($selector) {
 		&:has(
-				> .db-infotext[data-semantic="successful"],
-				> db-infotext > .db-infotext[data-semantic="successful"]
-			) {
+			> .db-infotext[data-semantic="successful"],
+			> db-infotext > .db-infotext[data-semantic="successful"]
+		) {
 			@include get-validity-color($selector, "valid");
 		}
 	}
@@ -407,10 +410,10 @@ $input-valid-types:
 
 	// disabled
 	&:has(
-			#{$selector}:disabled,
-			#{$selector}[data-disabled="true"],
-			#{$selector}[aria-disabled="true"]
-		) {
+		#{$selector}:disabled,
+		#{$selector}[data-disabled="true"],
+		#{$selector}[aria-disabled="true"]
+	) {
 		// Decided against cursor: not-allowed, compare to e.g. https://phabricator.wikimedia.org/T121960
 		opacity: variables.$db-opacity-md;
 		pointer-events: none;
@@ -492,7 +495,9 @@ $input-valid-types:
 @mixin set-default-check-element() {
 	@extend %db-overwrite-font-size-md;
 
-	@include set-required-label(input);
+	&:not([data-hide-asterisk="true"]) {
+		@include set-required-label(input);
+	}
 
 	&:has(input:disabled) {
 		opacity: variables.$db-opacity-md;