@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/editors/base-code-editor/BaseCodeEditor.css

@@ -1,253 +1,250 @@
-@keyframes _mvxq7yj-3-8-0 {
-  to {
-    background-color: var(--dt-colors-background-container-neutral-accent, #5b5c81);
-    color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+@keyframes _mvxq7yj-3-9-1 {
+  0% {
+    background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   }
-}
-@keyframes _mvxq7yk-3-8-0 {
-  from {
-    background-color: var(--dt-colors-background-container-neutral-accent, #5b5c81);
-    color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  40% {
+    background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  }
+  100% {
+    background-color: transparent;
   }
 }
-._mvxq7yl-3-8-0 {
-  --_mvxq7y0-3-8-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7y1-3-8-0: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
-  --_mvxq7y2-3-8-0: var(--dt-colors-border-neutral-default-active, #c6c7d5);
-  --_mvxq7y7-3-8-0: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_mvxq7y8-3-8-0: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
-  --_mvxq7y9-3-8-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7yb-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_mvxq7yf-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_mvxq7yg-3-8-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_mvxq7yh-3-8-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7yi-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._mvxq7yk-3-9-1 {
+  --_mvxq7y0-3-9-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7y1-3-9-1: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
+  --_mvxq7y2-3-9-1: var(--dt-colors-border-neutral-default-active, #c6c7d5);
+  --_mvxq7y7-3-9-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_mvxq7y8-3-9-1: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
+  --_mvxq7y9-3-9-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7yb-3-9-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_mvxq7yf-3-9-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_mvxq7yg-3-9-1: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_mvxq7yh-3-9-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7yi-3-9-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   width: 100%;
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._mvxq7yn-3-8-0 {
-  --_mvxq7y3-3-8-0: 100%;
+._mvxq7ym-3-9-1 {
+  --_mvxq7y3-3-9-1: 100%;
   display: flex;
   max-height: 100%;
   min-height: 100%;
   flex-grow: 1;
 }
-._mvxq7yo-3-8-0 {
-  --_mvxq7y7-3-8-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7y8-3-8-0: var(--dt-colors-background-container-critical-emphasized, #f8e9e9);
-  --_mvxq7y9-3-8-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7yb-3-8-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7yf-3-8-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7yg-3-8-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_mvxq7yh-3-8-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7yi-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._mvxq7yp-3-8-0 {
-  --_mvxq7ye-3-8-0: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7ys-3-8-0 {
-  --_mvxq7y4-3-8-0: var(--dt-typography-code-base-default-size, 14px);
-  --_mvxq7y5-3-8-0: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
-  --_mvxq7ya-3-8-0: 33px;
-  --_mvxq7yd-3-8-0: 0 0 0 var(--dt-spacings-size-16, 16px);
-  --_mvxq7ye-3-8-0: var(--dt-spacings-size-12, 12px);
-  --_mvxq7y6-3-8-0: var(--dt-typography-code-base-default-line-height, 1.4285714286);
-  --_mvxq7yc-3-8-0: var(--dt-spacings-size-16, 16px);
-}
-._mvxq7yt-3-8-0 {
-  --_mvxq7y4-3-8-0: var(--dt-typography-code-small-default-size, 12px);
-  --_mvxq7y5-3-8-0: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
-  --_mvxq7ya-3-8-0: 27px;
-  --_mvxq7yd-3-8-0: 0 0 0 var(--dt-spacings-size-12, 12px);
-  --_mvxq7ye-3-8-0: var(--dt-spacings-size-6, 6px);
-  --_mvxq7y6-3-8-0: var(--dt-typography-code-small-default-line-height, 1.333333333);
-  --_mvxq7yc-3-8-0: var(--dt-spacings-size-12, 12px);
-}
-._mvxq7yu-3-8-0 {
-  --_mvxq7y0-3-8-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7y1-3-8-0: var(--dt-colors-border-critical-default-hover, #f5cac9);
-  --_mvxq7y2-3-8-0: var(--dt-colors-border-critical-default-active, #f3bebd);
-}
-._mvxq7yv-3-8-0 {
-  --_mvxq7ye-3-8-0: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7yw-3-8-0 {
-  --_mvxq7ye-3-8-0: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7ym-3-8-0 > div {
+._mvxq7yn-3-9-1 {
+  --_mvxq7y7-3-9-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_mvxq7y8-3-9-1: var(--dt-colors-background-container-critical-emphasized, #f8e9e9);
+  --_mvxq7y9-3-9-1: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7yb-3-9-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_mvxq7yf-3-9-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_mvxq7yg-3-9-1: var(--dt-colors-border-critical-accent, #bb0731);
+  --_mvxq7yh-3-9-1: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7yi-3-9-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._mvxq7yo-3-9-1 {
+  --_mvxq7ye-3-9-1: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yr-3-9-1 {
+  --_mvxq7y4-3-9-1: var(--dt-typography-code-base-default-size, 14px);
+  --_mvxq7y5-3-9-1: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
+  --_mvxq7ya-3-9-1: 33px;
+  --_mvxq7yd-3-9-1: 0 0 0 var(--dt-spacings-size-16, 16px);
+  --_mvxq7ye-3-9-1: var(--dt-spacings-size-12, 12px);
+  --_mvxq7y6-3-9-1: var(--dt-typography-code-base-default-line-height, 1.4285714286);
+  --_mvxq7yc-3-9-1: var(--dt-spacings-size-16, 16px);
+}
+._mvxq7ys-3-9-1 {
+  --_mvxq7y4-3-9-1: var(--dt-typography-code-small-default-size, 12px);
+  --_mvxq7y5-3-9-1: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
+  --_mvxq7ya-3-9-1: 27px;
+  --_mvxq7yd-3-9-1: 0 0 0 var(--dt-spacings-size-12, 12px);
+  --_mvxq7ye-3-9-1: var(--dt-spacings-size-6, 6px);
+  --_mvxq7y6-3-9-1: var(--dt-typography-code-small-default-line-height, 1.333333333);
+  --_mvxq7yc-3-9-1: var(--dt-spacings-size-12, 12px);
+}
+._mvxq7yt-3-9-1 {
+  --_mvxq7y0-3-9-1: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7y1-3-9-1: var(--dt-colors-border-critical-default-hover, #f5cac9);
+  --_mvxq7y2-3-9-1: var(--dt-colors-border-critical-default-active, #f3bebd);
+}
+._mvxq7yu-3-9-1 {
+  --_mvxq7ye-3-9-1: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yv-3-9-1 {
+  --_mvxq7ye-3-9-1: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yl-3-9-1 > div {
   position: relative;
   overflow: visible;
 }
-._mvxq7ym-3-8-0 > div::before {
+._mvxq7yl-3-9-1 > div::before {
   content: '';
   position: absolute;
   inset: -2px;
   z-index: 1;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   pointer-events: none;
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-8-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_mvxq7yh-3-8-0);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-9-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_mvxq7yh-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-editor {
+._mvxq7yk-3-9-1 .cm-editor {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-style: var(--dt-borders-style-default, solid);
-  border-color: var(--_mvxq7y0-3-8-0);
-  width: var(--_mvxq7y3-3-8-0);
+  border-color: var(--_mvxq7y0-3-9-1);
+  width: var(--_mvxq7y3-3-9-1);
 }
-._1jgl8s50-3-8-0 ._mvxq7yl-3-8-0 .cm-editor {
+._1jgl8s50-3-9-1 ._mvxq7yk-3-9-1 .cm-editor {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._mvxq7yl-3-8-0 .cm-editor:hover {
-  border-color: var(--_mvxq7y1-3-8-0);
+._mvxq7yk-3-9-1 .cm-editor:hover {
+  border-color: var(--_mvxq7y1-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-editor.cm-focused {
-  border-color: var(--_mvxq7yg-3-8-0);
+._mvxq7yk-3-9-1 .cm-editor.cm-focused {
+  border-color: var(--_mvxq7yg-3-9-1);
 }
-._1jgl8s50-3-8-0 ._mvxq7yl-3-8-0 .cm-editor.cm-focused::before {
+._1jgl8s50-3-9-1 ._mvxq7yk-3-9-1 .cm-editor.cm-focused::before {
   content: '';
   position: absolute;
   inset: -2px;
   z-index: 1;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   pointer-events: none;
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-8-0);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-editor:focus-visible {
+._mvxq7yk-3-9-1 .cm-editor:focus-visible {
   outline: none;
 }
-._mvxq7yl-3-8-0 .cm-editor:active {
-  border-color: var(--_mvxq7y2-3-8-0);
+._mvxq7yk-3-9-1 .cm-editor:active {
+  border-color: var(--_mvxq7y2-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-scroller {
+._mvxq7yk-3-9-1 .cm-scroller {
   border-top-left-radius: calc(var(--dt-borders-radius-container-default, 9px)/2);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-default, 9px)/2);
 }
-._mvxq7yl-3-8-0 .cm-scroller:focus-visible {
+._mvxq7yk-3-9-1 .cm-scroller:focus-visible {
   outline: none;
 }
-._mvxq7yl-3-8-0 .cm-highlight {
-  animation: _mvxq7yj-3-8-0 var(--dt-timings-base-default, 300ms) var(--dt-easings-out-back, cubic-bezier(0.4, 1.6, 0.7, 1)),
-  _mvxq7yk-3-8-0 var(--dt-timings-slow-gentle, 800ms);
-  animation-delay: 0s, var(--dt-timings-base-default, 300ms);
+._mvxq7yk-3-9-1 .cm-highlight {
+  animation: _mvxq7yj-3-9-1 var(--dt-timings-slow-moderate, 600ms) var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   animation-iteration-count: 1;
   border-radius: var(--dt-spacings-size-2, 2px);
 }
-._mvxq7yl-3-8-0 .cm-content, ._mvxq7yl-3-8-0 .cm-gutters {
-  font-size: var(--_mvxq7y4-3-8-0);
-  font-family: var(--_mvxq7y5-3-8-0);
+._mvxq7yk-3-9-1 .cm-content, ._mvxq7yk-3-9-1 .cm-gutters {
+  font-size: var(--_mvxq7y4-3-9-1);
+  font-family: var(--_mvxq7y5-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-content {
+._mvxq7yk-3-9-1 .cm-content {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  padding-block: var(--_mvxq7ye-3-8-0);
+  padding-block: var(--_mvxq7ye-3-9-1);
   position: relative;
 }
-._mvxq7yl-3-8-0 .cm-content[data-placeholder]::after {
+._mvxq7yk-3-9-1 .cm-content[data-placeholder]::after {
   content: attr(data-placeholder);
   position: absolute;
-  top: var(--_mvxq7ye-3-8-0);
-  left: var(--_mvxq7yc-3-8-0);
+  top: var(--_mvxq7ye-3-9-1);
+  left: var(--_mvxq7yc-3-9-1);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
-  line-height: var(--_mvxq7y6-3-8-0);
+  line-height: var(--_mvxq7y6-3-9-1);
   pointer-events: none;
   user-select: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  right: var(--_mvxq7yc-3-8-0);
+  right: var(--_mvxq7yc-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-gutters {
-  color: var(--_mvxq7y7-3-8-0);
-  background-color: var(--_mvxq7y8-3-8-0);
-  border-color: var(--_mvxq7y9-3-8-0);
+._mvxq7yk-3-9-1 .cm-gutters {
+  color: var(--_mvxq7y7-3-9-1);
+  background-color: var(--_mvxq7y8-3-9-1);
+  border-color: var(--_mvxq7y9-3-9-1);
   border-right-width: var(--dt-borders-width-emphasized, 2px);
   border-right-style: var(--dt-borders-style-default, solid);
   text-align: right;
 }
-._1jgl8s50-3-8-0 ._mvxq7yl-3-8-0 .cm-gutters {
+._1jgl8s50-3-9-1 ._mvxq7yk-3-9-1 .cm-gutters {
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._mvxq7yl-3-8-0 .cm-lineNumbers {
-  min-width: var(--_mvxq7ya-3-8-0);
+._mvxq7yk-3-9-1 .cm-lineNumbers {
+  min-width: var(--_mvxq7ya-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-focused {
+._mvxq7yk-3-9-1 .cm-focused {
   outline: 0 !important;
 }
-._mvxq7yl-3-8-0 .cm-line {
-  padding-inline: var(--_mvxq7yc-3-8-0);
-  line-height: var(--_mvxq7y6-3-8-0);
-  color: var(--_mvxq7yb-3-8-0);
+._mvxq7yk-3-9-1 .cm-line {
+  padding-inline: var(--_mvxq7yc-3-9-1);
+  line-height: var(--_mvxq7y6-3-9-1);
+  color: var(--_mvxq7yb-3-9-1);
 }
-._mvxq7yl-3-8-0:not(._mvxq7yr-3-8-0):not(._mvxq7yp-3-8-0) .cm-activeLine {
+._mvxq7yk-3-9-1:not(._mvxq7yq-3-9-1):not(._mvxq7yo-3-9-1) .cm-activeLine {
   outline: none;
   box-shadow: 0 calc(var(--dt-borders-width-default, 1px) * -1) 0 var(--dt-colors-border-neutral-default, #dadbe4), 0 var(--dt-borders-width-default, 1px) 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._mvxq7yl-3-8-0:not(._mvxq7yr-3-8-0):not(._mvxq7yp-3-8-0) .cm-activeLineGutter {
+._mvxq7yk-3-9-1:not(._mvxq7yq-3-9-1):not(._mvxq7yo-3-9-1) .cm-activeLineGutter {
   border-block-color: var(--dt-colors-border-neutral-default, #dadbe4);
-  color: var(--_mvxq7yf-3-8-0);
+  color: var(--_mvxq7yf-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-activeLine, ._mvxq7yl-3-8-0  .cm-activeLineGutter {
+._mvxq7yk-3-9-1 .cm-activeLine, ._mvxq7yk-3-9-1  .cm-activeLineGutter {
   background-color: transparent;
 }
-._mvxq7yl-3-8-0 .tok-keyword, ._mvxq7yl-3-8-0 .tok-heading {
+._mvxq7yk-3-9-1 .tok-keyword, ._mvxq7yk-3-9-1 .tok-heading {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._mvxq7yl-3-8-0 .tok-string {
+._mvxq7yk-3-9-1 .tok-string {
   color: var(--dt-colors-syntax-string, #086467);
 }
-._mvxq7yl-3-8-0 .tok-number {
+._mvxq7yk-3-9-1 .tok-number {
   color: var(--dt-colors-syntax-number, #aa0081);
 }
-._mvxq7yl-3-8-0 .tok-typeName {
+._mvxq7yk-3-9-1 .tok-typeName {
   color: var(--dt-colors-syntax-classname, #2c2d4d);
 }
-._mvxq7yl-3-8-0 .tok-inserted {
+._mvxq7yk-3-9-1 .tok-inserted {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._mvxq7yl-3-8-0 .tok-meta {
+._mvxq7yk-3-9-1 .tok-meta {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._mvxq7yl-3-8-0 .tok-comment {
+._mvxq7yk-3-9-1 .tok-comment {
   color: var(--dt-colors-syntax-comment, #545586);
   font-style: italic;
 }
-._mvxq7yl-3-8-0 .tok-propertyName {
+._mvxq7yk-3-9-1 .tok-propertyName {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-8-0 .tok-variableName {
+._mvxq7yk-3-9-1 .tok-variableName {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-8-0 .tok-link {
+._mvxq7yk-3-9-1 .tok-link {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-8-0 .tok-atom {
+._mvxq7yk-3-9-1 .tok-atom {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-8-0 .tok-bool {
+._mvxq7yk-3-9-1 .tok-bool {
   color: var(--dt-colors-syntax-boolean, #973f00);
 }
-._mvxq7yl-3-8-0 .cm-diagnostics {
+._mvxq7yk-3-9-1 .cm-diagnostics {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._mvxq7yl-3-8-0 .cm-diagnosticAction {
+._mvxq7yk-3-9-1 .cm-diagnosticAction {
   background-color: transparent;
   border-radius: 0;
   margin: 0;
   padding: 0;
 }
-._mvxq7yl-3-8-0 .cm-lintRange {
+._mvxq7yk-3-9-1 .cm-lintRange {
   background-repeat: repeat-x;
   background-size: 8px 2px;
   background-position: 0 95%;
 }
-._mvxq7yl-3-8-0 .cm-lintPoint-error:after {
+._mvxq7yk-3-9-1 .cm-lintPoint-error:after {
   border-bottom-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-8-0 .cm-diagnostic-error {
+._mvxq7yk-3-9-1 .cm-diagnostic-error {
   border-left: 5px solid var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-8-0 .cm-lintRange-error {
+._mvxq7yk-3-9-1 .cm-lintRange-error {
   background-image: linear-gradient(
   45deg,
   transparent 65%,
@@ -273,13 +270,13 @@ linear-gradient(
   transparent 50%
 );
 }
-._mvxq7yl-3-8-0 .cm-lintPoint-warning:after {
+._mvxq7yk-3-9-1 .cm-lintPoint-warning:after {
   border-bottom-color: var(--dt-colors-text-warning-default, #855400);
 }
-._mvxq7yl-3-8-0 .cm-diagnostic-warning {
+._mvxq7yk-3-9-1 .cm-diagnostic-warning {
   border-left: 5px solid var(--dt-colors-text-warning-default, #855400);
 }
-._mvxq7yl-3-8-0 .cm-lintRange-warning {
+._mvxq7yk-3-9-1 .cm-lintRange-warning {
   background-image: linear-gradient(
   45deg,
   transparent 65%,
@@ -305,13 +302,13 @@ linear-gradient(
   transparent 50%
 );
 }
-._mvxq7yl-3-8-0 .cm-lintPoint-info:after {
+._mvxq7yk-3-9-1 .cm-lintPoint-info:after {
   border-bottom-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-8-0 .cm-diagnostic-info {
+._mvxq7yk-3-9-1 .cm-diagnostic-info {
   border-left: 5px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-8-0 .cm-lintRange-info {
+._mvxq7yk-3-9-1 .cm-lintRange-info {
   background-image: linear-gradient(
   45deg,
   transparent 65%,
@@ -337,25 +334,25 @@ linear-gradient(
   transparent 50%
 );
 }
-._mvxq7yl-3-8-0 .cmt-keyword {
+._mvxq7yk-3-9-1 .cmt-keyword {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._mvxq7yl-3-8-0 .cm-lineNumbers > .cm-gutterElement {
-  padding: var(--_mvxq7yd-3-8-0);
+._mvxq7yk-3-9-1 .cm-lineNumbers > .cm-gutterElement {
+  padding: var(--_mvxq7yd-3-9-1);
 }
-._mvxq7yl-3-8-0 .cm-gutterElement {
+._mvxq7yk-3-9-1 .cm-gutterElement {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mvxq7yl-3-8-0:not(._mvxq7yr-3-8-0):not(._mvxq7yo-3-8-0) .cm-gutterElement:hover {
+._mvxq7yk-3-9-1:not(._mvxq7yq-3-9-1):not(._mvxq7yn-3-9-1) .cm-gutterElement:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._mvxq7yl-3-8-0:not(._mvxq7yr-3-8-0):not(._mvxq7yo-3-8-0) .cm-gutterElement:active {
+._mvxq7yk-3-9-1:not(._mvxq7yq-3-9-1):not(._mvxq7yn-3-9-1) .cm-gutterElement:active {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
 }
-._mvxq7yx-3-8-0 {
+._mvxq7yw-3-9-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   text-align: right;
 }
-._mvxq7yx-3-8-0 span {
+._mvxq7yw-3-9-1 span {
   max-width: calc(500px - var(--dt-spacings-size-32, 32px));
 }

package/esm/editors/base-code-editor/BaseCodeEditor.js

@@ -45,6 +45,7 @@ import {
   baseCodeEditorScrollerTestId
 } from "./testIds.js";
 import { calculateFolding } from "./utils/calculate-folding.js";
+import { computeMinimalChange } from "./utils/compute-minimal-change.js";
 import { getKeyMaps } from "./utils/key-maps.js";
 import { runFoldings } from "./utils/run-foldings.js";
 import { sanitizeText } from "./utils/sanitize-text.js";
@@ -52,11 +53,10 @@ import { sanitizeValue } from "./utils/sanitize-value.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
-import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { devLog } from "../../core/utils/logging.js";
 import { InternalBaseItem as BaseItem } from "../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
-import { useSyncedFormControlProps } from "../../forms/forms-core/hooks/useSyncedFormControlProps.js";
+import { useFormControl } from "../../forms/forms-core/hooks/useFormControl.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
 EditorView.EDIT_CONTEXT = false;
 const controlledSyncAnnotation = Annotation.define();
@@ -137,6 +137,7 @@ const getDomEventHandlers = (onFocus, onBlur) => {
 };
 const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     value,
     defaultValue,
@@ -177,7 +178,11 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
   const intl = useIntl();
-  const [hasError, hint] = useFormControlState(controlState);
+  const { id, hint, hintProps, inputProps, showError, focusHandlers } = useFormControl({
+    propId,
+    controlState,
+    validationVisibility: "after-blur"
+  });
   const containerRef = useRef(null);
   const rootRef = useMergeRefs([containerRef]);
   const sanitizedOnChange = useCallback(
@@ -220,9 +225,6 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       }
     });
   }, [viewRef]);
-  const { id } = useSyncedFormControlProps({
-    propId
-  });
   const valueChangeRef = useRef(void 0);
   const valueRef = useRef(value ?? defaultValue ?? "");
   const isMarkedDirtyRef = useRef(false);
@@ -235,7 +237,7 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const prevControlledValueRef = useRef(void 0);
   const pendingStartCompletionRef = useRef(false);
   const { focusProps, isFocusVisible } = useFocusRing({
-    color: hasError ? "critical" : "neutral"
+    color: showError ? "critical" : "neutral"
   });
   const [controlledFolding] = useControllableState({
     defaultValue: defaultFolding,
@@ -295,8 +297,11 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     const ariaLabelledByAttribute = "aria-labelledby";
     const ariaDetailsAttribute = "aria-details";
     const ariaDescribedByAttribute = "aria-describedby";
-    if (ariaDescribedBy) {
-      contentDOM.setAttribute(ariaDescribedByAttribute, ariaDescribedBy);
+    if (ariaDescribedBy ?? inputProps["aria-describedby"]) {
+      contentDOM.setAttribute(
+        ariaDescribedByAttribute,
+        [ariaDescribedBy, inputProps["aria-describedby"]].filter(Boolean).join(" ")
+      );
     }
     if (ariaDetails) {
       contentDOM.setAttribute(ariaDetailsAttribute, ariaDetails);
@@ -319,7 +324,14 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ariaDetailsAttribute,
       ariaDescribedByAttribute
     ].forEach((ariaAttribute) => contentDOM.removeAttribute(ariaAttribute));
-  }, [ariaLabel, ariaLabelledBy, ariaDetails, ariaDescribedBy, intl]);
+  }, [
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDetails,
+    ariaDescribedBy,
+    inputProps,
+    intl
+  ]);
   useLayoutEffect(() => {
     viewRef.current.requestMeasure();
   }, [viewRef, size]);
@@ -383,11 +395,12 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
                   return handleValueChange(transaction);
                 }
                 const newValue = transaction.newDoc.toString();
-                if (valueRef.current !== newValue) {
-                  transactionRef.current = transaction;
-                  valueChangeRef.current?.(newValue);
-                  pendingStartCompletionRef.current = true;
+                if (transaction.effects.length > 0 || newValue === valueRef.current) {
+                  return handleValueChange(transaction);
                 }
+                transactionRef.current = transaction;
+                valueChangeRef.current?.(newValue);
+                pendingStartCompletionRef.current = true;
                 return [];
               }
               return handleValueChange(transaction);
@@ -548,18 +561,21 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ])
     });
   }, [previousValue]);
+  const prevControlledFoldingRef = useRef([]);
   useEffect(() => {
-    runFoldings(controlledFolding ?? [], viewRef.current);
+    const next = controlledFolding ?? [];
+    runFoldings(next, viewRef.current, prevControlledFoldingRef.current);
+    prevControlledFoldingRef.current = next;
   }, [controlledFolding]);
   useEffect(() => {
     const codeEditorInput = viewRef.current.dom.querySelector(
       "div[contenteditable]"
     );
     if (codeEditorInput) {
-      hasError ? codeEditorInput.setAttribute("aria-invalid", "true") : codeEditorInput.removeAttribute("aria-invalid");
+      showError ? codeEditorInput.setAttribute("aria-invalid", "true") : codeEditorInput.removeAttribute("aria-invalid");
       codeEditorInput.tabIndex = -1;
     }
-  }, [hasError]);
+  }, [showError]);
   const handleOutsideEditorClick = useCallback(
     (e) => {
       const autoCompleteContainer = document.body.querySelector(
@@ -668,11 +684,10 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         try {
           viewRef.current.dispatch(
             viewRef.current.state.update({
-              changes: {
-                from: 0,
-                to: viewRef.current.state.doc.length,
-                insert: valueToApply
-              },
+              changes: computeMinimalChange(
+                viewRef.current.state.doc.toString(),
+                valueToApply
+              ),
               selection: anchor !== void 0 ? { anchor } : void 0,
               annotations: controlledSyncAnnotation.of(true)
             })
@@ -694,7 +709,7 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           styles.editorContainer({
             focusVisible: isFocusVisible,
             fullHeight,
-            hasError,
+            hasError: showError,
             lineNumbers: singleLine || hideLineNumbers ? "hidden" : void 0,
             readOnly,
             size
@@ -708,6 +723,7 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         "data-dtrum-allow": dataDtrumAllow,
         ...behavioralTrackingProps,
         ...restProps,
+        ...focusHandlers,
         "data-dt-component": dataDtComponent
       }
     ),
@@ -735,13 +751,13 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         }
       }
     ),
-    (hasError || hint) && /* @__PURE__ */ jsx(
+    hint && /* @__PURE__ */ jsx(
       "span",
       {
-        "aria-live": "polite",
+        ...hintProps,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        children: /* @__PURE__ */ jsx(BaseItem, { variant: hasError ? "error" : "hint", children: hint })
+        children: /* @__PURE__ */ jsx(BaseItem, { variant: showError ? "error" : "hint", children: hint })
       }
     )
   ] });