@db-ux/core-components 3.1.20 → 4.0.1-0-540218c

package/build/components/switch/switch.scss

@@ -35,6 +35,7 @@ $checked-active-transition-size: calc(
 .db-switch {
 	user-select: none;
 
+	@extend %helper-message;
 	@include form-components.set-default-check-element;
 
 	&:not(:has(input:disabled)) {
@@ -45,13 +46,24 @@ $checked-active-transition-size: calc(
 		}
 	}
 
-	> input {
+	@include form-components.get-validity(check) {
+		&:has(.db-infotext[data-semantic="successful"]) {
+			@include form-components.get-validity-color-checkbox("valid");
+		}
+	}
+
+	@include form-components.get-validity(check, "invalid") {
+		@include form-components.get-validity-color-checkbox("invalid");
+	}
+
+	input {
 		--db-icon-margin-start: 0;
 		--thumb-offset-x: #{$switch-fixed-padding};
 
 		@extend %db-overwrite-font-size-sm;
 
 		appearance: none;
+		margin-inline-end: 0;
 		inline-size: calc(
 			#{form-components.$font-size-height} * 2 + #{$switch-fixed-padding}
 		);
@@ -82,8 +94,14 @@ $checked-active-transition-size: calc(
 			align-content: center;
 			aspect-ratio: 1;
 			block-size: $switch-inactive-thumb-size;
-			background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-			color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+			background-color: var(
+				--db-check-element-border-color,
+				#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
+			);
+			color: var(
+				--db-check-element-border-color,
+				#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
+			);
 			border-radius: variables.$db-border-radius-full;
 			transform: translateX(var(--thumb-offset-x));
 			margin-inline-end: calc(
@@ -99,6 +117,8 @@ $checked-active-transition-size: calc(
 					block-size variables.$db-transition-duration-fast
 						variables.$db-transition-timing-emotional,
 					transform variables.$db-transition-duration-fast
+						variables.$db-transition-timing-emotional,
+					visibility variables.$db-transition-duration-fast
 						variables.$db-transition-timing-emotional;
 			}
 		}
@@ -106,23 +126,16 @@ $checked-active-transition-size: calc(
 		/* positioned at the end of the track: track length - 100% (thumb width) */
 		&:checked {
 			--thumb-offset-x: calc(100% + #{$switch-fixed-padding});
-
-			@include colors.set-current-colors(
-				colors.$db-adaptive-bg-inverted-contrast-max-default,
-				colors.$db-adaptive-on-bg-inverted-default,
-				colors.$db-adaptive-bg-inverted-contrast-max-hovered,
-				colors.$db-adaptive-bg-inverted-contrast-max-pressed
+			--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+			--db-adaptive-bg-basic-transparent-full-default: var(
+				--db-adaptive-bg-inverted-contrast-max-default
+			);
+			--db-adaptive-bg-basic-transparent-full-hovered: var(
+				--db-adaptive-bg-inverted-contrast-max-hovered
+			);
+			--db-adaptive-bg-basic-transparent-full-pressed: var(
+				--db-adaptive-bg-inverted-contrast-max-pressed
 			);
-
-			border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-
-			@include helpers.hover {
-				border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-hovered;
-			}
-
-			@include helpers.active {
-				border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-pressed;
-			}
 
 			&::after {
 				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
@@ -156,91 +169,95 @@ $checked-active-transition-size: calc(
 	}
 
 	&[data-hide-label="true"] {
-		gap: 0;
+		> label {
+			margin: 0;
+
+			> span {
+				font-size: 0;
+			}
+		}
 	}
 
 	&[data-size="small"] {
-		gap: variables.$db-spacing-fixed-2xs;
+		> label {
+			gap: variables.$db-spacing-fixed-2xs;
+		}
 
-		> input {
+		input {
 			@extend %db-overwrite-font-size-xs;
 		}
 	}
 
-	&[data-emphasis="strong"] {
-		> input {
-			--db-check-element-border-color: #{colors.$db-adaptive-bg-basic-transparent-full-default};
-
-			@extend %db-critical-variables;
-
-			background-color: colors.$db-adaptive-bg-inverted-contrast-low-default;
-			color: colors.$db-adaptive-on-bg-inverted-default;
-			border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
-
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-inverted-contrast-low-hovered;
-				border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-hovered;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-inverted-contrast-low-pressed;
-				border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-pressed;
+	&[data-visual-aid="true"] {
+		input {
+			&::after {
+				visibility: visible;
+				block-size: $switch-active-thumb-size;
 
-				&::before {
-					block-size: $checked-active-transition-size;
+				@media screen and (prefers-reduced-motion: no-preference) {
+					transition: transform variables.$db-transition-duration-fast
+						variables.$db-transition-timing-emotional;
 				}
 			}
 
-			&:not(:checked) {
-				--thumb-offset-x: 0;
-			}
-
 			&:checked {
-				@extend %db-successful-variables;
-
-				&::before {
-					background-color: colors.$db-adaptive-on-bg-inverted-default;
-					color: colors.$db-adaptive-on-bg-inverted-default;
+				&:not([data-aid-icon]) {
+					@include icons.set-icon("check", "after");
 				}
 
 				&::after {
-					--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
+					transform: translateX(
+						calc(-100% - #{$switch-fixed-padding})
+					);
+					transform-origin: center right;
 				}
 			}
+		}
+	}
 
-			&::after {
-				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
-			}
+	/* Label position (leading/trailing) */
+	&:not([data-variant="leading"]) {
+		> label {
+			flex-direction: row;
+		}
 
-			&::before {
-				background-color: colors.$db-adaptive-on-bg-inverted-default;
-				color: colors.$db-adaptive-on-bg-inverted-default;
-				block-size: $switch-active-thumb-size;
-				margin: 0;
-			}
+		input {
+			margin-inline-end: variables.$db-spacing-fixed-xs;
 		}
-	}
 
-	&[data-emphasis="strong"],
-	&[data-visual-aid="true"] {
-		> input {
-			&::after {
-				visibility: visible;
-				block-size: $switch-active-thumb-size;
+		&[data-size="small"] {
+			input {
+				margin-inline-end: variables.$db-spacing-fixed-xs;
 			}
+		}
+	}
 
-			&:checked {
-				&:not([data-aid-icon]) {
-					@include icons.set-icon("check", "after");
+	&[data-variant="leading"] {
+		&:not([data-hide-asterisk="true"]) {
+			&:has(input:required),
+			&[data-required="true"] {
+				> label::after {
+					/* We remove default asterisk because we need a wrapping span for switch */
+					content: none;
 				}
 
-				&::after {
-					transform: translateX(
-						calc(-100% - #{$switch-fixed-padding})
-					);
-					block-size: $switch-active-thumb-size;
+				> label::before {
+					order: 1;
+
+					@include icons.icon-content("*");
 				}
 			}
 		}
+
+		input {
+			order: 2;
+			margin-inline-start: variables.$db-spacing-fixed-xs;
+		}
+
+		&[data-size="small"] {
+			input {
+				margin-inline-start: variables.$db-spacing-fixed-2xs;
+			}
+		}
 	}
 }

package/build/components/tab-item/tab-item.css

@@ -140,6 +140,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-tab-item {
   position: relative;
   list-style-type: "";

package/build/components/tab-list/tab-list.css

@@ -215,6 +215,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/tabs/tabs.css

@@ -122,6 +122,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/tag/tag.css

@@ -965,6 +965,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -985,7 +987,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/textarea/textarea.css

@@ -170,6 +170,8 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -399,6 +401,18 @@ input[type=radio]:checked) > label {
     content: "*"/"";
   }
 }
+.db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-textarea[data-variant=floating]:has(textarea[data-custom-validity=valid]) label, .db-textarea[data-variant=floating][data-custom-validity=valid] label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-textarea[data-variant=floating]:has(textarea[data-custom-validity=invalid]) label, .db-textarea[data-variant=floating][data-custom-validity=invalid] label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
 .db-textarea[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -416,6 +430,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-textarea[data-variant=floating] textarea:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-textarea[data-variant=floating] textarea {
   padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -457,8 +479,35 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-textarea[data-variant=floating]:has(textarea:focus-within,
+textarea:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) textarea:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-textarea[data-variant=floating]:has(textarea:focus-within,
+  textarea:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) textarea:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
+  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-basic-transparent-full-default
@@ -493,6 +542,10 @@ input[type=radio]:checked) [id$=-placeholder] {
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) textarea {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+}
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
@@ -513,6 +566,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
+  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-basic-transparent-full-default
@@ -550,6 +604,11 @@ input[type=radio]:checked) [id$=-placeholder] {
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
 .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) textarea, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) textarea {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+}
+.db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
@@ -577,6 +636,7 @@ input[type=radio]:checked) [id$=-placeholder] {
   display: none;
 }
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
+  --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-basic-transparent-full-default
@@ -608,6 +668,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-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) textarea {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
@@ -617,6 +680,7 @@ input[type=radio]:checked) [id$=-placeholder] {
   display: none;
 }
 .db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
+  --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-basic-transparent-full-default
@@ -649,6 +713,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-textarea:has(textarea[data-custom-validity=invalid]) textarea, .db-textarea[data-custom-validity=invalid] textarea {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+}
 .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-textarea[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
@@ -665,6 +732,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-textarea textarea:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-textarea textarea {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/tooltip/tooltip.css

@@ -113,6 +113,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 @keyframes show-right-to-left {
   from {
     transform: translateX(110%);