@nldd/design-system 0.8.64 → 0.8.66

package/dist/components/inputs/code-editor/code-editor.js

@@ -7,45 +7,61 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Nederlandse Digitale Dienst Code Editor Component (Lit + TypeScript)
  *
- * A monospace text editor for code, YAML, JSON, and other technical
- * content. Visually pairs with `nldd-code` (same tinted background,
- * same monospace font, same rounded corners) so a read-only view and
- * the editable counterpart look like the same surface.
+ * A monospace editor for code, YAML, JSON and other technical content, built
+ * on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with
+ * nldd-code-viewer for a matching read-only surface.
  *
- * Built on a native `<textarea>` — no syntax highlighting, no line
- * numbers. Reach for a real editor library (CodeMirror, Monaco) when
- * those features are required.
+ * Default `variant="simple"` is a bare, flush editor (no frame, no focus ring)
+ * for use inside an nldd-form-field or a consumer composition that owns its own
+ * chrome and focus treatment; the caret is rendered as a prominent accent as
+ * the focus cue. `variant="input-field"` adds the framed surface (border ring, tinted
+ * fill, inner padding, radius) and a focus ring for standalone use.
  *
- * Spellcheck and autocorrect are disabled by default since they don't
- * help on code; long lines scroll horizontally unless `wrap` is set.
+ * The simple variant has no surrounding space of its own: let a layout
+ * container own the spacing and forward clicks with `focusFromPoint()` so
+ * clicking the padding still starts editing.
+ *
+ * Optional `language` enables lazy syntax highlighting; `line-numbers` adds a
+ * gutter (click a number to move the caret to that line).
  *
  * @element nldd-code-editor
  *
- * @attr {string} value           - The textarea value
- * @attr {string} placeholder     - Placeholder text
- * @attr {string} input-id        - Sets the id on the native textarea. Set automatically by nldd-form-field.
- * @attr {boolean} disabled       - Disabled state
- * @attr {string} name            - Textarea name for form submission
- * @attr {boolean} readonly       - Readonly state
- * @attr {boolean} required       - Required state
- * @attr {boolean} wrap           - Wrap long lines instead of horizontal scroll
- * @attr {number} rows            - Initial visible rows (minimum height). Default: 6.
- * @attr {string} resize          - 'none' | 'vertical' (default) | 'auto'.
- *                                  'auto' grows with content (native field-sizing).
- * @attr {string} accessible-label - Accessible label forwarded to the inner textarea. Set automatically by nldd-form-field.
+ * @attr {string} value            - Editor content
+ * @attr {string} placeholder      - Placeholder text shown while empty
+ * @attr {string} input-id         - Sets the id on the editable element. Set automatically by nldd-form-field.
+ * @attr {boolean} disabled        - Disabled state
+ * @attr {string} name             - Field name for form submission
+ * @attr {boolean} readonly        - Readonly state (focusable and selectable, not editable)
+ * @attr {boolean} required        - Required state
+ * @attr {boolean} wrap            - Wrap long lines instead of horizontal scroll
+ * @attr {number} rows             - Minimum visible rows (the floor in every resize mode). Default: 6.
+ * @attr {string} resize           - 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default)
+ * @attr {string} variant          - 'simple' (default, bare) | 'input-field' (framed surface)
+ * @attr {string} language         - Highlight grammar (yaml, json, javascript, typescript, css, html, xml, bash, markdown, rust, gherkin, toml, sql, python). Empty disables highlighting.
+ * @attr {boolean} line-numbers    - Show a line-number gutter
+ * @attr {string} accessible-label - Accessible label forwarded to the editor. Set automatically by nldd-form-field.
  *
- * @fires input  - When value changes
- * @fires change - When value is committed (blur)
+ * @fires input  - When the content changes (detail: { value })
+ * @fires change - When the content is committed on blur (detail: { value })
  */
 import { LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { EditorView, keymap, drawSelection, lineNumbers as cmLineNumbers, placeholder as cmPlaceholder, } from '@codemirror/view';
+import { Compartment, EditorState } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { NLDDCodeMirrorElement } from '../../../utilities/codemirror/codemirror-element.js';
+import { nlddCodeMirrorTheme } from '../../../utilities/codemirror/theme.js';
+import { loadLanguage } from '../../../utilities/codemirror/languages.js';
 import { codeEditorStyles } from './code-editor.styles.js';
 import { codeEditorTemplate } from './code-editor.template.js';
-let NLDDCodeEditor = class NLDDCodeEditor extends LitElement {
+let NLDDCodeEditor = class NLDDCodeEditor extends NLDDCodeMirrorElement {
     constructor() {
         super(...arguments);
         this._internals = this.attachInternals();
         this._initialValue = '';
+        this._valueAtFocus = '';
+        this._accessibleLabelWarned = false;
         this.value = '';
         this.inputId = '';
         this.placeholder = '';
@@ -55,19 +71,203 @@ let NLDDCodeEditor = class NLDDCodeEditor extends LitElement {
         this.required = false;
         this.wrap = false;
         this.rows = 6;
-        this.resize = 'vertical';
+        this.resize = 'auto';
+        this.variant = 'simple';
+        this.language = '';
+        this.lineNumbers = false;
         this.accessibleLabel = '';
-        this._accessibleLabelWarned = false;
+        // Compartments let us reconfigure single concerns without rebuilding state.
+        this._editableCompartment = new Compartment();
+        this._wrapCompartment = new Compartment();
+        this._lineNumbersCompartment = new Compartment();
+        this._placeholderCompartment = new Compartment();
+        this._attrsCompartment = new Compartment();
+        this._languageCompartment = new Compartment();
+        this._onScrollerPointerDown = (event) => {
+            // Only the scroller's own padding — not the content/gutter inside it.
+            // pointerdown covers mouse, touch and pen in one event.
+            if (event.target !== this.view?.scrollDOM)
+                return;
+            this.focusFromPoint(event.clientX, event.clientY);
+            event.preventDefault();
+        };
+    }
+    getEditorParent() {
+        return this._container;
+    }
+    buildExtensions() {
+        return [
+            nlddCodeMirrorTheme,
+            history(),
+            drawSelection(),
+            keymap.of([...defaultKeymap, ...historyKeymap]),
+            this._placeholderCompartment.of(this._placeholderExtension()),
+            this._wrapCompartment.of(this.wrap ? EditorView.lineWrapping : []),
+            this._lineNumbersCompartment.of(this._lineNumbersExtension()),
+            this._editableCompartment.of(this._editableExtension()),
+            this._attrsCompartment.of(this._attrsExtension()),
+            this._languageCompartment.of([]),
+            EditorView.updateListener.of((u) => {
+                if (u.docChanged)
+                    this._onDocChanged();
+            }),
+            EditorView.domEventHandlers({
+                focus: () => {
+                    this._valueAtFocus = this.value;
+                },
+                blur: () => {
+                    if (this.value !== this._valueAtFocus)
+                        this._emitChange();
+                },
+            }),
+        ];
+    }
+    _editableExtension() {
+        // Readonly stays focusable/selectable (read + copy); disabled is inert.
+        const editable = !this.disabled;
+        const readOnly = this.disabled || this.readonly;
+        return [EditorView.editable.of(editable), EditorState.readOnly.of(readOnly)];
+    }
+    _placeholderExtension() {
+        return this.placeholder ? cmPlaceholder(this.placeholder) : [];
+    }
+    _lineNumbersExtension() {
+        if (!this.lineNumbers)
+            return [];
+        // Clicking a line number moves the caret to the start of that line.
+        return cmLineNumbers({
+            domEventHandlers: {
+                mousedown: (view, line) => {
+                    view.dispatch({ selection: { anchor: line.from } });
+                    view.focus();
+                    return true;
+                },
+            },
+        });
+    }
+    _attrsExtension() {
+        // CodeMirror's content is a bare contenteditable; give it the textbox
+        // semantics a native <textarea> had — role, multiline, and the readonly/
+        // required state — so screen readers announce it correctly (WCAG 4.1.2).
+        const attrs = {
+            'role': 'textbox',
+            'aria-multiline': 'true',
+        };
+        if (this.accessibleLabel)
+            attrs['aria-label'] = this.accessibleLabel;
+        if (this.inputId)
+            attrs['id'] = this.inputId;
+        // disabled makes the field inert (contenteditable=false); readonly keeps it
+        // focusable but non-editable. Either way it's not editable, so reflect
+        // aria-readonly. aria-required mirrors the required constraint.
+        if (this.readonly || this.disabled)
+            attrs['aria-readonly'] = 'true';
+        if (this.required)
+            attrs['aria-required'] = 'true';
+        return EditorView.contentAttributes.of(attrs);
     }
     firstUpdated() {
         this._initialValue = this.value;
+        this.style.setProperty('--_rows', String(this.rows));
+        this.mountEditor(this.value);
+        this.onEditorMounted();
+    }
+    /* Runs on the initial mount and on every re-mount after a detach/reattach
+     * (e.g. Vue <KeepAlive>): the view — and its scrollDOM — is rebuilt, so the
+     * padding-click forwarder and language must be (re)applied here. */
+    onEditorMounted() {
+        // A press on the scroller's own padding (outside .cm-content) doesn't
+        // place a caret; forward it to the nearest line so the padding is
+        // clickable too. CM attaches its own handlers to the content, not the
+        // scroller, so this is a plain listener on the scroller element.
+        this.view?.scrollDOM.addEventListener('pointerdown', this._onScrollerPointerDown);
+        this._internals.setFormValue(this.doc);
+        if (this.language)
+            void this._applyLanguage();
+        this._checkAccessibleLabel();
     }
     updated(changed) {
-        if (changed.has('value')) {
-            this._internals.setFormValue(this.value);
+        if (changed.has('rows')) {
+            this.style.setProperty('--_rows', String(this.rows));
+        }
+        if (this.view) {
+            if (changed.has('value')) {
+                const docWas = this.doc;
+                this.setDoc(this.value);
+                this._internals.setFormValue(this.value);
+                // A programmatic value change while focused must not look like a user edit
+                // on the next blur: if setDoc actually moved the doc (i.e. this wasn't the
+                // echo of the user's own typing, where the doc already equals value),
+                // advance the focus-time baseline too.
+                if (docWas !== this.value)
+                    this._valueAtFocus = this.value;
+            }
+            if (changed.has('disabled') || changed.has('readonly')) {
+                this.reconfigure(this._editableCompartment, this._editableExtension());
+            }
+            // readonly/required/disabled also drive the content's aria-readonly/
+            // aria-required, so refresh the attrs compartment when they change.
+            if (changed.has('disabled') || changed.has('readonly') || changed.has('required')) {
+                this.reconfigure(this._attrsCompartment, this._attrsExtension());
+            }
+            if (changed.has('wrap')) {
+                this.reconfigure(this._wrapCompartment, this.wrap ? EditorView.lineWrapping : []);
+            }
+            if (changed.has('lineNumbers')) {
+                this.reconfigure(this._lineNumbersCompartment, this._lineNumbersExtension());
+            }
+            if (changed.has('placeholder')) {
+                this.reconfigure(this._placeholderCompartment, this._placeholderExtension());
+            }
+            if (changed.has('accessibleLabel') || changed.has('inputId')) {
+                this.reconfigure(this._attrsCompartment, this._attrsExtension());
+            }
+            if (changed.has('language')) {
+                void this._applyLanguage();
+            }
         }
         this._checkAccessibleLabel();
     }
+    async _applyLanguage() {
+        const lang = this.language;
+        if (!lang) {
+            this.reconfigure(this._languageCompartment, []);
+            return;
+        }
+        const pending = loadLanguage(lang);
+        if (!pending) {
+            this.reconfigure(this._languageCompartment, []);
+            return;
+        }
+        try {
+            const support = await pending;
+            // The attribute may have changed while the grammar was loading.
+            if (this.language === lang)
+                this.reconfigure(this._languageCompartment, support);
+        }
+        catch {
+            this.reconfigure(this._languageCompartment, []);
+        }
+    }
+    _onDocChanged() {
+        const text = this.doc;
+        if (text === this.value)
+            return;
+        this.value = text;
+        this._internals.setFormValue(text);
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: text },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _emitChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     /* Ran from updated(), not firstUpdated(): a parent nldd-form-field sets
      * input-id slightly after our first render, so checking earlier triggers
      * a spurious warning for the standard form-field usage. We re-check on
@@ -90,26 +290,6 @@ let NLDDCodeEditor = class NLDDCodeEditor extends LitElement {
         if (typeof state === 'string')
             this.value = state;
     }
-    _handleInput(e) {
-        e.stopPropagation();
-        const textarea = e.target;
-        this.value = textarea.value;
-        this.dispatchEvent(new CustomEvent('input', {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _handleChange(e) {
-        e.stopPropagation();
-        const textarea = e.target;
-        this.value = textarea.value;
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true,
-        }));
-    }
     render() {
         return codeEditorTemplate(this);
     }
@@ -127,7 +307,7 @@ __decorate([
     property({ type: String, attribute: 'input-id' })
 ], NLDDCodeEditor.prototype, "inputId", void 0);
 __decorate([
-    property({ type: String })
+    property({ reflect: true, converter: reflectNonDefault('') })
 ], NLDDCodeEditor.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -148,14 +328,23 @@ __decorate([
     property({ type: Number })
 ], NLDDCodeEditor.prototype, "rows", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ reflect: true, converter: reflectNonDefault('auto') })
 ], NLDDCodeEditor.prototype, "resize", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('simple') })
+], NLDDCodeEditor.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDCodeEditor.prototype, "language", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'line-numbers' })
+], NLDDCodeEditor.prototype, "lineNumbers", void 0);
 __decorate([
     property({ type: String, attribute: 'accessible-label' })
 ], NLDDCodeEditor.prototype, "accessibleLabel", void 0);
 __decorate([
-    query('.code-editor__input')
-], NLDDCodeEditor.prototype, "_textarea", void 0);
+    query('.code-editor')
+], NLDDCodeEditor.prototype, "_container", void 0);
 NLDDCodeEditor = __decorate([
     customElement('nldd-code-editor')
 ], NLDDCodeEditor);

package/dist/components/inputs/code-editor/code-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.js","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-editor.js","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.ts"],"names":[],"mappings":"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"}

package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,yBAoH5B,CAAC"}
+{"version":3,"file":"code-editor.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,yBAgI5B,CAAC"}

package/dist/components/inputs/code-editor/code-editor.styles.js

@@ -9,12 +9,16 @@ export const codeEditorStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--primitives-corner-radius-lg);
-		--_background-color: var(--semantics-surfaces-tinted-background-color);
-		--_block-padding: var(--primitives-space-16);
-		--_inline-padding: var(--primitives-space-16);
+		--__caret-width: var(--primitives-border-width-regular);
+		--_corner-radius: 0;
+		--_background-color: transparent;
+		--_border-color: transparent;
+		--_border-shadow: none;
+		--_padding-block: 0px;
+		--_padding-inline: 0px;
 		--_content-color: var(--semantics-content-color);
 		--_font: var(--primitives-font-monospace-sm-regular-snug);
+		--_rows: 6;
 
 		/* iOS Safari auto-zooms a focused field rendered under 16px (sm is ~14px).
 		   Bump to the 16px md size on touch to prevent it; non-touch keeps the
@@ -24,9 +28,6 @@ export const codeEditorStyles = css `
 		}
 
 		${inheritedTextReset}
-		/* flex column + min-height:0 + flex:1 makes the host a good flex
-		   citizen so a fixed-height parent grows the textarea; with no set
-		   height it falls back to the rows attribute. */
 		display: flex;
 		min-height: 0;
 		flex-direction: column;
@@ -41,80 +42,91 @@ export const codeEditorStyles = css `
 	}
 
 
-	/* # Block */
+	/* ## Variant — input-field adds the framed surface + a default content padding */
+
+	:host([variant="input-field"]) {
+		--_corner-radius: var(--primitives-corner-radius-lg);
+		/* Match the other input fields (text-field, textarea): the input-field
+		   surface + border + control padding, not the tinted surface. */
+		--_background-color: var(--semantics-input-fields-background-color);
+		--_border-color: var(--semantics-input-fields-border-color);
+		--_border-shadow: inset 0 0 0 var(--semantics-input-fields-border-thickness) var(--_border-color);
+		--_padding-block: var(--semantics-controls-md-inline-padding);
+		--_padding-inline: var(--semantics-controls-md-inline-padding);
+	}
+
+
+	/* # Block — the frame only; CodeMirror fills it, padding lives on the content */
 
 	.code-editor {
 		box-sizing: border-box;
 		display: flex;
 		position: relative;
 		border-radius: var(--_corner-radius);
+		box-shadow: var(--_border-shadow);
 		background-color: var(--_background-color);
 		min-height: 0;
-		overflow: hidden;
 		flex-direction: column;
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: auto;
+		color: var(--_content-color);
+		font: var(--_font);
 	}
 
 	:host([disabled]) .code-editor {
 		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
 	}
 
-	.code-editor:focus-within {
+	/* Focus ring only on the input-field variant. The simple variant relies on a
+	   prominent caret and lets a wrapping composition own its focus treatment. */
+	:host([variant="input-field"]) .code-editor:focus-within {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow);
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--_border-shadow);
 	}
 
 
-	/* # Elements */
-
-	.code-editor__input {
-		box-sizing: border-box;
-		display: block;
-		margin: 0;
-		outline: none;
-		border: none;
-		background: transparent;
-		width: 100%;
-		min-height: 0;
-		padding: var(--_block-padding) var(--_inline-padding);
-		flex-grow: 1;
-		flex-shrink: 1;
-		flex-basis: auto;
-		color: var(--_content-color);
-		font: var(--_font);
-		tab-size: 2;
-		white-space: pre;
-		overflow-wrap: normal;
-		appearance: none;
-	}
+	/* # CodeMirror surface */
 
-	:host([wrap]) .code-editor__input {
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
+	/* Padding lives on the content so the whole padded area is clickable and a
+	   click maps to the nearest line — no dead zone around the text. */
+	/* Inline padding sits on the scroller so it lands left of the line-number
+	   gutter (the gutter stays inset with the text). Block + right padding sit
+	   on the content so the padded area is clickable and horizontal scrolling
+	   keeps its end padding. :host beats the shared theme's .cm-content reset. */
+	:host .cm-scroller {
+		padding-left: var(--_padding-inline);
 	}
 
-	:host([resize="vertical"]) .code-editor__input {
-		resize: vertical;
+	:host .cm-content {
+		padding-block: var(--_padding-block);
+		padding-right: var(--_padding-inline);
+		min-height: calc(var(--_rows) * 1lh);
+		tab-size: 2;
 	}
 
-	:host([resize="none"]) .code-editor__input {
-		resize: none;
+	/* Accent caret. The doubled class is purely for specificity — it outweighs
+	   CodeMirror's theme cursor colour without depending on an attribute. */
+	:host .cm-cursor.cm-cursor {
+		border-left-color: var(--primitives-color-accent-600);
+		border-left-width: var(--__caret-width);
 	}
 
-	:host([resize="auto"]) .code-editor__input {
+	/* Resize model — rows is the floor in every mode:
+	   auto (default) = grow, vertical = drag up from the floor, none = fixed. */
+	:host .cm-scroller {
 		resize: none;
-		field-sizing: content;
+		min-height: calc(var(--_rows) * 1lh + 2 * var(--_padding-block));
 	}
 
-	:host([disabled]) .code-editor__input {
-		pointer-events: none;
+	:host([resize="vertical"]) .cm-scroller {
+		resize: vertical;
 	}
 
-	.code-editor__input::placeholder {
-		color: var(--semantics-input-fields-placeholder-color);
+	:host([resize="none"]) .cm-editor {
+		height: calc(var(--_rows) * 1lh + 2 * var(--_padding-block));
 	}
 `;
 //# sourceMappingURL=code-editor.styles.js.map

package/dist/components/inputs/code-editor/code-editor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;IAuB/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FrB,CAAC"}
+{"version":3,"file":"code-editor.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2B/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqGrB,CAAC"}

package/dist/components/inputs/code-editor/code-editor.template.d.ts

@@ -1,4 +1,4 @@
 import { TemplateResult } from 'lit';
 import type { NLDDCodeEditor } from './code-editor.js';
-export declare function codeEditorTemplate(component: NLDDCodeEditor): TemplateResult;
+export declare function codeEditorTemplate(_component: NLDDCodeEditor): TemplateResult;
 //# sourceMappingURL=code-editor.template.d.ts.map

package/dist/components/inputs/code-editor/code-editor.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAqB5E"}
+{"version":3,"file":"code-editor.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,cAAc,GAAG,cAAc,CAI7E"}

package/dist/components/inputs/code-editor/code-editor.template.js

@@ -1,24 +1,7 @@
-import { html, nothing } from 'lit';
-export function codeEditorTemplate(component) {
-    return html `
-		<div class="code-editor">
-			<textarea class="code-editor__input"
-				id=${component.inputId || nothing}
-				rows=${component.rows}
-				.value=${component.value}
-				placeholder=${component.placeholder || nothing}
-				?disabled=${component.disabled}
-				?readonly=${component.readonly}
-				?required=${component.required}
-				spellcheck="false"
-				autocomplete="off"
-				autocorrect="off"
-				autocapitalize="off"
-				aria-label=${component.accessibleLabel || nothing}
-				@input=${component._handleInput}
-				@change=${component._handleChange}
-			></textarea>
-		</div>
-	`;
+import { html } from 'lit';
+export function codeEditorTemplate(_component) {
+    // CodeMirror mounts into and owns .code-editor; keep this element free of
+    // Lit expressions so re-renders never touch the editor's own DOM.
+    return html `<div class="code-editor"></div>`;
 }
 //# sourceMappingURL=code-editor.template.js.map

package/dist/components/inputs/code-editor/code-editor.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,OAAO,IAAI,CAAA;;;SAGH,SAAS,CAAC,OAAO,IAAI,OAAO;WAC1B,SAAS,CAAC,IAAI;aACZ,SAAS,CAAC,KAAK;kBACV,SAAS,CAAC,WAAW,IAAI,OAAO;gBAClC,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;;;;;iBAKjB,SAAS,CAAC,eAAe,IAAI,OAAO;aACxC,SAAS,CAAC,YAAY;cACrB,SAAS,CAAC,aAAa;;;EAGnC,CAAC;AACH,CAAC"}
+{"version":3,"file":"code-editor.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/code-editor/code-editor.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,kBAAkB,CAAC,UAA0B;IAC5D,0EAA0E;IAC1E,kEAAkE;IAClE,OAAO,IAAI,CAAA,iCAAiC,CAAC;AAC9C,CAAC"}