@db-ux/core-components 3.1.20 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @db-ux/core-components
 
+## 4.0.1
+
+_version bump_
+
+
+## 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/accordion-item/accordion-item.css

@@ -161,7 +161,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/checkbox/checkbox.css

@@ -82,7 +82,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: ""/"") {
@@ -294,6 +295,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 +323,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 +346,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 +377,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 +400,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 +424,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 +447,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 +473,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/custom-select/custom-select.css

@@ -551,7 +551,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: ""/"") {
@@ -850,6 +851,14 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   transition: none;
   opacity: 0;
 }
+.db-custom-select[data-variant=floating] summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-custom-select[data-variant=floating] summary {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -893,6 +902,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-custom-select[data-variant=floating]:has(summary:focus-within,
+summary:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) summary: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;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-start: var(--db-base-body-icon-font-size-2xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  summary:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) summary: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-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -1005,6 +1042,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-custom-select summary: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-custom-select summary {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/infotext/infotext.css

@@ -143,7 +143,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: ""/"") {
@@ -180,13 +181,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 +199,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 +211,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 +222,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 +234,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

@@ -394,7 +394,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: ""/"") {
@@ -623,6 +624,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-input[data-variant=floating] input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-input[data-variant=floating] input {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -664,6 +673,32 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-input[data-variant=floating]:has(input:focus-within,
+input:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) input: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-input[data-variant=floating]:has(input:focus-within,
+  input:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) input: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-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]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -676,6 +711,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 +748,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 +787,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 +807,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]) {
@@ -776,6 +826,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-input input: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-input input {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/link/link.css

@@ -226,7 +226,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/navigation-item/navigation-item.css

@@ -219,7 +219,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/notification/notification.css

@@ -930,7 +930,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/select/select.css

@@ -394,7 +394,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: ""/"") {
@@ -649,6 +650,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-select[data-variant=floating] select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-select[data-variant=floating] select {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -692,6 +701,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-select[data-variant=floating]:has(select:focus-within,
+select:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) select: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;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-start: var(--db-base-body-icon-font-size-2xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-select[data-variant=floating]:has(select:focus-within,
+  select:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) select: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-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -804,6 +841,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-select select: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-select select {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);