@db-ux/core-components 3.1.20 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @db-ux/core-components
 
+## 4.0.0
+
+### Major Changes
+
+- feat: Switch stable rework - [see commit cb2deb0](https://github.com/db-ux-design-system/core-web/commit/cb2deb0f1c54900d1967483aea05d81279c02f59):
+  - **BREAKING CHANGE**: remove `emphasis` property
+  - introduce validation (invalid and valid)
+  - configurable label position
+
+- **BREAKING CHANGE**: refactor(Custom Select): renamed `ariaListLabel` property to `listLabel` - [see commit 966d5ad](https://github.com/db-ux-design-system/core-web/commit/966d5ad01f00d0ca1707cc316a63e2d431fff1e9)
+
 ## 3.1.20
 
 ### Patch Changes

package/build/components/checkbox/checkbox.css

@@ -294,6 +294,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-successful-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
@@ -319,15 +322,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:checked {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-successful-bg-inverted-contrast-high-default
+  	--db-successful-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-successful-bg-inverted-contrast-high-hovered
+  	--db-successful-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-successful-bg-inverted-contrast-high-pressed
+  	--db-successful-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
@@ -343,6 +345,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-successful-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
@@ -371,15 +376,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:checked, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:checked {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-successful-bg-inverted-contrast-high-default
+  	--db-successful-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-successful-bg-inverted-contrast-high-hovered
+  	--db-successful-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-successful-bg-inverted-contrast-high-pressed
+  	--db-successful-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) {
@@ -395,6 +399,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-critical-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
@@ -416,15 +423,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:checked {
-  --db-icon-color: var(--db-critical-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-critical-bg-inverted-contrast-high-default
+  	--db-critical-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-critical-bg-inverted-contrast-high-hovered
+  	--db-critical-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-critical-bg-inverted-contrast-high-pressed
+  	--db-critical-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]), .db-checkbox[data-custom-validity=invalid] {
@@ -440,6 +446,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-critical-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
@@ -463,15 +472,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) input:checked, .db-checkbox[data-custom-validity=invalid] input:checked {
-  --db-icon-color: var(--db-critical-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-critical-bg-inverted-contrast-high-default
+  	--db-critical-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-critical-bg-inverted-contrast-high-hovered
+  	--db-critical-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-critical-bg-inverted-contrast-high-pressed
+  	--db-critical-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox input {

package/build/components/checkbox/checkbox.scss

@@ -24,56 +24,6 @@
 	}
 }
 
-@mixin get-validity-color-check($key: "valid") {
-	$variant: successful;
-
-	@if $key != "valid" {
-		$variant: critical;
-	}
-
-	--db-check-element-border-color: var(
-		--db-#{$variant}-on-bg-basic-emphasis-70-default
-	);
-	--db-adaptive-on-bg-basic-emphasis-100-default: var(
-		--db-#{$variant}-on-bg-basic-emphasis-80-default
-	);
-	--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
-		--db-#{$variant}-on-bg-basic-emphasis-80-hovered
-	);
-	--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
-		--db-#{$variant}-on-bg-basic-emphasis-80-pressed
-	);
-
-	@include form-components.get-validity-message($key);
-
-	input {
-		&:not(:checked) {
-			--db-adaptive-bg-basic-transparent-full-default: var(
-				--db-#{$variant}-bg-basic-transparent-full-default
-			);
-			--db-adaptive-bg-basic-transparent-full-hovered: var(
-				--db-#{$variant}-bg-basic-transparent-full-hovered
-			);
-			--db-adaptive-bg-basic-transparent-full-pressed: var(
-				--db-#{$variant}-bg-basic-transparent-full-pressed
-			);
-		}
-
-		&:checked {
-			--db-icon-color: var(--db-#{$variant}-on-bg-inverted-default);
-			--db-adaptive-bg-basic-transparent-full-default: var(
-				--db-#{$variant}-bg-inverted-contrast-high-default
-			);
-			--db-adaptive-bg-basic-transparent-full-hovered: var(
-				--db-#{$variant}-bg-inverted-contrast-high-hovered
-			);
-			--db-adaptive-bg-basic-transparent-full-pressed: var(
-				--db-#{$variant}-bg-inverted-contrast-high-pressed
-			);
-		}
-	}
-}
-
 .db-checkbox {
 	@extend %helper-message;
 	@include form-components.set-default-check-element;
@@ -85,12 +35,12 @@
 
 	@include form-components.get-validity(check) {
 		&:has(.db-infotext[data-semantic="successful"]) {
-			@include get-validity-color-check("valid");
+			@include form-components.get-validity-color-checkbox("valid");
 		}
 	}
 
 	@include form-components.get-validity(check, "invalid") {
-		@include get-validity-color-check("invalid");
+		@include form-components.get-validity-color-checkbox("invalid");
 	}
 
 	input {

package/build/components/infotext/infotext.css

@@ -180,13 +180,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 .db-infotext[data-semantic=adaptive], .db-infotext:not([data-semantic]) {
-  color: var(--db-adaptive-bg-inverted-contrast-high-default);
+  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=adaptive]::before, .db-infotext:not([data-semantic])::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
 .db-infotext[data-semantic=neutral] {
-  color: var(--db-neutral-bg-inverted-contrast-high-default);
+  color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=neutral]:not([data-icon])::before {
   --db-icon: "information_circle";
@@ -198,7 +198,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=critical] {
-  color: var(--db-critical-bg-inverted-contrast-high-default);
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=critical]:not([data-icon])::before {
   --db-icon: "exclamation_mark_circle";
@@ -210,7 +210,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=successful] {
-  color: var(--db-successful-bg-inverted-contrast-high-default);
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=successful]:not([data-icon])::before {
   --db-icon: "check_circle";
@@ -221,7 +221,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=warning] {
-  color: var(--db-warning-bg-inverted-contrast-high-default);
+  color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=warning]:not([data-icon])::before {
   --db-icon: "exclamation_mark_triangle";
@@ -233,7 +233,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=informational] {
-  color: var(--db-informational-bg-inverted-contrast-high-default);
+  color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=informational]:not([data-icon])::before {
   --db-icon: "information_circle";

package/build/components/infotext/infotext.scss

@@ -22,7 +22,7 @@
 
 	&[data-semantic="adaptive"],
 	&:not([data-semantic]) {
-		color: colors.$db-adaptive-bg-inverted-contrast-high-default;
+		color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
 
 		&::before {
 			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
@@ -33,7 +33,7 @@
 		&[data-semantic="#{$name}"] {
 			@include icons.variant-icons($name);
 
-			color: var(--db-#{$name}-bg-inverted-contrast-high-default);
+			color: var(--db-#{$name}-on-bg-basic-emphasis-80-default);
 
 			&::before {
 				--db-icon-color: var(

package/build/components/input/input.css

@@ -676,6 +676,10 @@ input[type=radio]:checked) [id$=-placeholder] {
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) input {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+}
+.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
@@ -709,6 +713,11 @@ input[type=radio]:checked) [id$=-placeholder] {
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
 .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) input, .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) input {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+}
+.db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
@@ -743,6 +752,9 @@ input[type=radio]:checked) [id$=-placeholder] {
   color: var(--db-critical-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
 }
+.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) input {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+}
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
@@ -760,6 +772,9 @@ input[type=radio]:checked) [id$=-placeholder] {
   color: var(--db-critical-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
 }
+.db-input:has(input[data-custom-validity=invalid]) input, .db-input[data-custom-validity=invalid] input {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+}
 .db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-input:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-input[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {