@dynatrace/strato-components 3.7.1 → 3.9.0

package/forms/_base-input/BaseInput.css

@@ -1,27 +1,27 @@
-._1a8lqy90-3-7-1 {
-  --_bx32h5-3-7-1: 1;
+._1a8lqy90-3-9-0 {
+  --_bx32h5-3-9-0: 1;
 }
-._1a8lqy91-3-7-1 {
-  --_bx32h5-3-7-1: 3;
+._1a8lqy91-3-9-0 {
+  --_bx32h5-3-9-0: 3;
 }
-._1a8lqy91-3-7-1:hover {
-  --_bx32h5-3-7-1: 4;
+._1a8lqy91-3-9-0:hover {
+  --_bx32h5-3-9-0: 4;
 }
-._1a8lqy91-3-7-1:active {
-  --_bx32h5-3-7-1: 4;
+._1a8lqy91-3-9-0:active {
+  --_bx32h5-3-9-0: 4;
 }
-._1a8lqy92-3-7-1 {
-  --_bx32h5-3-7-1: 0;
+._1a8lqy92-3-9-0 {
+  --_bx32h5-3-9-0: 0;
 }
-._1a8lqy92-3-7-1:hover {
-  --_bx32h5-3-7-1: 0;
+._1a8lqy92-3-9-0:hover {
+  --_bx32h5-3-9-0: 0;
 }
-._1a8lqy92-3-7-1:active {
-  --_bx32h5-3-7-1: 0;
+._1a8lqy92-3-9-0:active {
+  --_bx32h5-3-9-0: 0;
 }
-._1a8lqy98-3-7-1 {
-  --_1a8lqy96-3-7-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-7-1: var(--_1a8lqy96-3-7-1);
+._1a8lqy98-3-9-0 {
+  --_1a8lqy96-3-9-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-9-0: var(--_1a8lqy96-3-9-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -32,91 +32,91 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  background-color: var(--_1a8lqy96-3-7-1);
-  box-shadow: var(--_1a8lqy97-3-7-1);
+  background-color: var(--_1a8lqy96-3-9-0);
+  box-shadow: var(--_1a8lqy97-3-9-0);
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
 }
-._1a8lqy98-3-7-1:hover {
-  --_1a8lqy96-3-7-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy98-3-9-0:hover {
+  --_1a8lqy96-3-9-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy98-3-7-1:active {
-  --_1a8lqy96-3-7-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy98-3-9-0:active {
+  --_1a8lqy96-3-9-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-7-1 ._1a8lqy98-3-7-1 {
+._1a8lqy91-3-9-0 ._1a8lqy98-3-9-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1) ._1a8lqy98-3-7-1:hover {
+._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0) ._1a8lqy98-3-9-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1) ._1a8lqy98-3-7-1:active {
+._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0) ._1a8lqy98-3-9-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy93-3-7-1 ._1a8lqy98-3-7-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy93-3-9-0 ._1a8lqy98-3-9-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-:where(:root:not(._1jgl8s50-3-7-1)) ._1a8lqy93-3-7-1._1a8lqy91-3-7-1 ._1a8lqy98-3-7-1:is(:not(:hover, :active), :hover, :active) {
+:where(:root:not(._1jgl8s50-3-9-0)) ._1a8lqy93-3-9-0._1a8lqy91-3-9-0 ._1a8lqy98-3-9-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy92-3-7-1 ._1a8lqy98-3-7-1 {
+._1a8lqy92-3-9-0 ._1a8lqy98-3-9-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy95-3-7-1:not(:hover) ._1a8lqy98-3-7-1 {
+._1a8lqy95-3-9-0:not(:hover) ._1a8lqy98-3-9-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy95-3-7-1:is(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy95-3-9-0:is(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1 ._1a8lqy98-3-7-1,
-    ._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1 ._1a8lqy98-3-7-1:is(:hover, :active),
-    ._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1:is(:hover, :active),
-    ._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):is(:hover, :active) ._1a8lqy98-3-7-1 {
+._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0 ._1a8lqy98-3-9-0,
+    ._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0 ._1a8lqy98-3-9-0:is(:hover, :active),
+    ._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0:is(:hover, :active),
+    ._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):is(:hover, :active) ._1a8lqy98-3-9-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1,
-    ._1jgl8s50-3-7-1 :where(._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)):hover ._1a8lqy98-3-7-1 {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0,
+    ._1jgl8s50-3-9-0 :where(._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)):hover ._1a8lqy98-3-9-0 {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-7-1 :is(._1a8lqy94-3-7-1, ._1a8lqy95-3-7-1):not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1:hover {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-9-0 :is(._1a8lqy94-3-9-0, ._1a8lqy95-3-9-0):not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0:hover {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
 }
-._1jgl8s50-3-7-1 :is(._1a8lqy94-3-7-1, ._1a8lqy95-3-7-1):not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1:active {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-9-0 :is(._1a8lqy94-3-9-0, ._1a8lqy95-3-9-0):not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0:active {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
 }
-._1jgl8s50-3-7-1 :where(._1a8lqy94-3-7-1)._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1) ._1a8lqy98-3-7-1,
-      ._1jgl8s50-3-7-1 :where(._1a8lqy95-3-7-1)._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover ._1a8lqy98-3-7-1 {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-9-0 :where(._1a8lqy94-3-9-0)._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0) ._1a8lqy98-3-9-0,
+      ._1jgl8s50-3-9-0 :where(._1a8lqy95-3-9-0)._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover ._1a8lqy98-3-9-0 {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-7-1 ._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1:hover {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-9-0 ._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0:hover {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
 }
-._1jgl8s50-3-7-1 ._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1:active {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-9-0 ._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0:active {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1:is(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1 {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0:is(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0 {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1._1a8lqy91-3-7-1:is(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1) ._1a8lqy98-3-7-1 {
-  --_1a8lqy97-3-7-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0._1a8lqy91-3-9-0:is(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0) ._1a8lqy98-3-9-0 {
+  --_1a8lqy97-3-9-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1a8lqy99-3-7-1 {
+._1a8lqy99-3-9-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy9a-3-7-1 {
+._1a8lqy9a-3-9-0 {
   padding-right: 0;
 }
-._1a8lqy9b-3-7-1 {
+._1a8lqy9b-3-9-0 {
   padding-right: unset;
 }
-._1a8lqy9c-3-7-1 {
+._1a8lqy9c-3-9-0 {
   padding-left: unset;
 }
-._1a8lqy9d-3-7-1 {
+._1a8lqy9d-3-9-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -130,134 +130,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9d-3-7-1:focus {
+._1a8lqy9d-3-9-0:focus {
   outline: none;
 }
-._1a8lqy9d-3-7-1::placeholder {
+._1a8lqy9d-3-9-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9d-3-7-1::-webkit-search-cancel-button {
+._1a8lqy9d-3-9-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9d-3-7-1::-ms-reveal {
+._1a8lqy9d-3-9-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-7-1 ._1a8lqy9d-3-7-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-7-1 ._1a8lqy9d-3-7-1::placeholder {
+._1a8lqy91-3-9-0 ._1a8lqy9d-3-9-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-9-0 ._1a8lqy9d-3-9-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-7-1 ._1a8lqy9d-3-7-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-7-1 ._1a8lqy9d-3-7-1::placeholder {
+._1a8lqy92-3-9-0 ._1a8lqy9d-3-9-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-9-0 ._1a8lqy9d-3-9-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-7-1 ._1a8lqy9d-3-7-1 {
+._1a8lqy92-3-9-0 ._1a8lqy9d-3-9-0 {
   cursor: not-allowed;
 }
-._1a8lqy93-3-7-1 ._1a8lqy9d-3-7-1 {
+._1a8lqy93-3-9-0 ._1a8lqy9d-3-9-0 {
   cursor: default;
 }
-button ._1a8lqy9d-3-7-1 {
+button ._1a8lqy9d-3-9-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9e-3-7-1 {
+._1a8lqy9e-3-9-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9e-3-7-1:is(button._1a8lqy9e-3-7-1._1a8lqy9e-3-7-1) {
+._1a8lqy9e-3-9-0:is(button._1a8lqy9e-3-9-0._1a8lqy9e-3-9-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9f-3-7-1 {
+._1a8lqy9f-3-9-0 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-7-1:not(._1a8lqy92-3-7-1) ._1a8lqy9f-3-7-1 {
+._1a8lqy91-3-9-0:not(._1a8lqy92-3-9-0) ._1a8lqy9f-3-9-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-7-1._1a8lqy93-3-7-1 button:not(:hover, :active) {
+._1a8lqy94-3-9-0._1a8lqy93-3-9-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy94-3-7-1._1a8lqy93-3-7-1._1a8lqy91-3-7-1 button:not(:hover, :active) {
+._1a8lqy94-3-9-0._1a8lqy93-3-9-0._1a8lqy91-3-9-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1._1a8lqy93-3-7-1 button:not(:hover, :active) {
+._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0._1a8lqy93-3-9-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-7-1 ._1a8lqy94-3-7-1._1a8lqy93-3-7-1 button {
-  --_bx32h4-3-7-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-9-0 ._1a8lqy94-3-9-0._1a8lqy93-3-9-0 button {
+  --_bx32h4-3-9-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button:hover {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button:active {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)._1a8lqy91-3-7-1:hover button {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)._1a8lqy91-3-9-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)._1a8lqy91-3-7-1:hover button:hover {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)._1a8lqy91-3-9-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)._1a8lqy91-3-7-1:hover button:active {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)._1a8lqy91-3-9-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy95-3-7-1._1a8lqy93-3-7-1 button:not(:hover, :active) {
+._1a8lqy95-3-9-0._1a8lqy93-3-9-0 button:not(:hover, :active) {
   background-color: transparent;
 }
-._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button:is(:disabled, [aria-disabled=true]) {
+._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button:is(:disabled, [aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button {
   background-color: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button:hover {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1):hover button:active {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1) button:hover {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0) button:hover {
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1) button:active {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0) button:active {
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)._1a8lqy91-3-7-1:hover button {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)._1a8lqy91-3-9-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)._1a8lqy91-3-7-1:hover button:hover {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)._1a8lqy91-3-9-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1, ._1a8lqy93-3-7-1)._1a8lqy91-3-7-1:hover button:active {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0, ._1a8lqy93-3-9-0)._1a8lqy91-3-9-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1)._1a8lqy91-3-7-1 button:hover {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0)._1a8lqy91-3-9-0 button:hover {
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
 }
-._1jgl8s50-3-7-1 ._1a8lqy95-3-7-1:not(._1a8lqy92-3-7-1)._1a8lqy91-3-7-1 button:active {
+._1jgl8s50-3-9-0 ._1a8lqy95-3-9-0:not(._1a8lqy92-3-9-0)._1a8lqy91-3-9-0 button:active {
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1a8lqy98-3-7-1:has(._1a8lqy9e-3-7-1:hover) {
+._1a8lqy98-3-9-0:has(._1a8lqy9e-3-9-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-:where(:root:not(._1jgl8s50-3-7-1)) ._1a8lqy91-3-7-1 ._1a8lqy98-3-7-1:has(._1a8lqy9e-3-7-1:hover):not(._1a8lqy92-3-7-1) {
+:where(:root:not(._1jgl8s50-3-9-0)) ._1a8lqy91-3-9-0 ._1a8lqy98-3-9-0:has(._1a8lqy9e-3-9-0:hover):not(._1a8lqy92-3-9-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy98-3-7-1:hover ._1a8lqy9f-3-7-1 {
+._1a8lqy98-3-9-0:hover ._1a8lqy9f-3-9-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-7-1 ._1a8lqy98-3-7-1:hover ._1a8lqy9f-3-7-1 {
+._1a8lqy91-3-9-0 ._1a8lqy98-3-9-0:hover ._1a8lqy9f-3-9-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy98-3-7-1._1a8lqy9g-3-7-1 div svg {
+._1a8lqy98-3-9-0._1a8lqy9g-3-9-0 div svg {
   fill: currentcolor;
 }

package/forms/_base-input/BaseInput.js

@@ -37,9 +37,10 @@ var import_react_intl = require("react-intl");
 var styles = __toESM(require("./BaseInput.sty.js"));
 var import_BaseInputButton = require("./BaseInputButton.js");
 var import_BaseInputContent = require("./BaseInputContent.js");
+var import_baseInputMessages = require("./baseInputMessages.js");
+var import_ClearButton = require("./ClearButton.js");
 var import_BaseInputContext = require("./contexts/BaseInputContext.js");
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
-var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useSplitProps = require("../../core/hooks/useSplitProps.js");
 var import_is_slot = require("../../core/utils/is-slot.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
@@ -48,14 +49,12 @@ var import_Flex = require("../../layouts/flex/Flex.js");
 var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
 var import_InputGroup = require("../../layouts/input-group/InputGroup.js");
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
-var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
+var import_useFormControl = require("../forms-core/hooks/useFormControl.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
-var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useAutofillEvent = require("../hooks/useAutofillEvent.js");
-var import_useInputHint = require("../hooks/useInputHint.js");
-var import_baseInputMessages = require("./baseInputMessages.js");
-var import_ClearButton = require("./ClearButton.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 function getSlots(children) {
   const validSlots = import_react.Children.toArray(children).filter(
     import_react.isValidElement
@@ -99,6 +98,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
     required: propRequired,
     "aria-disabled": ariaDisabledProp,
     variant = "default",
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     readOnly: propReadOnly,
     "data-testid": dataTestId,
@@ -112,6 +112,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
     style: consumerStyle,
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     onClear,
+    onValidityChange,
     type,
     placeholder = defaultPlaceholder,
     value,
@@ -124,26 +125,36 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
     ...remainingProps
   } = props;
   const inputValue = value ?? "";
-  const { disabled, required, id, ariaDisabled, readOnly } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
+  const {
+    id,
+    disabled,
+    required,
+    readOnly,
+    ariaDisabled,
+    inputProps,
+    hintProps,
+    hint,
+    showError,
+    messageDispatch
+  } = (0, import_useFormControl.useFormControl)({
+    propId,
     propDisabled,
     propRequired,
-    propId,
     propAriaDisabled: ariaDisabledProp,
-    propReadOnly
+    propReadOnly,
+    controlState
   });
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
-  const [hasFormControlError, hint] = (0, import_useFormControlState.useFormControlState)(controlState);
-  const { inputProps, hintProps } = (0, import_useInputHint.useInputHint)({
-    hint,
-    hasError: hasFormControlError
-  });
-  const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
-  const hasError = hasFormControlError || state.showError;
   const { isAutoFilled, onAnimationStart } = (0, import_useAutofillEvent.useAutofillEvent)();
   const inputRef = (0, import_react.useRef)(null);
   const wrapperRef = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+  );
   const { focusProps, focusClassName } = (0, import_useFocusRing.useFocusRing)({
-    color: hasError && !(disabled || ariaDisabled) ? "critical" : "neutral",
+    color: showError && !(disabled || ariaDisabled) ? "critical" : "neutral",
     ignoreModality: true,
     disabled
   });
@@ -165,7 +176,9 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
       "aria-labelledby": ariaLabelledByProp,
       "aria-describedby": ariaDescribedByProp,
       "aria-details": ariaDetailsProp
-    }
+    },
+    void 0,
+    _emitValidationState
   );
   const eventListener = { onChange, onBlur, onInvalid };
   (0, import_react.useImperativeHandle)(
@@ -178,17 +191,31 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
       },
       validate() {
         inputRef.current?.checkValidity();
-        dispatch?.({
+        messageDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        inputRef.current?.checkValidity();
+        messageDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+        );
       }
     }),
-    [dispatch]
+    [messageDispatch, emitValidationState, intl]
   );
   const context = (0, import_react.useMemo)(
-    () => ({ variant, hasError, disabled, ariaDisabled }),
-    [variant, hasError, disabled, ariaDisabled]
+    () => ({ variant, hasError: showError, disabled, ariaDisabled }),
+    [variant, showError, disabled, ariaDisabled]
   );
   const slots = (0, import_react.useMemo)(() => getSlots(children), [children]);
   const hasInnerPrefix = slots.prefix.rest.length > 0;
@@ -222,7 +249,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
               )}1fr${" auto".repeat(slots.suffix.buttons.length)}`
             },
             className: (0, import_clsx.default)(styles.wrapper, styles.variant[variant], {
-              [styles.hasError]: hasError,
+              [styles.hasError]: showError,
               [styles.disabled]: disabledOrAriaDisabled,
               [styles.readOnly]: readOnly
             }),
@@ -305,7 +332,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
         controlState && hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_FormFieldMessageBaseItem.InternalBaseItem,
           {
-            variant: hasError ? "error" : "hint",
+            variant: showError ? "error" : "hint",
             disabled: disabledOrAriaDisabled,
             ...hintProps,
             children: hint

package/forms/_base-input/BaseInput.sty.js

@@ -35,14 +35,14 @@ var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
-var container = "_1a8lqy98-3-7-1";
-var containerPadding = { none: "_1a8lqy99-3-7-1", rightNone: "_1a8lqy9a-3-7-1", rightUnset: "_1a8lqy9b-3-7-1", leftUnset: "_1a8lqy9c-3-7-1" };
-var disabled = "_1a8lqy92-3-7-1";
-var divider = "_1a8lqy9f-3-7-1";
-var hasError = "_1a8lqy91-3-7-1";
-var input = "_1a8lqy9d-3-7-1 _yfwka33-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1";
-var isAutoFilled = "_1a8lqy9g-3-7-1";
-var readOnly = "_1a8lqy93-3-7-1";
-var reservedSuffixButton = "_1a8lqy9e-3-7-1";
-var variant = { "default": "_1a8lqy94-3-7-1", minimal: "_1a8lqy95-3-7-1" };
-var wrapper = "_1a8lqy90-3-7-1";
+var container = "_1a8lqy98-3-9-0";
+var containerPadding = { none: "_1a8lqy99-3-9-0", rightNone: "_1a8lqy9a-3-9-0", rightUnset: "_1a8lqy9b-3-9-0", leftUnset: "_1a8lqy9c-3-9-0" };
+var disabled = "_1a8lqy92-3-9-0";
+var divider = "_1a8lqy9f-3-9-0";
+var hasError = "_1a8lqy91-3-9-0";
+var input = "_1a8lqy9d-3-9-0 _yfwka33-3-9-0 _da9a8v0-3-9-0 _da9a8v2-3-9-0 _da9a8v3-3-9-0 _da9a8vb-3-9-0";
+var isAutoFilled = "_1a8lqy9g-3-9-0";
+var readOnly = "_1a8lqy93-3-9-0";
+var reservedSuffixButton = "_1a8lqy9e-3-9-0";
+var variant = { "default": "_1a8lqy94-3-9-0", minimal: "_1a8lqy95-3-9-0" };
+var wrapper = "_1a8lqy90-3-9-0";

package/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-7-1 {
+._o6rxr70-3-9-0 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-7-1 ._o6rxr70-3-7-1 {
+._1a8lqy91-3-9-0 ._o6rxr70-3-9-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-7-1 ._o6rxr70-3-7-1 {
+._1a8lqy92-3-9-0 ._o6rxr70-3-9-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-7-1:has(svg):not(:has(span)) {
+._o6rxr70-3-9-0:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-7-1 > * {
+._o6rxr70-3-9-0 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-7-1 svg {
+._o6rxr70-3-9-0 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-7-1 svg:first-of-type {
+._o6rxr70-3-9-0 svg:first-of-type {
   align-self: center;
 }

package/forms/_base-input/BaseInputContent.sty.js

@@ -26,4 +26,4 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("./BaseInputContent.css");
-var content = "_o6rxr70-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1";
+var content = "_o6rxr70-3-9-0 _da9a8v0-3-9-0 _da9a8v2-3-9-0 _da9a8v3-3-9-0 _da9a8vb-3-9-0";

package/forms/_base-input/base-input.types.d.ts

@@ -4,6 +4,7 @@ import type { FormControlStateProps } from '../../core/types/form-control-state.
 import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 import type { WithChildren } from '../../core/types/with-children.js';
+import type { ValidationState } from '../validation/types.js';
 /**
  * Props used by all input components.
  * @public
@@ -19,4 +20,9 @@ export interface BaseInputProps extends ComponentPropsWithoutRef<'input'>, FormC
      * @deprecated Use `BaseInput.ReservedSuffix` to render a clear button instead.
      */
     onClear?: () => void;
+    /**
+     * Called when validation state changes. Fires automatically on blur or change,
+     * and when triggered manually via `validate()` or `validateAsync()`.
+     */
+    onValidityChange?: (state: ValidationState) => void;
 }