@knime/kds-code-editor 12.0.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @knime/kds-code-editor
 
+## 13.0.0
+
+### Patch Changes
+
+- 257418c: - `KdsCodeEditor`: `highlighted` now shows a teal indicator bar on top of the editor instead of the focus outline, so the active editor of a list no longer looks focused. The focus outline only shows while the code area has focus.
+- Updated dependencies [d61ae48]
+  - @knime/kds-components@13.0.0
+  - @knime/kds-styles@13.0.0
+
 ## 12.0.0
 
 ### Patch Changes

package/dist/index.css

@@ -1,13 +1,31 @@
 
 .kds-code-editor {
-&[data-v-4d5687b6] {
+&[data-v-39e24561] {
+  position: relative;
   display: flex;
   flex-direction: column;
+  isolation: isolate;
 
   /* No row bounds set: fill the width and height of the container. */
 }
+&.active[data-v-39e24561]::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: calc(
+      var(--kds-border-radius-container-0-50x) +
+        var(--kds-dimension-component-height-0-25x)
+    );
+    content: "";
+    border-top: var(--kds-dimension-component-height-0-25x) solid
+      var(--kds-color-background-selected-bold-initial);
+    border-radius: var(--kds-border-radius-container-0-44x)
+      var(--kds-border-radius-container-0-44x) 0 0;
+}
 .editor {
-&[data-v-4d5687b6] {
+&[data-v-39e24561] {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -15,19 +33,18 @@
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-50x);
 
-    /* Outline the whole editor while the code area (Monaco) is focused, or
-       while the owning component keeps the highlight on without it — header
-       buttons keep their own focus ring either way. */
+    /* Outline the whole editor while the code area (Monaco) is focused —
+       header buttons keep their own focus ring. */
 
     /* Keeps its natural height — in fill mode only the code area grows /
        shrinks with the container. */
 }
-&.focused[data-v-4d5687b6] {
+&.focused[data-v-39e24561] {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
 }
 .header {
-&[data-v-4d5687b6] {
+&[data-v-39e24561] {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -37,7 +54,7 @@
 
       /* Visually hidden, still announced by screen readers. */
 }
-.left-block[data-v-4d5687b6] {
+.left-block[data-v-39e24561] {
         display: flex;
         flex: 1;
         gap: var(--kds-spacing-container-0-25x);
@@ -48,13 +65,13 @@
            buttons are present (matches the small button height). */
         min-height: var(--kds-dimension-component-height-1-5x);
 }
-.action-buttons[data-v-4d5687b6] {
+.action-buttons[data-v-39e24561] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
         align-items: center;
 }
-.title[data-v-4d5687b6] {
+.title[data-v-39e24561] {
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-interactive-small);
@@ -62,7 +79,7 @@
         white-space: nowrap;
 }
 .change-counts {
-&[data-v-4d5687b6] {
+&[data-v-39e24561] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
@@ -73,14 +90,14 @@
         margin-left: var(--kds-spacing-container-0-25x);
         font: var(--kds-font-base-interactive-small);
 }
-.added-lines[data-v-4d5687b6] {
+.added-lines[data-v-39e24561] {
           color: var(--kds-color-text-and-icon-success);
 }
-.removed-lines[data-v-4d5687b6] {
+.removed-lines[data-v-39e24561] {
           color: var(--kds-color-text-and-icon-danger);
 }
 }
-.change-counts-for-screen-readers[data-v-4d5687b6] {
+.change-counts-for-screen-readers[data-v-39e24561] {
         position: absolute;
         width: 1px;
         height: 1px;
@@ -92,33 +109,33 @@
         clip-path: inset(50%);
 }
 }
-&.error .header[data-v-4d5687b6] {
+&.error .header[data-v-39e24561] {
       background-color: var(--kds-color-background-static-danger-muted);
 }
-&.warning .header[data-v-4d5687b6] {
+&.warning .header[data-v-39e24561] {
       background-color: var(--kds-color-background-static-warning-muted);
 }
-.code[data-v-4d5687b6] {
+.code[data-v-39e24561] {
       width: 100%;
 }
-.footer[data-v-4d5687b6] {
+.footer[data-v-39e24561] {
       flex-shrink: 0;
       width: 100%;
 }
 }
 &.fill {
-&[data-v-4d5687b6] {
+&[data-v-39e24561] {
     width: 100%;
     height: 100%;
 
     /* A collapsed editor keeps its header height instead of stretching. */
 }
-.editor[data-v-4d5687b6],
-    .code[data-v-4d5687b6] {
+.editor[data-v-39e24561],
+    .code[data-v-39e24561] {
       flex: 1 1 auto;
       min-height: 0;
 }
-.editor.collapsed[data-v-4d5687b6] {
+.editor.collapsed[data-v-39e24561] {
       flex: 0 0 auto;
 }
 }

package/dist/index.js

@@ -70,6 +70,10 @@ var BaseCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			type: Boolean,
 			default: false
 		},
+		showActiveIndicator: {
+			type: Boolean,
+			default: false
+		},
 		fill: {
 			type: Boolean,
 			default: false
@@ -92,7 +96,10 @@ var BaseCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		/** The element Monaco should be mounted into. */
 getCodeContainer: () => codeContainer.value });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["kds-code-editor", { fill: __props.fill }]) }, [createElementVNode("div", { class: normalizeClass([
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["kds-code-editor", {
+				fill: __props.fill,
+				active: __props.showActiveIndicator
+			}]) }, [createElementVNode("div", { class: normalizeClass([
 				"editor",
 				__props.state,
 				{
@@ -176,7 +183,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/_helper/BaseCodeEditor.vue
-var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4d5687b6"]]);
+var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-39e24561"]]);
 //#endregion
 //#region ../styles/dist/tokens/ts/color.js
 /**
@@ -5945,7 +5952,6 @@ var KdsCodeEditor_default = /* @__PURE__ */ defineComponent({
 		let editorInstance;
 		let overflowWidgetsDomNode;
 		const isEditorFocused = ref(false);
-		const showFocusHighlight = computed(() => isEditorFocused.value || __props.highlighted);
 		const headerLabel = computed(() => __props.languageLabel ?? __props.language.toUpperCase());
 		const editorAriaLabel = computed(() => `${headerLabel.value} code editor${__props.readOnly ? ", read-only" : ""}. Press Escape followed by Tab to move focus out of the editor.`);
 		const fillContainer = computed(() => __props.minRows === void 0 && __props.maxRows === void 0);
@@ -6057,7 +6063,8 @@ getEditor: () => editorInstance });
 				copied: unref(copied),
 				"copy-button-aria-label": copyButtonAriaLabel.value,
 				"editor-actions": __props.editorActions,
-				"show-focus-highlight": showFocusHighlight.value,
+				"show-focus-highlight": isEditorFocused.value,
+				"show-active-indicator": __props.highlighted,
 				fill: fillContainer.value,
 				"code-height": editorHeight.value,
 				onCopy: copyToClipboard
@@ -6082,6 +6089,7 @@ getEditor: () => editorInstance });
 				"copy-button-aria-label",
 				"editor-actions",
 				"show-focus-highlight",
+				"show-active-indicator",
 				"fill",
 				"code-height"
 			]);