@bpmn-io/form-js-editor 1.0.0-alpha.9 → 1.1.0

package/dist/index.cjs

@@ -15,6 +15,25 @@ var feelers = require('feelers');
 var FeelEditor = require('@bpmn-io/feel-editor');
 var Big = require('big.js');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY$2 = 1000;
 var slice = Array.prototype.slice;
@@ -515,10 +534,10 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
-/**
- * A factory to create a configurable debouncer.
- *
- * @param {number|boolean} [config=true]
+/**
+ * A factory to create a configurable debouncer.
+ *
+ * @param {number|boolean} [config=true]
  */
 function DebounceFactory(config = true) {
   const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -531,11 +550,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+  /**
+   * @constructor
+   *
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -598,11 +617,11 @@ class FieldFactory {
 FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
 
 class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
-  /**
-   * Updates a form fields id.
-   *
-   * @param {Object} formField
-   * @param {string} newId
+  /**
+   * Updates a form fields id.
+   *
+   * @param {Object} formField
+   * @param {string} newId
    */
   updateId(formField, newId) {
     this._validateId(newId);
@@ -623,13 +642,13 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
     }
   }
 
-  /**
-   * Validate the suitability of the given id and signals a problem
-   * with an exception.
-   *
-   * @param {string} id
-   *
-   * @throws {Error} if id is empty or already assigned
+  /**
+   * Validate the suitability of the given id and signals a problem
+   * with an exception.
+   *
+   * @param {string} id
+   *
+   * @throws {Error} if id is empty or already assigned
    */
   _validateId(id) {
     if (!id) {
@@ -646,11 +665,11 @@ const MAX_COLUMNS = 16;
 const MIN_COLUMNS = 2;
 const MAX_FIELDS_PER_ROW = 4;
 class FormLayoutValidator {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormLayouter').default } formLayouter
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('./FormLayouter').default } formLayouter
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formLayouter, formFieldRegistry) {
     this._formLayouter = formLayouter;
@@ -710,11 +729,11 @@ function calculateMaxColumnsWithAuto(autoCols) {
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../core/FieldFactory').default } fieldFactory
-   * @param { import('../core/FormLayouter').default } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../core/FieldFactory').default } fieldFactory
+   * @param { import('../core/FormLayouter').default } formLayouter
    */
   constructor(formFieldRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -722,21 +741,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema creating rows, fields, attaching additional
-   * information to each field and adding fields to the
-   * field registry.
-   *
-   * Additional information attached:
-   *
-   *   * `id` (unless present)
-   *   * `_parent`
-   *   * `_path`
-   *
-   * @param {any} schema
-   *
-   * @typedef {{ warnings: Error[], schema: any }} ImportResult
-   * @returns {ImportResult}
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
    */
   importSchema(schema) {
     // TODO: Add warnings
@@ -754,12 +773,12 @@ class Importer {
     }
   }
 
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -796,11 +815,11 @@ class Importer {
     return field;
   }
 
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -825,22 +844,22 @@ function editorFormFieldClasses(type, {
   });
 }
 
-/**
- * Add a dragger that calls back the passed function with
- * { event, delta } on drag.
- *
- * @example
- *
- * function dragMove(event, delta) {
- *   // we are dragging (!!)
- * }
- *
- * domElement.addEventListener('dragstart', dragger(dragMove));
- *
- * @param {Function} fn
- * @param {Element} dragPreview
- *
- * @return {Function} drag start callback function
+/**
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
+ *
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ * @param {Element} dragPreview
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger(fn, dragPreview) {
   let self;
@@ -881,12 +900,12 @@ function createDragger(fn, dragPreview) {
   return onDragStart;
 }
 
-/**
- * Throttle function call according UI update cycle.
- *
- * @param  {Function} fn
- *
- * @return {Function} throttled fn
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
  */
 function throttle(fn) {
   let active = false;
@@ -915,11 +934,11 @@ const DragAndDropContext = preact.createContext({
 });
 var DragAndDropContext$1 = DragAndDropContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService$1(type, strict) {}
 const FormEditorContext = preact.createContext({
@@ -934,83 +953,146 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var SvgClose = function SvgClose(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "currentColor"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+    clipRule: "evenodd"
+  })));
+};
+var CloseIcon = SvgClose;
+
+var _path$3, _path2$1;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var CloseIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
-  width: "16",
-  height: "16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z"
-})));
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 16,
+    height: 16,
+    x: 0.536,
+    fill: "#fff",
+    rx: 3,
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v16H0z",
+    style: {
+      mixBlendMode: "multiply"
+    },
+    transform: "translate(.536)"
+  }), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
+  })));
+};
+var DeleteIcon$1 = SvgDelete;
 
+var _path$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var DeleteIcon$1 = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "none"
-}, props), /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "16",
-  x: ".536",
-  fill: "#fff",
-  rx: "3",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  d: "M.536 0h16v16h-16z",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
-})));
+var SvgDraggable = function SvgDraggable(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: 16,
+    height: 16,
+    fill: "currentcolor",
+    viewBox: "0 0 32 32"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 0h32v32H0z",
+    style: {
+      fill: "none"
+    }
+  }));
+};
+var DraggableIcon = SvgDraggable;
 
+var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var DraggableIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "currentcolor",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h32v32H0z",
-  fill: "none"
-})));
+var SvgSearch = function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 15,
+    height: 15,
+    fill: "none"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
+  })));
+};
+var SearchIcon = SvgSearch;
 
+var _path, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SearchIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "15",
-  height: "15",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
-  fill: "currentColor"
-})));
+var SvgEmptyForm = function SvgEmptyForm(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 126,
+    height: 96,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FF832B",
+    fillRule: "evenodd",
+    d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6h5Zm0-16h-5V46h5v16Zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3v8ZM43 19v5H27v-5h16Zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3h8ZM0 46h5v16H0V46Zm0 32h5v6h6v5H3a3 3 0 0 1-3-3v-8Zm27 11v-5h16v5H27Z",
+    clipRule: "evenodd"
+  })), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 70,
+    height: 70,
+    fill: "#E5E5E5",
+    rx: 3,
+    transform: "matrix(-1 0 0 1 94 0)"
+  })), _mask || (_mask = /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "EmptyForm_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  }))), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#393939",
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#393939",
+    d: "M75.43 45.185 70.6 46.48l-2.241-8.365 8.365 2.242-1.294 4.83Zm11.655 43.499 4.037 2.95-6.163 8.432-2.704-10.088 4.83-1.294Zm31.844-31.843 1.294-4.83 10.088 2.703-8.432 6.163-2.95-4.036Zm-11.044 8.072-3.535 3.535-4.128-4.127 4.713-3.445 2.95 4.037Zm8.557 8.556 3.535-3.535 3.536 3.535-3.536 3.536-3.535-3.536Zm-12.728 12.728 3.536 3.536-3.536 3.535-3.536-3.535 3.536-3.536Zm-8.557-8.556-4.036-2.951 3.444-4.713 4.128 4.128-3.536 3.535ZM80.26 43.89 91.915 87.39l-9.66 2.588L70.6 46.48l9.66-2.588Zm37.375 17.78L74.136 50.014l2.588-9.66 43.499 11.656-2.589 9.66Zm-12.699-.795 11.043-8.072 5.901 8.073-11.043 8.072-5.901-8.073Zm7.971 16.129-8.556-8.557 7.071-7.07 8.556 8.556-7.071 7.07Zm-12.728 5.657 12.728-12.728 7.071 7.07-12.727 12.729-7.072-7.071Zm-1.485-8.557 8.557 8.557-7.072 7.07-8.556-8.556 7.07-7.071ZM83.049 85.733 91.12 74.69l8.073 5.901-8.072 11.044-8.073-5.902Z",
+    mask: "url(#EmptyForm_svg__a)"
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "m69.431 39.163-9.192-9.192"
+  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M1.5-1.5h8",
+    transform: "matrix(-1 0 0 1 68.213 50.123)"
+  })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M78.969 36.367v-8"
+  })));
+};
+var EmptyFormIcon = SvgEmptyForm;
 
 function EditorText(props) {
   const {
@@ -1020,7 +1102,7 @@ function EditorText(props) {
   const Icon = formJsViewer.iconsByType('text');
   const templating = useService$1('templating');
   const expressionLanguage = useService$1('expressionLanguage');
-  if (!text) {
+  if (!text || !text.trim()) {
     return jsxRuntime.jsx("div", {
       class: editorFormFieldClasses(type),
       children: jsxRuntime.jsxs("div", {
@@ -1206,23 +1288,23 @@ var Slot = (props => {
   return fillsAndSeparators;
 });
 
-/**
- * Creates a Fragment for a fill.
- *
- * @param {Object} fill Fill to be rendered
- * @returns {Object} Preact Fragment containing fill's children
+/**
+ * Creates a Fragment for a fill.
+ *
+ * @param {Object} fill Fill to be rendered
+ * @returns {Object} Preact Fragment containing fill's children
  */
 const FillFragment = fill => jsxRuntime.jsx(preact.Fragment, {
   children: fill.children
 }, fill.id);
 
-/**
- * Creates an array of fills, with separators inserted between groups.
- *
- * @param {Array} groups Groups of fills
- * @param {Function} fillRenderer Function to create a fill
- * @param {Function} separatorRenderer Function to create a separator
- * @returns {Array} Array of fills and separators
+/**
+ * Creates an array of fills, with separators inserted between groups.
+ *
+ * @param {Array} groups Groups of fills
+ * @param {Function} fillRenderer Function to create a fill
+ * @param {Function} separatorRenderer Function to create a separator
+ * @returns {Array} Array of fills and separators
  */
 const buildFills = (groups, fillRenderer, separatorRenderer) => {
   const result = [];
@@ -1240,8 +1322,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
   return result;
 };
 
-/**
- * Groups fills by group name property.
+/**
+ * Groups fills by group name property.
  */
 const _groupByGroupName = fills => {
   const groups = [];
@@ -1261,8 +1343,8 @@ const _groupByGroupName = fills => {
   return Object.keys(groupsById).sort().map(id => groupsById[id]);
 };
 
-/**
- * Compares fills by priority.
+/**
+ * Compares fills by priority.
  */
 const _comparePriority = (a, b) => {
   return (b.priority || 0) - (a.priority || 0);
@@ -1490,19 +1572,19 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
 const DRAG_NO_MOVE_CLS = 'fjs-no-move';
 const ERROR_DROP_CLS = 'fjs-error-drop';
 
-/**
- * @typedef { { id: String, components: Array<any> } } FormRow
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
  */
 
 class Dragging {
-  /**
-   * @constructor
-   *
-   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../../core/FormLayouter').default } formLayouter
-   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-   * @param { import('../../core/EventBus').default } eventBus
-   * @param { import('../modeling/Modeling').default } modeling
+  /**
+   * @constructor
+   *
+   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../../core/FormLayouter').default } formLayouter
+   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+   * @param { import('../../core/EventBus').default } eventBus
+   * @param { import('../modeling/Modeling').default } modeling
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1512,13 +1594,13 @@ class Dragging {
     this._modeling = modeling;
   }
 
-  /**
-   * Calculcates position in form schema given the dropped place.
-   *
-   * @param { FormRow } targetRow
-   * @param { any } targetFormField
-   * @param { HTMLElement } sibling
-   * @returns { number }
+  /**
+   * Calculcates position in form schema given the dropped place.
+   *
+   * @param { FormRow } targetRow
+   * @param { any } targetFormField
+   * @param { HTMLElement } sibling
+   * @returns { number }
    */
   getTargetIndex(targetRow, targetFormField, sibling) {
     /** @type HTMLElement */
@@ -1620,8 +1702,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -1921,7 +2003,19 @@ function ContextPad(props) {
   });
 }
 function Empty(props) {
-  return null;
+  return jsxRuntime.jsx("div", {
+    class: "fjs-empty-editor",
+    children: jsxRuntime.jsxs("div", {
+      class: "fjs-empty-editor-card",
+      children: [jsxRuntime.jsx(EmptyFormIcon, {}), jsxRuntime.jsx("h2", {
+        children: "Build your form"
+      }), jsxRuntime.jsx("span", {
+        children: "Drag and drop components here to start designing."
+      }), jsxRuntime.jsx("span", {
+        children: "Use the preview window to test your form."
+      })]
+    })
+  });
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
@@ -2018,7 +2112,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsxRuntime.jsx("div", {
-    style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
+    style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -3077,10 +3171,10 @@ function updateRow(formField, rowId) {
 }
 
 class AddFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3141,10 +3235,10 @@ class AddFormFieldHandler {
 AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class EditFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3207,10 +3301,10 @@ class EditFormFieldHandler {
 EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class MoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3299,10 +3393,10 @@ class MoveFormFieldHandler {
 MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class RemoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3362,9 +3456,9 @@ class RemoveFormFieldHandler {
 RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class UpdateIdClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3397,9 +3491,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3865,8 +3959,8 @@ class ValidateBehavior extends CommandInterceptor {
   constructor(eventBus) {
     super(eventBus);
 
-    /**
-     * Remove custom validation if <validationType> is about to be added.
+    /**
+     * Remove custom validation if <validationType> is about to be added.
      */
     // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
@@ -4446,22 +4540,22 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-/**
- * Base class for sectionable UI modules.
- *
- * @property {EventBus} _eventBus - EventBus instance used for event handling.
- * @property {string} managerType - Type of the render manager. Used to form event names.
- *
- * @class SectionModuleBase
+/**
+ * Base class for sectionable UI modules.
+ *
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
+ * @property {string} managerType - Type of the render manager. Used to form event names.
+ *
+ * @class SectionModuleBase
  */
 class SectionModuleBase {
-  /**
-   * Create a SectionModuleBase instance.
-   *
-   * @param {any} eventBus - The EventBus instance used for event handling.
-   * @param {string} sectionKey - The type of render manager. Used to form event names.
-   *
-   * @constructor
+  /**
+   * Create a SectionModuleBase instance.
+   *
+   * @param {any} eventBus - The EventBus instance used for event handling.
+   * @param {string} sectionKey - The type of render manager. Used to form event names.
+   *
+   * @constructor
    */
   constructor(eventBus, sectionKey) {
     this._eventBus = eventBus;
@@ -4474,10 +4568,10 @@ class SectionModuleBase {
     });
   }
 
-  /**
-   * Attach the managed section to a parent node.
-   *
-   * @param {HTMLElement} container - The parent node to attach to.
+  /**
+   * Attach the managed section to a parent node.
+   *
+   * @param {HTMLElement} container - The parent node to attach to.
    */
   attachTo(container) {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4485,22 +4579,22 @@ class SectionModuleBase {
     }));
   }
 
-  /**
-   * Detach the managed section from its parent node.
+  /**
+   * Detach the managed section from its parent node.
    */
   detach() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
   }
 
-  /**
-   * Reset the managed section to its initial state.
+  /**
+   * Reset the managed section to its initial state.
    */
   reset() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
 
-  /**
-   * Circumvents timing issues.
+  /**
+   * Circumvents timing issues.
    */
   _onceSectionRendered(callback) {
     if (this.isSectionRendered) {
@@ -5983,140 +6077,290 @@ function isEdited$7(node) {
 function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
-const noop$1 = () => {};
-function FeelTextfield(props) {
+function NumberField(props) {
   const {
     debounce,
+    disabled,
+    displayLabel = true,
     id,
+    inputRef,
     label,
+    max,
+    min,
     onInput,
-    onError,
-    feel,
+    step,
     value = '',
-    disabled = false,
-    variables,
-    tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    onFocus,
+    onBlur
   } = props;
-  const [localValue, _setLocalValue] = hooks.useState(value);
-  const editorRef = useShowEntryEvent(id);
-  const containerRef = hooks.useRef();
-  const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  const [focus, _setFocus] = hooks.useState(undefined);
-  const setFocus = (offset = 0) => {
-    const hasFocus = containerRef.current.contains(document.activeElement);
-
-    // Keep caret position if it is already focused, otherwise focus at the end
-    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
-    _setFocus(position + offset);
-  };
+  const [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
     });
   }, [onInput, debounce]);
-  const setLocalValue = newValue => {
-    _setLocalValue(newValue);
-    if (!newValue || newValue === '=') {
-      handleInputCallback(undefined);
-    } else {
-      handleInputCallback(newValue);
-    }
-  };
-  const handleFeelToggle = useStaticCallback(() => {
-    if (feel === 'required') {
-      return;
-    }
-    if (!feelActive) {
-      setLocalValue('=' + localValue);
-    } else {
-      setLocalValue(feelOnlyValue);
-    }
-  });
-  const handleLocalInput = newValue => {
-    if (feelActive) {
-      newValue = '=' + newValue;
-    }
-    if (newValue === localValue) {
-      return;
-    }
-    setLocalValue(newValue);
-    if (!feelActive && minDash.isString(newValue) && newValue.startsWith('=')) {
-      // focus is behind `=` sign that will be removed
-      setFocus(-1);
-    }
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.length)) {
-      onError(undefined);
-      return;
-    }
-    const error = lint[0];
-    const message = `${error.source}: ${error.message}`;
-    onError(message);
-  });
-  hooks.useEffect(() => {
-    if (typeof focus !== 'undefined') {
-      editorRef.current.focus(focus);
-      _setFocus(undefined);
-    }
-  }, [focus]);
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
-    // External value change removed content => keep FEEL configuration
-    if (!value) {
-      setLocalValue(feelActive ? '=' : '');
-      return;
-    }
     setLocalValue(value);
   }, [value]);
-
-  // copy-paste integration
-  hooks.useEffect(() => {
-    const copyHandler = event => {
-      if (!feelActive) {
-        return;
-      }
-      event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
-    };
-    const pasteHandler = event => {
-      if (feelActive) {
-        return;
-      }
-      const data = event.clipboardData.getData('application/FEEL');
-      if (data) {
-        setTimeout(() => {
-          handleFeelToggle();
-          setFocus();
-        });
-      }
-    };
-    containerRef.current.addEventListener('copy', copyHandler);
-    containerRef.current.addEventListener('cut', copyHandler);
-    containerRef.current.addEventListener('paste', pasteHandler);
-    return () => {
-      containerRef.current.removeEventListener('copy', copyHandler);
-      containerRef.current.removeEventListener('cut', copyHandler);
-      containerRef.current.removeEventListener('paste', pasteHandler);
-    };
-  }, [containerRef, feelActive, handleFeelToggle, setFocus]);
   return jsxRuntime.jsxs("div", {
-    class: classnames('bio-properties-panel-feel-entry', {
-      'feel-active': feelActive
-    }),
-    children: [jsxRuntime.jsxs("label", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsxRuntime.jsx("label", {
       for: prefixId$5(id),
       class: "bio-properties-panel-label",
-      onClick: () => setFocus(),
-      children: [label, jsxRuntime.jsx(FeelIcon, {
-        label: label,
-        feel: feel,
-        onClick: handleFeelToggle,
-        active: feelActive
+      children: label
+    }), jsxRuntime.jsx("input", {
+      id: prefixId$5(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
+ */
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step,
+    onFocus,
+    onBlur,
+    validate
+  } = props;
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    setValue(newValue, newValidationError);
+    setLocalError(newValidationError);
+  };
+  const error = globalError || localError;
+  return jsxRuntime.jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsxRuntime.jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onInput: onInput,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.value;
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+const noop$1 = () => {};
+function FeelTextfield(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    feel,
+    value = '',
+    disabled = false,
+    variables,
+    tooltipContainer,
+    OptionalComponent = OptionalFeelInput
+  } = props;
+  const [localValue, _setLocalValue] = hooks.useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = hooks.useRef();
+  const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const [focus, _setFocus] = hooks.useState(undefined);
+  const setFocus = (offset = 0) => {
+    const hasFocus = containerRef.current.contains(document.activeElement);
+
+    // Keep caret position if it is already focused, otherwise focus at the end
+    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
+    _setFocus(position + offset);
+  };
+  const handleInputCallback = hooks.useMemo(() => {
+    return debounce(newValue => {
+      onInput(newValue);
+    });
+  }, [onInput, debounce]);
+  const setLocalValue = newValue => {
+    _setLocalValue(newValue);
+    if (!newValue || newValue === '=') {
+      handleInputCallback(undefined);
+    } else {
+      handleInputCallback(newValue);
+    }
+  };
+  const handleFeelToggle = useStaticCallback(() => {
+    if (feel === 'required') {
+      return;
+    }
+    if (!feelActive) {
+      setLocalValue('=' + localValue);
+    } else {
+      setLocalValue(feelOnlyValue);
+    }
+  });
+  const handleLocalInput = newValue => {
+    if (feelActive) {
+      newValue = '=' + newValue;
+    }
+    if (newValue === localValue) {
+      return;
+    }
+    setLocalValue(newValue);
+    if (!feelActive && minDash.isString(newValue) && newValue.startsWith('=')) {
+      // focus is behind `=` sign that will be removed
+      setFocus(-1);
+    }
+  };
+  const handleLint = useStaticCallback(lint => {
+    if (!(lint && lint.length)) {
+      onError(undefined);
+      return;
+    }
+    const error = lint[0];
+    const message = `${error.source}: ${error.message}`;
+    onError(message);
+  });
+  hooks.useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  hooks.useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+
+    // External value change removed content => keep FEEL configuration
+    if (!value) {
+      setLocalValue(feelActive ? '=' : '');
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+
+  // copy-paste integration
+  hooks.useEffect(() => {
+    const copyHandler = event => {
+      if (!feelActive) {
+        return;
+      }
+      event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
+    };
+    const pasteHandler = event => {
+      if (feelActive) {
+        return;
+      }
+      const data = event.clipboardData.getData('application/FEEL');
+      if (data) {
+        setTimeout(() => {
+          handleFeelToggle();
+          setFocus();
+        });
+      }
+    };
+    containerRef.current.addEventListener('copy', copyHandler);
+    containerRef.current.addEventListener('cut', copyHandler);
+    containerRef.current.addEventListener('paste', pasteHandler);
+    return () => {
+      containerRef.current.removeEventListener('copy', copyHandler);
+      containerRef.current.removeEventListener('cut', copyHandler);
+      containerRef.current.removeEventListener('paste', pasteHandler);
+    };
+  }, [containerRef, feelActive, handleFeelToggle, setFocus]);
+  return jsxRuntime.jsxs("div", {
+    class: classnames('bio-properties-panel-feel-entry', {
+      'feel-active': feelActive
+    }),
+    children: [jsxRuntime.jsxs("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: [label, jsxRuntime.jsx(FeelIcon, {
+        label: label,
+        feel: feel,
+        onClick: handleFeelToggle,
+        active: feelActive
       })]
     }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-feel-container",
@@ -6126,7 +6370,7 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsxRuntime.jsx(CodeEditor, {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -6143,7 +6387,7 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$5(id),
+          'id': prefixId$4(id),
           'aria-label': label
         },
         value: localValue,
@@ -6181,7 +6425,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("input", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6195,6 +6439,53 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     value: value || ''
   });
 });
+const OptionalFeelNumberField = React.forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = hooks.useRef();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsxRuntime.jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
 React.forwardRef((props, ref) => {
   const {
     id,
@@ -6219,7 +6510,7 @@ React.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("textarea", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6295,7 +6586,7 @@ React.forwardRef((props, ref) => {
   };
   return jsxRuntime.jsx("input", {
     ref: inputRef,
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -6347,11 +6638,9 @@ function FeelEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const [validationError, setValidationError] = hooks.useState(null);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6363,32 +6652,28 @@ function FeelEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsxRuntime.jsx(FeelTextfield, {
+    children: [preact.createElement(FeelTextfield, {
+      ...props,
       debounce: debounce,
       disabled: disabled,
       feel: feel,
       id: id,
+      key: element,
       label: label,
       onInput: onInput,
       onError: onError,
@@ -6402,7 +6687,7 @@ function FeelEntry(props) {
       variables: variables,
       tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
-    }, element), error && jsxRuntime.jsx("div", {
+    }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description$1, {
@@ -6413,6 +6698,36 @@ function FeelEntry(props) {
   });
 }
 
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelNumberEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...props
+  });
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -6468,7 +6783,7 @@ function FeelTemplatingEntry(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$5(node) {
   if (!node) {
     return false;
   }
@@ -6480,162 +6795,6 @@ function isEdited$6(node) {
 
 // helpers /////////////////
 
-function prefixId$5(id) {
-  return `bio-properties-panel-${id}`;
-}
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = hooks.useState(value);
-  const handleInputCallback = hooks.useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  hooks.useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [jsxRuntime.jsx("label", {
-      for: prefixId$4(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsxRuntime.jsx("input", {
-      id: prefixId$4(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
- */
-function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step,
-    onFocus,
-    onBlur,
-    validate
-  } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
-  const globalError = useError(id);
-  const [localError, setLocalError] = hooks.useState(null);
-  let value = getValue(element);
-  const previousValue = usePrevious(value);
-  hooks.useEffect(() => {
-    if (minDash.isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value]);
-  const onInput = newValue => {
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
-    setLocalError(newValidationError);
-  };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
-  const error = globalError || localError;
-  return jsxRuntime.jsxs("div", {
-    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsxRuntime.jsx(NumberField, {
-      debounce: debounce,
-      disabled: disabled,
-      id: id,
-      label: label,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onInput: onInput,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }, element), error && jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsxRuntime.jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-function isEdited$4(node) {
-  return node && !!node.value;
-}
-
-// helpers /////////////////
-
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
@@ -6733,11 +6892,9 @@ function SelectEntry(props) {
     validate
   } = props;
   const options = getOptions(element);
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6749,16 +6906,9 @@ function SelectEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -6889,11 +7039,9 @@ function TextAreaEntry(props) {
     onBlur,
     autoResize
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6905,16 +7053,9 @@ function TextAreaEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7029,11 +7170,9 @@ function TextfieldEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -7045,16 +7184,9 @@ function TextfieldEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7087,12 +7219,12 @@ function isEdited(node) {
 function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
-
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = preact.createContext({
@@ -7139,6 +7271,7 @@ const labelsByType = {
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
+  spacer: 'SPACER',
   taglist: 'TAGLIST',
   text: 'TEXT VIEW',
   textfield: 'TEXT FIELD',
@@ -7181,8 +7314,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -7254,10 +7387,10 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
  */
 function useVariables() {
   const form = useService('formEditor');
@@ -7280,7 +7413,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7302,7 +7435,7 @@ function AltText(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     feel: 'optional',
@@ -7310,6 +7443,7 @@ function AltText(props) {
     id,
     label: 'Alternative text',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -7340,7 +7474,10 @@ function Columns(props) {
   const validate = value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const layout = minDash.get(field, ['layout'], {});
     const newValue = value ? parseInt(value) : null;
     editField(field, ['layout'], minDash.set(layout, ['columns'], newValue));
@@ -7398,7 +7535,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7548,7 +7685,10 @@ function DefaultValueNumber(props) {
     // Enforces decimal notation so that we do not submit defaults in exponent form
     return serializeToString ? Big(value).toFixed() : value;
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     let newValue;
     if (isValidNumber(value)) {
       newValue = serializeToString ? value : Number(value);
@@ -7739,7 +7879,10 @@ function Id(props) {
   const getValue = () => {
     return minDash.get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7819,7 +7962,10 @@ function Key$1(props) {
   const getValue = () => {
     return minDash.get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7864,7 +8010,7 @@ function LabelEntry(props) {
         component: DateLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
     if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
@@ -7873,7 +8019,7 @@ function LabelEntry(props) {
         component: TimeLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
   } else if (INPUTS.includes(type) || type === 'button') {
@@ -7882,7 +8028,7 @@ function LabelEntry(props) {
       component: Label$1,
       editField,
       field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7987,7 +8133,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -8009,7 +8155,7 @@ function Source(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     description: 'Expression or static value (link/data URI)',
     element: field,
@@ -8018,6 +8164,7 @@ function Source(props) {
     id,
     label: 'Image source',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -8042,7 +8189,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 
   // todo: skipped to make the release without too much risk
@@ -8073,7 +8220,7 @@ function Text(props) {
     return minDash.get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   const description = hooks.useMemo(() => jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: ["Supports markdown and templating. ", jsxRuntime.jsx("a", {
@@ -8095,6 +8242,57 @@ function Text(props) {
   });
 }
 
+function SpacerEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'spacer') {
+    return [];
+  }
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: SpacerHeight,
+    isEdited: isEdited$6,
+    editField,
+    field
+  });
+  return entries;
+}
+function SpacerHeight(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => minDash.get(field, ['height']);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
 function NumberEntries(props) {
   const {
     editField,
@@ -8111,7 +8309,7 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$4,
+    isEdited: isEdited$6,
     editField,
     field
   });
@@ -8132,7 +8330,12 @@ function NumberDecimalDigits(props) {
   } = props;
   const debounce = useService('debounce');
   const getValue = e => minDash.get(field, ['decimalDigits']);
-  const setValue = value => editField(field, ['decimalDigits'], value);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['decimalDigits'], value);
+  };
   return NumberFieldEntry({
     debounce,
     label: 'Decimal digits',
@@ -8168,7 +8371,12 @@ function NumberArrowStep(props) {
     const trimmed = value.replace(/^0+/g, '');
     return (trimmed.startsWith('.') ? '0' : '') + trimmed;
   };
-  const setValue = value => editField(field, ['increment'], clearLeadingZeroes(value));
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['increment'], clearLeadingZeroes(value));
+  };
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
   return TextfieldEntry({
     debounce,
@@ -8577,7 +8785,10 @@ function Label(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = minDash.get(field, ['values']);
     return editField(field, 'values', minDash.set(values, [index, 'label'], value));
   };
@@ -8603,7 +8814,10 @@ function Value$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = minDash.get(field, ['values']);
     return editField(field, 'values', minDash.set(values, [index, 'value'], value));
   };
@@ -8657,7 +8871,10 @@ function Key(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const properties = minDash.get(field, ['properties']);
     const key = Object.keys(properties)[index];
     return editField(field, 'properties', updateKey(properties, key, value));
@@ -8707,14 +8924,14 @@ function Value(props) {
 
 // helpers //////////
 
-/**
- * Returns copy of object with updated value.
- *
- * @param {Object} properties
- * @param {string} key
- * @param {string} value
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated value.
+ *
+ * @param {Object} properties
+ * @param {string} key
+ * @param {string} value
+ *
+ * @returns {Object}
  */
 function updateValue(properties, key, value) {
   return {
@@ -8723,14 +8940,14 @@ function updateValue(properties, key, value) {
   };
 }
 
-/**
- * Returns copy of object with updated key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- * @param {string} newKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ * @param {string} newKey
+ *
+ * @returns {Object}
  */
 function updateKey(properties, oldKey, newKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -8742,6 +8959,34 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
+function AutoFocusSelectEntry(props) {
+  const {
+    autoFocusEntry,
+    element,
+    getValue
+  } = props;
+  const value = getValue(element);
+  const prevValue = usePrevious(value);
+  const eventBus = useService('eventBus');
+
+  // auto focus specifc other entry when selected value changed
+  hooks.useEffect(() => {
+    if (autoFocusEntry && prevValue && value !== prevValue) {
+      // @Note(pinussilvestrus): There is an issue in the properties
+      // panel so we have to wait a bit before showing the entry.
+      // Cf. https://github.com/camunda/linting/blob/4f5328e2722f73ae60ae584c5f576eaec3999cb2/lib/modeler/Linting.js#L37
+      setTimeout(() => {
+        eventBus.fire('propertiesPanel.showEntry', {
+          id: autoFocusEntry
+        });
+      });
+    }
+  }, [value, autoFocusEntry, prevValue, eventBus]);
+  return jsxRuntime.jsx(SelectEntry, {
+    ...props
+  });
+}
+
 function ValuesSourceSelectEntry(props) {
   const {
     editField,
@@ -8780,7 +9025,8 @@ function ValuesSourceSelect(props) {
       value: valueSource
     }));
   };
-  return SelectEntry({
+  return AutoFocusSelectEntry({
+    autoFocusEntry: getAutoFocusEntryId(field),
     label: 'Type',
     element: field,
     getOptions: getValuesSourceOptions,
@@ -8790,6 +9036,20 @@ function ValuesSourceSelect(props) {
   });
 }
 
+// helpers //////////
+
+function getAutoFocusEntryId(field) {
+  const valuesSource = formJsViewer.getValuesSource(field);
+  if (valuesSource === formJsViewer.VALUES_SOURCES.EXPRESSION) {
+    return `${field.id}-valuesExpression-expression`;
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.INPUT) {
+    return `${field.id}-dynamicValues-key`;
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.STATIC) {
+    return `${field.id}-staticValues-0-label`;
+  }
+  return null;
+}
+
 function InputKeyValuesSourceEntry(props) {
   const {
     editField,
@@ -8825,7 +9085,12 @@ function InputValuesKey(props) {
   const debounce = useService('debounce');
   const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT];
   const getValue = () => minDash.get(field, path, '');
-  const setValue = value => editField(field, path, value || '');
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path, value || '');
+  };
   const validate = value => {
     if (minDash.isUndefined(value) || !value.length) {
       return 'Must not be empty.';
@@ -8946,7 +9211,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8955,7 +9220,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8972,13 +9237,19 @@ function PrefixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
     label: 'Prefix',
-    setValue: onChange('prefixAdorner')
+    setValue: onChange('prefixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 function SuffixAdorner(props) {
@@ -8989,13 +9260,18 @@ function SuffixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
     label: 'Suffix',
-    setValue: onChange('suffixAdorner')
+    setValue: onChange('suffixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 
@@ -9014,7 +9290,7 @@ function ReadonlyEntry(props) {
       component: Readonly,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -9058,7 +9334,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 }
 function Condition(props) {
@@ -9096,6 +9372,55 @@ function Condition(props) {
   });
 }
 
+function ValuesExpressionEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-expression',
+    component: ValuesExpression,
+    label: 'Values expression',
+    isEdited: isEdited$5,
+    editField,
+    field
+  }];
+}
+function ValuesExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.EXPRESSION];
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+  const description = jsxRuntime.jsxs("div", {
+    children: ["Define an expression to populate the options from.", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", jsxRuntime.jsx("pre", {
+      children: jsxRuntime.jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  const getValue = () => minDash.get(field, path, '');
+  const setValue = value => editField(field, path, value || '');
+  return FeelEntry({
+    debounce,
+    description,
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Options expression',
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -9122,6 +9447,9 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
+  }), ...SpacerEntry({
+    field,
+    editField
   }), ...NumberEntries({
     field,
     editField
@@ -9240,14 +9568,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9267,14 +9595,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9307,14 +9635,19 @@ function MinLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('minLength'),
     id,
     label: 'Minimum length',
     min: 0,
-    setValue: onChange('minLength')
+    setValue: onChange('minLength'),
+    variables
   });
 }
 function MaxLength(props) {
@@ -9325,14 +9658,19 @@ function MaxLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('maxLength'),
     id,
     label: 'Maximum length',
     min: 0,
-    setValue: onChange('maxLength')
+    setValue: onChange('maxLength'),
+    variables
   });
 }
 function Pattern(props) {
@@ -9360,14 +9698,19 @@ function Min(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Minimum',
     step: 'any',
     getValue: getValue('min'),
-    setValue: onChange('min')
+    setValue: onChange('min'),
+    variables
   });
 }
 function Max(props) {
@@ -9378,14 +9721,19 @@ function Max(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Maximum',
     step: 'any',
     getValue: getValue('max'),
-    setValue: onChange('max')
+    setValue: onChange('max'),
+    variables
   });
 }
 function ValidationType(props) {
@@ -9424,8 +9772,8 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
@@ -9459,6 +9807,17 @@ function ValuesGroups(field, editField) {
         id: staticValuesId
       })
     });
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.EXPRESSION) {
+    const valuesExpressionId = `${fieldId}-valuesExpression`;
+    groups.push({
+      id: valuesExpressionId,
+      label: 'Options expression',
+      component: Group,
+      entries: ValuesExpressionEntry({
+        ...context,
+        id: valuesExpressionId
+      })
+    });
   }
   return groups;
 }
@@ -9527,13 +9886,13 @@ function CustomValuesGroup(field, editField) {
 
 // helpers //////////
 
-/**
- * Returns copy of object without key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object without key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ *
+ * @returns {Object}
  */
 function removeKey(properties, oldKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -9636,9 +9995,9 @@ function FormPropertiesPanel(props) {
     });
   }, [eventBus, formEditor, selectionModule]);
   hooks.useLayoutEffect(() => {
-    /**
-     * TODO(pinussilvestrus): update with actual updated element,
-     * once we have a proper updater/change support
+    /**
+     * TODO(pinussilvestrus): update with actual updated element,
+     * once we have a proper updater/change support
      */
     eventBus.on('changed', refresh);
     eventBus.on('import.done', refresh);
@@ -9690,10 +10049,10 @@ class PropertiesPanelRenderer {
     });
   }
 
-  /**
-   * Attach the properties panel to a parent node.
-   *
-   * @param {HTMLElement} container
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
    */
   attachTo(container) {
     if (!container) {
@@ -9713,8 +10072,8 @@ class PropertiesPanelRenderer {
     this._eventBus.fire('propertiesPanel.attach');
   }
 
-  /**
-   * Detach the properties panel from its parent node.
+  /**
+   * Detach the properties panel from its parent node.
    */
   detach() {
     const parentNode = this._container.parentNode;
@@ -9744,10 +10103,10 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
-/**
- * Manages the rendering of visual plugins.
- * @constructor
- * @param {Object} eventBus - Event bus for the application.
+/**
+ * Manages the rendering of visual plugins.
+ * @constructor
+ * @param {Object} eventBus - Event bus for the application.
  */
 class RenderInjector extends SectionModuleBase {
   constructor(eventBus) {
@@ -9756,10 +10115,10 @@ class RenderInjector extends SectionModuleBase {
     this.registeredRenderers = [];
   }
 
-  /**
-   * Inject a new renderer into the injector.
-   * @param {string} identifier - Identifier for the renderer.
-   * @param {Function} Renderer - The renderer function.
+  /**
+   * Inject a new renderer into the injector.
+   * @param {string} identifier - Identifier for the renderer.
+   * @param {Function} Renderer - The renderer function.
    */
   attachRenderer(identifier, Renderer) {
     this.registeredRenderers = [...this.registeredRenderers, {
@@ -9768,17 +10127,17 @@ class RenderInjector extends SectionModuleBase {
     }];
   }
 
-  /**
-   * Detach a renderer from the by key injector.
-   * @param {string} identifier - Identifier for the renderer.
+  /**
+   * Detach a renderer from the by key injector.
+   * @param {string} identifier - Identifier for the renderer.
    */
   detachRenderer(identifier) {
     this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
   }
 
-  /**
-   * Returns the registered renderers.
-   * @returns {Array} Array of registered renderers.
+  /**
+   * Returns the registered renderers.
+   * @returns {Array} Array of registered renderers.
    */
   fetchRenderers() {
     return this.registeredRenderers;
@@ -9812,48 +10171,48 @@ var ExpressionLanguageModule = {
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Module } Module
- * @typedef { import('./types').Schema } Schema
- *
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
- *
- * @typedef { {
- *   properties: FormEditorProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Module } Module
+ * @typedef { import('./types').Schema } Schema
+ *
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+ *
+ * @typedef { {
+ *   properties: FormEditorProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
-/**
- * The form editor.
+/**
+ * The form editor.
  */
 class FormEditor {
-  /**
-   * @constructor
-   * @param {FormEditorOptions} options
+  /**
+   * @constructor
+   * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
 
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
 
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = formJsViewer.createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -9864,15 +10223,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -9901,10 +10260,10 @@ class FormEditor {
     this._detach(false);
   }
 
-  /**
-   * @param {Schema} schema
-   *
-   * @return {Promise<{ warnings: Array<any> }>}
+  /**
+   * @param {Schema} schema
+   *
+   * @return {Promise<{ warnings: Array<any> }>}
    */
   importSchema(schema) {
     return new Promise((resolve, reject) => {
@@ -9933,15 +10292,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -9950,8 +10309,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -9969,10 +10328,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -9986,9 +10345,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = minDash.set(this._getState().properties, [property], value);
@@ -9997,21 +10356,21 @@ class FormEditor {
     });
   }
 
-  /**
-   * @param {string} type
-   * @param {Function} handler
+  /**
+   * @param {string} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @internal
-   *
-   * @param {FormEditorOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @internal
+   *
+   * @param {FormEditorOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -10033,22 +10392,22 @@ class FormEditor {
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -10058,15 +10417,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);