diff --git a/package.json b/package.json
index d35f9b88..a4006cb6 100644
--- a/package.json
+++ b/package.json
@@ -71,15 +71,16 @@
     "build:demo:watch": "vite build --mode demo --watch",
     "build:icons": "node ./tools/generate-sprite",
     "lint": "eslint ./src --ext .js || true",
-    "test": "node --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.js",
-    "test:updateSnapshots": "node --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.js",
-    "test:ci": "yarn test --coverage",
+    "test": "node --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+    "test:updateSnapshots": "node --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+    "test:ci": "npm test --coverage",
     "start": "npm-run-all build:icons dev",
     "semantic-release": "semantic-release --ci --debug",
     "copy:lang": "node ./tools/copy-directory.mjs ./node_modules/formeo-i18n/dist/lang ./src/demo/assets/lang",
     "travis-deploy-once": "travis-deploy-once --pro",
-    "prepush": "yarn test",
-    "defaults": "webpack-defaults"
+    "prepush": "npm test",
+    "prepare": "lefthook install",
+    "postmerge": "lefthook install"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.3",
diff --git a/src/lib/js/common/dom.js b/src/lib/js/common/dom.js
index a255a123..3a2850c8 100644
--- a/src/lib/js/common/dom.js
+++ b/src/lib/js/common/dom.js
@@ -23,6 +23,8 @@ const iconFontTemplates = {
   fontello: icon => `<i class="${iconPrefix}${icon}">${icon}</i>`,
 }
 
+const inputTags = new Set(['input', 'textarea', 'select'])
+
 /**
  * General purpose markup utilities and generator.
  */
@@ -31,20 +33,12 @@ class DOM {
    * Set defaults, store references to key elements
    * like stages, rows, columns etc
    */
-  constructor() {
-    this.options = Object.create(null)
-    this.styleSheet = (() => {
-      const style = document.createElement('style')
-      style.setAttribute('media', 'screen')
-      style.setAttribute('type', 'text/css')
-      style.appendChild(document.createTextNode(''))
-      document.head.appendChild(style)
-      return style.sheet
-    })()
+  constructor(options = Object.create(null)) {
+    this.options = options
   }
 
   set setOptions(options) {
-    this.options = merge(Object.assign({}, this.options, options))
+    this.options = merge(this.options, options)
   }
 
   /**
@@ -52,14 +46,18 @@ class DOM {
    * @param  {Object|String} elem
    * @return {Object} valid element object
    */
-  processTagName(elem) {
+  processTagName(elemArg) {
+    let elem = elemArg
     let tagName
     if (typeof elem === 'string') {
       tagName = elem
       elem = { tag: tagName }
+      return elem
     }
+
     if (elem.attrs) {
       const { tag, ...restAttrs } = elem.attrs
+      // this is used for interchangeable tagNames like h1, h2, h3 etc
       if (tag) {
         if (typeof tag === 'string') {
           tagName = tag
@@ -92,12 +90,11 @@ class DOM {
    * @return {Object}            DOM Object
    */
   create = (elemArg, isPreview = false) => {
-    let elem = elemArg
-    if (!elem) {
+    if (!elemArg) {
       return
     }
 
-    elem = this.processTagName(elem)
+    const { className, options, ...elem } = this.processTagName(elemArg)
     const _this = this
     let childType
     const { tag } = elem
@@ -147,41 +144,29 @@ class DOM {
     processed.push('tag')
 
     // check for root className property
-    if (elem.className) {
-      const { className } = elem
-      elem.attrs = Object.assign({}, elem.attrs, { className })
-      delete elem.className
+    if (className) {
+      elem.attrs = { ...elem.attrs, className }
     }
 
-    // Append Element Content
-    if (elem.options) {
-      let { options } = elem
-      options = this.processOptions(options, elem, isPreview)
+    if (options) {
+      const processedOptions = this.processOptions(options, elem, isPreview)
       if (this.holdsContent(element) && tag !== 'button') {
         // mainly used for <select> tag
-        appendChildren.array.call(this, options)
-        delete elem.content
+        appendChildren.array.call(this, processedOptions)
+        elem.content = undefined
       } else {
-        h.forEach(options, option => {
+        h.forEach(processedOptions, option => {
           wrap.children.push(_this.create(option, isPreview))
         })
         if (elem.attrs.className) {
           wrap.className = elem.attrs.className
         }
-        wrap.config = Object.assign({}, elem.config)
+        wrap.config = { ...elem.config }
         return this.create(wrap, isPreview)
       }
       processed.push('options')
     }
 
-    // disabling all initially selected options because we are setting them manualy at #330
-    if (element.tagName === 'OPTION') {
-      const timeout = setTimeout(() => {
-        element.selected = false
-        clearTimeout(timeout)
-      }, 0)
-    }
-
     // Set element attributes
     if (elem.attrs) {
       _this.processAttrs(elem, element, isPreview)
@@ -361,17 +346,7 @@ class DOM {
       }
 
       if (value) {
-        // if multiple options are being used and they are being selected automatically, the browser wants the element
-        // to be rendered before setting the selected-attribute. Hence, we're setting the 'selected'-property at the beginning of
-        // the next iteration of the event-loop.
-        if (element.tagName === 'OPTION' && name === 'selected') {
-          const timeout = setTimeout(() => {
-            element.setAttribute(name, value)
-            clearTimeout(timeout)
-          }, 0)
-        } else {
-          element.setAttribute(name, value)
-        }
+        element.setAttribute(name, value === true ? '' : value)
       }
     }
   }
@@ -429,17 +404,6 @@ class DOM {
     }
   }
 
-  makeOption = ([value, label], selected, i18nKey) => {
-    const option = {
-      value,
-      label: i18n.get(`${i18nKey}.${label}`) || label,
-    }
-    if (value === selected) {
-      option.selected = true
-    }
-    return option
-  }
-
   /**
    * Extend Array of option config objects
    * @param  {Array} options
@@ -558,11 +522,12 @@ class DOM {
    * @param  {String|Object} tag tagName or DOM element
    * @return {Boolean} isInput
    */
-  isInput(tag) {
+  isInput(tagArg) {
+    let tag = tagArg
     if (typeof tag !== 'string') {
       tag = tag.tagName
     }
-    return ['input', 'textarea', 'select'].indexOf(tag) !== -1
+    return inputTags.has(tag)
   }
 
   /**
@@ -621,7 +586,7 @@ class DOM {
 
     if (fMap) {
       // for attribute will prevent label focus
-      delete fieldLabel.attrs.for
+      fieldLabel.attrs.for = undefined
       fieldLabel.attrs.contenteditable = true
       fieldLabel.fMap = fMap
     }
@@ -707,9 +672,8 @@ class DOM {
     if (!children.length) {
       if (!this.isStage(parent)) {
         return this.removeEmpty(parent)
-      } else {
-        this.emptyClass(parent)
       }
+      return this.emptyClass(parent)
     }
   }
 
@@ -833,7 +797,8 @@ class DOM {
    * @param  {Object} elem DOM element
    * @param  {Boolean} state
    */
-  toggleSortable(elem, state) {
+  toggleSortable(elem, stateArg) {
+    let state = stateArg
     const fType = componentType(elem)
     if (!fType) {
       return
diff --git a/src/lib/js/common/helpers.mjs b/src/lib/js/common/helpers.mjs
index c11bf48d..ef6a0a95 100644
--- a/src/lib/js/common/helpers.mjs
+++ b/src/lib/js/common/helpers.mjs
@@ -66,6 +66,12 @@ export const map = (arr, cb) => {
 
 const sanitizedAttributeNames = {}
 
+/**
+ * Sanitizes an attribute name to ensure it is valid for use in HTML.
+ *
+ * @param {string} name - The attribute name to sanitize.
+ * @returns {string} - The sanitized attribute name.
+ */
 export const safeAttrName = name => {
   const attributeMap = {
     className: 'class',
@@ -76,7 +82,7 @@ export const safeAttrName = name => {
   }
 
   const attributeName = attributeMap[name] || name
-  const sanitizedAttributeName = attributeName.replace(/^\d/, '').replace(/[^a-zA-Z0-9-:]/g, '')
+  const sanitizedAttributeName = attributeName.replace(/^\d+/, '').replace(/[^a-zA-Z0-9-:]/g, '')
 
   sanitizedAttributeNames[name] = sanitizedAttributeName
 
diff --git a/src/lib/js/common/helpers.spec.js b/src/lib/js/common/helpers.spec.js
deleted file mode 100644
index 38c13d33..00000000
--- a/src/lib/js/common/helpers.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { subtract } from './helpers'
-
-describe('Helpers', () => {
-  describe('subtract', () => {
-    it('should subtract the contents of one array from another', () => {
-      const remove = ['two']
-      const from = ['one', 'two', 'three']
-      expect(subtract(remove, from)).toEqual(['one', 'three'])
-    })
-  })
-})
diff --git a/src/lib/js/common/helpers.test.mjs b/src/lib/js/common/helpers.test.mjs
new file mode 100644
index 00000000..6dd50ff8
--- /dev/null
+++ b/src/lib/js/common/helpers.test.mjs
@@ -0,0 +1,32 @@
+import { test, suite } from 'node:test'
+import { safeAttrName, subtract } from './helpers.mjs'
+
+suite('Helpers', () => {
+  suite('subtract', () => {
+    test('should subtract the contents of one array from another', t => {
+      const remove = ['two']
+      const from = ['one', 'two', 'three']
+      t.assert.deepEqual(subtract(remove, from), ['one', 'three'])
+    })
+  })
+
+  suite('safeAttrName', () => {
+    test('should return "class" for "className"', t => {
+      t.assert.strictEqual(safeAttrName('className'), 'class')
+    })
+
+    test('should return sanitized attribute name', t => {
+      t.assert.strictEqual(safeAttrName('123data-name'), 'data-name')
+    })
+
+    test('should return the same name if no sanitization is needed', t => {
+      t.assert.strictEqual(safeAttrName('validName'), 'validName')
+    })
+
+    test('should cache sanitized attribute names', t => {
+      const firstCall = safeAttrName('123data-name')
+      const secondCall = safeAttrName('123data-name')
+      t.assert.strictEqual(firstCall, secondCall)
+    })
+  })
+})
diff --git a/src/lib/js/common/utils/index.mjs b/src/lib/js/common/utils/index.mjs
index beeb919e..b9e58e35 100644
--- a/src/lib/js/common/utils/index.mjs
+++ b/src/lib/js/common/utils/index.mjs
@@ -3,6 +3,7 @@ import {
   COMPONENT_TYPE_CLASSNAMES_REGEXP,
   COMPONENT_TYPE_CLASSNAMES_LOOKUP,
   CHILD_TYPE_MAP,
+  ANIMATION_SPEED_SLOW,
 } from '../../constants.js'
 import mergeWith from 'lodash/mergeWith.js'
 
@@ -273,20 +274,34 @@ export const typeIsChildOf = (childType, parentType) => CHILD_TYPE_MAP.get(paren
  * @param {number} limit - The number of milliseconds to throttle invocations to.
  * @returns {Function} - Returns the new throttled function.
  */
-export function throttle(callback, limit) {
-  let wait = false
-  return function () {
-    if (!wait) {
-      callback(...arguments)
-      wait = true
-      const timeout = setTimeout(() => {
-        wait = false
-        clearTimeout(timeout)
-      }, limit)
+export function throttle(callback, limit = ANIMATION_SPEED_SLOW) {
+  let lastCall = 0
+  return function (...args) {
+    const now = Date.now()
+    if (now - lastCall >= limit) {
+      lastCall = now
+      callback.apply(this, args)
     }
   }
 }
 
+/**
+ * Creates a debounced function that delays invoking the provided function until after the specified delay.
+ *
+ * @param {Function} fn - The function to debounce.
+ * @param {number} [delay=ANIMATION_SPEED_SLOW] - The number of milliseconds to delay invocation.
+ * @returns {Function} - A new debounced function.
+ */
+export function debounce(fn, delay = ANIMATION_SPEED_SLOW) {
+  let timeoutID
+  return function (...args) {
+    if (timeoutID) {
+      clearTimeout(timeoutID)
+    }
+    timeoutID = setTimeout(() => fn.apply(this, args), delay)
+  }
+}
+
 export function identity(value) {
   return value
 }
diff --git a/src/lib/js/common/utils/object.mjs b/src/lib/js/common/utils/object.mjs
index ecd7a800..9318b67c 100644
--- a/src/lib/js/common/utils/object.mjs
+++ b/src/lib/js/common/utils/object.mjs
@@ -46,24 +46,33 @@ export function shouldClone(value) {
  * @param {Object|Array} obj - The object or array to be deeply cloned.
  * @returns {Object|Array} - A deep clone of the input object or array.
  */
-export function deepClone(obj) {
+export function deepClone(obj, seen = new WeakMap()) {
   if (!shouldClone(obj)) return obj
 
+  if (seen.has(obj)) {
+    return seen.get(obj)
+  }
+
   if (Array.isArray(obj)) {
-    return obj.map(item => deepClone(item))
+    const clonedArray = obj.map(item => deepClone(item, seen))
+    seen.set(obj, clonedArray)
+    return clonedArray
   }
 
-  const cloned = {}
+  const clonedObject = {}
+  seen.set(obj, clonedObject)
+
   for (const key in obj) {
     if (Object.hasOwn(obj, key)) {
-      cloned[key] = deepClone(obj[key])
+      clonedObject[key] = deepClone(obj[key], seen)
     }
   }
-  return cloned
+
+  return clonedObject
 }
 
 /**
- * Merges two action objects. If a key already exists in the target object, 
+ * Merges two action objects. If a key already exists in the target object,
  * converts the value to an array and adds the value of the source object's key to the array.
  *
  * @param {Object} target - The target object to merge into.
diff --git a/src/lib/js/common/utils/object.test.mjs b/src/lib/js/common/utils/object.test.mjs
index e33a94bd..414b681b 100644
--- a/src/lib/js/common/utils/object.test.mjs
+++ b/src/lib/js/common/utils/object.test.mjs
@@ -1,128 +1,60 @@
-import assert from 'assert'
 import { test, suite } from 'node:test'
 
-import { set, get } from './object'
-
-suite('set', () => {
-  test('set should set a value at a simple path', () => {
-    const obj = {}
-    set(obj, 'a', 1)
-    assert.deepStrictEqual(obj, { a: 1 })
-  })
-
-  test('set should set a value at a nested path', () => {
-    const obj = {}
-    set(obj, 'a.b.c', 2)
-    assert.deepStrictEqual(obj, { a: { b: { c: 2 } } })
-  })
-
-  test('set should set a value at an array index path', () => {
-    const obj = {}
-    set(obj, 'a[0].b', 3)
-    assert.deepStrictEqual(obj, { a: [{ b: 3 }] })
-  })
-
-  test('set should overwrite existing value at the path', () => {
-    const obj = { a: { b: { c: 1 } } }
-    set(obj, 'a.b.c', 4)
-    assert.deepStrictEqual(obj, { a: { b: { c: 4 } } })
-  })
-
-  test('set should create nested objects if they do not exist', () => {
-    const obj = {}
-    set(obj, 'a.b.c.d', 5)
-    assert.deepStrictEqual(obj, { a: { b: { c: { d: 5 } } } })
-  })
-
-  test('set should create nested arrays if they do not exist', () => {
-    const obj = {}
-    set(obj, 'a[0].b[1].c', 6)
-    assert.deepStrictEqual(obj, { a: [{ b: [null, { c: 6 }] }] })
-  })
-
-  test('set should handle mixed object and array paths', () => {
-    const obj = {}
-    set(obj, 'a[0].b.c[1].d', 7)
-    assert.deepStrictEqual(obj, { a: [{ b: { c: [null, { d: 7 }] } }] })
-  })
-  test('set should set a value at a simple path', () => {
-    const obj = {}
-    set(obj, 'a', 1)
-    assert.deepStrictEqual(obj, { a: 1 })
-  })
-
-  test('set should set a value at a nested path', () => {
-    const obj = {}
-    set(obj, 'a.b.c', 2)
-    assert.deepStrictEqual(obj, { a: { b: { c: 2 } } })
-  })
-
-  test('set should set a value at an array index path', () => {
-    const obj = {}
-    set(obj, 'a[0].b', 3)
-    assert.deepStrictEqual(obj, { a: [{ b: 3 }] })
-  })
-
-  test('set should overwrite existing value at the path', () => {
-    const obj = { a: { b: { c: 1 } } }
-    set(obj, 'a.b.c', 4)
-    assert.deepStrictEqual(obj, { a: { b: { c: 4 } } })
-  })
-
-  test('set should create nested objects if they do not exist', () => {
-    const obj = {}
-    set(obj, 'a.b.c.d', 5)
-    assert.deepStrictEqual(obj, { a: { b: { c: { d: 5 } } } })
-  })
-
-  test('set should create nested arrays if they do not exist', () => {
-    const obj = {}
-    set(obj, 'a[0].b[1].c', 6)
-    assert.deepStrictEqual(obj, { a: [{ b: [null, { c: 6 }] }] })
-  })
-
-  test('set should handle mixed object and array paths', () => {
-    const obj = {}
-    set(obj, 'a[0].b.c[1].d', 7)
-    assert.deepStrictEqual(obj, { a: [{ b: { c: [null, { d: 7 }] } }] })
-  })
-})
-
-
-suite('get', () => {
-  test('get should retrieve a value at a simple path', () => {
-    const obj = { a: 1 }
-    const value = get(obj, 'a')
-    assert.strictEqual(value, 1)
-  })
-
-  test('get should retrieve a value at a nested path', () => {
-    const obj = { a: { b: { c: 2 } } }
-    const value = get(obj, 'a.b.c')
-    assert.strictEqual(value, 2)
-  })
-
-  test('get should retrieve a value at an array index path', () => {
-    const obj = { a: [{ b: 3 }] }
-    const value = get(obj, 'a[0].b')
-    assert.strictEqual(value, 3)
-  })
-
-  test('get should return undefined for non-existing path', () => {
-    const obj = { a: { b: { c: 1 } } }
-    const value = get(obj, 'a.b.d')
-    assert.strictEqual(value, undefined)
-  })
-
-  test('get should handle mixed object and array paths', () => {
-    const obj = { a: [{ b: { c: [null, { d: 7 }] } }] }
-    const value = get(obj, 'a[0].b.c[1].d')
-    assert.strictEqual(value, 7)
-  })
-
-  test('get should retrieve a value from a path array', () => {
-    const obj = { foo: [{ bar: 'baz' }] }
-    const value = get(obj, ['foo', '0', 'bar'])
-    assert.strictEqual(value, 'baz')
+import { deepClone, mergeActions } from './object.mjs'
+suite('object', () => {
+  suite('mergeActions', () => {
+    test('mergeActions should merge two objects with no conflicts', ({ assert }) => {
+      const target = { a: 1 }
+      const source = { b: 2 }
+      const result = mergeActions(target, source)
+      assert.deepStrictEqual(result, { a: 1, b: 2 })
+    })
+
+    test('mergeActions should merge two objects with conflicting keys', ({ assert }) => {
+      const target = { a: 1 }
+      const source = { a: 2 }
+      const result = mergeActions(target, source)
+      assert.deepStrictEqual(result, { a: [1, 2] })
+    })
+
+    test('mergeActions should merge two objects with array values', ({ assert }) => {
+      const target = { a: [1] }
+      const source = { a: 2 }
+      const result = mergeActions(target, source)
+      assert.deepStrictEqual(result, { a: [1, 2] })
+    })
+
+    suite('deepCLone', () => {
+      test('deepClone should deeply clone an object', ({ assert }) => {
+        const obj = { a: 1, b: { c: 2 } }
+        const result = deepClone(obj)
+        assert.deepStrictEqual(result, obj)
+        assert.notStrictEqual(result, obj)
+        assert.notStrictEqual(result.b, obj.b)
+      })
+
+      test('deepClone should deeply clone an array', ({ assert }) => {
+        const arr = [1, [2, 3]]
+        const result = deepClone(arr)
+        assert.deepStrictEqual(result, arr)
+        assert.notStrictEqual(result, arr)
+        assert.notStrictEqual(result[1], arr[1])
+      })
+
+      test('deepClone should return non-object values as is', ({ assert }) => {
+        assert.strictEqual(deepClone(1), 1)
+        assert.strictEqual(deepClone('string'), 'string')
+        assert.strictEqual(deepClone(null), null)
+        assert.strictEqual(deepClone(undefined), undefined)
+      })
+
+      test('deepClone should handle objects with circular references', ({ assert }) => {
+        const obj = { a: 1 }
+        obj.self = obj
+        const result = deepClone(obj)
+        assert.strictEqual(result.a, 1)
+        assert.strictEqual(result.self, result)
+      })
+    })
   })
 })
diff --git a/src/lib/js/components/__snapshots__/autocomplete.test.mjs.snapshot b/src/lib/js/components/__snapshots__/autocomplete.test.mjs.snapshot
new file mode 100644
index 00000000..d0d60c80
--- /dev/null
+++ b/src/lib/js/components/__snapshots__/autocomplete.test.mjs.snapshot
@@ -0,0 +1,22 @@
+exports[`Autolinker > componentOptions utility > should generate an array of dom options 1`] = `
+[
+  {
+    "value": "test.id",
+    "textLabel": "config.label",
+    "htmlLabel": [
+      "config.label ",
+      {
+        "tag": "span",
+        "content": "",
+        "className": "component-label-count"
+      },
+      {
+        "tag": "span",
+        "content": " undefined",
+        "className": "component-type"
+      }
+    ],
+    "selected": true
+  }
+]
+`;
diff --git a/src/lib/js/components/autocomplete.js b/src/lib/js/components/autocomplete.mjs
similarity index 88%
rename from src/lib/js/components/autocomplete.js
rename to src/lib/js/components/autocomplete.mjs
index d7ba931c..a0862eb9 100644
--- a/src/lib/js/components/autocomplete.js
+++ b/src/lib/js/components/autocomplete.mjs
@@ -16,7 +16,10 @@ let optionsCache
  * @param {Array} arr labels
  * @param {String} label
  */
-export const labelCount = (arr, label) => arr.reduce((n, x) => n + (x === label), 0)
+export const labelCount = (arr, label) => {
+  const count = arr.reduce((n, x) => n + (x === label), 0)
+  return count > 1 ? `(${count})` : ''
+}
 
 /**
  * Find or generate a label for components and external data
@@ -38,18 +41,31 @@ const getComponentLabel = ({ name, id, ...component }) => {
   return label || (name === 'external' && externalLabel(name, id))
 }
 
+const makeOption = ({ id, textLabel, htmlLabel, selectedId }) => {
+  const option = {
+    value: id,
+    textLabel,
+    htmlLabel,
+  }
+  if (id === selectedId) {
+    option.selected = true
+  }
+
+  return option
+}
+
 /**
  * Generate options for the autolinker component
- * @param {String} selected option value
+ * @param {String} selectedId option value
  * @return {Array} option config objects
  */
-export const componentOptions = selected => {
+export const componentOptions = selectedId => {
   const labels = []
   const flatList = Components.flatList()
   const options = Object.entries(flatList).map(([id, component]) => {
     const label = getComponentLabel(component)
     if (label) {
-      const type = {
+      const typeConfig = {
         tag: 'span',
         content: ` ${toTitleCase(component.name)}`,
         className: 'component-type',
@@ -57,12 +73,15 @@ export const componentOptions = selected => {
       const labelKey = `${component.name}.${label}`
       labels.push(labelKey)
       const count = labelCount(labels, labelKey)
+
       const countConfig = {
         tag: 'span',
-        content: count > 1 && `(${count})`,
+        content: count,
         className: 'component-label-count',
       }
-      return dom.makeOption([id, [`${label} `, countConfig, type]], selected)
+      const htmlLabel = [`${label} `, countConfig, typeConfig]
+      const textLabel = [label, count].join(' ').trim()
+      return makeOption({ id, textLabel, htmlLabel, selectedId })
     }
   })
 
@@ -172,9 +191,10 @@ export default class Autocomplete {
           this.showList(activeOption)
         }
 
-        this.hiddenField.value = evt.target.value
-        this.value = evt.target.value
-        this.runEvent('onChange', { target: this.hiddenField })
+        const value = evt.target.value.trim()
+
+        this.hiddenField.value = value
+        this.value = value
       },
     }
 
@@ -226,7 +246,9 @@ export default class Autocomplete {
     }
     const options = optionsCache || this.generateOptions()
 
-    options.forEach(option => this.list.appendChild(option))
+    for (const option of options) {
+      this.list.appendChild(option)
+    }
   }
 
   generateOptions() {
@@ -240,15 +262,13 @@ export default class Autocomplete {
     }
 
     optionsCache = options.map(optionData => {
-      const value = optionData.value
-      let [label] = optionData.label
-      label = label.trim()
+      const { value, textLabel, htmlLabel } = optionData
       const optionConfig = {
         tag: 'li',
-        children: optionData.label,
+        children: htmlLabel,
         dataset: {
           value,
-          label,
+          label: textLabel,
         },
         className: `${BASE_NAME}-list-item`,
         action: {
@@ -337,15 +357,15 @@ export default class Autocomplete {
    */
   selectOption(selectedOption, list = this.list) {
     const options = list.querySelectorAll('li')
-    for (let i = 0; i < options.length; i++) {
+    for (const option of options) {
       const {
         dataset: { value },
-      } = options[i]
-      options[i].classList.remove('active-option')
+      } = option
+      option.classList.remove('active-option')
 
       if (value) {
         const component = Components.getAddress(value)
-        component.dom && component.dom.classList.remove(HIGHLIGHT_CLASS_NAME)
+        component.dom?.classList.remove(HIGHLIGHT_CLASS_NAME)
       }
     }
     if (selectedOption) {
@@ -359,8 +379,8 @@ export default class Autocomplete {
    */
   removeHighlight() {
     const highlightedComponents = document.getElementsByClassName(HIGHLIGHT_CLASS_NAME)
-    for (let i = 0; i < highlightedComponents.length; i++) {
-      highlightedComponents[i].classList.remove(HIGHLIGHT_CLASS_NAME)
+    for (const component of highlightedComponents) {
+      component.classList.remove(HIGHLIGHT_CLASS_NAME)
     }
   }
 
@@ -374,7 +394,7 @@ export default class Autocomplete {
 
     if (value) {
       const component = Components.getAddress(value)
-      component.dom && component.dom.classList.add(HIGHLIGHT_CLASS_NAME)
+      component.dom?.classList.add(HIGHLIGHT_CLASS_NAME)
     }
   }
 
@@ -398,7 +418,6 @@ export default class Autocomplete {
    */
   setValue(target) {
     const { label, value } = target.dataset
-
     this.displayField.value = label
     this.hiddenField.value = value
     this.value = value
@@ -411,10 +430,10 @@ export default class Autocomplete {
   }
 
   runEvent(eventName, evt) {
-    this.events.forEach(([key, event]) => {
+    for (const [key, event] of this.events) {
       if (key === eventName) {
         event(evt)
       }
-    })
+    }
   }
 }
diff --git a/src/lib/js/components/autocomplete.spec.js b/src/lib/js/components/autocomplete.spec.js
deleted file mode 100644
index 53689b41..00000000
--- a/src/lib/js/components/autocomplete.spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { componentOptions, labelCount } from './autocomplete'
-
-jest.mock('./index', () => ({
-  flatList: jest.fn(() => ({
-    'test.id': {
-      get: key => key,
-    },
-  })),
-}))
-
-describe('Autolinker', () => {
-  describe('componentOptions utility', () => {
-    it('should generate an array of dom options', () => {
-      const options = componentOptions('test.id')
-      expect(options).toMatchSnapshot()
-    })
-  })
-  describe('labelCount utility', () => {
-    const labels = ['Text', 'Text', 'Text', 'TextArea']
-    it('should return number of duplicates of "Text" in an array', () => {
-      const count = labelCount(labels, 'Text')
-      expect(count).toBe(3)
-    })
-    it('should return number of duplicates of "TextArea" in an array', () => {
-      const count = labelCount(labels, 'TextArea')
-      expect(count).toBe(1)
-    })
-    it('should return number of duplicates of "Select" in an array', () => {
-      const count = labelCount(labels, 'Select')
-      expect(count).toBe(0)
-    })
-  })
-})
diff --git a/src/lib/js/components/autocomplete.test.mjs b/src/lib/js/components/autocomplete.test.mjs
new file mode 100644
index 00000000..b5da9b9c
--- /dev/null
+++ b/src/lib/js/components/autocomplete.test.mjs
@@ -0,0 +1,39 @@
+import { test, suite, mock } from 'node:test'
+import { componentOptions, labelCount } from './autocomplete.mjs'
+import components from './index.js'
+
+const mockFlatList = {
+  'test.id': {
+    get: key => key,
+  },
+}
+
+mock.method(components, 'flatList', () => mockFlatList)
+
+suite('Autolinker', () => {
+  suite('componentOptions utility', () => {
+    test('should generate an array of dom options', ({ assert }) => {
+      const options = componentOptions('test.id')
+      assert.snapshot(options)
+    })
+  })
+
+  suite('labelCount utility', () => {
+    const labels = ['Text', 'Text', 'Text', 'TextArea']
+
+    test('should return number of duplicates of "Text" in an array', ({ assert }) => {
+      const count = labelCount(labels, 'Text')
+      assert.strictEqual(count, '(3)')
+    })
+
+    test('should return number of duplicates of "TextArea" in an array', ({ assert }) => {
+      const count = labelCount(labels, 'TextArea')
+      assert.strictEqual(count, '')
+    })
+
+    test('should return number of duplicates of "Select" in an array', ({ assert }) => {
+      const count = labelCount(labels, 'Select')
+      assert.strictEqual(count, '')
+    })
+  })
+})
diff --git a/src/lib/js/components/fields/edit-panel-item.mjs b/src/lib/js/components/fields/edit-panel-item.mjs
index c3013977..11a28541 100644
--- a/src/lib/js/components/fields/edit-panel-item.mjs
+++ b/src/lib/js/components/fields/edit-panel-item.mjs
@@ -5,7 +5,7 @@ import animate from '../../common/animation.js'
 import { CONDITION_INPUT_ORDER, FIELD_PROPERTY_MAP, OPERATORS, ANIMATION_SPEED_BASE } from '../../constants.js'
 import events from '../../common/events.js'
 import Components from '../index.js'
-import Autocomplete from '../autocomplete.js'
+import Autocomplete from '../autocomplete.mjs'
 import { isExternalAddress, isAddress, isBoolKey } from '../../common/utils/index.mjs'
 import { toTitleCase } from '../../common/utils/string.mjs'
 
@@ -50,7 +50,9 @@ const createOptions = (fieldVal, selected) => {
 
 const addOptions = (select, options) => {
   dom.empty(select)
-  options.forEach(option => select.add(option))
+  for (const option of options) {
+    select.add(option)
+  }
 }
 
 const inputConfigBase = ({ key, value, type = 'text', checked }) => {
@@ -101,7 +103,6 @@ const ITEM_INPUT_TYPE_MAP = {
   },
   object: val => {
     return Object.entries(val).map(([key, val]) => {
-      console.log(dom.childType(val))
       return ITEM_INPUT_TYPE_MAP[dom.childType(val)](key, val)
     })
   },
@@ -119,7 +120,6 @@ const INPUT_TYPE_ACTION = {
         )
       }
       field.set(dataKey, checked)
-      field.updatePreview()
     },
   }),
   string: (dataKey, field) => ({
@@ -130,13 +130,11 @@ const INPUT_TYPE_ACTION = {
   number: (dataKey, field) => ({
     input: ({ target: { value } }) => {
       field.set(dataKey, Number(value))
-      field.updatePreview()
     },
   }),
   array: (dataKey, field) => ({
     change: ({ target: { value } }) => {
       field.set(dataKey, value)
-      field.updatePreview()
     },
   }),
   object: () => ({}),
@@ -300,12 +298,12 @@ export default class EditPanelItem {
       ],
     ])
 
-    fields.forEach(field => {
+    for (const field of fields) {
       const action = actions.get(field.className)
       if (action) {
         action(field)
       }
-    })
+    }
   }
 
   conditionInput = (key, val, conditionType, i) => {
@@ -316,7 +314,7 @@ export default class EditPanelItem {
 
     const createConditionSelect = (key, propertyValue, i18nKey) => {
       const options = createOptions(i18nKey || key, propertyValue)
-      const propertyFieldConfig = ITEM_INPUT_TYPE_MAP['array'](`condition.${key}`)
+      const propertyFieldConfig = ITEM_INPUT_TYPE_MAP.array(`condition.${key}`)
 
       propertyFieldConfig.action = {
         change: conditionChangeAction,
@@ -352,7 +350,7 @@ export default class EditPanelItem {
       comparison: value => createConditionSelect('comparison', value),
       logical: value => createConditionSelect('logical', value),
       source: (value, type = 'source') => {
-        const componentInput = ITEM_INPUT_TYPE_MAP['autocomplete'](`condition.${type}`, value, conditionType)
+        const componentInput = ITEM_INPUT_TYPE_MAP.autocomplete(`condition.${type}`, value, conditionType)
         // add to condition map for the type so we can perform reverse lookup when editing a field connected to this condition
         Components.setConditionMap(value, field)
 
@@ -368,7 +366,7 @@ export default class EditPanelItem {
       targetProperty: value => createConditionSelect('targetProperty', value, 'field.property'),
       target: value => segmentTypes.source(value, 'target'),
       value: value => {
-        const valueField = ITEM_INPUT_TYPE_MAP['string']('condition.value', value)
+        const valueField = ITEM_INPUT_TYPE_MAP.string('condition.value', value)
         valueField.action = {
           input: conditionChangeAction,
         }
@@ -423,7 +421,7 @@ export default class EditPanelItem {
 
     const inputTypeConfig = { ...{ config: {}, attrs: {} }, ...ITEM_INPUT_TYPE_MAP[valType](key, val) }
     const dataKey = this.itemKey.replace(/.\d+$/, index => `${index}.${key}`)
-    const labelKey = dataKey.split('.').filter(Number.isNaN).join('.')
+    const labelKey = dataKey.split('.').filter(Number.isNaN).join('.') || key
 
     const [id, name] = [[...this.itemKey.split('.'), key], [key]].map(attrVars =>
       [this.field.id, ...attrVars].filter(Boolean).join('-'),
@@ -432,7 +430,7 @@ export default class EditPanelItem {
     inputTypeConfig.config = {
       ...inputTypeConfig.config,
       ...{
-        label: this.panelName !== 'options' && labelHelper(labelKey),
+        label: this.panelName !== 'options' && (labelHelper(labelKey) || toTitleCase(labelKey)),
         labelAfter: false,
       },
     }
diff --git a/src/lib/js/components/fields/field.js b/src/lib/js/components/fields/field.js
index 160a0645..1fbab3be 100644
--- a/src/lib/js/components/fields/field.js
+++ b/src/lib/js/components/fields/field.js
@@ -1,13 +1,12 @@
 import i18n from '@draggable/i18n'
 import dom from '../../common/dom.js'
 import Panels from '../panels.js'
-import { clone, throttle, unique } from '../../common/utils/index.mjs'
+import { clone, debounce, throttle, unique } from '../../common/utils/index.mjs'
 import EditPanel from './edit-panel.js'
 import Component from '../component.js'
 import { FIELD_CLASSNAME, CONDITION_TEMPLATE, ANIMATION_SPEED_BASE } from '../../constants.js'
 import Components from '../index.js'
 import { toTitleCase } from '../../common/utils/string.mjs'
-import { mergeActions } from '../../common/utils/object.mjs'
 import controls from '../controls/index.js'
 
 const DEFAULT_DATA = () => ({
@@ -26,6 +25,7 @@ export default class Field extends Component {
   constructor(fieldData = Object.create(null)) {
     super('field', { ...DEFAULT_DATA(), ...fieldData })
 
+    this.debouncedUpdateEditPanels = debounce(this.updateEditPanels)
     this.label = dom.create(this.labelConfig)
     this.preview = dom.create({})
     this.editPanels = []
@@ -156,24 +156,21 @@ export default class Field extends Component {
   /**
    * Updates the conditions panel when linked field data changes
    */
-  updateConditionsPanel = () => {
-    const updateConditionsTimeout = setTimeout(() => {
-      const newConditionsPanel = this.editPanels.find(({ name }) => name === 'conditions')
-      if (!newConditionsPanel) {
-        return null
-      }
-      const newProps = newConditionsPanel.createProps()
-      const currentConditionsProps = this.dom.querySelector('.field-edit-conditions')
-      currentConditionsProps.parentElement.replaceChild(newProps, currentConditionsProps)
-      clearTimeout(updateConditionsTimeout)
-    }, ANIMATION_SPEED_BASE)
-  }
+  updateConditionsPanel = throttle(() => {
+    const newConditionsPanel = this.editPanels.find(({ name }) => name === 'conditions')
+    if (!newConditionsPanel) {
+      return null
+    }
+    const newProps = newConditionsPanel.createProps()
+    const currentConditionsProps = this.dom.querySelector('.field-edit-conditions')
+    currentConditionsProps.parentElement.replaceChild(newProps, currentConditionsProps)
+  }, ANIMATION_SPEED_BASE)
 
   /**
    * Updates a field's preview
    * @return {Object} fresh preview
    */
-  updatePreview = throttle(() => {
+  updatePreview = () => {
     if (!this.preview.parentElement) {
       return null
     }
@@ -181,23 +178,15 @@ export default class Field extends Component {
     const newPreview = dom.create(this.fieldPreview(), true)
     this.preview.parentElement.replaceChild(newPreview, this.preview)
     this.preview = newPreview
-  }, ANIMATION_SPEED_BASE)
+  }
 
-  /**
-   * Generate the markup for field edit mode
-   * @return {Object} fieldEdit element config
-   */
-  get fieldEdit() {
+  updateEditPanels = () => {
     this.editPanels = []
     const editable = ['object', 'array']
-    const noPanels = ['config', 'meta', 'action', 'events', ...this.config.panels.disabled]
     const panelOrder = unique([...this.config.panels.order, ...Object.keys(this.data)])
+    const noPanels = ['config', 'meta', 'action', 'events', ...this.config.panels.disabled]
     const allowedPanels = panelOrder.filter(panelName => !noPanels.includes(panelName))
 
-    const fieldEdit = {
-      className: ['field-edit', 'slide-toggle', 'formeo-panels-wrap'],
-    }
-
     for (const panelName of allowedPanels) {
       const panelData = this.get(panelName)
       const propType = dom.childType(panelData)
@@ -213,51 +202,75 @@ export default class Field extends Component {
       displayType: 'auto',
     }
 
+    this.panels = new Panels(panelsData)
+    if (this.dom) {
+      this.dom.querySelector('.panel-nav').replaceWith(this.panels.panelNav)
+      this.dom.querySelector('.panels').replaceWith(this.panels.panelsWrap)
+    }
+  }
+
+  /**
+   * Generate the markup for field edit mode
+   * @return {Object} fieldEdit element config
+   */
+  get fieldEdit() {
+    const fieldEdit = {
+      className: ['field-edit', 'slide-toggle', 'formeo-panels-wrap'],
+    }
+
+    this.updateEditPanels()
+
     const editPanelLength = this.editPanels.length
 
     if (editPanelLength) {
-      this.panels = new Panels(panelsData)
       fieldEdit.className.push(`panel-count-${editPanelLength}`)
       fieldEdit.content = [this.panels.panelNav, this.panels.panelsWrap]
       this.panelNav = this.panels.nav
       this.resizePanelWrap = this.panels.nav.refresh
-      fieldEdit.action = {
-        onRender: () => {
+    }
+
+    fieldEdit.action = {
+      onRender: () => {
+        if (editPanelLength === 0) {
+          // If this element has no edit panels, remove the edit toggle
+          const field = this.dom
+          const editToggle = field.querySelector('.item-edit-toggle')
+          const fieldActions = field.querySelector('.field-actions')
+          const actionButtons = fieldActions.getElementsByTagName('button')
+          fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`
+          dom.remove(editToggle)
+        } else {
           this.resizePanelWrap()
-          if (!editPanelLength) {
-            // If this element has no edit panels, remove the edit toggle
-            const field = this.dom
-            const editToggle = field.querySelector('.item-edit-toggle')
-            const fieldActions = field.querySelector('.field-actions')
-            const actionButtons = fieldActions.getElementsByTagName('button')
-            fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`
-            dom.remove(editToggle)
-          }
-        },
-      }
+        }
+      },
     }
 
-    return fieldEdit
+    return dom.create(fieldEdit)
+  }
+
+  toggleCheckedOptions = (optionIndex, type) => {
+    const updatedOptionData = this.get('options').map((option, index) => {
+      const isCurrentIndex = index === optionIndex
+      if (type === 'radio') {
+        option.selected = isCurrentIndex
+      } else {
+        option.checked = isCurrentIndex ? !option.checked : option.checked
+      }
+
+      return option
+    })
+    this.set('options', updatedOptionData)
   }
 
   get defaultPreviewActions() {
     return {
       change: evt => {
         const { target } = evt
-        const { checked, type } = target
-        // @todo these kind of events should be added to control definitions
+        const { type } = target
         if (['checkbox', 'radio'].includes(type)) {
           const optionIndex = +target.id.split('-').pop()
-          // uncheck options if radio
-          if (type === 'radio') {
-            this.set(
-              'options',
-              this.get('options').map(option => ({ ...option, selected: false })),
-            )
-          }
-
-          const checkType = type === 'checkbox' ? 'checked' : 'selected'
-          this.set(`options.${optionIndex}.${checkType}`, checked)
+          this.toggleCheckedOptions(optionIndex, type)
+          this.debouncedUpdateEditPanels()
         }
       },
       click: evt => {
@@ -268,6 +281,7 @@ export default class Field extends Component {
       input: evt => {
         if (['input', 'meter', 'progress', 'button'].includes(this.data.tag)) {
           super.set('attrs.value', evt.target.value)
+          this.debouncedUpdateEditPanels()
         }
 
         if (evt.target.contentEditable) {
diff --git a/src/lib/sass/components/_column.scss b/src/lib/sass/components/_column.scss
index 67416c65..ba0db1ac 100644
--- a/src/lib/sass/components/_column.scss
+++ b/src/lib/sass/components/_column.scss
@@ -124,6 +124,12 @@
       opacity: 0;
     }
   }
+
+  &:has(.editing-field) {
+    .column-actions {
+      display: none;
+    }
+  }
 }
 
 // this is column styleing in the row edit window
diff --git a/src/lib/sass/components/_row.scss b/src/lib/sass/components/_row.scss
index 0098234c..db1fe2d2 100644
--- a/src/lib/sass/components/_row.scss
+++ b/src/lib/sass/components/_row.scss
@@ -82,6 +82,12 @@
       opacity: 0;
     }
   }
+
+  &:has(.editing-field) {
+    .row-actions {
+      display: none;
+    }
+  }
 }
 
 .row-moving {
diff --git a/src/lib/sass/components/_stage.scss b/src/lib/sass/components/_stage.scss
index ae7c2a7f..b04e85d0 100644
--- a/src/lib/sass/components/_stage.scss
+++ b/src/lib/sass/components/_stage.scss
@@ -53,15 +53,6 @@
   @include mixins.breakpoint("phone-lrg") {
     width: calc(100% - 50px);
   }
-
-  &:has(.editing-field) {
-    .column-actions {
-      display: none;
-    }
-    .row-actions {
-      display: none;
-    }
-  }
 }
 
 .editing-stage {