@dynatrace/strato-components 3.11.2 → 3.12.0

package/esm/filters/filter-field/FilterField.css

@@ -1,94 +1,94 @@
-._96tj13b-3-11-2 {
+._96tj13b-3-12-0 {
   max-height: 80px;
 }
-._96tj13c-3-11-2 {
-  --_96tj130-3-11-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_96tj131-3-11-2: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj132-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj133-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-11-2: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj135-3-11-2: var(--dt-colors-syntax-operators, #8136a9);
-  --_96tj136-3-11-2: var(--dt-colors-syntax-operators, #8136a9);
-  --_96tj137-3-11-2: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
-  --_96tj138-3-11-2: transparent;
-  --_96tj13a-3-11-2: transparent;
-  --_96tj139-3-11-2: var(--dt-colors-icon-neutral-default, #2f2f4f);
+._96tj13c-3-12-0 {
+  --_96tj130-3-12-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_96tj131-3-12-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-12-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-12-0: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj136-3-12-0: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj137-3-12-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
+  --_96tj138-3-12-0: transparent;
+  --_96tj13a-3-12-0: transparent;
+  --_96tj139-3-12-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
   position: relative;
   width: 100%;
   max-height: inherit;
 }
-._96tj13c-3-11-2::selection {
+._96tj13c-3-12-0::selection {
   background: #fff;
 }
-._96tj13d-3-11-2 {
-  --_96tj137-3-11-2: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
-  --_96tj138-3-11-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_96tj13a-3-11-2: var(--dt-colors-border-critical-accent, #bb0731);
-  --_96tj139-3-11-2: var(--dt-colors-icon-critical-default, #bb0731);
+._96tj13d-3-12-0 {
+  --_96tj137-3-12-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj138-3-12-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_96tj13a-3-12-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj139-3-12-0: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13e-3-11-2 {
+._96tj13e-3-12-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj13f-3-11-2 {
+._96tj13f-3-12-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
   position: absolute;
   left: var(--dt-spacings-size-6, 6px);
   top: var(--dt-spacings-size-6, 6px);
   z-index: 1;
 }
-._96tj13g-3-11-2 {
+._96tj13g-3-12-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13h-3-11-2 {
+._96tj13h-3-12-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._96tj13i-3-11-2 {
+._96tj13i-3-12-0 {
   padding: var(--dt-spacings-size-2, 2px) calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px)) 3px;
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   transition: borderRadius var(--dt-timings-base-default, 300ms);
   line-height: 24px;
 }
-._96tj13j-3-11-2 {
-  background-color: var(--_96tj130-3-11-2);
+._96tj13j-3-12-0 {
+  background-color: var(--_96tj130-3-12-0);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._96tj13j-3-11-2:hover {
+._96tj13j-3-12-0:hover {
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13k-3-11-2:hover {
+._96tj13k-3-12-0:hover {
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
   border-right-width: 0;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._96tj13l-3-11-2 {
+._96tj13l-3-12-0 {
   line-height: 24px;
 }
-._96tj13m-3-11-2 {
-  --_96tj131-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj132-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj135-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj133-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13m-3-12-0 {
+  --_96tj131-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj132-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj135-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
   line-height: 24px;
 }
-._96tj13n-3-11-2 {
+._96tj13n-3-12-0 {
   cursor: not-allowed;
 }
-._96tj13o-3-11-2 {
-  --_96tj130-3-11-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_96tj131-3-11-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj134-3-11-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj132-3-11-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj135-3-11-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj137-3-11-2: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
-  --_96tj138-3-11-2: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_96tj133-3-11-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj13a-3-11-2: var(--dt-colors-border-critical-disabled, #dadbe480);
-}
-._96tj13q-3-11-2 {
+._96tj13o-3-12-0 {
+  --_96tj130-3-12-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_96tj131-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj134-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj132-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj135-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj137-3-12-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
+  --_96tj138-3-12-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_96tj133-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj13a-3-12-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+}
+._96tj13q-3-12-0 {
   position: relative;
   opacity: 0;
   font-size: var(--dt-typography-text-base-default-size, 14px);
@@ -97,11 +97,11 @@
   user-select: none;
   transition: none;
 }
-._96tj13q-3-11-2:hover {
+._96tj13q-3-12-0:hover {
   opacity: 1;
   pointer-events: initial;
 }
-._96tj13r-3-11-2 {
+._96tj13r-3-12-0 {
   position: absolute;
   top: calc((var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px)) * -1);
   left: var(--dt-spacings-size-4, 4px);
@@ -114,15 +114,15 @@
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
   line-height: 0;
   cursor: pointer;
-  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--_96tj130-3-11-2);
-  background-color: var(--_96tj130-3-11-2);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--_96tj130-3-12-0);
+  background-color: var(--_96tj130-3-12-0);
   box-shadow: -1px 0px 0px 0px var(--dt-colors-background-surface-default, #fff);
 }
-._96tj13r-3-11-2:hover {
+._96tj13r-3-12-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   border-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._96tj13r-3-11-2:before {
+._96tj13r-3-12-0:before {
   content: "";
   position: absolute;
   left: calc(var(--dt-borders-width-default, 1px) * -1);
@@ -133,225 +133,225 @@
   border-left: none;
   border-radius: 0 calc(var(--dt-borders-radius-field-subdued, 3px) + 3px) calc(var(--dt-borders-radius-field-subdued, 3px) + 3px) 0;
 }
-._96tj13s-3-11-2 {
+._96tj13s-3-12-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   box-shadow: none;
 }
-._96tj13s-3-11-2:hover {
+._96tj13s-3-12-0:hover {
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13t-3-11-2 {
+._96tj13t-3-12-0 {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
   pointer-events: none;
 }
-._96tj13c-3-11-2.hideDeleteWhileTyping ._96tj13i-3-11-2:hover {
+._96tj13c-3-12-0.hideDeleteWhileTyping ._96tj13i-3-12-0:hover {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13c-3-11-2.hideDeleteWhileTyping ._96tj13k-3-11-2:hover {
+._96tj13c-3-12-0.hideDeleteWhileTyping ._96tj13k-3-12-0:hover {
   padding-right: calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px));
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._96tj13c-3-11-2:not(.hideDeleteWhileTyping) ._96tj13j-3-11-2:hover ._96tj13q-3-11-2,
-   ._96tj13c-3-11-2:not(.hideDeleteWhileTyping) ._96tj13k-3-11-2:hover ._96tj13q-3-11-2 {
+._96tj13c-3-12-0:not(.hideDeleteWhileTyping) ._96tj13j-3-12-0:hover ._96tj13q-3-12-0,
+   ._96tj13c-3-12-0:not(.hideDeleteWhileTyping) ._96tj13k-3-12-0:hover ._96tj13q-3-12-0 {
   opacity: 1;
   pointer-events: initial;
   transition: opacity var(--dt-timings-base-default, 300ms);
 }
-._96tj13c-3-11-2:not(.hideDeleteWhileTyping) ._96tj13j-3-11-2:has(img + ._96tj13q-3-11-2:hover),
-   ._96tj13c-3-11-2:not(.hideDeleteWhileTyping) ._96tj13k-3-11-2:has(img + ._96tj13q-3-11-2:hover) {
+._96tj13c-3-12-0:not(.hideDeleteWhileTyping) ._96tj13j-3-12-0:has(img + ._96tj13q-3-12-0:hover),
+   ._96tj13c-3-12-0:not(.hideDeleteWhileTyping) ._96tj13k-3-12-0:has(img + ._96tj13q-3-12-0:hover) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
-  background-color: var(--_96tj130-3-11-2);
+  background-color: var(--_96tj130-3-12-0);
 }
-._96tj13u-3-11-2 {
-  --_96tj131-3-11-2: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj132-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-11-2: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj135-3-11-2: var(--dt-colors-syntax-operators, #8136a9);
+._96tj13u-3-12-0 {
+  --_96tj131-3-12-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-12-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-12-0: var(--dt-colors-syntax-operators, #8136a9);
 }
-._96tj13v-3-11-2 {
-  color: var(--_96tj131-3-11-2);
+._96tj13v-3-12-0 {
+  color: var(--_96tj131-3-12-0);
 }
-._96tj13w-3-11-2 {
-  color: var(--_96tj132-3-11-2);
+._96tj13w-3-12-0 {
+  color: var(--_96tj132-3-12-0);
 }
-._96tj13x-3-11-2 {
-  color: var(--_96tj134-3-11-2);
+._96tj13x-3-12-0 {
+  color: var(--_96tj134-3-12-0);
 }
-._96tj13y-3-11-2 {
-  color: var(--_96tj135-3-11-2);
+._96tj13y-3-12-0 {
+  color: var(--_96tj135-3-12-0);
 }
-._96tj13z-3-11-2 ._96tj13y-3-11-2 {
-  --_96tj135-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13z-3-12-0 ._96tj13y-3-12-0 {
+  --_96tj135-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._96tj1310-3-11-2 {
-  color: var(--_96tj136-3-11-2);
+._96tj1310-3-12-0 {
+  color: var(--_96tj136-3-12-0);
 }
-._96tj1311-3-11-2 {
+._96tj1311-3-12-0 {
   position: relative;
   z-index: 0;
 }
-._96tj1311-3-11-2::before {
+._96tj1311-3-12-0::before {
   content: " ";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
   width: 100%;
   line-height: 20px;
-  background-color: var(--_96tj138-3-11-2);
+  background-color: var(--_96tj138-3-12-0);
   z-index: -1;
 }
-._96tj1311-3-11-2::after {
+._96tj1311-3-12-0::after {
   content: " ";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
   left: 0;
   width: 100%;
-  border-bottom: var(--_96tj137-3-11-2);
+  border-bottom: var(--_96tj137-3-12-0);
   pointer-events: none;
 }
-._96tj1312-3-11-2 {
+._96tj1312-3-12-0 {
   position: relative;
 }
-._96tj1312-3-11-2::after {
+._96tj1312-3-12-0::after {
   content: "";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
-  border: var(--dt-spacings-size-4, 4px) solid var(--_96tj13a-3-11-2);
+  border: var(--dt-spacings-size-4, 4px) solid var(--_96tj13a-3-12-0);
   border-left: var(--dt-spacings-size-4, 4px) solid transparent;
   border-right: var(--dt-spacings-size-4, 4px) solid transparent;
   border-top: none;
   z-index: 250;
 }
-._96tj1313-3-11-2::after {
+._96tj1313-3-12-0::after {
   left: 0;
   transform: translateX(-50%);
 }
-._96tj1314-3-11-2::after {
+._96tj1314-3-12-0::after {
   right: 0;
   transform: translateX(50%);
 }
-._96tj13c-3-11-2 .cm-editor {
+._96tj13c-3-12-0 .cm-editor {
   padding: 0;
   padding-inline: var(--dt-spacings-size-28, 28px) var(--dt-spacings-size-32, 32px);
   min-height: 32px;
   max-height: inherit;
   justify-content: center;
 }
-._96tj13c-3-11-2:has([data-suggestion-pin="true"]) .cm-editor {
+._96tj13c-3-12-0:has([data-suggestion-pin="true"]) .cm-editor {
   padding-inline: var(--dt-spacings-size-28, 28px) var(--dt-spacings-size-64, 64px);
 }
-._96tj13p-3-11-2 .cm-editor {
+._96tj13p-3-12-0 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   pointer-events: none;
 }
-._96tj13n-3-11-2 ._96tj13r-3-11-2 {
+._96tj13n-3-12-0 ._96tj13r-3-12-0 {
   display: none;
 }
-._96tj13n-3-11-2 ._96tj13r-3-11-2 ._96tj13s-3-11-2 {
+._96tj13n-3-12-0 ._96tj13r-3-12-0 ._96tj13s-3-12-0 {
   display: none;
 }
-._96tj13n-3-11-2 .cm-cursorLayer {
+._96tj13n-3-12-0 .cm-cursorLayer {
   display: none;
 }
-._96tj13o-3-11-2 .cm-editor {
+._96tj13o-3-12-0 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._96tj13c-3-11-2 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-12-0 .cm-editor.cm-focused.cm-focused {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-11-2 ._96tj13c-3-11-2 .cm-editor.cm-focused.cm-focused::before {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0 .cm-editor.cm-focused.cm-focused::before {
   content: none;
 }
-._1jgl8s50-3-11-2 ._96tj13c-3-11-2 .cm-editor.cm-focused.cm-focused {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0 .cm-editor.cm-focused.cm-focused {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13c-3-11-2._96tj13e-3-11-2 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-12-0._96tj13e-3-12-0 .cm-editor.cm-focused.cm-focused {
   border-color: var(--dt-colors-border-critical-accent, #bb0731);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1jgl8s50-3-11-2 ._96tj13c-3-11-2._96tj13e-3-11-2 .cm-editor.cm-focused.cm-focused {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0._96tj13e-3-12-0 .cm-editor.cm-focused.cm-focused {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-critical-accent, #bb0731), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1jgl8s50-3-11-2 ._96tj13c-3-11-2 .cm-editor.cm-editor {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0 .cm-editor.cm-editor {
   border: none;
 }
-._1jgl8s50-3-11-2 ._96tj13c-3-11-2 .cm-editor {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0 .cm-editor {
   padding-inline-start: calc(var(--dt-spacings-size-28, 28px) + 1px);
   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-11-2 ._96tj13c-3-11-2 .cm-editor:hover {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0 .cm-editor: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-11-2 ._96tj13c-3-11-2 .cm-editor:active {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0 .cm-editor: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-11-2 :is(._96tj13p-3-11-2, ._96tj13n-3-11-2, ._96tj13o-3-11-2) .cm-editor,
-._1jgl8s50-3-11-2 :is(._96tj13p-3-11-2, ._96tj13n-3-11-2, ._96tj13o-3-11-2) .cm-editor:hover,
-._1jgl8s50-3-11-2 :is(._96tj13p-3-11-2, ._96tj13n-3-11-2, ._96tj13o-3-11-2) .cm-editor:active {
+._1jgl8s50-3-12-0 :is(._96tj13p-3-12-0, ._96tj13n-3-12-0, ._96tj13o-3-12-0) .cm-editor,
+._1jgl8s50-3-12-0 :is(._96tj13p-3-12-0, ._96tj13n-3-12-0, ._96tj13o-3-12-0) .cm-editor:hover,
+._1jgl8s50-3-12-0 :is(._96tj13p-3-12-0, ._96tj13n-3-12-0, ._96tj13o-3-12-0) .cm-editor:active {
   box-shadow: 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-2 ._96tj13c-3-11-2._96tj13e-3-11-2 .cm-editor {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0._96tj13e-3-12-0 .cm-editor {
   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-11-2 ._96tj13c-3-11-2._96tj13e-3-11-2 .cm-editor:hover {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0._96tj13e-3-12-0 .cm-editor: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-11-2 ._96tj13c-3-11-2._96tj13e-3-11-2 .cm-editor:active {
+._1jgl8s50-3-12-0 ._96tj13c-3-12-0._96tj13e-3-12-0 .cm-editor: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);
 }
-._1jgl8s50-3-11-2 ._96tj13e-3-11-2:is(._96tj13p-3-11-2, ._96tj13n-3-11-2, ._96tj13o-3-11-2) .cm-editor,
- ._1jgl8s50-3-11-2 ._96tj13e-3-11-2:is(._96tj13p-3-11-2, ._96tj13n-3-11-2, ._96tj13o-3-11-2) .cm-editor:hover,
- ._1jgl8s50-3-11-2 ._96tj13e-3-11-2:is(._96tj13p-3-11-2, ._96tj13n-3-11-2, ._96tj13o-3-11-2) .cm-editor:active {
+._1jgl8s50-3-12-0 ._96tj13e-3-12-0:is(._96tj13p-3-12-0, ._96tj13n-3-12-0, ._96tj13o-3-12-0) .cm-editor,
+ ._1jgl8s50-3-12-0 ._96tj13e-3-12-0:is(._96tj13p-3-12-0, ._96tj13n-3-12-0, ._96tj13o-3-12-0) .cm-editor:hover,
+ ._1jgl8s50-3-12-0 ._96tj13e-3-12-0:is(._96tj13p-3-12-0, ._96tj13n-3-12-0, ._96tj13o-3-12-0) .cm-editor:active {
   box-shadow: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._96tj13c-3-11-2 .cm-line.cm-line {
+._96tj13c-3-12-0 .cm-line.cm-line {
   padding-left: 0;
-  color: var(--_96tj133-3-11-2);
+  color: var(--_96tj133-3-12-0);
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
 }
-._96tj13c-3-11-2 .cm-scroller {
+._96tj13c-3-12-0 .cm-scroller {
   display: block !important;
   overflow-x: hidden;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._96tj13c-3-11-2 .cm-cursor {
+._96tj13c-3-12-0 .cm-cursor {
   border-color: var(--dt-colors-text-neutral-default, #2f2f4f);
   margin-left: 0;
 }
-._96tj13c-3-11-2 .cm-selectionLayer {
+._96tj13c-3-12-0 .cm-selectionLayer {
   z-index: unset !important;
   transform: unset !important;
 }
-._96tj13c-3-11-2 .cm-selectionBackground, ._96tj13c-3-11-2 .ͼ2 .cm-selectionBackground {
+._96tj13c-3-12-0 .cm-selectionBackground, ._96tj13c-3-12-0 .ͼ2 .cm-selectionBackground {
   background-image: linear-gradient(var(--dt-colors-background-container-neutral-accent, #5b5c81), var(--dt-colors-background-container-neutral-accent, #5b5c81)) !important;
   mix-blend-mode: difference;
 }
-._96tj13c-3-11-2 .cm-lintRange-error.cm-lintRange-error {
+._96tj13c-3-12-0 .cm-lintRange-error.cm-lintRange-error {
   background-image: none;
 }
-._96tj13c-3-11-2 .cm-lintPoint-error::after {
+._96tj13c-3-12-0 .cm-lintPoint-error::after {
   border: none;
 }
-._96tj13c-3-11-2 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
+._96tj13c-3-12-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
   left: 0 !important;
   right: 0;
   width: unset;
   max-width: unset;
   transform: translateY(var(--dt-spacings-size-4, 4px));
 }
-._96tj13c-3-11-2 .cm-tooltip-autocomplete.cm-tooltip-autocomplete ul {
+._96tj13c-3-12-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete ul {
   max-width: unset;
 }
-._96tj13p-3-11-2 .cm-placeholder.cm-placeholder,
- ._96tj13o-3-11-2 .cm-placeholder.cm-placeholder {
+._96tj13p-3-12-0 .cm-placeholder.cm-placeholder,
+ ._96tj13o-3-12-0 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._96tj13e-3-11-2 .cm-placeholder.cm-placeholder {
+._96tj13e-3-12-0 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj1315-3-11-2 {
+._96tj1315-3-12-0 {
   position: absolute;
   width: 1px;
   height: 1px;

package/esm/filters/filter-field/FilterField.js

@@ -1014,7 +1014,10 @@ const _FilterField = forwardRef(
     useEffect(() => {
       setHasAriaLivePolite(false);
       const debounceTimer = setTimeout(() => {
-        setHasAriaLivePolite(true);
+        const hasFocusWithinComponent = editorViewRef.current?.hasFocus || document.activeElement !== null && !!internalRootRef.current?.contains(document.activeElement);
+        if (!hasFocusWithinComponent) {
+          setHasAriaLivePolite(true);
+        }
       }, 300);
       return () => {
         clearTimeout(debounceTimer);
@@ -1214,8 +1217,8 @@ const _FilterField = forwardRef(
                     const isAtStart = currentlyFocusedItem === getFirstFocusableListItem(overlay) && direction === "previous";
                     if (isAtEnd || isAtStart) {
                       const scrollContainer = overlay?.querySelector(
-                        '[role="listbox"]'
-                      )?.firstElementChild;
+                        ".strato-filter-field-suggestions"
+                      );
                       if (scrollContainer) {
                         scrollContainer.scroll({
                           top: direction === "next" ? 0 : scrollContainer.scrollHeight
@@ -1257,8 +1260,8 @@ const _FilterField = forwardRef(
                   } else if (event.key === "Home" || event.key === "End") {
                     const overlay = suggestionsOverlayRef.current;
                     const scrollContainer = overlay?.querySelector(
-                      '[role="listbox"]'
-                    )?.firstElementChild;
+                      ".strato-filter-field-suggestions"
+                    );
                     if (scrollContainer) {
                       scrollContainer.scroll({
                         top: event.key === "Home" ? 0 : scrollContainer.scrollHeight
@@ -1359,7 +1362,10 @@ const _FilterField = forwardRef(
                 filterFieldMessages.suggestions.a11y.overlayAnnouncement
               )
             }
-          )
+          ),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("div", { role: "status", children: hasAriaLivePolite ? valueRef.current || intl.formatMessage(
+            filterFieldMessages.suggestions.ariaLiveInfo.filterCleared
+          ) : "" }) })
         ]
       }
     ) });