@knime/kds-code-editor 2.6.3

package/dist/index.js

@@ -0,0 +1,1185 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, useTemplateRef, watch } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { KeyCode, editor } from "monaco-editor";
+import { KdsButton, KdsMenuButton, KdsProgressButton, KdsSubText, KdsToggleButton, useKdsDarkMode } from "@knime/kds-components";
+import './index.css';//#region ../styles/dist/tokens/ts/font.js
+/**
+* Do not edit directly, this file was auto-generated
+* from the design token sources in src/tokens.
+*/
+var font = {
+	base: {
+		display: {
+			xsmall: {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 18,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 18px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-display-xsmall)"
+				}
+			},
+			small: {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 20,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 20px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-display-small)"
+				}
+			},
+			medium: {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 24,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 24px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-display-medium)"
+				}
+			},
+			large: {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 32,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 32px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-display-large)"
+				}
+			},
+			xlarge: {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 40,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 40px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-display-xlarge)"
+				}
+			}
+		},
+		title: {
+			xsmall: {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 10,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 10px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-xsmall)"
+				}
+			},
+			small: {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 12px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-small)"
+				}
+			},
+			"small-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 12px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-small-strong)"
+				}
+			},
+			medium: {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 14,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 14px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-medium)"
+				}
+			},
+			"medium-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 14,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 14px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-medium-strong)"
+				}
+			},
+			large: {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 16,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 16px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-large)"
+				}
+			},
+			"large-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 16,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "700 16px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-title-large-strong)"
+				}
+			}
+		},
+		body: {
+			small: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "400 12px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-small)"
+				}
+			},
+			"small-italic": {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				fontStyle: "italic",
+				css: {
+					value: "italic 400 12px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-small-italic)"
+				}
+			},
+			"small-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "700 12px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-small-strong)"
+				}
+			},
+			"small-strong-italic": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				fontStyle: "italic",
+				css: {
+					value: "italic 700 12px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-small-strong-italic)"
+				}
+			},
+			medium: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 14,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "400 14px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-medium)"
+				}
+			},
+			"medium-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 14,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "700 14px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-medium-strong)"
+				}
+			},
+			large: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 16,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "400 16px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-large)"
+				}
+			},
+			"large-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 700,
+				fontSize: {
+					value: 16,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "700 16px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-large-strong)"
+				}
+			},
+			xlarge: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 20,
+					unit: "px"
+				},
+				lineHeight: 1.5,
+				css: {
+					value: "400 20px/1.5 Roboto, sans-serif",
+					variable: "var(--kds-font-base-body-xlarge)"
+				}
+			}
+		},
+		subtext: {
+			xsmall: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 9,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 9px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-subtext-xsmall)"
+				}
+			},
+			small: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 10,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 10px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-subtext-small)"
+				}
+			},
+			medium: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 12px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-subtext-medium)"
+				}
+			}
+		},
+		interactive: {
+			"xsmall-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 11,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 11px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-xsmall-strong)"
+				}
+			},
+			small: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 12px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-small)"
+				}
+			},
+			"small-italic": {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				fontStyle: "italic",
+				css: {
+					value: "italic 400 12px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-small-italic)"
+				}
+			},
+			"small-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 12px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-small-strong)"
+				}
+			},
+			medium: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 14,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 14px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-medium)"
+				}
+			},
+			"medium-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 14,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 14px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-medium-strong)"
+				}
+			},
+			large: {
+				fontFamily: "Roboto",
+				fontWeight: 400,
+				fontSize: {
+					value: 16,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 16px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-large)"
+				}
+			},
+			"large-strong": {
+				fontFamily: "Roboto",
+				fontWeight: 500,
+				fontSize: {
+					value: 16,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "500 16px/normal Roboto, sans-serif",
+					variable: "var(--kds-font-base-interactive-large-strong)"
+				}
+			}
+		},
+		code: {
+			xsmall: {
+				fontFamily: "Roboto Mono",
+				fontWeight: 400,
+				fontSize: {
+					value: 10,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 10px/normal 'Roboto Mono', monospace",
+					variable: "var(--kds-font-base-code-xsmall)"
+				}
+			},
+			small: {
+				fontFamily: "Roboto Mono",
+				fontWeight: 400,
+				fontSize: {
+					value: 11,
+					unit: "px"
+				},
+				lineHeight: "normal",
+				css: {
+					value: "400 11px/normal 'Roboto Mono', monospace",
+					variable: "var(--kds-font-base-code-small)"
+				}
+			}
+		}
+	},
+	workflow: {
+		annotation: {
+			headline: {
+				H1: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 36,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 36px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h1)"
+					}
+				},
+				H2: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 30,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 30px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h2)"
+					}
+				},
+				H3: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 26,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 26px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h3)"
+					}
+				},
+				H4: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 22,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 22px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h4)"
+					}
+				},
+				H5: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 16,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 16px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h5)"
+					}
+				},
+				"H1-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 36,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 36px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h1-italic)"
+					}
+				},
+				"H2-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 30,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 30px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h2-italic)"
+					}
+				},
+				"H3-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 26,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 26px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h3-italic)"
+					}
+				},
+				"H4-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 22,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 22px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h4-italic)"
+					}
+				},
+				"H5-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 16,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 16px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h5-italic)"
+					}
+				},
+				H6: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 13,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 13px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h6)"
+					}
+				},
+				"H6-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 13,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 13px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-headline-h6-italic)"
+					}
+				}
+			},
+			body: {
+				small: {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 400,
+					fontSize: {
+						value: 13,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "400 13px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-body-small)"
+					}
+				},
+				"small-italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 400,
+					fontSize: {
+						value: 13,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					fontStyle: "italic",
+					css: {
+						value: "italic 400 13px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-body-small-italic)"
+					}
+				},
+				"small-strong": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 13,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					css: {
+						value: "700 13px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-body-small-strong)"
+					}
+				},
+				"small-strong-Italic": {
+					fontFamily: "Roboto Condensed",
+					fontWeight: 700,
+					fontSize: {
+						value: 13,
+						unit: "px"
+					},
+					lineHeight: 1.5,
+					fontStyle: "italic",
+					css: {
+						value: "italic 700 13px/1.5 'Roboto Condensed', sans-serif",
+						variable: "var(--kds-font-workflow-annotation-body-small-strong-italic)"
+					}
+				}
+			}
+		},
+		node: {
+			name: {
+				fontFamily: "Roboto Condensed",
+				fontWeight: 700,
+				fontSize: {
+					value: 13,
+					unit: "px"
+				},
+				css: {
+					value: "700 13px 'Roboto Condensed', sans-serif",
+					variable: "var(--kds-font-workflow-node-name)"
+				}
+			},
+			label: {
+				fontFamily: "Roboto Condensed",
+				fontWeight: 400,
+				fontSize: {
+					value: 12,
+					unit: "px"
+				},
+				css: {
+					value: "400 12px 'Roboto Condensed', sans-serif",
+					variable: "var(--kds-font-workflow-node-label)"
+				}
+			},
+			status: {
+				fontFamily: "Roboto Condensed",
+				fontWeight: 400,
+				fontSize: {
+					value: 8,
+					unit: "px"
+				},
+				css: {
+					value: "400 8px 'Roboto Condensed', sans-serif",
+					variable: "var(--kds-font-workflow-node-status)"
+				}
+			}
+		}
+	},
+	dataapp: {
+		H1: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 36,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 36px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-h1)"
+			}
+		},
+		H2: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 30,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 30px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-h2)"
+			}
+		},
+		H3: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 26,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 26px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-h3)"
+			}
+		},
+		H4: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 22,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 22px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-h4)"
+			}
+		},
+		H5: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 16,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 16px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-h5)"
+			}
+		},
+		H6: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 13,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 13px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-h6)"
+			}
+		},
+		body: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 13,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 13px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-body)"
+			}
+		},
+		"body-small": {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 10,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "700 10px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-dataapp-body-small)"
+			}
+		}
+	},
+	chart: {
+		title: {
+			fontFamily: "Roboto",
+			fontWeight: 700,
+			fontSize: {
+				value: 18,
+				unit: "px"
+			},
+			lineHeight: "normal",
+			css: {
+				value: "700 18px/normal Roboto, sans-serif",
+				variable: "var(--kds-font-chart-title)"
+			}
+		},
+		subtitle: {
+			fontFamily: "Roboto",
+			fontWeight: 400,
+			fontSize: {
+				value: 12,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "400 12px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-chart-subtitle)"
+			}
+		},
+		"axis-name": {
+			fontFamily: "Roboto",
+			fontWeight: 400,
+			fontSize: {
+				value: 12,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "400 12px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-chart-axis-name)"
+			}
+		},
+		"axis-label": {
+			fontFamily: "Roboto",
+			fontWeight: 500,
+			fontSize: {
+				value: 11,
+				unit: "px"
+			},
+			lineHeight: "normal",
+			css: {
+				value: "500 11px/normal Roboto, sans-serif",
+				variable: "var(--kds-font-chart-axis-label)"
+			}
+		},
+		legend: {
+			fontFamily: "Roboto",
+			fontWeight: 500,
+			fontSize: {
+				value: 11,
+				unit: "px"
+			},
+			lineHeight: "normal",
+			css: {
+				value: "500 11px/normal Roboto, sans-serif",
+				variable: "var(--kds-font-chart-legend)"
+			}
+		},
+		tooltip: {
+			fontFamily: "Roboto",
+			fontWeight: 400,
+			fontSize: {
+				value: 12,
+				unit: "px"
+			},
+			lineHeight: 1.5,
+			css: {
+				value: "400 12px/1.5 Roboto, sans-serif",
+				variable: "var(--kds-font-chart-tooltip)"
+			}
+		},
+		label: {
+			fontFamily: "Roboto",
+			fontWeight: 400,
+			fontSize: {
+				value: 10,
+				unit: "px"
+			},
+			lineHeight: "normal",
+			css: {
+				value: "400 10px/normal Roboto, sans-serif",
+				variable: "var(--kds-font-chart-label)"
+			}
+		}
+	}
+};
+//#endregion
+//#region src/CodeEditor/enums.ts
+var kdsCodeEditorState = {
+	DEFAULT: "default",
+	ERROR: "error",
+	WARNING: "warning"
+};
+var kdsCodeEditorStates = Object.values(kdsCodeEditorState);
+//#endregion
+//#region src/CodeEditor/monacoEnvironment.ts
+document.fonts?.ready.then(() => {
+	editor.remeasureFonts();
+});
+var setupMonacoEnvironment = () => {
+	if (self.MonacoEnvironment) return;
+	self.MonacoEnvironment = { getWorker: async (_workerId, label) => {
+		if (label === "json") {
+			const { default: JSONWorker } = await import("./json.worker-B5MqtfsC.js");
+			return new JSONWorker();
+		}
+		const { default: EditorWorker } = await import("./editor.worker-CtYtPH8e.js");
+		return new EditorWorker();
+	} };
+};
+//#endregion
+//#region src/CodeEditor/KdsCodeEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "header"
+};
+var _hoisted_2 = { class: "left-block" };
+var _hoisted_3 = { class: "title" };
+var _hoisted_4 = {
+	key: 0,
+	class: "title"
+};
+var _hoisted_5 = { class: "action-buttons" };
+var INITIAL_LINE_HEIGHT = 18;
+var EXTRA_PADDING = 3;
+var DEFAULT_OVERVIEW_RULER_LANES = 3;
+var MONACO_THEME_LIGHT = "vs-light";
+var MONACO_THEME_DARK = "vs-dark";
+var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "KdsCodeEditor",
+	props: /*@__PURE__*/ mergeModels({
+		language: { default: "plaintext" },
+		languageLabel: { default: () => void 0 },
+		hideHeader: {
+			type: Boolean,
+			default: false
+		},
+		state: { default: () => kdsCodeEditorState.DEFAULT },
+		overviewRuler: {
+			type: Boolean,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		subText: { default: () => void 0 },
+		copyable: {
+			type: Boolean,
+			default: true
+		},
+		editorActions: { default: () => void 0 },
+		minRows: { default: () => void 0 },
+		maxRows: { default: () => void 0 }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose }) {
+		setupMonacoEnvironment();
+		const modelValue = useModel(__props, "modelValue");
+		const subTextId = useId();
+		const container = useTemplateRef("editor-container");
+		let editorInstance;
+		const isEditorFocused = ref(false);
+		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);
+		const lineHeight = ref(INITIAL_LINE_HEIGHT);
+		const contentLineCount = ref(1);
+		const editorHeight = computed(() => {
+			if (fillContainer.value) return;
+			const floor = Math.max(__props.minRows ?? 1, 1);
+			const cap = __props.maxRows ?? Infinity;
+			const rows = Math.min(cap, Math.max(floor, contentLineCount.value));
+			return `${lineHeight.value * rows + EXTRA_PADDING}px`;
+		});
+		const codeFont = font.base.code.small;
+		const getMonacoTheme = (isDark) => isDark ? MONACO_THEME_DARK : MONACO_THEME_LIGHT;
+		const { isDarkMode } = useKdsDarkMode();
+		const getEditorInputElement = () => container.value?.querySelector("[role=\"textbox\"]");
+		const syncEditorInputAria = () => {
+			const input = getEditorInputElement();
+			if (!input) return;
+			if (__props.subText) input.setAttribute("aria-describedby", subTextId);
+			else input.removeAttribute("aria-describedby");
+			if (__props.state === kdsCodeEditorState.ERROR) input.setAttribute("aria-invalid", "true");
+			else input.removeAttribute("aria-invalid");
+		};
+		watch([() => __props.subText, () => __props.state], syncEditorInputAria);
+		const { copy, copied } = useClipboard({ copiedDuring: 2e3 });
+		const copyButtonAriaLabel = computed(() => copied.value ? `Copied ${headerLabel.value} to clipboard` : `Copy ${headerLabel.value} to clipboard`);
+		const copyToClipboard = () => {
+			copy(editorInstance?.getModel()?.getValue() ?? "");
+		};
+		onMounted(() => {
+			if (!container.value) return;
+			editorInstance = editor.create(container.value, {
+				value: modelValue.value,
+				language: __props.language,
+				automaticLayout: true,
+				minimap: { enabled: false },
+				overviewRulerLanes: __props.overviewRuler ? DEFAULT_OVERVIEW_RULER_LANES : 0,
+				scrollBeyondLastLine: false,
+				lineNumbersMinChars: 3,
+				fontFamily: `"${codeFont.fontFamily}", monospace`,
+				fontWeight: `${codeFont.fontWeight}`,
+				fontSize: codeFont.fontSize.value,
+				fixedOverflowWidgets: true,
+				scrollbar: { alwaysConsumeMouseWheel: false },
+				readOnly: __props.readOnly,
+				theme: getMonacoTheme(isDarkMode.value),
+				ariaLabel: editorAriaLabel.value,
+				accessibilitySupport: "on"
+			});
+			syncEditorInputAria();
+			lineHeight.value = editorInstance.getOption(editor.EditorOption.lineHeight);
+			contentLineCount.value = editorInstance.getModel()?.getLineCount() ?? 1;
+			editorInstance.onDidChangeModelContent(() => {
+				const value = editorInstance?.getModel()?.getValue() ?? "";
+				contentLineCount.value = editorInstance?.getModel()?.getLineCount() ?? 1;
+				if (value !== modelValue.value) modelValue.value = value;
+			});
+			let tabFocusArmed = false;
+			const setTabFocus = (armed) => {
+				if (tabFocusArmed !== armed) {
+					tabFocusArmed = armed;
+					editorInstance?.updateOptions({ tabFocusMode: armed });
+				}
+			};
+			const tabFocusNeutralKeys = [
+				KeyCode.Tab,
+				KeyCode.Shift,
+				KeyCode.Ctrl,
+				KeyCode.Alt,
+				KeyCode.Meta
+			];
+			editorInstance.onKeyDown((event) => {
+				if (event.keyCode === KeyCode.Escape) setTabFocus(true);
+				else if (!tabFocusNeutralKeys.includes(event.keyCode)) setTabFocus(false);
+			});
+			editorInstance.onDidFocusEditorText(() => {
+				setTabFocus(false);
+				isEditorFocused.value = true;
+			});
+			editorInstance.onDidBlurEditorText(() => {
+				isEditorFocused.value = false;
+			});
+		});
+		watch(isDarkMode, (isDark) => {
+			if (editorInstance) editorInstance.updateOptions({ theme: getMonacoTheme(isDark) });
+		});
+		watch(() => __props.readOnly, (isReadOnly) => {
+			editorInstance?.updateOptions({ readOnly: isReadOnly });
+		});
+		watch(editorAriaLabel, (ariaLabel) => {
+			editorInstance?.updateOptions({ ariaLabel });
+		});
+		watch(() => __props.overviewRuler, (enabled) => {
+			editorInstance?.updateOptions({ overviewRulerLanes: enabled ? DEFAULT_OVERVIEW_RULER_LANES : 0 });
+		});
+		watch(() => __props.language, (newLanguage) => {
+			const model = editorInstance?.getModel();
+			if (model) editor.setModelLanguage(model, newLanguage);
+		});
+		watch(modelValue, (newValue) => {
+			const model = editorInstance?.getModel();
+			if (model && newValue !== model.getValue()) {
+				model.pushStackElement();
+				model.pushEditOperations([], [{
+					range: model.getFullModelRange(),
+					text: newValue ?? ""
+				}], () => null);
+			}
+		});
+		onUnmounted(() => {
+			editorInstance?.dispose();
+		});
+		__expose({ 
+		/** The underlying Monaco editor instance, available after mount. */
+getEditor: () => editorInstance });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["kds-code-editor", { fill: fillContainer.value }]) }, [createElementVNode("div", { class: normalizeClass([
+				"editor",
+				__props.state,
+				{ focused: isEditorFocused.value }
+			]) }, [!__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(headerLabel.value), 1), __props.readOnly === true ? (openBlock(), createElementBlock("span", _hoisted_4, "(Read-only)")) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.editorActions, (action, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: `editor-action-${index}` }, [action.type === "button" ? (openBlock(), createBlock(unref(KdsButton), mergeProps({
+					key: 0,
+					ref_for: true
+				}, action.props, {
+					size: "small",
+					onClick: action.onClick
+				}), null, 16, ["onClick"])) : action.type === "toggleButton" ? (openBlock(), createBlock(unref(KdsToggleButton), mergeProps({
+					key: 1,
+					ref_for: true
+				}, action.props, {
+					size: "small",
+					"onUpdate:modelValue": action.onUpdateModelValue
+				}), null, 16, ["onUpdate:modelValue"])) : action.type === "menuButton" ? (openBlock(), createBlock(unref(KdsMenuButton), mergeProps({
+					key: 2,
+					ref_for: true
+				}, action.props, {
+					size: "small",
+					onItemClick: action.onItemClick
+				}), null, 16, ["onItemClick"])) : createCommentVNode("", true)], 64);
+			}), 128)), __props.copyable ? (openBlock(), createBlock(unref(KdsProgressButton), mergeProps({ key: 0 }, { ariaLabel: copyButtonAriaLabel.value }, {
+				"leading-icon": unref(copied) ? "checkmark" : "copy",
+				state: unref(copied) ? "success" : "default",
+				size: "small",
+				variant: "transparent",
+				onClick: copyToClipboard
+			}), null, 16, ["leading-icon", "state"])) : createCommentVNode("", true)])])) : createCommentVNode("", true), createElementVNode("div", {
+				ref: "editor-container",
+				class: "code",
+				style: normalizeStyle(editorHeight.value ? { height: editorHeight.value } : void 0)
+			}, null, 4)], 2), __props.subText ? (openBlock(), createBlock(unref(KdsSubText), {
+				key: 0,
+				id: unref(subTextId),
+				"sub-text": __props.subText,
+				error: __props.state === unref(kdsCodeEditorState).ERROR,
+				warning: __props.state === unref(kdsCodeEditorState).WARNING
+			}, null, 8, [
+				"id",
+				"sub-text",
+				"error",
+				"warning"
+			])) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/CodeEditor/KdsCodeEditor.vue
+var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9af67a44"]]);
+//#endregion
+export { KdsCodeEditor_default as KdsCodeEditor, kdsCodeEditorState, kdsCodeEditorStates, setupMonacoEnvironment };
+
+//# sourceMappingURL=index.js.map