@dynatrace/strato-components 3.11.3 → 3.12.0

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

@@ -1,4 +1,4 @@
-@keyframes _mvxq7yk-3-11-3 {
+@keyframes _mvxq7yi-3-12-0 {
   0% {
     background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   }
@@ -9,245 +9,240 @@
     background-color: transparent;
   }
 }
-._mvxq7yl-3-11-3 {
-  --_mvxq7y0-3-11-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7y1-3-11-3: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
-  --_mvxq7y2-3-11-3: var(--dt-colors-border-neutral-default-active, #c6c7d5);
-  --_mvxq7y7-3-11-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_mvxq7y8-3-11-3: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
-  --_mvxq7y9-3-11-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7yb-3-11-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_mvxq7yg-3-11-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_mvxq7yh-3-11-3: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_mvxq7yi-3-11-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7yj-3-11-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._mvxq7yj-3-12-0 {
+  --_mvxq7y0-3-12-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7y1-3-12-0: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
+  --_mvxq7y2-3-12-0: var(--dt-colors-border-neutral-default-active, #c6c7d5);
+  --_mvxq7y7-3-12-0: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
+  --_mvxq7y8-3-12-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7ye-3-12-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7yf-3-12-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_mvxq7yg-3-12-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7yh-3-12-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   width: 100%;
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._mvxq7yn-3-11-3 {
-  --_mvxq7y3-3-11-3: 100%;
+._mvxq7yl-3-12-0 {
+  --_mvxq7y3-3-12-0: 100%;
   display: flex;
   max-height: 100%;
   min-height: 100%;
   flex-grow: 1;
 }
-._mvxq7yo-3-11-3 {
-  --_mvxq7y7-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7y8-3-11-3: var(--dt-colors-background-container-critical-emphasized, #f8e9e9);
-  --_mvxq7y9-3-11-3: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7yb-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7yg-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7yh-3-11-3: var(--dt-colors-border-critical-accent, #bb0731);
-  --_mvxq7yi-3-11-3: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7yj-3-11-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._mvxq7yp-3-11-3 {
-  --_mvxq7yf-3-11-3: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7ys-3-11-3 {
-  --_mvxq7y4-3-11-3: var(--dt-typography-code-base-default-size, 14px);
-  --_mvxq7y5-3-11-3: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
-  --_mvxq7ya-3-11-3: 17px;
-  --_mvxq7yd-3-11-3: 0 var(--dt-spacings-size-2, 2px);
-  --_mvxq7ye-3-11-3: var(--dt-spacings-size-16, 16px);
-  --_mvxq7yf-3-11-3: var(--dt-spacings-size-12, 12px);
-  --_mvxq7y6-3-11-3: var(--dt-typography-code-base-default-line-height, 1.4285714286);
-  --_mvxq7yc-3-11-3: var(--dt-spacings-size-16, 16px);
-}
-._mvxq7yt-3-11-3 {
-  --_mvxq7y4-3-11-3: var(--dt-typography-code-small-default-size, 12px);
-  --_mvxq7y5-3-11-3: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
-  --_mvxq7ya-3-11-3: 15px;
-  --_mvxq7ye-3-11-3: var(--dt-spacings-size-12, 12px);
-  --_mvxq7yf-3-11-3: var(--dt-spacings-size-6, 6px);
-  --_mvxq7y6-3-11-3: var(--dt-typography-code-small-default-line-height, 1.333333333);
-  --_mvxq7yc-3-11-3: var(--dt-spacings-size-12, 12px);
-}
-._mvxq7yu-3-11-3 {
-  --_mvxq7y0-3-11-3: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7y1-3-11-3: var(--dt-colors-border-critical-default-hover, #f5cac9);
-  --_mvxq7y2-3-11-3: var(--dt-colors-border-critical-default-active, #f3bebd);
-}
-._mvxq7yv-3-11-3 {
-  --_mvxq7yf-3-11-3: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7yw-3-11-3 {
-  --_mvxq7yf-3-11-3: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7ym-3-11-3 > div {
+._mvxq7ym-3-12-0 {
+  --_mvxq7y7-3-12-0: var(--dt-colors-background-container-critical-default, #f9f1f2);
+  --_mvxq7y8-3-12-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7ye-3-12-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7yf-3-12-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_mvxq7yg-3-12-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7yh-3-12-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._mvxq7yn-3-12-0 {
+  --_mvxq7yd-3-12-0: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yq-3-12-0 {
+  --_mvxq7y4-3-12-0: var(--dt-typography-code-base-default-size, 14px);
+  --_mvxq7y5-3-12-0: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
+  --_mvxq7y9-3-12-0: 17px;
+  --_mvxq7yb-3-12-0: 0 var(--dt-spacings-size-2, 2px);
+  --_mvxq7yc-3-12-0: var(--dt-spacings-size-16, 16px);
+  --_mvxq7yd-3-12-0: var(--dt-spacings-size-12, 12px);
+  --_mvxq7y6-3-12-0: var(--dt-typography-code-base-default-line-height, 1.4285714286);
+  --_mvxq7ya-3-12-0: var(--dt-spacings-size-16, 16px);
+}
+._mvxq7yr-3-12-0 {
+  --_mvxq7y4-3-12-0: var(--dt-typography-code-small-default-size, 12px);
+  --_mvxq7y5-3-12-0: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
+  --_mvxq7y9-3-12-0: 15px;
+  --_mvxq7yc-3-12-0: var(--dt-spacings-size-12, 12px);
+  --_mvxq7yd-3-12-0: var(--dt-spacings-size-6, 6px);
+  --_mvxq7y6-3-12-0: var(--dt-typography-code-small-default-line-height, 1.333333333);
+  --_mvxq7ya-3-12-0: var(--dt-spacings-size-12, 12px);
+}
+._mvxq7ys-3-12-0 {
+  --_mvxq7y0-3-12-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7y1-3-12-0: var(--dt-colors-border-critical-default-hover, #f5cac9);
+  --_mvxq7y2-3-12-0: var(--dt-colors-border-critical-default-active, #f3bebd);
+}
+._mvxq7yt-3-12-0 {
+  --_mvxq7yd-3-12-0: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yu-3-12-0 {
+  --_mvxq7yd-3-12-0: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yk-3-12-0 > div {
   position: relative;
   overflow: visible;
 }
-._mvxq7ym-3-11-3 > div::before {
+._mvxq7yk-3-12-0 > 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(--_mvxq7yh-3-11-3), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_mvxq7yi-3-11-3);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yf-3-12-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_mvxq7yg-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-editor {
+._mvxq7yj-3-12-0 .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-11-3);
-  width: var(--_mvxq7y3-3-11-3);
+  border-color: var(--_mvxq7y0-3-12-0);
+  width: var(--_mvxq7y3-3-12-0);
 }
-._1jgl8s50-3-11-3 ._mvxq7yl-3-11-3 .cm-editor {
+._1jgl8s50-3-12-0 ._mvxq7yj-3-12-0 .cm-editor {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._mvxq7yl-3-11-3 .cm-editor:hover {
-  border-color: var(--_mvxq7y1-3-11-3);
+._mvxq7yj-3-12-0 .cm-editor:hover {
+  border-color: var(--_mvxq7y1-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-editor.cm-focused {
-  border-color: var(--_mvxq7yh-3-11-3);
+._mvxq7yj-3-12-0 .cm-editor.cm-focused {
+  border-color: var(--_mvxq7yf-3-12-0);
 }
-._1jgl8s50-3-11-3 ._mvxq7yl-3-11-3 .cm-editor.cm-focused::before {
+._1jgl8s50-3-12-0 ._mvxq7yj-3-12-0 .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(--_mvxq7yh-3-11-3);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yf-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-editor:focus-visible {
+._mvxq7yj-3-12-0 .cm-editor:focus-visible {
   outline: none;
 }
-._mvxq7yl-3-11-3 .cm-editor:active {
-  border-color: var(--_mvxq7y2-3-11-3);
+._mvxq7yj-3-12-0 .cm-editor:active {
+  border-color: var(--_mvxq7y2-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-scroller {
+._mvxq7yj-3-12-0 .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-11-3 .cm-scroller:focus-visible {
+._mvxq7yj-3-12-0 .cm-scroller:focus-visible {
   outline: none;
 }
-._mvxq7yl-3-11-3 .cm-highlight {
-  animation: _mvxq7yk-3-11-3 var(--dt-timings-slow-moderate, 600ms) var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
+._mvxq7yj-3-12-0 .cm-highlight {
+  animation: _mvxq7yi-3-12-0 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-11-3 .cm-content, ._mvxq7yl-3-11-3 .cm-gutters {
-  font-size: var(--_mvxq7y4-3-11-3);
-  font-family: var(--_mvxq7y5-3-11-3);
+._mvxq7yj-3-12-0 .cm-content, ._mvxq7yj-3-12-0 .cm-gutters {
+  font-size: var(--_mvxq7y4-3-12-0);
+  font-family: var(--_mvxq7y5-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-content {
+._mvxq7yj-3-12-0 .cm-content {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  padding-block: var(--_mvxq7yf-3-11-3);
+  padding-block: var(--_mvxq7yd-3-12-0);
   position: relative;
 }
-._mvxq7yl-3-11-3 .cm-content[data-placeholder]::after {
+._mvxq7yj-3-12-0 .cm-content[data-placeholder]::after {
   content: attr(data-placeholder);
   position: absolute;
-  top: var(--_mvxq7yf-3-11-3);
-  left: var(--_mvxq7yc-3-11-3);
-  right: var(--_mvxq7yc-3-11-3);
+  top: var(--_mvxq7yd-3-12-0);
+  left: var(--_mvxq7ya-3-12-0);
+  right: var(--_mvxq7ya-3-12-0);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
-  line-height: var(--_mvxq7y6-3-11-3);
+  line-height: var(--_mvxq7y6-3-12-0);
   pointer-events: none;
   user-select: none;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }
-._mvxq7yl-3-11-3 .cm-scroller[data-placeholder-reserved] .cm-line {
+._mvxq7yj-3-12-0 .cm-scroller[data-placeholder-reserved] .cm-line {
   min-height: var(--dt-editor-placeholder-height);
 }
-._mvxq7yl-3-11-3 .cm-scroller[data-placeholder-reserved] {
+._mvxq7yj-3-12-0 .cm-scroller[data-placeholder-reserved] {
   align-items: stretch;
 }
-._mvxq7yl-3-11-3 .cm-gutters {
-  color: var(--_mvxq7y7-3-11-3);
-  background-color: var(--_mvxq7y8-3-11-3);
-  border-color: var(--_mvxq7y9-3-11-3);
+._mvxq7yj-3-12-0 .cm-gutters {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+  background-color: var(--_mvxq7y7-3-12-0);
+  border-color: var(--_mvxq7y8-3-12-0);
   border-right-width: var(--dt-borders-width-emphasized, 2px);
   border-right-style: var(--dt-borders-style-default, solid);
   text-align: right;
 }
-._1jgl8s50-3-11-3 ._mvxq7yl-3-11-3 .cm-gutters {
+._1jgl8s50-3-12-0 ._mvxq7yj-3-12-0 .cm-gutters {
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._mvxq7yl-3-11-3 .cm-focused {
+._mvxq7yj-3-12-0 .cm-focused {
   outline: 0 !important;
 }
-._mvxq7yl-3-11-3 .cm-line {
-  padding-inline: var(--_mvxq7yc-3-11-3);
-  line-height: var(--_mvxq7y6-3-11-3);
-  color: var(--_mvxq7yb-3-11-3);
+._mvxq7yj-3-12-0 .cm-line {
+  padding-inline: var(--_mvxq7ya-3-12-0);
+  line-height: var(--_mvxq7y6-3-12-0);
+  color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-11-3:not(._mvxq7yr-3-11-3):not(._mvxq7yp-3-11-3) .cm-activeLine {
+._mvxq7yj-3-12-0:not(._mvxq7yp-3-12-0):not(._mvxq7yn-3-12-0) .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-11-3:not(._mvxq7yr-3-11-3):not(._mvxq7yp-3-11-3) .cm-activeLineGutter {
-  border-block-color: var(--dt-colors-border-neutral-default, #dadbe4);
-  color: var(--_mvxq7yg-3-11-3);
+._mvxq7yj-3-12-0:not(._mvxq7yp-3-12-0):not(._mvxq7yn-3-12-0) .cm-activeLineGutter {
+  box-shadow: 0 calc(var(--dt-borders-width-default, 1px) * -1) 0 var(--_mvxq7ye-3-12-0), 0 var(--dt-borders-width-default, 1px) 0 var(--_mvxq7ye-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-activeLine, ._mvxq7yl-3-11-3  .cm-activeLineGutter {
+._mvxq7yj-3-12-0 .cm-activeLine, ._mvxq7yj-3-12-0  .cm-activeLineGutter {
   background-color: transparent;
 }
-._mvxq7yl-3-11-3 .tok-keyword, ._mvxq7yl-3-11-3 .tok-heading {
+._mvxq7yj-3-12-0 .tok-keyword, ._mvxq7yj-3-12-0 .tok-heading {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._mvxq7yl-3-11-3 .tok-string {
+._mvxq7yj-3-12-0 .tok-string {
   color: var(--dt-colors-syntax-string, #086467);
 }
-._mvxq7yl-3-11-3 .tok-number {
+._mvxq7yj-3-12-0 .tok-number {
   color: var(--dt-colors-syntax-number, #aa0081);
 }
-._mvxq7yl-3-11-3 .tok-typeName {
+._mvxq7yj-3-12-0 .tok-typeName {
   color: var(--dt-colors-syntax-classname, #2c2d4d);
 }
-._mvxq7yl-3-11-3 .tok-inserted {
+._mvxq7yj-3-12-0 .tok-inserted {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._mvxq7yl-3-11-3 .tok-meta {
+._mvxq7yj-3-12-0 .tok-meta {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._mvxq7yl-3-11-3 .tok-comment {
+._mvxq7yj-3-12-0 .tok-comment {
   color: var(--dt-colors-syntax-comment, #545586);
   font-style: italic;
 }
-._mvxq7yl-3-11-3 .tok-propertyName {
+._mvxq7yj-3-12-0 .tok-propertyName {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-11-3 .tok-variableName {
+._mvxq7yj-3-12-0 .tok-variableName {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-11-3 .tok-link {
+._mvxq7yj-3-12-0 .tok-link {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-11-3 .tok-atom {
+._mvxq7yj-3-12-0 .tok-atom {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-11-3 .tok-bool {
+._mvxq7yj-3-12-0 .tok-bool {
   color: var(--dt-colors-syntax-boolean, #973f00);
 }
-._mvxq7yl-3-11-3 .cm-diagnostics {
+._mvxq7yj-3-12-0 .cm-diagnostics {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._mvxq7yl-3-11-3 .cm-diagnosticAction {
+._mvxq7yj-3-12-0 .cm-diagnosticAction {
   background-color: transparent;
   border-radius: 0;
   margin: 0;
   padding: 0;
 }
-._mvxq7yl-3-11-3 .cm-lintRange {
+._mvxq7yj-3-12-0 .cm-lintRange {
   background-repeat: repeat-x;
   background-size: 8px 2px;
   background-position: 0 95%;
 }
-._mvxq7yl-3-11-3 .cm-lintPoint-error:after {
+._mvxq7yj-3-12-0 .cm-lintPoint-error:after {
   border-bottom-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-11-3 .cm-diagnostic-error {
+._mvxq7yj-3-12-0 .cm-diagnostic-error {
   border-left: 5px solid var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-11-3 .cm-lintRange-error {
+._mvxq7yj-3-12-0 .cm-lintRange-error {
   background-image: linear-gradient(
    45deg,
    transparent 65%,
@@ -273,13 +268,13 @@
    transparent 50%
  );
 }
-._mvxq7yl-3-11-3 .cm-lintPoint-warning:after {
+._mvxq7yj-3-12-0 .cm-lintPoint-warning:after {
   border-bottom-color: var(--dt-colors-text-warning-default, #855400);
 }
-._mvxq7yl-3-11-3 .cm-diagnostic-warning {
+._mvxq7yj-3-12-0 .cm-diagnostic-warning {
   border-left: 5px solid var(--dt-colors-text-warning-default, #855400);
 }
-._mvxq7yl-3-11-3 .cm-lintRange-warning {
+._mvxq7yj-3-12-0 .cm-lintRange-warning {
   background-image: linear-gradient(
    45deg,
    transparent 65%,
@@ -305,13 +300,13 @@
    transparent 50%
  );
 }
-._mvxq7yl-3-11-3 .cm-lintPoint-info:after {
+._mvxq7yj-3-12-0 .cm-lintPoint-info:after {
   border-bottom-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-11-3 .cm-diagnostic-info {
+._mvxq7yj-3-12-0 .cm-diagnostic-info {
   border-left: 5px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-11-3 .cm-lintRange-info {
+._mvxq7yj-3-12-0 .cm-lintRange-info {
   background-image: linear-gradient(
    45deg,
    transparent 65%,
@@ -342,34 +337,37 @@
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._mvxq7yl-3-11-3 .cmt-keyword {
+._mvxq7yj-3-12-0 .cmt-keyword {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._mvxq7yl-3-11-3 .cm-lineNumbers > .cm-gutterElement {
+._mvxq7yj-3-12-0 .cm-lineNumbers > .cm-gutterElement {
   padding: 0;
-  min-width: var(--_mvxq7ya-3-11-3);
+  min-width: var(--_mvxq7y9-3-12-0);
+}
+._mvxq7ym-3-12-0 .cm-gutterElement.cm-gutterElement-critical {
+  color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-11-3 .cm-gutter-lint-indicators {
-  min-width: var(--_mvxq7ye-3-11-3);
+._mvxq7yj-3-12-0 .cm-gutter-lint-indicators {
+  min-width: var(--_mvxq7yc-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-gutter-lint-indicators > .cm-gutterElement {
-  padding: var(--_mvxq7yd-3-11-3);
-  min-width: var(--_mvxq7ye-3-11-3);
+._mvxq7yj-3-12-0 .cm-gutter-lint-indicators > .cm-gutterElement {
+  padding: var(--_mvxq7yb-3-12-0);
+  min-width: var(--_mvxq7yc-3-12-0);
 }
-._mvxq7yl-3-11-3 .cm-gutterElement {
+._mvxq7yj-3-12-0 .cm-gutterElement {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mvxq7yl-3-11-3:not(._mvxq7yr-3-11-3):not(._mvxq7yo-3-11-3) .cm-gutterElement:hover {
+._mvxq7yj-3-12-0:not(._mvxq7yp-3-12-0):not(._mvxq7ym-3-12-0) .cm-gutterElement:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._mvxq7yl-3-11-3:not(._mvxq7yr-3-11-3):not(._mvxq7yo-3-11-3) .cm-gutterElement:active {
+._mvxq7yj-3-12-0:not(._mvxq7yp-3-12-0):not(._mvxq7ym-3-12-0) .cm-gutterElement:active {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
 }
-._mvxq7yx-3-11-3 {
+._mvxq7yv-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   text-align: right;
   vertical-align: middle;
 }
-._mvxq7yx-3-11-3 span {
+._mvxq7yv-3-12-0 span {
   max-width: calc(500px - var(--dt-spacings-size-32, 32px));
 }

package/editors/base-code-editor/BaseCodeEditor.css.d.ts

@@ -2,16 +2,14 @@ declare const cmEditorWidth: `var(--${string})`;
 declare const editorFontSize: `var(--${string})`;
 declare const editorFontFamily: `var(--${string})`;
 declare const editorLineHeight: `var(--${string})`;
-declare const cmGuttersColor: `var(--${string})`;
 declare const cmGuttersBackgroundColor: `var(--${string})`;
 declare const cmGuttersBorderColor: `var(--${string})`;
 declare const cmLineNumbersMinWidth: `var(--${string})`;
-declare const cmLineColor: `var(--${string})`;
 declare const cmLinePaddingInline: `var(--${string})`;
 declare const cmLintGutterElementPadding: `var(--${string})`;
 declare const cmLintGutterMinWidth: `var(--${string})`;
 declare const cmContentPaddingBlock: `var(--${string})`;
-declare const cmActiveLineGutterColor: `var(--${string})`;
+declare const cmActiveLineGutterBorderColor: `var(--${string})`;
 declare const focusOuterShadow: `var(--${string})`;
 declare const focusInnerShadow: `var(--${string})`;
 declare const focusBackgroundColor: `var(--${string})`;
@@ -33,11 +31,9 @@ export declare const editorContainer: import("@vanilla-extract/recipes").Runtime
     hasError: {
         true: {
             vars: {
-                [cmGuttersColor]: string;
                 [cmGuttersBackgroundColor]: string;
                 [cmGuttersBorderColor]: string;
-                [cmLineColor]: string;
-                [cmActiveLineGutterColor]: string;
+                [cmActiveLineGutterBorderColor]: string;
                 [focusOuterShadow]: string;
                 [focusInnerShadow]: string;
                 [focusBackgroundColor]: string;

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

@@ -39,6 +39,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var styles = __toESM(require("./BaseCodeEditor.sty.js"));
+var import_configure_critical_gutter_lines = require("./configuration/configure-critical-gutter-lines.js");
 var import_configure_diagnostics = require("./configuration/configure-diagnostics.js");
 var import_configure_format_keymap = require("./configuration/configure-format-keymap.js");
 var import_configure_line_wrap = require("./configuration/configure-line-wrap.js");
@@ -404,6 +405,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
           import_state.Prec.highest(keymapCompartment.of((0, import_key_maps.getKeyMaps)(viewRef))),
           languageCompartment.of([]),
           lintGutterCompartment.of((0, import_configure_lint_gutter.getLintGutterExtension)(false)),
+          import_configure_critical_gutter_lines.criticalGutterLines,
           editorBaseConfigCompartment.of([]),
           // Indent unit is two spaces instead of tab
           import_language.indentUnit.of("  "),
@@ -551,12 +553,11 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
   (0, import_react.useEffect)(() => {
     (0, import_configure_lint_gutter.configureLintGutter)(
       showLintGutter,
-      diagnostics,
       viewRef,
       lintGutterCompartment,
       isLintGutterMarkersShownRef
     );
-  }, [showLintGutter, diagnostics]);
+  }, [showLintGutter]);
   (0, import_react.useEffect)(() => {
     valueChangeRef.current = onChange !== void 0 ? sanitizedOnChange : void 0;
   }, [onChange, sanitizedOnChange]);

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

@@ -25,5 +25,5 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_diagnostic_tooltip_css_ts_vanilla = require("../../core/styles/diagnostic-tooltip.css");
 var import_BaseCodeEditor_css_ts_vanilla = require("./BaseCodeEditor.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var autocompletionTypeText = "_mvxq7yx-3-11-3";
-var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yl-3-11-3", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-11-3" }, fullHeight: { true: "_mvxq7yn-3-11-3" }, hasError: { true: "_mvxq7yo-3-11-3" }, lineNumbers: { hidden: "_mvxq7yp-3-11-3", visible: "_mvxq7yq-3-11-3" }, readOnly: { true: "_mvxq7yr-3-11-3" }, size: { "default": "_mvxq7ys-3-11-3", condensed: "_mvxq7yt-3-11-3" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-11-3"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-11-3"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-11-3"]] });
+var autocompletionTypeText = "_mvxq7yv-3-12-0";
+var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yj-3-12-0", variantClassNames: { focusVisible: { true: "_mvxq7yk-3-12-0" }, fullHeight: { true: "_mvxq7yl-3-12-0" }, hasError: { true: "_mvxq7ym-3-12-0" }, lineNumbers: { hidden: "_mvxq7yn-3-12-0", visible: "_mvxq7yo-3-12-0" }, readOnly: { true: "_mvxq7yp-3-12-0" }, size: { "default": "_mvxq7yq-3-12-0", condensed: "_mvxq7yr-3-12-0" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7ys-3-12-0"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yt-3-12-0"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yu-3-12-0"]] });

package/editors/base-code-editor/configuration/configure-active-line.d.ts

@@ -0,0 +1,21 @@
+import type { EditorState, Extension } from '@codemirror/state';
+/**
+ * Finds the opening lines of the blocks containing the cursors.
+ * The content and gutter highlights share these offsets to stay aligned.
+ *
+ * @param state - The editor state.
+ * @returns The sorted, unique start offsets of the active blocks.
+ * @internal
+ */
+export declare function _activeLineStarts(state: EditorState): number[];
+/**
+ * Highlights the active line in the content and every gutter column, including
+ * when the cursor is inside folded code.
+ *
+ * Replaces CodeMirror's separate active-line extensions, which can become
+ * misaligned around folded code.
+ *
+ * @internal
+ */
+export declare const activeLineHighlight: Extension;
+//# sourceMappingURL=configure-active-line.d.ts.map

package/editors/base-code-editor/configuration/configure-active-line.js

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var configure_active_line_exports = {};
+__export(configure_active_line_exports, {
+  _activeLineStarts: () => _activeLineStarts,
+  activeLineHighlight: () => activeLineHighlight
+});
+module.exports = __toCommonJS(configure_active_line_exports);
+var import_language = require("@codemirror/language");
+var import_state = require("@codemirror/state");
+var import_view = require("@codemirror/view");
+const activeLineDecoration = import_view.Decoration.line({ class: "cm-activeLine" });
+class ActiveLineGutterMarker extends import_view.GutterMarker {
+  elementClass = "cm-activeLineGutter";
+}
+const activeLineGutterMarker = new ActiveLineGutterMarker();
+function foldOpeningLine(state, folded, lineStart) {
+  let result = lineStart;
+  folded.between(lineStart, lineStart, (from) => {
+    if (from >= lineStart) {
+      return;
+    }
+    const openingLine = state.doc.lineAt(from).from;
+    if (openingLine < result) {
+      result = openingLine;
+    }
+  });
+  return result;
+}
+function _activeLineStarts(state) {
+  const folded = (0, import_language.foldedRanges)(state);
+  const starts = /* @__PURE__ */ new Set();
+  for (const range of state.selection.ranges) {
+    let start = state.doc.lineAt(range.head).from;
+    let previous = -1;
+    while (start !== previous) {
+      previous = start;
+      start = foldOpeningLine(state, folded, start);
+    }
+    starts.add(start);
+  }
+  return [...starts].sort((a, b) => a - b);
+}
+const activeLineHighlight = [
+  import_view.EditorView.decorations.compute(
+    ["selection", import_language.foldState],
+    (state) => import_view.Decoration.set(
+      _activeLineStarts(state).map(
+        (start) => activeLineDecoration.range(start)
+      )
+    )
+  ),
+  import_view.gutterLineClass.compute(
+    ["selection", import_language.foldState],
+    (state) => import_state.RangeSet.of(
+      _activeLineStarts(state).map(
+        (start) => activeLineGutterMarker.range(start)
+      )
+    )
+  )
+];