@dynatrace/strato-components 3.10.1 → 3.11.0

package/esm/forms/_base-input/BaseInput.css

@@ -1,27 +1,6 @@
-._1a8lqy90-3-10-1 {
-  --_bx32h5-3-10-1: 1;
-}
-._1a8lqy91-3-10-1 {
-  --_bx32h5-3-10-1: 3;
-}
-._1a8lqy91-3-10-1:hover {
-  --_bx32h5-3-10-1: 4;
-}
-._1a8lqy91-3-10-1:active {
-  --_bx32h5-3-10-1: 4;
-}
-._1a8lqy92-3-10-1 {
-  --_bx32h5-3-10-1: 0;
-}
-._1a8lqy92-3-10-1:hover {
-  --_bx32h5-3-10-1: 0;
-}
-._1a8lqy92-3-10-1:active {
-  --_bx32h5-3-10-1: 0;
-}
-._1a8lqy98-3-10-1 {
-  --_1a8lqy96-3-10-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-10-1: var(--_1a8lqy96-3-10-1);
+._1a8lqy98-3-11-0 {
+  --_1a8lqy96-3-11-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-11-0: var(--_1a8lqy96-3-11-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -32,91 +11,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-10-1);
-  box-shadow: var(--_1a8lqy97-3-10-1);
+  background-color: var(--_1a8lqy96-3-11-0);
+  box-shadow: var(--_1a8lqy97-3-11-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-10-1:hover {
-  --_1a8lqy96-3-10-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy98-3-11-0:hover {
+  --_1a8lqy96-3-11-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy98-3-10-1:active {
-  --_1a8lqy96-3-10-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy98-3-11-0:active {
+  --_1a8lqy96-3-11-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-10-1 ._1a8lqy98-3-10-1 {
+._1a8lqy91-3-11-0 ._1a8lqy98-3-11-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-10-1:not(._1a8lqy92-3-10-1) ._1a8lqy98-3-10-1:hover {
+._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) ._1a8lqy98-3-11-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-10-1:not(._1a8lqy92-3-10-1) ._1a8lqy98-3-10-1:active {
+._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) ._1a8lqy98-3-11-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy93-3-10-1 ._1a8lqy98-3-10-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy93-3-11-0 ._1a8lqy98-3-11-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-:where(:root:not(._1jgl8s50-3-10-1)) ._1a8lqy93-3-10-1._1a8lqy91-3-10-1 ._1a8lqy98-3-10-1:is(:not(:hover, :active), :hover, :active) {
+:where(:root:not(._1jgl8s50-3-11-0)) ._1a8lqy93-3-11-0._1a8lqy91-3-11-0 ._1a8lqy98-3-11-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy92-3-10-1 ._1a8lqy98-3-10-1 {
+._1a8lqy92-3-11-0 ._1a8lqy98-3-11-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy95-3-10-1:not(:hover) ._1a8lqy98-3-10-1 {
+._1a8lqy95-3-11-0:not(:hover) ._1a8lqy98-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy95-3-10-1:is(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy95-3-11-0:is(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1jgl8s50-3-10-1 ._1a8lqy94-3-10-1 ._1a8lqy98-3-10-1,
-    ._1jgl8s50-3-10-1 ._1a8lqy94-3-10-1 ._1a8lqy98-3-10-1:is(:hover, :active),
-    ._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1:is(:hover, :active),
-    ._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):is(:hover, :active) ._1a8lqy98-3-10-1 {
+._1jgl8s50-3-11-0 ._1a8lqy94-3-11-0 ._1a8lqy98-3-11-0,
+    ._1jgl8s50-3-11-0 ._1a8lqy94-3-11-0 ._1a8lqy98-3-11-0:is(:hover, :active),
+    ._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0:is(:hover, :active),
+    ._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):is(:hover, :active) ._1a8lqy98-3-11-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-10-1 ._1a8lqy94-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1,
-    ._1jgl8s50-3-10-1 :where(._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)):hover ._1a8lqy98-3-10-1 {
-  --_1a8lqy97-3-10-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-11-0 ._1a8lqy94-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0,
+    ._1jgl8s50-3-11-0 :where(._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)):hover ._1a8lqy98-3-11-0 {
+  --_1a8lqy97-3-11-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-10-1 :is(._1a8lqy94-3-10-1, ._1a8lqy95-3-10-1):not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1:hover {
-  --_1a8lqy97-3-10-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-11-0 :is(._1a8lqy94-3-11-0, ._1a8lqy95-3-11-0):not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0:hover {
+  --_1a8lqy97-3-11-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-10-1 :is(._1a8lqy94-3-10-1, ._1a8lqy95-3-10-1):not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1:active {
-  --_1a8lqy97-3-10-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-11-0 :is(._1a8lqy94-3-11-0, ._1a8lqy95-3-11-0):not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0:active {
+  --_1a8lqy97-3-11-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-10-1 :where(._1a8lqy94-3-10-1)._1a8lqy91-3-10-1:not(._1a8lqy92-3-10-1) ._1a8lqy98-3-10-1,
-      ._1jgl8s50-3-10-1 :where(._1a8lqy95-3-10-1)._1a8lqy91-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover ._1a8lqy98-3-10-1 {
-  --_1a8lqy97-3-10-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-11-0 :where(._1a8lqy94-3-11-0)._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) ._1a8lqy98-3-11-0,
+      ._1jgl8s50-3-11-0 :where(._1a8lqy95-3-11-0)._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):hover ._1a8lqy98-3-11-0 {
+  --_1a8lqy97-3-11-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-10-1 ._1a8lqy91-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1:hover {
-  --_1a8lqy97-3-10-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-11-0 ._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0:hover {
+  --_1a8lqy97-3-11-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-10-1 ._1a8lqy91-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1:active {
-  --_1a8lqy97-3-10-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-11-0 ._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0:active {
+  --_1a8lqy97-3-11-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-10-1 ._1a8lqy94-3-10-1:is(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1 {
-  --_1a8lqy97-3-10-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-11-0 ._1a8lqy94-3-11-0:is(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0 {
+  --_1a8lqy97-3-11-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-10-1 ._1a8lqy94-3-10-1._1a8lqy91-3-10-1:is(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1) ._1a8lqy98-3-10-1 {
-  --_1a8lqy97-3-10-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-11-0 ._1a8lqy94-3-11-0._1a8lqy91-3-11-0:is(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0) ._1a8lqy98-3-11-0 {
+  --_1a8lqy97-3-11-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-10-1 {
+._1a8lqy99-3-11-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy9a-3-10-1 {
+._1a8lqy9a-3-11-0 {
   padding-right: 0;
 }
-._1a8lqy9b-3-10-1 {
+._1a8lqy9b-3-11-0 {
   padding-right: unset;
 }
-._1a8lqy9c-3-10-1 {
+._1a8lqy9c-3-11-0 {
   padding-left: unset;
 }
-._1a8lqy9d-3-10-1 {
+._1a8lqy9d-3-11-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -130,134 +109,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9d-3-10-1:focus {
+._1a8lqy9d-3-11-0:focus {
   outline: none;
 }
-._1a8lqy9d-3-10-1::placeholder {
+._1a8lqy9d-3-11-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9d-3-10-1::-webkit-search-cancel-button {
+._1a8lqy9d-3-11-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9d-3-10-1::-ms-reveal {
+._1a8lqy9d-3-11-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-10-1 ._1a8lqy9d-3-10-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-10-1 ._1a8lqy9d-3-10-1::placeholder {
+._1a8lqy91-3-11-0 ._1a8lqy9d-3-11-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-11-0 ._1a8lqy9d-3-11-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-10-1 ._1a8lqy9d-3-10-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-10-1 ._1a8lqy9d-3-10-1::placeholder {
+._1a8lqy92-3-11-0 ._1a8lqy9d-3-11-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-11-0 ._1a8lqy9d-3-11-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-10-1 ._1a8lqy9d-3-10-1 {
+._1a8lqy92-3-11-0 ._1a8lqy9d-3-11-0 {
   cursor: not-allowed;
 }
-._1a8lqy93-3-10-1 ._1a8lqy9d-3-10-1 {
+._1a8lqy93-3-11-0 ._1a8lqy9d-3-11-0 {
   cursor: default;
 }
-button ._1a8lqy9d-3-10-1 {
+button ._1a8lqy9d-3-11-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9e-3-10-1 {
+._1a8lqy9e-3-11-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-10-1:is(button._1a8lqy9e-3-10-1._1a8lqy9e-3-10-1) {
+._1a8lqy9e-3-11-0:is(button._1a8lqy9e-3-11-0._1a8lqy9e-3-11-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9f-3-10-1 {
+._1a8lqy9f-3-11-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-10-1:not(._1a8lqy92-3-10-1) ._1a8lqy9f-3-10-1 {
+._1a8lqy91-3-11-0:not(._1a8lqy92-3-11-0) ._1a8lqy9f-3-11-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-10-1._1a8lqy93-3-10-1 button:not(:hover, :active) {
+._1a8lqy94-3-11-0._1a8lqy93-3-11-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy94-3-10-1._1a8lqy93-3-10-1._1a8lqy91-3-10-1 button:not(:hover, :active) {
+._1a8lqy94-3-11-0._1a8lqy93-3-11-0._1a8lqy91-3-11-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-10-1 ._1a8lqy94-3-10-1._1a8lqy93-3-10-1 button:not(:hover, :active) {
+._1jgl8s50-3-11-0 ._1a8lqy94-3-11-0._1a8lqy93-3-11-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-10-1 ._1a8lqy94-3-10-1._1a8lqy93-3-10-1 button {
-  --_bx32h4-3-10-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-11-0 ._1a8lqy94-3-11-0._1a8lqy93-3-11-0 button {
+  --_bx32h4-3-11-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-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-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-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button:hover {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button:active {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)._1a8lqy91-3-10-1:hover button {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)._1a8lqy91-3-11-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)._1a8lqy91-3-10-1:hover button:hover {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)._1a8lqy91-3-11-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)._1a8lqy91-3-10-1:hover button:active {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)._1a8lqy91-3-11-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy95-3-10-1._1a8lqy93-3-10-1 button:not(:hover, :active) {
+._1a8lqy95-3-11-0._1a8lqy93-3-11-0 button:not(:hover, :active) {
   background-color: transparent;
 }
-._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button:is(:disabled, [aria-disabled=true]) {
+._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):hover button:is(:disabled, [aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-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-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button:hover {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1):hover button:active {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1) button:hover {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-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-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1) button:active {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-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-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)._1a8lqy91-3-10-1:hover button {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)._1a8lqy91-3-11-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-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)._1a8lqy91-3-10-1:hover button:hover {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)._1a8lqy91-3-11-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1, ._1a8lqy93-3-10-1)._1a8lqy91-3-10-1:hover button:active {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0, ._1a8lqy93-3-11-0)._1a8lqy91-3-11-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._1jgl8s50-3-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1)._1a8lqy91-3-10-1 button:hover {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0)._1a8lqy91-3-11-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-10-1 ._1a8lqy95-3-10-1:not(._1a8lqy92-3-10-1)._1a8lqy91-3-10-1 button:active {
+._1jgl8s50-3-11-0 ._1a8lqy95-3-11-0:not(._1a8lqy92-3-11-0)._1a8lqy91-3-11-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-10-1:has(._1a8lqy9e-3-10-1:hover) {
+._1a8lqy98-3-11-0:has(._1a8lqy9e-3-11-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-:where(:root:not(._1jgl8s50-3-10-1)) ._1a8lqy91-3-10-1 ._1a8lqy98-3-10-1:has(._1a8lqy9e-3-10-1:hover):not(._1a8lqy92-3-10-1) {
+:where(:root:not(._1jgl8s50-3-11-0)) ._1a8lqy91-3-11-0 ._1a8lqy98-3-11-0:has(._1a8lqy9e-3-11-0:hover):not(._1a8lqy92-3-11-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy98-3-10-1:hover ._1a8lqy9f-3-10-1 {
+._1a8lqy98-3-11-0:hover ._1a8lqy9f-3-11-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-10-1 ._1a8lqy98-3-10-1:hover ._1a8lqy9f-3-10-1 {
+._1a8lqy91-3-11-0 ._1a8lqy98-3-11-0:hover ._1a8lqy9f-3-11-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy98-3-10-1._1a8lqy9g-3-10-1 div svg {
+._1a8lqy98-3-11-0._1a8lqy9g-3-11-0 div svg {
   fill: currentcolor;
 }

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

@@ -3,17 +3,17 @@ import "../../styles/field.css";
 import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
-var container = "_1a8lqy98-3-10-1";
-var containerPadding = { none: "_1a8lqy99-3-10-1", rightNone: "_1a8lqy9a-3-10-1", rightUnset: "_1a8lqy9b-3-10-1", leftUnset: "_1a8lqy9c-3-10-1" };
-var disabled = "_1a8lqy92-3-10-1";
-var divider = "_1a8lqy9f-3-10-1";
-var hasError = "_1a8lqy91-3-10-1";
-var input = "_1a8lqy9d-3-10-1 _yfwka33-3-10-1 _da9a8v0-3-10-1 _da9a8v2-3-10-1 _da9a8v3-3-10-1 _da9a8vb-3-10-1";
-var isAutoFilled = "_1a8lqy9g-3-10-1";
-var readOnly = "_1a8lqy93-3-10-1";
-var reservedSuffixButton = "_1a8lqy9e-3-10-1";
-var variant = { "default": "_1a8lqy94-3-10-1", minimal: "_1a8lqy95-3-10-1" };
-var wrapper = "_1a8lqy90-3-10-1";
+var container = "_1a8lqy98-3-11-0";
+var containerPadding = { none: "_1a8lqy99-3-11-0", rightNone: "_1a8lqy9a-3-11-0", rightUnset: "_1a8lqy9b-3-11-0", leftUnset: "_1a8lqy9c-3-11-0" };
+var disabled = "_1a8lqy92-3-11-0";
+var divider = "_1a8lqy9f-3-11-0";
+var hasError = "_1a8lqy91-3-11-0";
+var input = "_1a8lqy9d-3-11-0 _yfwka33-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0";
+var isAutoFilled = "_1a8lqy9g-3-11-0";
+var readOnly = "_1a8lqy93-3-11-0";
+var reservedSuffixButton = "_1a8lqy9e-3-11-0";
+var variant = { "default": "_1a8lqy94-3-11-0", minimal: "_1a8lqy95-3-11-0" };
+var wrapper = "_1a8lqy90-3-11-0";
 export {
   container,
   containerPadding,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-10-1';\nexport var containerPadding = {none:'_1a8lqy99-3-10-1',rightNone:'_1a8lqy9a-3-10-1',rightUnset:'_1a8lqy9b-3-10-1',leftUnset:'_1a8lqy9c-3-10-1'};\nexport var disabled = '_1a8lqy92-3-10-1';\nexport var divider = '_1a8lqy9f-3-10-1';\nexport var hasError = '_1a8lqy91-3-10-1';\nexport var input = '_1a8lqy9d-3-10-1 _yfwka33-3-10-1 _da9a8v0-3-10-1 _da9a8v2-3-10-1 _da9a8v3-3-10-1 _da9a8vb-3-10-1';\nexport var isAutoFilled = '_1a8lqy9g-3-10-1';\nexport var readOnly = '_1a8lqy93-3-10-1';\nexport var reservedSuffixButton = '_1a8lqy9e-3-10-1';\nexport var variant = {'default':'_1a8lqy94-3-10-1',minimal:'_1a8lqy95-3-10-1'};\nexport var wrapper = '_1a8lqy90-3-10-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-11-0';\nexport var containerPadding = {none:'_1a8lqy99-3-11-0',rightNone:'_1a8lqy9a-3-11-0',rightUnset:'_1a8lqy9b-3-11-0',leftUnset:'_1a8lqy9c-3-11-0'};\nexport var disabled = '_1a8lqy92-3-11-0';\nexport var divider = '_1a8lqy9f-3-11-0';\nexport var hasError = '_1a8lqy91-3-11-0';\nexport var input = '_1a8lqy9d-3-11-0 _yfwka33-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0';\nexport var isAutoFilled = '_1a8lqy9g-3-11-0';\nexport var readOnly = '_1a8lqy93-3-11-0';\nexport var reservedSuffixButton = '_1a8lqy9e-3-11-0';\nexport var variant = {'default':'_1a8lqy94-3-11-0',minimal:'_1a8lqy95-3-11-0'};\nexport var wrapper = '_1a8lqy90-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,mBAAmB,EAAC,MAAK,oBAAmB,WAAU,oBAAmB,YAAW,oBAAmB,WAAU,mBAAkB;AACvI,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,uBAAuB;AAC3B,IAAI,UAAU,EAAC,WAAU,oBAAmB,SAAQ,mBAAkB;AACtE,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/_base-input/BaseInputButton.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
-  useMemo
+  useMemo,
+  useState
 } from "react";
 import { useBaseInputContext } from "./hooks/useBaseInputContext.js";
 import { Button } from "../../buttons/button/Button.js";
@@ -34,15 +35,19 @@ const BaseInputButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const ariaDisabled = ariaDisabledProp || contextAriaDisabled;
   const tooltipGeneratedId = useId();
   const tooltipId = tooltipText ? id ?? tooltipGeneratedId : void 0;
-  const { "aria-labelledby": ariaLabelledByProp, ...remainingAriaProps } = _useAriaLabelingProps(restPropsWithoutTracking);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const {
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-label": ariaLabelProp,
+    ...remainingAriaProps
+  } = _useAriaLabelingProps(restPropsWithoutTracking);
   const forwardProps = _useSafeForwardProps(restPropsWithoutTracking, {
-    ariaLabelledByProp,
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-label": ariaLabelProp,
     ...remainingAriaProps
   });
-  const ariaLabelledBy = useMemo(
-    () => tooltipId || ariaLabelledByProp ? `${tooltipId ? tooltipId + " " : ""}${ariaLabelledByProp ?? ""}` : void 0,
-    [ariaLabelledByProp, tooltipId]
-  );
+  const ariaLabel = ariaLabelProp ?? (tooltipText && !ariaLabelledByProp ? tooltipText : void 0);
+  const ariaLabelledBy = ariaLabelledByProp ?? (!ariaLabelProp && isTooltipOpen ? tooltipId : void 0);
   const button = useMemo(
     () => /* @__PURE__ */ jsx(
       Button,
@@ -53,6 +58,7 @@ const BaseInputButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         disabled: propDisabled ?? disabled,
         "aria-disabled": ariaDisabled,
         color: hasError && !disabled ? "critical" : "neutral",
+        "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         className: consumerClassName,
         style: consumerStyle,
@@ -62,7 +68,9 @@ const BaseInputButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       }
     ),
     [
+      ariaLabel,
       ariaLabelledBy,
+      ariaLabelProp,
       behavioralTrackingProps,
       children,
       consumerClassName,
@@ -85,6 +93,7 @@ const BaseInputButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       text: tooltipText,
       placement: "top-end",
       ...tooltipTrackingProps,
+      onOpenChange: setIsTooltipOpen,
       children: button
     }
   ) : button;

package/esm/forms/_base-input/BaseInputButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputButton.tsx"],
-  "sourcesContent": ["import {\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n} from 'react';\n\nimport { useBaseInputContext } from './hooks/useBaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n//#region Typings\n/**\n * Accepted properties for the BaseInput Button\n * @public\n */\nexport interface BaseInputButtonProps\n  extends AriaLabelingProps,\n    AriaDisabledProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /** Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element */\n  children: ReactNode;\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * By default, it inherits the disabled prop of the BaseInput, but can be overwritten.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If specified, a tooltip is rendered with this text, which describes what the button does.\n   * Please also consider translating the text in an internationalized context and use a short text description for the tooltip.\n   * The positioning and placing of the according tooltip will be handled by the component.\n   */\n  tooltipText?: string;\n  /**\n   * Behavioral tracking props to forward exclusively to the tooltip overlay.\n   * These will not be applied to the button itself.\n   */\n  tooltipBehavioralTrackingProps?: BehaviorTrackingProps;\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n  /**\n   * Determines whether the input is in read-only mode.\n   * @deprecated - readOnly is not a valid property on a button. Please use disabled if needed.\n   */\n  readOnly?: boolean;\n}\n\n//#endregion\n\n/**\n * Component which allows users to trigger actions or events when clicking or when pressing `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const BaseInputButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  BaseInputButtonProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    tooltipText,\n    tooltipBehavioralTrackingProps: tooltipTrackingProps,\n    disabled: propDisabled,\n    id,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: BaseInputButtonProps = props;\n\n  const [behavioralTrackingProps, restPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    hasError = false,\n    disabled,\n    variant,\n    ariaDisabled: contextAriaDisabled,\n  } = useBaseInputContext();\n  const ariaDisabled = ariaDisabledProp || contextAriaDisabled;\n\n  const tooltipGeneratedId = useId();\n  const tooltipId = tooltipText ? id ?? tooltipGeneratedId : undefined;\n\n  const { 'aria-labelledby': ariaLabelledByProp, ...remainingAriaProps } =\n    _useAriaLabelingProps(restPropsWithoutTracking);\n\n  const forwardProps = _useSafeForwardProps(restPropsWithoutTracking, {\n    ariaLabelledByProp,\n    ...remainingAriaProps,\n  });\n\n  const ariaLabelledBy = useMemo(\n    () =>\n      tooltipId || ariaLabelledByProp\n        ? `${tooltipId ? tooltipId + ' ' : ''}${ariaLabelledByProp ?? ''}`\n        : undefined,\n    [ariaLabelledByProp, tooltipId],\n  );\n\n  const button = useMemo(\n    () => (\n      <Button\n        ref={forwardedRef}\n        {...forwardProps}\n        variant={variant === 'minimal' ? 'default' : 'emphasized'}\n        disabled={propDisabled ?? disabled}\n        aria-disabled={ariaDisabled}\n        color={hasError && !disabled ? 'critical' : 'neutral'}\n        aria-labelledby={ariaLabelledBy}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...mergeProps(remainingAriaProps, behavioralTrackingProps)}\n      >\n        <Button.Prefix>{children}</Button.Prefix>\n      </Button>\n    ),\n    [\n      ariaLabelledBy,\n      behavioralTrackingProps,\n      children,\n      consumerClassName,\n      consumerStyle,\n      dataTestId,\n      disabled,\n      forwardProps,\n      forwardedRef,\n      hasError,\n      propDisabled,\n      remainingAriaProps,\n      variant,\n      ariaDisabled,\n    ],\n  );\n\n  return tooltipText ? (\n    <Tooltip\n      id={tooltipId}\n      text={tooltipText}\n      placement=\"top-end\"\n      {...tooltipTrackingProps}\n    >\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n\n(\n  BaseInputButton as typeof BaseInputButton & { displayName: string }\n).displayName = 'BaseInput.Button';\n"],
-  "mappings": "AAoIQ;AApIR;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,uBAAuB,4BAA4B;AAS5D,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAgDjB,MAAM,kBAAkC,2BAG7C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAA0B;AAE1B,QAAM,CAAC,yBAAyB,wBAAwB,IACtD,2BAA2B,cAAc;AAE3C,QAAM;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI,oBAAoB;AACxB,QAAM,eAAe,oBAAoB;AAEzC,QAAM,qBAAqB,MAAM;AACjC,QAAM,YAAY,cAAc,MAAM,qBAAqB;AAE3D,QAAM,EAAE,mBAAmB,oBAAoB,GAAG,mBAAmB,IACnE,sBAAsB,wBAAwB;AAEhD,QAAM,eAAe,qBAAqB,0BAA0B;AAAA,IAClE;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa,qBACT,GAAG,YAAY,YAAY,MAAM,EAAE,GAAG,sBAAsB,EAAE,KAC9D;AAAA,IACN,CAAC,oBAAoB,SAAS;AAAA,EAChC;AAEA,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,SAAS,YAAY,YAAY,YAAY;AAAA,QAC7C,UAAU,gBAAgB;AAAA,QAC1B,iBAAe;AAAA,QACf,OAAO,YAAY,CAAC,WAAW,aAAa;AAAA,QAC5C,mBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACZ,GAAG,WAAW,oBAAoB,uBAAuB;AAAA,QAE1D,8BAAC,OAAO,QAAP,EAAe,UAAS;AAAA;AAAA,IAC3B;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,IAEA;AAEJ,CAAC;AAGC,gBACA,cAAc;",
+  "sourcesContent": ["import {\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useBaseInputContext } from './hooks/useBaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n//#region Typings\n/**\n * Accepted properties for the BaseInput Button\n * @public\n */\nexport interface BaseInputButtonProps\n  extends AriaLabelingProps,\n    AriaDisabledProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /** Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element */\n  children: ReactNode;\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * By default, it inherits the disabled prop of the BaseInput, but can be overwritten.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If specified, a tooltip is rendered with this text, which describes what the button does.\n   * The text is also used as `aria-label` while the tooltip is closed, ensuring a valid accessible name at all times.\n   * Please also consider translating the text in an internationalized context and use a short text description for the tooltip.\n   * The positioning and placing of the according tooltip will be handled by the component.\n   */\n  tooltipText?: string;\n  /**\n   * Behavioral tracking props to forward exclusively to the tooltip overlay.\n   * These will not be applied to the button itself.\n   */\n  tooltipBehavioralTrackingProps?: BehaviorTrackingProps;\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n  /**\n   * Determines whether the input is in read-only mode.\n   * @deprecated - readOnly is not a valid property on a button. Please use disabled if needed.\n   */\n  readOnly?: boolean;\n}\n\n//#endregion\n\n/**\n * Component which allows users to trigger actions or events when clicking or when pressing `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const BaseInputButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  BaseInputButtonProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    tooltipText,\n    tooltipBehavioralTrackingProps: tooltipTrackingProps,\n    disabled: propDisabled,\n    id,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: BaseInputButtonProps = props;\n\n  const [behavioralTrackingProps, restPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    hasError = false,\n    disabled,\n    variant,\n    ariaDisabled: contextAriaDisabled,\n  } = useBaseInputContext();\n  const ariaDisabled = ariaDisabledProp || contextAriaDisabled;\n\n  const tooltipGeneratedId = useId();\n  const tooltipId = tooltipText ? id ?? tooltipGeneratedId : undefined;\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const {\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-label': ariaLabelProp,\n    ...remainingAriaProps\n  } = _useAriaLabelingProps(restPropsWithoutTracking);\n\n  const forwardProps = _useSafeForwardProps(restPropsWithoutTracking, {\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-label': ariaLabelProp,\n    ...remainingAriaProps,\n  });\n\n  // When tooltipText is the sole label source, aria-label provides the always-valid name.\n  // aria-labelledby points to the tooltip element only while it is open (mounted in the DOM);\n  // a dangling reference suppresses aria-label in some browsers.\n  const ariaLabel =\n    ariaLabelProp ??\n    (tooltipText && !ariaLabelledByProp ? tooltipText : undefined);\n  const ariaLabelledBy =\n    ariaLabelledByProp ??\n    (!ariaLabelProp && isTooltipOpen ? tooltipId : undefined);\n\n  const button = useMemo(\n    () => (\n      <Button\n        ref={forwardedRef}\n        {...forwardProps}\n        variant={variant === 'minimal' ? 'default' : 'emphasized'}\n        disabled={propDisabled ?? disabled}\n        aria-disabled={ariaDisabled}\n        color={hasError && !disabled ? 'critical' : 'neutral'}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...mergeProps(remainingAriaProps, behavioralTrackingProps)}\n      >\n        <Button.Prefix>{children}</Button.Prefix>\n      </Button>\n    ),\n    [\n      ariaLabel,\n      ariaLabelledBy,\n      ariaLabelProp,\n      behavioralTrackingProps,\n      children,\n      consumerClassName,\n      consumerStyle,\n      dataTestId,\n      disabled,\n      forwardProps,\n      forwardedRef,\n      hasError,\n      propDisabled,\n      remainingAriaProps,\n      variant,\n      ariaDisabled,\n    ],\n  );\n\n  return tooltipText ? (\n    <Tooltip\n      id={tooltipId}\n      text={tooltipText}\n      placement=\"top-end\"\n      {...tooltipTrackingProps}\n      onOpenChange={setIsTooltipOpen}\n    >\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n\n(\n  BaseInputButton as typeof BaseInputButton & { displayName: string }\n).displayName = 'BaseInput.Button';\n"],
+  "mappings": "AA8IQ;AA9IR;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,uBAAuB,4BAA4B;AAS5D,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAiDjB,MAAM,kBAAkC,2BAG7C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAA0B;AAE1B,QAAM,CAAC,yBAAyB,wBAAwB,IACtD,2BAA2B,cAAc;AAE3C,QAAM;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI,oBAAoB;AACxB,QAAM,eAAe,oBAAoB;AAEzC,QAAM,qBAAqB,MAAM;AACjC,QAAM,YAAY,cAAc,MAAM,qBAAqB;AAC3D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI,sBAAsB,wBAAwB;AAElD,QAAM,eAAe,qBAAqB,0BAA0B;AAAA,IAClE,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,GAAG;AAAA,EACL,CAAC;AAKD,QAAM,YACJ,kBACC,eAAe,CAAC,qBAAqB,cAAc;AACtD,QAAM,iBACJ,uBACC,CAAC,iBAAiB,gBAAgB,YAAY;AAEjD,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,SAAS,YAAY,YAAY,YAAY;AAAA,QAC7C,UAAU,gBAAgB;AAAA,QAC1B,iBAAe;AAAA,QACf,OAAO,YAAY,CAAC,WAAW,aAAa;AAAA,QAC5C,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACZ,GAAG,WAAW,oBAAoB,uBAAuB;AAAA,QAE1D,8BAAC,OAAO,QAAP,EAAe,UAAS;AAAA;AAAA,IAC3B;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,cAAc;AAAA,MAEb;AAAA;AAAA,EACH,IAEA;AAEJ,CAAC;AAGC,gBACA,cAAc;",
   "names": []
 }

package/esm/forms/_base-input/BaseInputContent.css

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

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

@@ -4,7 +4,7 @@ import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
 import "./BaseInputContent.css";
-var content = "_o6rxr70-3-10-1 _da9a8v0-3-10-1 _da9a8v2-3-10-1 _da9a8v3-3-10-1 _da9a8vb-3-10-1";
+var content = "_o6rxr70-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0";
 export {
   content
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputContent.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-10-1 _da9a8v0-3-10-1 _da9a8v2-3-10-1 _da9a8v3-3-10-1 _da9a8vb-3-10-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/_base-input/ClearButton.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
+import { useIntl } from "react-intl";
 import { XmarkIcon } from "@dynatrace/strato-icons";
 import * as baseInputStyles from "./BaseInput.sty.js";
 import { BaseInputContext } from "./contexts/BaseInputContext.js";
 import { Button } from "../../buttons/button/Button.js";
 const ClearButton = ({ onClear }) => {
+  const intl = useIntl();
   const { hasError, disabled, ariaDisabled } = useContext(BaseInputContext);
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   return /* @__PURE__ */ jsx(
@@ -14,6 +16,11 @@ const ClearButton = ({ onClear }) => {
       className: baseInputStyles.reservedSuffixButton,
       color: hasError ? "critical" : "neutral",
       disabled: disabledOrAriaDisabled,
+      "aria-label": intl.formatMessage({
+        id: "MY7AZtZAiZ2+M5X3",
+        defaultMessage: "Clear text",
+        description: "Label for the clear button of an input field."
+      }),
       "data-dt-children-name": "ClearAll",
       children: /* @__PURE__ */ jsx(XmarkIcon, {})
     }

package/esm/forms/_base-input/ClearButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/ClearButton.tsx"],
-  "sourcesContent": ["import { useContext } from 'react';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport * as baseInputStyles from './BaseInput.sty.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\n\nexport const ClearButton = ({ onClear }: { onClear: VoidFunction }) => {\n  const { hasError, disabled, ariaDisabled } = useContext(BaseInputContext);\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  return (\n    <Button\n      onClick={onClear}\n      className={baseInputStyles.reservedSuffixButton}\n      color={hasError ? 'critical' : 'neutral'}\n      disabled={disabledOrAriaDisabled}\n      data-dt-children-name=\"ClearAll\"\n    >\n      <XmarkIcon />\n    </Button>\n  );\n};\n"],
-  "mappings": "AAoBM;AApBN,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAE1B,YAAY,qBAAqB;AACjC,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEhB,MAAM,cAAc,CAAC,EAAE,QAAQ,MAAiC;AACrE,QAAM,EAAE,UAAU,UAAU,aAAa,IAAI,WAAW,gBAAgB;AACxE,QAAM,yBAAyB,YAAY,gBAAgB;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,gBAAgB;AAAA,MAC3B,OAAO,WAAW,aAAa;AAAA,MAC/B,UAAU;AAAA,MACV,yBAAsB;AAAA,MAEtB,8BAAC,aAAU;AAAA;AAAA,EACb;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport * as baseInputStyles from './BaseInput.sty.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\n\n/**\n * Renders the built-in clear button for inputs.\n * It inherits its error and disabled state from the surrounding `BaseInputContext`.\n */\nexport const ClearButton = ({ onClear }: { onClear: VoidFunction }) => {\n  const intl = useIntl();\n  const { hasError, disabled, ariaDisabled } = useContext(BaseInputContext);\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  return (\n    <Button\n      onClick={onClear}\n      className={baseInputStyles.reservedSuffixButton}\n      color={hasError ? 'critical' : 'neutral'}\n      disabled={disabledOrAriaDisabled}\n      aria-label={intl.formatMessage({\n        id: 'MY7AZtZAiZ2+M5X3',\n        defaultMessage: 'Clear text',\n        description: 'Label for the clear button of an input field.',\n      })}\n      data-dt-children-name=\"ClearAll\"\n    >\n      <XmarkIcon />\n    </Button>\n  );\n};\n"],
+  "mappings": "AA+BM;AA/BN,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,YAAY,qBAAqB;AACjC,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAMhB,MAAM,cAAc,CAAC,EAAE,QAAQ,MAAiC;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,UAAU,UAAU,aAAa,IAAI,WAAW,gBAAgB;AACxE,QAAM,yBAAyB,YAAY,gBAAgB;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,gBAAgB;AAAA,MAC3B,OAAO,WAAW,aAAa;AAAA,MAC/B,UAAU;AAAA,MACV,cAAY,KAAK,cAAc;AAAA,QAC7B,IAAI;AAAA,QACJ,gBAAgB;AAAA,QAChB,aAAa;AAAA,MACf,CAAC;AAAA,MACD,yBAAsB;AAAA,MAEtB,8BAAC,aAAU;AAAA;AAAA,EACb;AAEJ;",
   "names": []
 }