@bpmn-io/form-js-playground 1.3.0-alpha.0 → 1.3.1

package/dist/form-playground.umd.js

@@ -19392,8 +19392,8 @@
       let sharedChunks = findSharedChunks(a, b, textDiff);
       let sideA = new SpanCursor(a, sharedChunks, minPointSize);
       let sideB = new SpanCursor(b, sharedChunks, minPointSize);
-      textDiff.iterGaps((fromA, fromB, length) => compare(sideA, fromA, sideB, fromB, length, comparator));
-      if (textDiff.empty && textDiff.length == 0) compare(sideA, 0, sideB, 0, 0, comparator);
+      textDiff.iterGaps((fromA, fromB, length) => compare$1(sideA, fromA, sideB, fromB, length, comparator));
+      if (textDiff.empty && textDiff.length == 0) compare$1(sideA, 0, sideB, 0, 0, comparator);
     }
     /**
     Compare the contents of two groups of range sets, returning true
@@ -19824,7 +19824,7 @@
       return open;
     }
   }
-  function compare(a, startA, b, startB, length, comparator) {
+  function compare$1(a, startA, b, startB, length, comparator) {
     a.goto(startA);
     b.goto(startB);
     let endB = startB + length;
@@ -47571,26 +47571,26 @@
     return [...new Set(variables)];
   };
 
-  /**
-   * Get the variable name at the specified index in a given path expression.
-   *
-   * @param {Object} root - The root node of the path expression tree.
-   * @param {number} index - The index of the variable name to retrieve.
-   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+  /**
+   * Get the variable name at the specified index in a given path expression.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @param {number} index - The index of the variable name to retrieve.
+   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
    */
   const _getVariableNameAtPathIndex = (root, index) => {
     const accessors = _deconstructPathExpression(root);
     return accessors[index] || null;
   };
 
-  /**
-   * Extracts the variables which are required of the external context for a given path expression.
-   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
-   *
-   * @param {Object} node - The root node of the path expression tree.
-   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
-   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
-   * @returns {Set} - A set containing the extracted variable names.
+  /**
+   * Extracts the variables which are required of the external context for a given path expression.
+   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+   *
+   * @param {Object} node - The root node of the path expression tree.
+   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+   * @returns {Set} - A set containing the extracted variable names.
    */
   const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
     // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -47636,11 +47636,11 @@
     return new Set(extractedVariables);
   };
 
-  /**
-   * Deconstructs a path expression tree into an array of components.
-   *
-   * @param {Object} root - The root node of the path expression tree.
-   * @returns {Array<string>} An array of components in the path expression, in the correct order.
+  /**
+   * Deconstructs a path expression tree into an array of components.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @returns {Array<string>} An array of components in the path expression, in the correct order.
    */
   const _deconstructPathExpression = root => {
     let node = root;
@@ -47659,13 +47659,13 @@
     return parts.reverse();
   };
 
-  /**
-   * Builds a simplified feel structure tree from the given parse tree and feel string.
-   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
-   *
-   * @param {Object} parseTree - The parse tree generated by a parser.
-   * @param {string} feelString - The feel string used for parsing.
-   * @returns {Object} The simplified feel structure tree.
+  /**
+   * Builds a simplified feel structure tree from the given parse tree and feel string.
+   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+   *
+   * @param {Object} parseTree - The parse tree generated by a parser.
+   * @param {string} feelString - The feel string used for parsing.
+   * @returns {Object} The simplified feel structure tree.
    */
   const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
     const stack = [{
@@ -47691,9 +47691,9 @@
     return _extractFilterExpressions(stack[0].children[0]);
   };
 
-  /**
-   * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
-   * This is done to simplify the extraction of variables and match the context hierarchy.
+  /**
+   * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
+   * This is done to simplify the extraction of variables and match the context hierarchy.
    */
   const _extractFilterExpressions = tree => {
     const flattenedExpressionTree = {
@@ -47733,25 +47733,25 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * Determines if the given value is a FEEL expression.
-     *
-     * @param {any} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a FEEL expression.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isExpression(value) {
       return isString$3(value) && value.startsWith('=');
     }
 
-    /**
-     * Retrieve variable names from a given FEEL expression.
-     *
-     * @param {string} expression
-     * @param {object} [options]
-     * @param {string} [options.type]
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given FEEL expression.
+     *
+     * @param {string} expression
+     * @param {object} [options]
+     * @param {string} [options.type]
+     *
+     * @returns {string[]}
      */
     getVariableNames(expression, options = {}) {
       const {
@@ -47766,13 +47766,13 @@
       return getFlavouredFeelVariableNames(expression, type);
     }
 
-    /**
-     * Evaluate an expression.
-     *
-     * @param {string} expression
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {any}
+    /**
+     * Evaluate an expression.
+     *
+     * @param {string} expression
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {any}
      */
     evaluate(expression, data = {}) {
       if (!expression) {
@@ -47796,23 +47796,23 @@
   class FeelersTemplating {
     constructor() {}
 
-    /**
-     * Determines if the given value is a feelers template.
-     *
-     * @param {any} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a feelers template.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isTemplate(value) {
       return isString$3(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
     }
 
-    /**
-     * Retrieve variable names from a given feelers template.
-     *
-     * @param {string} template
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given feelers template.
+     *
+     * @param {string} template
+     *
+     * @returns {string[]}
      */
     getVariableNames(template) {
       if (!this.isTemplate(template)) {
@@ -47838,17 +47838,17 @@
       }, []);
     }
 
-    /**
-     * Evaluate a template.
-     *
-     * @param {string} template
-     * @param {Object<string, any>} context
-     * @param {Object} options
-     * @param {boolean} [options.debug = false]
-     * @param {boolean} [options.strict = false]
-     * @param {Function} [options.buildDebugString]
-     *
-     * @returns
+    /**
+     * Evaluate a template.
+     *
+     * @param {string} template
+     * @param {Object<string, any>} context
+     * @param {Object} options
+     * @param {boolean} [options.debug = false]
+     * @param {boolean} [options.strict = false]
+     * @param {Function} [options.buildDebugString]
+     *
+     * @returns
      */
     evaluate(template, context = {}, options = {}) {
       const {
@@ -47863,22 +47863,22 @@
       });
     }
 
-    /**
-    * @typedef {Object} ExpressionWithDepth
-    * @property {number} depth - The depth of the expression in the syntax tree.
-    * @property {string} expression - The extracted expression
+    /**
+    * @typedef {Object} ExpressionWithDepth
+    * @property {number} depth - The depth of the expression in the syntax tree.
+    * @property {string} expression - The extracted expression
     */
 
-    /**
-    * Extracts all feel expressions in the template along with their depth in the syntax tree.
-    * The depth is incremented for child expressions of loops to account for context drilling.
-     * @name extractExpressionsWithDepth
-    * @param {string} template - A feelers template string.
-    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-    *
-    * @example
-    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-    * const extractedExpressions = _extractExpressionsWithDepth(template);
+    /**
+    * Extracts all feel expressions in the template along with their depth in the syntax tree.
+    * The depth is incremented for child expressions of loops to account for context drilling.
+    * @name extractExpressionsWithDepth
+    * @param {string} template - A feelers template string.
+    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+    *
+    * @example
+    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+    * const extractedExpressions = _extractExpressionsWithDepth(template);
     */
     _extractExpressionsWithDepth(template) {
       // build simplified feelers syntax tree
@@ -47983,10 +47983,10 @@
     return injector;
   }
 
-  /**
-   * @param {string?} prefix
-   *
-   * @returns Element
+  /**
+   * @param {string?} prefix
+   *
+   * @returns Element
    */
   function createFormContainer(prefix = 'fjs') {
     const container = document.createElement('div');
@@ -47996,22 +47996,22 @@
   const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
   const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
 
-  /**
-   * @template T
-   * @param {T} data
-   * @param {(this: any, key: string, value: any) => any} [replacer]
-   * @return {T}
+  /**
+   * @template T
+   * @param {T} data
+   * @param {(this: any, key: string, value: any) => any} [replacer]
+   * @return {T}
    */
   function clone(data, replacer) {
     return JSON.parse(JSON.stringify(data, replacer));
   }
 
-  /**
-   * Parse the schema for input variables a form might make use of
-   *
-   * @param {any} schema
-   *
-   * @return {string[]}
+  /**
+   * Parse the schema for input variables a form might make use of
+   *
+   * @param {any} schema
+   *
+   * @return {string[]}
    */
   function getSchemaVariables(schema, options = {}) {
     const {
@@ -48096,9 +48096,9 @@
     fn(formField);
   }
 
-  /**
-   * @typedef {object} Condition
-   * @property {string} [hide]
+  /**
+   * @typedef {object} Condition
+   * @property {string} [hide]
    */
 
   class ConditionChecker {
@@ -48108,11 +48108,11 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * For given data, remove properties based on condition.
-     *
-     * @param {Object<string, any>} properties
-     * @param {Object<string, any>} data
+    /**
+     * For given data, remove properties based on condition.
+     *
+     * @param {Object<string, any>} properties
+     * @param {Object<string, any>} data
      */
     applyConditions(properties, data = {}) {
       const newProperties = clone(properties);
@@ -48139,13 +48139,13 @@
       return newProperties;
     }
 
-    /**
-     * Check if given condition is met. Returns null for invalid/missing conditions.
-     *
-     * @param {string} condition
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {boolean|null}
+    /**
+     * Check if given condition is met. Returns null for invalid/missing conditions.
+     *
+     * @param {string} condition
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {boolean|null}
      */
     check(condition, data = {}) {
       if (!condition) {
@@ -48166,12 +48166,12 @@
       }
     }
 
-    /**
-     * Check if hide condition is met.
-     *
-     * @param {Condition} condition
-     * @param {Object<string, any>} data
-     * @returns {boolean}
+    /**
+     * Check if hide condition is met.
+     *
+     * @param {Condition} condition
+     * @param {Object<string, any>} data
+     * @returns {boolean}
      */
     _checkHideCondition(condition, data) {
       if (!condition.hide) {
@@ -48206,12 +48206,12 @@
       this._converter = new showdown.Converter();
     }
 
-    /**
-     * Render markdown to HTML.
-     *
-     * @param {string} markdown - The markdown to render
-     *
-     * @returns {string} HTML
+    /**
+     * Render markdown to HTML.
+     *
+     * @param {string} markdown - The markdown to render
+     *
+     * @returns {string} HTML
      */
     render(markdown) {
       return this._converter.makeHtml(markdown);
@@ -49352,8 +49352,8 @@
 
   // helpers //////////
 
-  /**
-   * Helper function to evaluate optional FEEL validation values.
+  /**
+   * Helper function to evaluate optional FEEL validation values.
    */
   function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
     const evaluatedValidate = {
@@ -49386,12 +49386,12 @@
     return evaluatedValidate;
   }
   class Importer {
-    /**
-     * @constructor
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
-     * @param { import('./PathRegistry').default } pathRegistry
-     * @param { import('./FieldFactory').default } fieldFactory
-     * @param { import('./FormLayouter').default } formLayouter
+    /**
+     * @constructor
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     * @param { import('./PathRegistry').default } pathRegistry
+     * @param { import('./FieldFactory').default } fieldFactory
+     * @param { import('./FormLayouter').default } formLayouter
      */
     constructor(formFieldRegistry, pathRegistry, fieldFactory, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -49400,21 +49400,21 @@
       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
@@ -49439,12 +49439,12 @@
       this._pathRegistry.clear();
     }
 
-    /**
-     * @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 {
@@ -49469,11 +49469,11 @@
       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) => {
@@ -49483,11 +49483,11 @@
   }
   Importer.$inject = ['formFieldRegistry', 'pathRegistry', 'fieldFactory', 'formLayouter'];
   class FieldFactory {
-    /**
-     * @constructor
-     *
-     * @param  formFieldRegistry
-     * @param  formFields
+    /**
+     * @constructor
+     *
+     * @param  formFieldRegistry
+     * @param  formFields
      */
     constructor(formFieldRegistry, pathRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
@@ -49569,36 +49569,36 @@
   }
   FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
 
-  /**
-   * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
-   * It enables claiming, unclaiming, and validating paths within this structure.
-   *
-   * Example Tree Structure:
-   *
-   *   [
-   *     {
-   *       segment: 'root',
-   *       claimCount: 1,
-   *       children: [
-   *         {
-   *           segment: 'child1',
-   *           claimCount: 2,
-   *           children: null  // A leaf node (closed path)
-   *         },
-   *         {
-   *           segment: 'child2',
-   *           claimCount: 1,
-   *           children: [
-   *             {
-   *               segment: 'subChild1',
-   *               claimCount: 1,
-   *               children: []  // An open node (open path)
-   *             }
-   *           ]
-   *         }
-   *       ]
-   *     }
-   *   ]
+  /**
+   * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
+   * It enables claiming, unclaiming, and validating paths within this structure.
+   *
+   * Example Tree Structure:
+   *
+   *   [
+   *     {
+   *       segment: 'root',
+   *       claimCount: 1,
+   *       children: [
+   *         {
+   *           segment: 'child1',
+   *           claimCount: 2,
+   *           children: null  // A leaf node (closed path)
+   *         },
+   *         {
+   *           segment: 'child2',
+   *           claimCount: 1,
+   *           children: [
+   *             {
+   *               segment: 'subChild1',
+   *               claimCount: 1,
+   *               children: []  // An open node (open path)
+   *             }
+   *           ]
+   *         }
+   *       ]
+   *     }
+   *   ]
    */
   class PathRegistry {
     constructor(formFieldRegistry, formFields) {
@@ -49681,16 +49681,16 @@
       }
     }
 
-    /**
-     * Applies a function (fn) recursively on a given field and its children.
-     *
-     * - `field`: Starting field object.
-     * - `fn`: Function to apply.
-     * - `context`: Optional object for passing data between calls.
-     *
-     * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
-     *
-     * @returns {boolean} Success status based on function execution.
+    /**
+     * Applies a function (fn) recursively on a given field and its children.
+     *
+     * - `field`: Starting field object.
+     * - `fn`: Function to apply.
+     * - `context`: Optional object for passing data between calls.
+     *
+     * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
+     *
+     * @returns {boolean} Success status based on function execution.
      */
     executeRecursivelyOnFields(field, fn, context = {}) {
       let result = true;
@@ -49724,15 +49724,15 @@
       return result;
     }
 
-    /**
-     * Generates an array representing the binding path to an underlying data object for a form field.
-     *
-     * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
-     * @param {Object} [options={}] - Configuration options.
-     * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
-     * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
-     *
-     * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
+    /**
+     * Generates an array representing the binding path to an underlying data object for a form field.
+     *
+     * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
+     * @param {Object} [options={}] - Configuration options.
+     * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
+     * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
+     *
+     * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
      */
     getValuePath(field, options = {}) {
       const {
@@ -49776,23 +49776,23 @@
   };
   PathRegistry.$inject = ['formFieldRegistry', 'formFields'];
 
-  /**
-   * @typedef { { id: String, components: Array<String> } } FormRow
-   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+  /**
+   * @typedef { { id: String, components: Array<String> } } FormRow
+   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
    */
 
-  /**
-   * Maintains the Form layout in a given structure, for example
-   *
-   *  [
-   *    {
-   *      formFieldId: 'FormField_1',
-   *      rows: [
-   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
-   *      ]
-   *    }
-   *  ]
-   *
+  /**
+   * Maintains the Form layout in a given structure, for example
+   *
+   *  [
+   *    {
+   *      formFieldId: 'FormField_1',
+   *      rows: [
+   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+   *      ]
+   *    }
+   *  ]
+   *
    */
   class FormLayouter {
     constructor(eventBus) {
@@ -49802,8 +49802,8 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * @param {FormRow} row
+    /**
+     * @param {FormRow} row
      */
     addRow(formFieldId, row) {
       let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -49817,18 +49817,18 @@
       rowsPerComponent.rows.push(row);
     }
 
-    /**
-     * @param {String} id
-     * @returns {FormRow}
+    /**
+     * @param {String} id
+     * @returns {FormRow}
      */
     getRow(id) {
       const rows = allRows(this._rows);
       return rows.find(r => r.id === id);
     }
 
-    /**
-     * @param {any} formField
-     * @returns {FormRow}
+    /**
+     * @param {any} formField
+     * @returns {FormRow}
      */
     getRowForField(formField) {
       return allRows(this._rows).find(r => {
@@ -49839,9 +49839,9 @@
       });
     }
 
-    /**
-     * @param {String} formFieldId
-     * @returns { Array<FormRow> }
+    /**
+     * @param {String} formFieldId
+     * @returns { Array<FormRow> }
      */
     getRows(formFieldId) {
       const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -49851,15 +49851,15 @@
       return rowsForField.rows;
     }
 
-    /**
-     * @returns {string}
+    /**
+     * @returns {string}
      */
     nextRowId() {
       return this._ids.nextPrefixed('Row_');
     }
 
-    /**
-     * @param {any} formField
+    /**
+     * @param {any} formField
      */
     calculateLayout(formField) {
       const {
@@ -49913,9 +49913,9 @@
     });
   }
 
-  /**
-   * @param {Array<FormRows>} formRows
-   * @returns {Array<FormRow>}
+  /**
+   * @param {Array<FormRows>} formRows
+   * @returns {Array<FormRow>}
    */
   function allRows(formRows) {
     return flatten$2(formRows.map(c => c.rows));
@@ -50067,11 +50067,11 @@
   });
   var FormRenderContext$1 = FormRenderContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$2(type, strict) {}
   const FormContext = D$2({
@@ -50086,10 +50086,10 @@
     return getService(type, strict);
   }
 
-  /**
-   * Returns the conditionally filtered data of a form reactively.
-   * Memoised to minimize re-renders
-   *
+  /**
+   * Returns the conditionally filtered data of a form reactively.
+   * Memoised to minimize re-renders
+   *
    */
   function useFilteredFormData() {
     const {
@@ -50106,12 +50106,12 @@
     }, [conditionChecker, data, initialData]);
   }
 
-  /**
-   * Evaluate if condition is met reactively based on the conditionChecker and form data.
-   *
-   * @param {string | undefined} condition
-   *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
+  /**
+   * Evaluate if condition is met reactively based on the conditionChecker and form data.
+   *
+   * @param {string | undefined} condition
+   *
+   * @returns {boolean} true if condition is met or no condition or condition checker exists
    */
   function useCondition(condition) {
     const conditionChecker = useService$2('conditionChecker', false);
@@ -50121,13 +50121,13 @@
     }, [conditionChecker, condition, filteredData]);
   }
 
-  /**
-   * Evaluate a string reactively based on the expressionLanguage and form data.
-   * If the string is not an expression, it is returned as is.
-   * Memoised to minimize re-renders.
-   *
-   * @param {string} value
-   *
+  /**
+   * Evaluate a string reactively based on the expressionLanguage and form data.
+   * If the string is not an expression, it is returned as is.
+   * Memoised to minimize re-renders.
+   *
+   * @param {string} value
+   *
    */
   function useExpressionEvaluation(value) {
     const formData = useFilteredFormData();
@@ -50155,16 +50155,16 @@
     });
   }
 
-  /**
-   * Retrieve readonly value of a form field, given it can be an
-   * expression optionally or configured globally.
-   *
-   * @typedef { import('../../types').FormProperties } FormProperties
-   *
-   * @param {any} formField
-   * @param {FormProperties} properties
-   *
-   * @returns {boolean}
+  /**
+   * Retrieve readonly value of a form field, given it can be an
+   * expression optionally or configured globally.
+   *
+   * @typedef { import('../../types').FormProperties } FormProperties
+   *
+   * @param {any} formField
+   * @param {FormProperties} properties
+   *
+   * @returns {boolean}
    */
   function useReadonly(formField, properties = {}) {
     const expressionLanguage = useService$2('expressionLanguage');
@@ -50181,17 +50181,47 @@
     }
     return readonly || false;
   }
+  function usePrevious$1(value, defaultValue, dependencies) {
+    const ref = s$1(defaultValue);
+    y(() => ref.current = value, dependencies);
+    return ref.current;
+  }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * A custom hook to manage state changes with deep comparison.
+   *
+   * @param {any} value - The current value to manage.
+   * @param {any} defaultValue - The initial default value for the state.
+   * @returns {any} - Returns the current state.
+   */
+  function useDeepCompareState(value, defaultValue) {
+    const [state, setState] = l$2(defaultValue);
+    const previous = usePrevious$1(value, defaultValue, [value]);
+    const changed = !compare(previous, value);
+    y(() => {
+      if (changed) {
+        setState(value);
+      }
+    }, [changed, value]);
+    return state;
+  }
+
+  // helpers //////////////////////////
+
+  function compare(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useTemplateEvaluation(value, options) {
     const filteredData = useFilteredFormData();
@@ -50204,17 +50234,17 @@
     }, [filteredData, templating, value, options]);
   }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * If the string contains multiple lines, only the first line is returned.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} [options]
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * If the string contains multiple lines, only the first line is returned.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} [options]
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useSingleLineTemplateEvaluation(value, options = {}) {
     const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -50414,8 +50444,8 @@
     };
   }
 
-  /**
-   * @enum { String }
+  /**
+   * @enum { String }
    */
   const LOAD_STATES = {
     LOADING: 'loading',
@@ -50423,17 +50453,17 @@
     ERROR: 'error'
   };
 
-  /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+  /**
+   * @typedef {Object} ValuesGetter
+   * @property {Object[]} values - The values data
+   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
    */
 
-  /**
-   * A hook to load values for single and multiselect components.
-   *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+  /**
+   * A hook to load values for single and multiselect components.
+   *
+   * @param {Object} field - The form field to handle values for
+   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
    */
   function useValuesAsync(field) {
     const {
@@ -50447,11 +50477,8 @@
       state: LOAD_STATES.LOADING
     });
     const initialData = useService$2('form')._getState().initialData;
-    const evaluatedValues = d(() => {
-      if (valuesExpression) {
-        return useExpressionEvaluation(valuesExpression);
-      }
-    }, [valuesExpression]);
+    const expressionEvaluation = useExpressionEvaluation(valuesExpression);
+    const evaluatedValues = useDeepCompareState(expressionEvaluation || [], []);
     y(() => {
       let values = [];
 
@@ -50467,8 +50494,10 @@
         values = Array.isArray(staticValues) ? staticValues : [];
 
         // expression
-      } else if (evaluatedValues && Array.isArray(evaluatedValues)) {
-        values = evaluatedValues;
+      } else if (valuesExpression) {
+        if (evaluatedValues && Array.isArray(evaluatedValues)) {
+          values = evaluatedValues;
+        }
       } else {
         setValuesGetter(buildErrorState('No values source defined in the form definition'));
         return;
@@ -50477,7 +50506,7 @@
       // normalize data to support primitives and partially defined objects
       values = normalizeValuesData(values);
       setValuesGetter(buildLoadedState(values));
-    }, [valuesKey, staticValues, initialData]);
+    }, [valuesKey, staticValues, initialData, valuesExpression, evaluatedValues]);
     return valuesGetter;
   }
   const buildErrorState = error => ({
@@ -50949,12 +50978,12 @@
   };
   var CalendarIcon = SvgCalendar;
 
-  /**
-   * Returns date format for the provided locale.
-   * If the locale is not provided, uses the browser's locale.
-   *
-   * @param {string} [locale] - The locale to get date format for.
-   * @returns {string} The date format for the locale.
+  /**
+   * Returns date format for the provided locale.
+   * If the locale is not provided, uses the browser's locale.
+   *
+   * @param {string} [locale] - The locale to get date format for.
+   * @returns {string} The date format for the locale.
    */
   function getLocaleDateFormat(locale = 'default') {
     const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(Date.UTC(2020, 5, 5)));
@@ -50973,12 +51002,12 @@
     }).join('');
   }
 
-  /**
-   * Returns readable date format for the provided locale.
-   * If the locale is not provided, uses the browser's locale.
-   *
-   * @param {string} [locale] - The locale to get readable date format for.
-   * @returns {string} The readable date format for the locale.
+  /**
+   * Returns readable date format for the provided locale.
+   * If the locale is not provided, uses the browser's locale.
+   *
+   * @param {string} [locale] - The locale to get readable date format for.
+   * @returns {string} The readable date format for the locale.
    */
   function getLocaleReadableDateFormat(locale) {
     let format = getLocaleDateFormat(locale).toLowerCase();
@@ -50995,12 +51024,12 @@
     return format;
   }
 
-  /**
-   * Returns flatpickr config for the provided locale.
-   * If the locale is not provided, uses the browser's locale.
-   *
-   * @param {string} [locale] - The locale to get flatpickr config for.
-   * @returns {object} The flatpickr config for the locale.
+  /**
+   * Returns flatpickr config for the provided locale.
+   * If the locale is not provided, uses the browser's locale.
+   *
+   * @param {string} [locale] - The locale to get flatpickr config for.
+   * @returns {object} The flatpickr config for the locale.
    */
   function getLocaleDateFlatpickrConfig(locale) {
     return flatpickerizeDateFormat(getLocaleDateFormat(locale));
@@ -51277,7 +51306,8 @@
     y(() => {
       const individualEntries = dropdownContainer.current.children;
       if (individualEntries.length && !mouseControl) {
-        individualEntries[focusedValueIndex].scrollIntoView({
+        const focusedEntry = individualEntries[focusedValueIndex];
+        focusedEntry && focusedEntry.scrollIntoView({
           block: 'nearest',
           inline: 'nearest'
         });
@@ -51687,10 +51717,10 @@
     }
   };
 
-  /**
-   * This file must not be changed or exchanged.
-   *
-   * @see http://bpmn.io/license for more information.
+  /**
+   * This file must not be changed or exchanged.
+   *
+   * @see http://bpmn.io/license for more information.
    */
   function Logo() {
     return e$1("svg", {
@@ -51865,11 +51895,11 @@
 
   const FORM_ELEMENT = document.createElement('form');
 
-  /**
-   * Sanitize a HTML string and return the cleaned, safe version.
-   *
-   * @param {string} html
-   * @return {string}
+  /**
+   * Sanitize a HTML string and return the cleaned, safe version.
+   *
+   * @param {string} html
+   * @return {string}
    */
 
   // see https://github.com/developit/snarkdown/issues/70
@@ -51887,29 +51917,29 @@
     }
   }
 
-  /**
-   * Sanitizes an image source to ensure we only allow for data URI and links
-   * that start with http(s).
-   *
-   * Note: Most browsers anyway do not support script execution in <img> elements.
-   *
-   * @param {string} src
-   * @returns {string}
+  /**
+   * Sanitizes an image source to ensure we only allow for data URI and links
+   * that start with http(s).
+   *
+   * Note: Most browsers anyway do not support script execution in <img> elements.
+   *
+   * @param {string} src
+   * @returns {string}
    */
   function sanitizeImageSource(src) {
     const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
     return valid ? src : '';
   }
 
-  /**
-   * Recursively sanitize a HTML node, potentially
-   * removing it, its children or attributes.
-   *
-   * Inspired by https://github.com/developit/snarkdown/issues/70
-   * and https://github.com/cure53/DOMPurify. Simplified
-   * for our use-case.
-   *
-   * @param {Element} node
+  /**
+   * Recursively sanitize a HTML node, potentially
+   * removing it, its children or attributes.
+   *
+   * Inspired by https://github.com/developit/snarkdown/issues/70
+   * and https://github.com/cure53/DOMPurify. Simplified
+   * for our use-case.
+   *
+   * @param {Element} node
    */
   function sanitizeNode(node) {
     // allow text nodes
@@ -51953,13 +51983,13 @@
     }
   }
 
-  /**
-   * Validates attributes for validity.
-   *
-   * @param {string} lcTag
-   * @param {string} lcName
-   * @param {string} value
-   * @return {boolean}
+  /**
+   * Validates attributes for validity.
+   *
+   * @param {string} lcTag
+   * @param {string} lcName
+   * @param {string} value
+   * @return {boolean}
    */
   function isValidAttribute(lcTag, lcName, value) {
     // disallow most attributes based on whitelist
@@ -53898,55 +53928,55 @@
     validator: ['type', Validator]
   };
 
-  /**
-   * @typedef { import('./types').Injector } Injector
-   * @typedef { import('./types').Data } Data
-   * @typedef { import('./types').Errors } Errors
-   * @typedef { import('./types').Schema } Schema
-   * @typedef { import('./types').FormProperties } FormProperties
-   * @typedef { import('./types').FormProperty } FormProperty
-   * @typedef { import('./types').FormEvent } FormEvent
-   * @typedef { import('./types').FormOptions } FormOptions
-   *
-   * @typedef { {
-   *   data: Data,
-   *   initialData: Data,
-   *   errors: Errors,
-   *   properties: FormProperties,
-   *   schema: Schema
-   * } } State
-   *
-   * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
-   * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
-   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+  /**
+   * @typedef { import('./types').Injector } Injector
+   * @typedef { import('./types').Data } Data
+   * @typedef { import('./types').Errors } Errors
+   * @typedef { import('./types').Schema } Schema
+   * @typedef { import('./types').FormProperties } FormProperties
+   * @typedef { import('./types').FormProperty } FormProperty
+   * @typedef { import('./types').FormEvent } FormEvent
+   * @typedef { import('./types').FormOptions } FormOptions
+   *
+   * @typedef { {
+   *   data: Data,
+   *   initialData: Data,
+   *   errors: Errors,
+   *   properties: FormProperties,
+   *   schema: Schema
+   * } } State
+   *
+   * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
+   * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
+   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
 
   const ids$1 = new Ids([32, 36, 1]);
 
-  /**
-   * The form.
+  /**
+   * The form.
    */
   class Form {
-    /**
-     * @constructor
-     * @param {FormOptions} options
+    /**
+     * @constructor
+     * @param {FormOptions} options
      */
     constructor(options = {}) {
-      /**
-       * @public
-       * @type {OnEventType}
+      /**
+       * @public
+       * @type {OnEventType}
        */
       this.on = this._onEvent;
 
-      /**
-       * @public
-       * @type {String}
+      /**
+       * @public
+       * @type {String}
        */
       this._id = ids$1.next();
 
-      /**
-       * @private
-       * @type {Element}
+      /**
+       * @private
+       * @type {Element}
        */
       this._container = createFormContainer();
       const {
@@ -53955,9 +53985,9 @@
         properties = {}
       } = options;
 
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
       this._state = {
         initialData: null,
@@ -53981,9 +54011,9 @@
       this._emit('form.clear');
     }
 
-    /**
-     * Destroy the form, removing it from DOM,
-     * if attached.
+    /**
+     * Destroy the form, removing it from DOM,
+     * if attached.
      */
     destroy() {
       // destroy form services
@@ -53994,13 +54024,13 @@
       this._detach(false);
     }
 
-    /**
-     * Open a form schema with the given initial data.
-     *
-     * @param {Schema} schema
-     * @param {Data} [data]
-     *
-     * @return Promise<{ warnings: Array<any> }>
+    /**
+     * Open a form schema with the given initial data.
+     *
+     * @param {Schema} schema
+     * @param {Data} [data]
+     *
+     * @return Promise<{ warnings: Array<any> }>
      */
     importSchema(schema, data = {}) {
       return new Promise((resolve, reject) => {
@@ -54033,10 +54063,10 @@
       });
     }
 
-    /**
-     * Submit the form, triggering all field validations.
-     *
-     * @returns { { data: Data, errors: Errors } }
+    /**
+     * Submit the form, triggering all field validations.
+     *
+     * @returns { { data: Data, errors: Errors } }
      */
     submit() {
       const {
@@ -54063,8 +54093,8 @@
       });
     }
 
-    /**
-     * @returns {Errors}
+    /**
+     * @returns {Errors}
      */
     validate() {
       const formFieldRegistry = this.get('formFieldRegistry'),
@@ -54090,8 +54120,8 @@
       return errors;
     }
 
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
     attachTo(parentNode) {
       if (!parentNode) {
@@ -54109,10 +54139,10 @@
       this._detach();
     }
 
-    /**
-     * @private
-     *
-     * @param {boolean} [emit]
+    /**
+     * @private
+     *
+     * @param {boolean} [emit]
      */
     _detach(emit = true) {
       const container = this._container,
@@ -54126,9 +54156,9 @@
       parentNode.removeChild(container);
     }
 
-    /**
-     * @param {FormProperty} property
-     * @param {any} value
+    /**
+     * @param {FormProperty} property
+     * @param {any} value
      */
     setProperty(property, value) {
       const properties = set$3(this._getState().properties, [property], value);
@@ -54137,21 +54167,21 @@
       });
     }
 
-    /**
-     * @param {FormEvent} type
-     * @param {Function} handler
+    /**
+     * @param {FormEvent} type
+     * @param {Function} handler
      */
     off(type, handler) {
       this.get('eventBus').off(type, handler);
     }
 
-    /**
-     * @private
-     *
-     * @param {FormOptions} options
-     * @param {Element} container
-     *
-     * @returns {Injector}
+    /**
+     * @private
+     *
+     * @param {FormOptions} options
+     * @param {Element} container
+     *
+     * @returns {Injector}
      */
     _createInjector(options, container) {
       const {
@@ -54170,17 +54200,17 @@
       }, core$1, ...modules, ...additionalModules]);
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _emit(type, data) {
       this.get('eventBus').fire(type, data);
     }
 
-    /**
-     * @internal
-     *
-     * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
+    /**
+     * @internal
+     *
+     * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
      */
     _update(update) {
       const {
@@ -54202,15 +54232,15 @@
       });
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getState() {
       return this._state;
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _setState(state) {
       this._state = {
@@ -54220,22 +54250,22 @@
       this._emit('changed', this._getState());
     }
 
-    /**
-    * @internal
+    /**
+    * @internal
     */
     _getModules() {
       return [ExpressionLanguageModule$1, MarkdownModule, ViewerCommandsModule];
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getSubmitData() {
       const formFieldRegistry = this.get('formFieldRegistry'),
@@ -54263,16 +54293,16 @@
       return filteredSubmitData;
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _applyConditions(toFilter, data) {
       const conditionChecker = this.get('conditionChecker');
       return conditionChecker.applyConditions(toFilter, data);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _initializeFieldData(data) {
       const formFieldRegistry = this.get('formFieldRegistry'),
@@ -54586,29 +54616,6 @@
     return callback;
   }
 
-  /**
-   * Throttle fn, calling at most once
-   * in the given interval.
-   *
-   * @param  {Function} fn
-   * @param  {Number} interval
-   *
-   * @return {Function} throttled function
-   */
-  function throttle$1(fn, interval) {
-    let throttling = false;
-    return function (...args) {
-      if (throttling) {
-        return;
-      }
-      fn(...args);
-      throttling = true;
-      setTimeout(() => {
-        throttling = false;
-      }, interval);
-    };
-  }
-
   /**
    * Bind function against target <this>.
    *
@@ -60268,10 +60275,10 @@
     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;
@@ -60283,11 +60290,11 @@
   }
   DebounceFactory.$inject = ['config.debounce'];
   class FormFieldRegistry extends FormFieldRegistry$1 {
-    /**
-     * 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);
@@ -60308,13 +60315,13 @@
       }
     }
 
-    /**
-     * 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) {
@@ -60330,11 +60337,11 @@
   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;
@@ -60404,21 +60411,21 @@
     });
   }
 
-  /**
-   * 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
-   *
-   * @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
+   *
+   * @return {Function} drag start callback function
    */
   function createDragger$1(fn) {
     let self;
@@ -60459,12 +60466,12 @@
     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;
@@ -60497,11 +60504,11 @@
   });
   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 = D$2({
@@ -60902,23 +60909,23 @@
     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 => e$1(d$1, {
     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 = [];
@@ -60936,8 +60943,8 @@
     return result;
   };
 
-  /**
-   * Groups fills by group name property.
+  /**
+   * Groups fills by group name property.
    */
   const _groupByGroupName = fills => {
     const groups = [];
@@ -60957,8 +60964,8 @@
     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);
@@ -61181,20 +61188,20 @@
   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
-     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+    /**
+     * @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
+     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
      */
     constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling, pathRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -61205,13 +61212,13 @@
       this._pathRegistry = pathRegistry;
     }
 
-    /**
-     * 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 */
@@ -61352,8 +61359,8 @@
       }
     }
 
-    /**
-     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+    /**
+     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
      */
     createDragulaInstance(options) {
       const {
@@ -61764,7 +61771,7 @@
       return null;
     }
     return e$1("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'
     });
@@ -62823,10 +62830,10 @@
     return formField;
   }
   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;
@@ -62886,10 +62893,10 @@
   }
   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;
@@ -62951,11 +62958,11 @@
   }
   EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class MoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
      */
     constructor(formEditor, formFieldRegistry, pathRegistry) {
       this._formEditor = formEditor;
@@ -63059,10 +63066,10 @@
   }
   MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
   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;
@@ -63121,9 +63128,9 @@
   }
   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;
@@ -63155,9 +63162,9 @@
   }
   UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
   class UpdateKeyClaimHandler {
-    /**
-     * @constructor
-     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+    /**
+     * @constructor
+     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
      */
     constructor(pathRegistry) {
       this._pathRegistry = pathRegistry;
@@ -63197,9 +63204,9 @@
   }
   UpdateKeyClaimHandler.$inject = ['pathRegistry'];
   class UpdatePathClaimHandler {
-    /**
-     * @constructor
-     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+    /**
+     * @constructor
+     * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
      */
     constructor(pathRegistry) {
       this._pathRegistry = pathRegistry;
@@ -63755,8 +63762,8 @@
     constructor(eventBus) {
       super(eventBus);
 
-      /**
-       * Remove custom validation if <validationType> is about to be added.
+      /**
+       * Remove custom validation if <validationType> is about to be added.
        */
       this.preExecute('formField.edit', function (context) {
         const {
@@ -64331,22 +64338,22 @@
     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;
@@ -64359,10 +64366,10 @@
       });
     }
 
-    /**
-     * 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`, {
@@ -64370,22 +64377,22 @@
       }));
     }
 
-    /**
-     * 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) {
@@ -64633,18 +64640,25 @@
       parent
     } = props;
     const [visible, setShow] = l$2(false);
+    const [focusedViaKeyboard, setFocusedViaKeyboard] = l$2(false);
     let timeout = null;
     const wrapperRef = s$1(null);
     const tooltipRef = s$1(null);
     const showTooltip = async event => {
-      const show = () => !visible && setShow(true);
-      if (event instanceof MouseEvent) {
-        timeout = setTimeout(show, 200);
-      } else {
-        show();
+      const show = () => setShow(true);
+      if (!visible && !timeout) {
+        if (event instanceof MouseEvent) {
+          timeout = setTimeout(show, 200);
+        } else {
+          show();
+          setFocusedViaKeyboard(true);
+        }
       }
     };
-    const hideTooltip = () => setShow(false);
+    const hideTooltip = () => {
+      setShow(false);
+      setFocusedViaKeyboard(false);
+    };
     const hideTooltipViaEscape = e => {
       e.code === 'Escape' && hideTooltip();
     };
@@ -64668,7 +64682,7 @@
         if (visible && !isTooltipHovered({
           x: e.x,
           y: e.y
-        }) && !isFocused) {
+        }) && !(isFocused && focusedViaKeyboard)) {
           hideTooltip();
         }
       };
@@ -64676,8 +64690,8 @@
         const {
           relatedTarget
         } = e;
-        const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
-        if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+        const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
+        if (visible && !isHovered(wrapperRef.current) && relatedTarget && !isTooltipChild(relatedTarget)) {
           hideTooltip();
         }
       };
@@ -64689,7 +64703,7 @@
         document.removeEventListener('mousemove', hideHoveredTooltip);
         document.removeEventListener('focusout', hideFocusedTooltip);
       };
-    }, [wrapperRef.current, visible]);
+    }, [wrapperRef.current, visible, focusedViaKeyboard]);
     const renderTooltip = () => {
       return e$1("div", {
         class: "bio-properties-panel-tooltip",
@@ -64712,12 +64726,12 @@
       tabIndex: "0",
       ref: wrapperRef,
       onMouseEnter: showTooltip,
-      onMouseLeave: () => clearTimeout(timeout),
+      onMouseLeave: () => {
+        clearTimeout(timeout);
+        timeout = null;
+      },
       onFocus: showTooltip,
       onKeyDown: hideTooltipViaEscape,
-      onMouseDown: e => {
-        e.preventDefault();
-      },
       children: [props.children, visible ? parent ? W(renderTooltip(), parent.current) : renderTooltip() : null]
     });
   }
@@ -64994,20 +65008,24 @@
 
     // set edited state depending on all entries
     y(() => {
-      const hasOneEditedEntry = entries.find(entry => {
-        const {
-          id,
-          isEdited
-        } = entry;
-        const entryNode = query(`[data-entry-id="${id}"]`);
-        if (!isFunction(isEdited) || !entryNode) {
-          return false;
-        }
-        const inputNode = query('.bio-properties-panel-input', entryNode);
-        return isEdited(inputNode);
+      // TODO(@barmac): replace with CSS when `:has()` is supported in all major browsers, or rewrite as in https://github.com/camunda/camunda-modeler/issues/3815#issuecomment-1733038161
+      const scheduled = requestAnimationFrame(() => {
+        const hasOneEditedEntry = entries.find(entry => {
+          const {
+            id,
+            isEdited
+          } = entry;
+          const entryNode = query(`[data-entry-id="${id}"]`);
+          if (!isFunction(isEdited) || !entryNode) {
+            return false;
+          }
+          const inputNode = query('.bio-properties-panel-input', entryNode);
+          return isEdited(inputNode);
+        });
+        setEdited(hasOneEditedEntry);
       });
-      setEdited(hasOneEditedEntry);
-    }, [entries]);
+      return () => cancelAnimationFrame(scheduled);
+    }, [entries, setEdited]);
 
     // set error state depending on all entries
     const allErrors = useErrors();
@@ -65027,7 +65045,8 @@
         class: classNames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
         onClick: toggleOpen,
         children: [e$1("div", {
-          title: label,
+          title: props.tooltip ? null : label,
+          "data-title": label,
           class: "bio-properties-panel-group-header-title",
           children: e$1(TooltipWrapper, {
             value: props.tooltip,
@@ -65434,7 +65453,11 @@
       // (2) setup drag listeners
 
       // attach drag + cleanup event
-      document.addEventListener('dragover', onDrag);
+      // we need to do this to make sure we track cursor
+      // movements before we reach other drag event handlers,
+      // e.g. in child containers.
+      document.addEventListener('dragover', onDrag, true);
+      document.addEventListener('dragenter', preventDefault, true);
       document.addEventListener('dragend', onEnd);
       document.addEventListener('drop', preventDefault);
     }
@@ -65448,7 +65471,8 @@
       return fn.call(self, event, delta);
     }
     function onEnd() {
-      document.removeEventListener('dragover', onDrag);
+      document.removeEventListener('dragover', onDrag, true);
+      document.removeEventListener('dragenter', preventDefault, true);
       document.removeEventListener('dragend', onEnd);
       document.removeEventListener('drop', preventDefault);
     }
@@ -65469,6 +65493,7 @@
    * @param {Object} props
    * @param {HTMLElement} [props.container]
    * @param {string} [props.className]
+   * @param {boolean} [props.delayInitialFocus]
    * @param {{x: number, y: number}} [props.position]
    * @param {number} [props.width]
    * @param {number} [props.height]
@@ -65476,12 +65501,15 @@
    * @param {Function} [props.onPostActivate]
    * @param {Function} [props.onPostDeactivate]
    * @param {boolean} [props.returnFocus]
+   * @param {boolean} [props.closeOnEscape]
    * @param {string} props.title
+   * @param {Ref} [ref]
    */
-  function Popup(props) {
+  function PopupComponent(props, globalRef) {
     const {
       container,
       className,
+      delayInitialFocus,
       position,
       width,
       height,
@@ -65489,12 +65517,16 @@
       onPostActivate = noop$3,
       onPostDeactivate = noop$3,
       returnFocus = true,
+      closeOnEscape = true,
       title
     } = props;
     const focusTrapRef = s$1(null);
-    const popupRef = s$1(null);
-    const handleKeyPress = event => {
-      if (event.key === 'Escape') {
+    const localRef = s$1(null);
+    const popupRef = globalRef || localRef;
+    const handleKeydown = event => {
+      // do not allow keyboard events to bubble
+      event.stopPropagation();
+      if (closeOnEscape && event.key === 'Escape') {
         onClose();
       }
     };
@@ -65519,14 +65551,6 @@
     if (height) {
       style.height = height + 'px';
     }
-    y(() => {
-      if (popupRef.current) {
-        popupRef.current.addEventListener('keydown', handleKeyPress);
-      }
-      return () => {
-        popupRef.current.removeEventListener('keydown', handleKeyPress);
-      };
-    }, [popupRef]);
     y(() => {
       if (popupRef.current) {
         popupRef.current.addEventListener('focusin', handleFocus);
@@ -65539,6 +65563,7 @@
       if (popupRef.current) {
         focusTrapRef.current = createFocusTrap(popupRef.current, {
           clickOutsideDeactivates: true,
+          delayInitialFocus,
           fallbackFocus: popupRef.current,
           onPostActivate,
           onPostDeactivate,
@@ -65552,12 +65577,14 @@
       "aria-label": title,
       tabIndex: -1,
       ref: popupRef,
+      onKeyDown: handleKeydown,
       role: "dialog",
       class: classNames('bio-properties-panel-popup', className),
       style: style,
       children: props.children
     }), container || document.body);
   }
+  const Popup = x$1(PopupComponent);
   Popup.Title = Title;
   Popup.Body = Body;
   Popup.Footer = Footer;
@@ -65566,6 +65593,7 @@
       children,
       className,
       draggable,
+      emit = () => {},
       title,
       ...rest
     } = props;
@@ -65578,7 +65606,8 @@
     });
     const dragPreviewRef = s$1();
     const titleRef = s$1();
-    const onMove = throttle$1((_, delta) => {
+    const onMove = (event, delta) => {
+      cancel(event);
       const {
         x: dx,
         y: dy
@@ -65590,20 +65619,33 @@
       const popupParent = getPopupParent(titleRef.current);
       popupParent.style.top = newPosition.y + 'px';
       popupParent.style.left = newPosition.x + 'px';
-    });
+
+      // notify interested parties
+      emit('dragover', {
+        newPosition,
+        delta
+      });
+    };
     const onMoveStart = event => {
       // initialize drag handler
       const onDragStart = createDragger(onMove, dragPreviewRef.current);
       onDragStart(event);
+      event.stopPropagation();
       const popupParent = getPopupParent(titleRef.current);
       const bounds = popupParent.getBoundingClientRect();
       context.current.startPosition = {
         x: bounds.left,
         y: bounds.top
       };
+
+      // notify interested parties
+      emit('dragstart');
     };
     const onMoveEnd = () => {
       context.current.newPosition = null;
+
+      // notify interested parties
+      emit('dragend');
     };
     return e$1("div", {
       class: classNames('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -65656,26 +65698,52 @@
   function getPopupParent(node) {
     return node.closest('.bio-properties-panel-popup');
   }
+  function cancel(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
   /**
-   * FEEL popup component, built as a singleton.
+   * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
+   *  - `feelPopup.open` - fired before the popup is mounted
+   *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.closed` - fired after the popup is unmounted
    */
   function FEELPopupRoot(props) {
     const {
-      element
+      element,
+      eventBus = {
+        fire() {},
+        on() {},
+        off() {}
+      },
+      popupContainer
     } = props;
     const prevElement = usePrevious(element);
     const [popupConfig, setPopupConfig] = l$2({});
     const [open, setOpen] = l$2(false);
     const [source, setSource] = l$2(null);
     const [sourceElement, setSourceElement] = l$2(null);
-    const handleOpen = (key, config, _sourceElement) => {
-      setSource(key);
+    const emit = (type, context) => {
+      eventBus.fire('feelPopup.' + type, context);
+    };
+    const isOpen = A$1(() => {
+      return !!open;
+    }, [open]);
+    useUpdateEffect(() => {
+      if (!open) {
+        emit('closed');
+      }
+    }, [open]);
+    const handleOpen = (entryId, config, _sourceElement) => {
+      setSource(entryId);
       setPopupConfig(config);
       setOpen(true);
       setSourceElement(_sourceElement);
+      emit('open');
     };
     const handleClose = () => {
       setOpen(false);
@@ -65689,21 +65757,47 @@
 
     // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
     y(() => {
-      if (element && element !== prevElement) {
+      if (element && prevElement && element !== prevElement) {
         handleClose();
       }
     }, [element]);
+
+    // allow close and open via events
+    y(() => {
+      const handlePopupOpen = context => {
+        const {
+          entryId,
+          popupConfig,
+          sourceElement
+        } = context;
+        handleOpen(entryId, popupConfig, sourceElement);
+      };
+      const handleIsOpen = () => {
+        return isOpen();
+      };
+      eventBus.on('feelPopup._close', handleClose);
+      eventBus.on('feelPopup._open', handlePopupOpen);
+      eventBus.on('feelPopup._isOpen', handleIsOpen);
+      return () => {
+        eventBus.off('feelPopup._close', handleClose);
+        eventBus.off('feelPopup._open', handleOpen);
+        eventBus.off('feelPopup._isOpen', handleIsOpen);
+      };
+    }, [eventBus, isOpen]);
     return e$1(FeelPopupContext.Provider, {
       value: feelPopupContext,
       children: [open && e$1(FeelPopupComponent, {
         onClose: handleClose,
+        container: popupContainer,
         sourceElement: sourceElement,
+        emit: emit,
         ...popupConfig
       }), props.children]
     });
   }
   function FeelPopupComponent(props) {
     const {
+      container,
       id,
       hostLanguage,
       onInput,
@@ -65715,20 +65809,45 @@
       tooltipContainer,
       type,
       value,
-      variables
+      variables,
+      emit
     } = props;
     const editorRef = s$1();
+    const popupRef = s$1();
+    const isAutoCompletionOpen = s$1(false);
     const handleSetReturnFocus = () => {
       sourceElement && sourceElement.focus();
     };
-    y(() => {
-      const editor = editorRef.current;
-      if (editor) {
-        editor.focus();
+    const onKeyDownCapture = event => {
+      // we use capture here to make sure we handle the event before the editor does
+      if (event.key === 'Escape') {
+        isAutoCompletionOpen.current = autoCompletionOpen(event.target);
+      }
+    };
+    const onKeyDown = event => {
+      if (event.key === 'Escape') {
+        // close popup only if auto completion is not open
+        // we need to do check this because the editor is not
+        // stop propagating the keydown event
+        // cf. https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322/5
+        if (!isAutoCompletionOpen.current) {
+          onClose();
+          isAutoCompletionOpen.current = false;
+        }
       }
-    }, [editorRef, id]);
+    };
+    y(() => {
+      emit('opened', {
+        domNode: popupRef.current
+      });
+      return () => emit('close', {
+        domNode: popupRef.current
+      });
+    }, []);
     return e$1(Popup, {
+      container: container,
       className: "bio-properties-panel-feel-popup",
+      emit: emit,
       position: position,
       title: title,
       onClose: onClose
@@ -65737,14 +65856,20 @@
       ,
 
       returnFocus: false,
+      closeOnEscape: false,
+      delayInitialFocus: false,
       onPostDeactivate: handleSetReturnFocus,
       height: FEEL_POPUP_HEIGHT,
       width: FEEL_POPUP_WIDTH,
+      ref: popupRef,
       children: [e$1(Popup.Title, {
         title: title,
+        emit: emit,
         draggable: true
       }), e$1(Popup.Body, {
         children: e$1("div", {
+          onKeyDownCapture: onKeyDownCapture,
+          onKeyDown: onKeyDown,
           class: "bio-properties-panel-feel-popup__body",
           children: [type === 'feel' && e$1(CodeEditor, {
             enableGutters: true,
@@ -65786,6 +65911,26 @@
   function prefixId$8(id) {
     return `bio-properties-panel-${id}`;
   }
+  function autoCompletionOpen(element) {
+    return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
+  }
+
+  /**
+   * This hook behaves like useEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
+   */
+  function useUpdateEffect(effect, deps) {
+    const isMounted = s$1(false);
+    y(() => {
+      if (isMounted.current) {
+        return effect();
+      } else {
+        isMounted.current = true;
+      }
+    }, deps);
+  }
   function ToggleSwitch(props) {
     const {
       id,
@@ -66532,7 +66677,7 @@
       setLocalError(err);
     }, []);
     const temporaryError = useError(id);
-    const error = localError || temporaryError || validationError;
+    const error = temporaryError || localError || validationError;
     return e$1("div", {
       class: classNames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
       "data-entry-id": id,
@@ -66681,7 +66826,7 @@
 
   // todo(pinussilvestrus): make this configurable in the future
   function getPopupTitle(element, label) {
-    let popupTitle;
+    let popupTitle = '';
     if (element && element.type) {
       popupTitle = `${element.type} / `;
     }
@@ -66768,6 +66913,7 @@
    * @param {Function} [props.descriptionLoaded]
    * @param {TooltipConfig} [props.tooltipConfig]
    * @param {Function} [props.tooltipLoaded]
+   * @param {HTMLElement} [props.feelPopupContainer]
    * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
@@ -66782,6 +66928,7 @@
       descriptionLoaded,
       tooltipConfig,
       tooltipLoaded,
+      feelPopupContainer,
       eventBus
     } = props;
 
@@ -66884,6 +67031,8 @@
                 value: eventContext,
                 children: e$1(FEELPopupRoot, {
                   element: element,
+                  eventBus: eventBus,
+                  popupContainer: feelPopupContainer,
                   children: e$1("div", {
                     class: "bio-properties-panel",
                     children: [e$1(Header, {
@@ -67183,7 +67332,8 @@
         class: classNames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
         onClick: hasItems ? toggleOpen : noop$1,
         children: [e$1("div", {
-          title: label,
+          title: props.tooltip ? null : label,
+          "data-title": label,
           class: "bio-properties-panel-group-header-title",
           children: e$1(TooltipWrapper, {
             value: props.tooltip,
@@ -67821,12 +67971,51 @@
   function prefixId(id) {
     return `bio-properties-panel-${id}`;
   }
+  class FeelPopupModule {
+    constructor(eventBus) {
+      this._eventBus = eventBus;
+    }
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+    /**
+     * Check if the FEEL popup is open.
+     * @return {Boolean}
+     */
+    isOpen() {
+      return this._eventBus.fire('feelPopup._isOpen');
+    }
+
+    /**
+     * Open the FEEL popup.
+     *
+     * @param {String} entryId
+     * @param {Object} popupConfig
+     * @param {HTMLElement} sourceElement
+     */
+    open(entryId, popupConfig, sourceElement) {
+      return this._eventBus.fire('feelPopup._open', {
+        entryId,
+        popupConfig,
+        sourceElement
+      });
+    }
+
+    /**
+     * Close the FEEL popup.
+     */
+    close() {
+      return this._eventBus.fire('feelPopup._close');
+    }
+  }
+  FeelPopupModule.$inject = ['eventBus'];
+  var index = {
+    feelPopup: ['type', FeelPopupModule]
+  };
+
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService(type, strict) {}
   const PropertiesPanelContext = D$2({
@@ -67921,8 +68110,8 @@
     }
   };
 
-  /**
-   * Provide placeholders for empty and multiple state.
+  /**
+   * Provide placeholders for empty and multiple state.
    */
   const PropertiesPanelPlaceholderProvider = {
     getEmpty: () => {
@@ -67992,10 +68181,10 @@
     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');
@@ -69624,14 +69813,14 @@
 
   // 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 {
@@ -69640,14 +69829,14 @@
     };
   }
 
-  /**
-   * 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) => {
@@ -70449,7 +70638,8 @@
       id,
       label: 'Validation pattern',
       setValue,
-      getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS)
+      getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS),
+      tooltip: getValue('validationType')() === VALIDATION_TYPE_OPTIONS.phone.value ? 'The built-in phone validation pattern is based on the E.164 standard with no spaces. Ex: +491234567890' : undefined
     });
   }
   function ValuesGroups(field, editField) {
@@ -70466,13 +70656,13 @@
     };
     const valuesSourceId = `${fieldId}-valuesSource`;
 
-    /**
-     * @type {Array<Group|ListGroup>}
+    /**
+     * @type {Array<Group|ListGroup>}
      */
     const groups = [{
       id: valuesSourceId,
       label: 'Options source',
-      tooltip: '"Static" defines a constant, predefined set of form options.\n"Dynamic" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.',
+      tooltip: getValuesTooltip(),
       component: Group,
       entries: ValuesSourceSelectEntry({
         ...context,
@@ -70516,6 +70706,12 @@
     }
     return groups;
   }
+
+  // helpers //////////
+
+  function getValuesTooltip() {
+    return '"Static" defines a constant, predefined set of form options.\n\n' + '"Input data" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.\n\n' + '"Expression" defines options that are populated from a FEEL expression.';
+  }
   function CustomPropertiesGroup(field, editField) {
     const {
       properties = {},
@@ -70581,13 +70777,13 @@
 
   // 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) => {
@@ -70669,6 +70865,10 @@
     const formEditor = injector.get('formEditor');
     const modeling = injector.get('modeling');
     const selectionModule = injector.get('selection');
+    const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+    const {
+      feelPopupContainer
+    } = propertiesPanelConfig;
     const [state, setState] = l$2({
       selectedFormField: selectionModule.get() || formEditor._getState().schema
     });
@@ -70686,9 +70886,9 @@
       });
     }, [eventBus, formEditor, selectionModule]);
     h$1(() => {
-      /**
-       * 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);
@@ -70718,7 +70918,8 @@
           eventBus: eventBus,
           groups: getGroups(selectedFormField, editField, getService),
           headerProvider: PropertiesPanelHeaderProvider,
-          placeholderProvider: PropertiesPanelPlaceholderProvider
+          placeholderProvider: PropertiesPanelPlaceholderProvider,
+          feelPopupContainer: feelPopupContainer
         })
       })
     });
@@ -70739,10 +70940,10 @@
       });
     }
 
-    /**
-     * 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) {
@@ -70762,8 +70963,8 @@
       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;
@@ -70788,14 +70989,15 @@
   }
   PropertiesPanelRenderer.$inject = ['config.propertiesPanel', 'injector', 'eventBus'];
   var PropertiesPanelModule = {
+    __depends__: [index],
     __init__: ['propertiesPanel'],
     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) {
@@ -70804,10 +71006,10 @@
       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, {
@@ -70816,17 +71018,17 @@
       }];
     }
 
-    /**
-     * 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;
@@ -70856,48 +71058,48 @@
   };
   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 = createFormContainer();
       this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -70908,15 +71110,15 @@
         properties = {}
       } = options;
 
-      /**
-       * @private
-       * @type {any}
+      /**
+       * @private
+       * @type {any}
        */
       this.exporter = exporter;
 
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
       this._state = {
         properties,
@@ -70945,10 +71147,10 @@
       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) => {
@@ -70977,15 +71179,15 @@
       });
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     saveSchema() {
       return this.getSchema();
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     getSchema() {
       const {
@@ -70994,8 +71196,8 @@
       return exportSchema(schema, this.exporter, schemaVersion);
     }
 
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
     attachTo(parentNode) {
       if (!parentNode) {
@@ -71013,10 +71215,10 @@
       this._detach();
     }
 
-    /**
-     * @internal
-     *
-     * @param {boolean} [emit]
+    /**
+     * @internal
+     *
+     * @param {boolean} [emit]
      */
     _detach(emit = true) {
       const container = this._container,
@@ -71030,9 +71232,9 @@
       parentNode.removeChild(container);
     }
 
-    /**
-     * @param {any} property
-     * @param {any} value
+    /**
+     * @param {any} property
+     * @param {any} value
      */
     setProperty(property, value) {
       const properties = set$2(this._getState().properties, [property], value);
@@ -71041,21 +71243,21 @@
       });
     }
 
-    /**
-     * @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 {
@@ -71077,22 +71279,22 @@
       }, 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 = {
@@ -71102,15 +71304,15 @@
       this._emit('changed', this._getState());
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getModules() {
       return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
@@ -72613,8 +72815,8 @@
     return new LanguageSupport(jsonLanguage);
   }
 
-  /**
-   * @type {Facet<import('..').Variables>} Variables
+  /**
+   * @type {Facet<import('..').Variables>} Variables
    */
   const variablesFacet = Facet.define();
 
@@ -72791,11 +72993,11 @@
 
   const NO_LINT_CLS = 'fjs-no-json-lint';
 
-  /**
-   * @param {object} options
-   * @param {boolean} [options.readonly]
-   * @param {object} [options.contentAttributes]
-   * @param {string | HTMLElement} [options.placeholder]
+  /**
+   * @param {object} options
+   * @param {boolean} [options.readonly]
+   * @param {object} [options.contentAttributes]
+   * @param {string | HTMLElement} [options.placeholder]
    */
   function JSONEditor(options = {}) {
     const {
@@ -72808,8 +73010,8 @@
     let tabSize = new Compartment().of(EditorState.tabSize.of(2));
     let container = null;
 
-    /**
-     * @typedef {Array<string>} Variables
+    /**
+     * @typedef {Array<string>} Variables
      */
 
     const autocompletionConf = new Compartment();
@@ -72860,8 +73062,8 @@
       return view.state.doc.toString();
     };
 
-    /**
-     * @param {Variables} variables
+    /**
+     * @param {Variables} variables
      */
     this.setVariables = function (variables) {
       view.setVariables(variables);
@@ -72931,7 +73133,8 @@
       viewerProperties = {},
       editorProperties = {},
       viewerAdditionalModules = [],
-      editorAdditionalModules = []
+      editorAdditionalModules = [],
+      propertiesPanel: propertiesPanelConfig = {}
     } = props;
     const {
       display: displayActions = true
@@ -73007,7 +73210,8 @@
           parent: paletteContainerRef.current
         },
         propertiesPanel: {
-          parent: propertiesPanelContainerRef.current
+          parent: propertiesPanelContainerRef.current,
+          ...propertiesPanelConfig
         },
         exporter: exporterConfig,
         properties: {