camunda-bpmn-js 4.16.0 → 4.18.0

package/dist/camunda-cloud-modeler.development.js

@@ -27687,29 +27687,34 @@
    * Update context pad position.
    */
   ContextPad.prototype._updatePosition = function() {
-    if (!this.isOpen()) {
-      return;
-    }
 
-    var html = this._current.html;
+    const updateFn = () => {
+      if (!this.isOpen()) {
+        return;
+      }
 
-    var position = this._getPosition(this._current.target);
+      var html = this._current.html;
 
-    if ('x' in position && 'y' in position) {
-      html.style.left = position.x + 'px';
-      html.style.top = position.y + 'px';
-    } else {
-      [
-        'top',
-        'right',
-        'bottom',
-        'left'
-      ].forEach(function(key) {
-        if (key in position) {
-          html.style[ key ] = position[ key ] + 'px';
-        }
-      });
-    }
+      var position = this._getPosition(this._current.target);
+
+      if ('x' in position && 'y' in position) {
+        html.style.left = position.x + 'px';
+        html.style.top = position.y + 'px';
+      } else {
+        [
+          'top',
+          'right',
+          'bottom',
+          'left'
+        ].forEach(function(key) {
+          if (key in position) {
+            html.style[ key ] = position[ key ] + 'px';
+          }
+        });
+      }
+    };
+
+    this._scheduler.schedule(updateFn, 'ContextPad#_updatePosition');
   };
 
   /**
@@ -44915,9 +44920,16 @@
           hints.moveChildren = false;
         }
 
-        // apply same width and default height
-        newElement.width = element.width;
-        newElement.height = elementFactory.getDefaultSize(newElement).height;
+        // apply same directionality
+        var isHorizontalPool = isHorizontal$3(element);
+        if (!getDi$1(element).isHorizontal) {
+          getDi$1(newElement).isHorizontal = isHorizontalPool;
+        }
+
+        // keep the existing size of the pool's direction to
+        // prevent dangling message flows
+        newElement.width = isHorizontalPool ? element.width : elementFactory.getDefaultSize(newElement).width;
+        newElement.height = isHorizontalPool ? elementFactory.getDefaultSize(newElement).height : element.height;
       }
 
       if (!rules.allowed('shape.resize', { shape: newBusinessObject })) {
@@ -48603,10 +48615,17 @@
     }
 
     if (is$6(bo, 'bpmn:Participant')) {
+      var isHorizontalPool = di.isHorizontal === undefined || di.isHorizontal === true;
       if (isExpanded$1(bo, di)) {
-        return { width: 600, height: 250 };
+        if (isHorizontalPool) {
+          return { width: 600, height: 250 };
+        }
+        return { width: 250, height: 600 };
       } else {
-        return { width: 400, height: 60 };
+        if (isHorizontalPool) {
+          return { width: 400, height: 60 };
+        }
+        return { width: 60, height: 400 };
       }
     }
 
@@ -108001,19 +108020,19 @@
     errors: {}
   });
 
-  /**
-   * @typedef {Function} <propertiesPanel.showEntry> callback
-   *
-   * @example
-   *
-   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
-   *   // ...
-   * });
-   *
-   * @param {Object} context
-   * @param {boolean} [context.focus]
-   *
-   * @returns void
+  /**
+   * @typedef {Function} <propertiesPanel.showEntry> callback
+   *
+   * @example
+   *
+   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+   *   // ...
+   * });
+   *
+   * @param {Object} context
+   * @param {boolean} [context.focus]
+   *
+   * @returns void
    */
 
   const EventContext = F$3({
@@ -108032,20 +108051,20 @@
     getTooltipForId: () => {}
   });
 
-  /**
-   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const tooltip = useTooltipContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const tooltip = useTooltipContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useTooltipContext(id, element) {
     const {
@@ -108198,20 +108217,20 @@
     return `bio-properties-panel-${id}`;
   }
 
-  /**
-   * Accesses the global DescriptionContext and returns a description for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const description = useDescriptionContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global DescriptionContext and returns a description for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const description = useDescriptionContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useDescriptionContext(id, element) {
     const {
@@ -108233,11 +108252,11 @@
     return errors;
   }
 
-  /**
-   * Subscribe to an event immediately. Update subscription after inputs changed.
-   *
-   * @param {string} event
-   * @param {Function} callback
+  /**
+   * Subscribe to an event immediately. Update subscription after inputs changed.
+   *
+   * @param {string} event
+   * @param {Function} callback
    */
   function useEvent(event, callback, eventBus) {
     const eventContext = q$1(EventContext);
@@ -108267,20 +108286,20 @@
     }, [callback, event, eventBus]);
   }
 
-  /**
-   * Creates a state that persists in the global LayoutContext.
-   *
-   * @example
-   * ```jsx
-   * function Group(props) {
-   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
-   * }
-   * ```
-   *
-   * @param {(string|number)[]} path
-   * @param {any} [defaultValue]
-   *
-   * @returns {[ any, Function ]}
+  /**
+   * Creates a state that persists in the global LayoutContext.
+   *
+   * @example
+   * ```jsx
+   * function Group(props) {
+   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+   * }
+   * ```
+   *
+   * @param {(string|number)[]} path
+   * @param {any} [defaultValue]
+   *
+   * @returns {[ any, Function ]}
    */
   function useLayoutState(path, defaultValue) {
     const {
@@ -108294,11 +108313,11 @@
     return [layoutForKey, setState];
   }
 
-  /**
-   * @pinussilvestrus: we need to introduce our own hook to persist the previous
-   * state on updates.
-   *
-   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+  /**
+   * @pinussilvestrus: we need to introduce our own hook to persist the previous
+   * state on updates.
+   *
+   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
    */
 
   function usePrevious$1(value) {
@@ -108309,12 +108328,12 @@
     return ref.current;
   }
 
-  /**
-   * Subscribe to `propertiesPanel.showEntry`.
-   *
-   * @param {string} id
-   *
-   * @returns {import('preact').Ref}
+  /**
+   * Subscribe to `propertiesPanel.showEntry`.
+   *
+   * @param {string} id
+   *
+   * @returns {import('preact').Ref}
    */
   function useShowEntryEvent(id) {
     const {
@@ -108345,20 +108364,20 @@
     return ref;
   }
 
-  /**
-   * @callback setSticky
-   * @param {boolean} value
+  /**
+   * @callback setSticky
+   * @param {boolean} value
    */
 
-  /**
-   * Use IntersectionObserver to identify when DOM element is in sticky mode.
-   * If sticky is observered setSticky(true) will be called.
-   * If sticky mode is left, setSticky(false) will be called.
-   *
-   *
-   * @param {Object} ref
-   * @param {string} scrollContainerSelector
-   * @param {setSticky} setSticky
+  /**
+   * Use IntersectionObserver to identify when DOM element is in sticky mode.
+   * If sticky is observered setSticky(true) will be called.
+   * If sticky mode is left, setSticky(false) will be called.
+   *
+   *
+   * @param {Object} ref
+   * @param {string} scrollContainerSelector
+   * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
     const [scrollContainer, setScrollContainer] = h(query$1(scrollContainerSelector));
@@ -108412,19 +108431,19 @@
     }, [ref.current, scrollContainer, setSticky]);
   }
 
-  /**
-   * Creates a static function reference with changing body.
-   * This is necessary when external libraries require a callback function
-   * that has references to state variables.
-   *
-   * Usage:
-   * const callback = useStaticCallback((val) => {val === currentState});
-   *
-   * The `callback` reference is static and can be safely used in external
-   * libraries or as a prop that does not cause rerendering of children.
-   *
-   * @param {Function} callback function with changing reference
-   * @returns {Function} static function reference
+  /**
+   * Creates a static function reference with changing body.
+   * This is necessary when external libraries require a callback function
+   * that has references to state variables.
+   *
+   * Usage:
+   * const callback = useStaticCallback((val) => {val === currentState});
+   *
+   * The `callback` reference is static and can be safely used in external
+   * libraries or as a prop that does not cause rerendering of children.
+   *
+   * @param {Function} callback function with changing reference
+   * @returns {Function} static function reference
    */
   function useStaticCallback(callback) {
     const callbackRef = _$1(callback);
@@ -108567,13 +108586,13 @@
     return null;
   }
 
-  /**
-   * @typedef { {
-   *  text: (element: object) => string,
-   *  icon?: (element: Object) => import('preact').Component
-   * } } PlaceholderDefinition
-   *
-   * @param { PlaceholderDefinition } props
+  /**
+   * @typedef { {
+   *  text: (element: object) => string,
+   *  icon?: (element: Object) => import('preact').Component
+   * } } PlaceholderDefinition
+   *
+   * @param { PlaceholderDefinition } props
    */
   function Placeholder(props) {
     const {
@@ -108612,9 +108631,9 @@
 
   const noop$6 = () => {};
 
-  /**
-   * Buffer `.focus()` calls while the editor is not initialized.
-   * Set Focus inside when the editor is ready.
+  /**
+   * Buffer `.focus()` calls while the editor is not initialized.
+   * Set Focus inside when the editor is ready.
    */
   const useBufferedFocus$1 = function (editor, ref) {
     const [buffer, setBuffer] = h(undefined);
@@ -108715,9 +108734,9 @@
 
   const noop$5 = () => {};
 
-  /**
-   * Buffer `.focus()` calls while the editor is not initialized.
-   * Set Focus inside when the editor is ready.
+  /**
+   * Buffer `.focus()` calls while the editor is not initialized.
+   * Set Focus inside when the editor is ready.
    */
   const useBufferedFocus = function (editor, ref) {
     const [buffer, setBuffer] = h(undefined);
@@ -108766,10 +108785,10 @@
     p$1(() => {
       let editor;
 
-      /* Trigger FEEL toggle when
-       *
-       * - `backspace` is pressed
-       * - AND the cursor is at the beginning of the input
+      /* Trigger FEEL toggle when
+       *
+       * - `backspace` is pressed
+       * - AND the cursor is at the beginning of the input
        */
       const onKeyDown = e => {
         if (e.key !== 'Backspace' || !editor) {
@@ -108860,10 +108879,10 @@
 
   const noop$4 = () => {};
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.label
-   * @param {String} props.feel
+  /**
+   * @param {Object} props
+   * @param {Object} props.label
+   * @param {String} props.feel
    */
   function FeelIcon(props) {
     const {
@@ -108898,22 +108917,22 @@
     source: null
   });
 
-  /**
-   * Add a dragger that calls back the passed function with
-   * { event, delta } on drag.
-   *
-   * @example
-   *
-   * function dragMove(event, delta) {
-   *   // we are dragging (!!)
-   * }
-   *
-   * domElement.addEventListener('dragstart', dragger(dragMove));
-   *
-   * @param {Function} fn
-   * @param {Element} [dragPreview]
-   *
-   * @return {Function} drag start callback function
+  /**
+   * Add a dragger that calls back the passed function with
+   * { event, delta } on drag.
+   *
+   * @example
+   *
+   * function dragMove(event, delta) {
+   *   // we are dragging (!!)
+   * }
+   *
+   * domElement.addEventListener('dragstart', dragger(dragMove));
+   *
+   * @param {Function} fn
+   * @param {Element} [dragPreview]
+   *
+   * @return {Function} drag start callback function
    */
   function createDragger(fn, dragPreview) {
     let self;
@@ -108968,23 +108987,23 @@
 
   const noop$3 = () => {};
 
-  /**
-   * A generic popup component.
-   *
-   * @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]
-   * @param {Function} props.onClose
-   * @param {Function} [props.onPostActivate]
-   * @param {Function} [props.onPostDeactivate]
-   * @param {boolean} [props.returnFocus]
-   * @param {boolean} [props.closeOnEscape]
-   * @param {string} props.title
-   * @param {Ref} [ref]
+  /**
+   * A generic popup component.
+   *
+   * @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]
+   * @param {Function} props.onClose
+   * @param {Function} [props.onPostActivate]
+   * @param {Function} [props.onPostDeactivate]
+   * @param {boolean} [props.returnFocus]
+   * @param {boolean} [props.closeOnEscape]
+   * @param {string} props.title
+   * @param {Ref} [ref]
    */
   function PopupComponent(props, globalRef) {
     const {
@@ -109203,12 +109222,12 @@
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
-  /**
-   * 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
+  /**
+   * 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 {
@@ -109431,11 +109450,11 @@
     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
+  /**
+   * 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 = _$1(false);
@@ -109513,19 +109532,19 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {String} props.switcherLabel
-   * @param {Boolean} props.inline
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {String} props.switcherLabel
+   * @param {Boolean} props.inline
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
    */
   function ToggleSwitchEntry(props) {
     const {
@@ -109633,22 +109652,22 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Boolean} props.debounce
-   * @param {String} props.description
-   * @param {Boolean} props.disabled
-   * @param {Object} props.element
-   * @param {Function} props.getValue
-   * @param {String} props.id
-   * @param {String} props.label
-   * @param {String} props.max
-   * @param {String} props.min
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {String} props.step
-   * @param {Function} props.validate
+  /**
+   * @param {Object} props
+   * @param {Boolean} props.debounce
+   * @param {String} props.description
+   * @param {Boolean} props.disabled
+   * @param {Object} props.element
+   * @param {Function} props.getValue
+   * @param {String} props.id
+   * @param {String} props.label
+   * @param {String} props.max
+   * @param {String} props.min
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {String} props.step
+   * @param {Function} props.validate
    */
   function NumberFieldEntry(props) {
     const {
@@ -110133,26 +110152,26 @@
     });
   });
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string} [props.placeholder]
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string} [props.placeholder]
+   * @param {string|import('preact').Component} props.tooltip
    */
   function FeelEntry$2(props) {
     const {
@@ -110239,27 +110258,27 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {String} props.max
-   * @param {String} props.min
-   * @param {String} props.step
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {String} props.max
+   * @param {String} props.min
+   * @param {String} props.step
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
    */
   function FeelNumberEntry(props) {
     return u(FeelEntry$2, {
@@ -110269,25 +110288,25 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string} [props.placeholder]
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string} [props.placeholder]
    */
   function FeelTextAreaEntry$1(props) {
     return u(FeelEntry$2, {
@@ -110297,24 +110316,24 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
    */
   function FeelCheckboxEntry(props) {
     return u(FeelEntry$2, {
@@ -110383,84 +110402,84 @@
   const DEFAULT_DESCRIPTION = {};
   const DEFAULT_TOOLTIP = {};
 
-  /**
-   * @typedef { {
-   *    component: import('preact').Component,
-   *    id: String,
-   *    isEdited?: Function
-   * } } EntryDefinition
-   *
-   * @typedef { {
-   *    autoFocusEntry: String,
-   *    autoOpen?: Boolean,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    remove: (event: MouseEvent) => void
-   * } } ListItemDefinition
-   *
-   * @typedef { {
-   *    add: (event: MouseEvent) => void,
-   *    component: import('preact').Component,
-   *    element: Object,
-   *    id: String,
-   *    items: Array<ListItemDefinition>,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } ListGroupDefinition
-   *
-   * @typedef { {
-   *    component?: import('preact').Component,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } GroupDefinition
-   *
-   *  @typedef { {
-   *    [id: String]: GetDescriptionFunction
-   * } } DescriptionConfig
-   *
-   *  @typedef { {
-   *    [id: String]: GetTooltipFunction
-   * } } TooltipConfig
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetDescriptionFunction
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetTooltipFunction
-   *
-   * @typedef { {
-   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
-   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
-   * } } PlaceholderProvider
-   *
+  /**
+   * @typedef { {
+   *    component: import('preact').Component,
+   *    id: String,
+   *    isEdited?: Function
+   * } } EntryDefinition
+   *
+   * @typedef { {
+   *    autoFocusEntry: String,
+   *    autoOpen?: Boolean,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    remove: (event: MouseEvent) => void
+   * } } ListItemDefinition
+   *
+   * @typedef { {
+   *    add: (event: MouseEvent) => void,
+   *    component: import('preact').Component,
+   *    element: Object,
+   *    id: String,
+   *    items: Array<ListItemDefinition>,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } ListGroupDefinition
+   *
+   * @typedef { {
+   *    component?: import('preact').Component,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } GroupDefinition
+   *
+   *  @typedef { {
+   *    [id: String]: GetDescriptionFunction
+   * } } DescriptionConfig
+   *
+   *  @typedef { {
+   *    [id: String]: GetTooltipFunction
+   * } } TooltipConfig
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetDescriptionFunction
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetTooltipFunction
+   *
+   * @typedef { {
+   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+   * } } PlaceholderProvider
+   *
    */
 
-  /**
-   * A basic properties panel component. Describes *how* content will be rendered, accepts
-   * data from implementor to describe *what* will be rendered.
-   *
-   * @param {Object} props
-   * @param {Object|Array} props.element
-   * @param {import('./components/Header').HeaderProvider} props.headerProvider
-   * @param {PlaceholderProvider} [props.placeholderProvider]
-   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
-   * @param {Object} [props.layoutConfig]
-   * @param {Function} [props.layoutChanged]
-   * @param {DescriptionConfig} [props.descriptionConfig]
-   * @param {Function} [props.descriptionLoaded]
-   * @param {TooltipConfig} [props.tooltipConfig]
-   * @param {Function} [props.tooltipLoaded]
-   * @param {HTMLElement} [props.feelPopupContainer]
-   * @param {Object} [props.eventBus]
+  /**
+   * A basic properties panel component. Describes *how* content will be rendered, accepts
+   * data from implementor to describe *what* will be rendered.
+   *
+   * @param {Object} props
+   * @param {Object|Array} props.element
+   * @param {import('./components/Header').HeaderProvider} props.headerProvider
+   * @param {PlaceholderProvider} [props.placeholderProvider]
+   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+   * @param {Object} [props.layoutConfig]
+   * @param {Function} [props.layoutChanged]
+   * @param {DescriptionConfig} [props.descriptionConfig]
+   * @param {Function} [props.descriptionLoaded]
+   * @param {TooltipConfig} [props.tooltipConfig]
+   * @param {Function} [props.tooltipLoaded]
+   * @param {HTMLElement} [props.feelPopupContainer]
+   * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
     const {
@@ -110631,11 +110650,11 @@
 
   // hooks //////////////////
 
-  /**
-   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
-   *
-   * @param {Function} effect
-   * @param {Array} deps
+  /**
+   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
    */
   function useUpdateLayoutEffect(effect, deps) {
     const isMounted = _$1(false);
@@ -110710,15 +110729,15 @@
     });
   }
 
-  /**
-   *
-   * @param {Array<null | Element>} ignoredElements
-   * @param {Function} callback
+  /**
+   *
+   * @param {Array<null | Element>} ignoredElements
+   * @param {Function} callback
    */
   function useGlobalClick(ignoredElements, callback) {
     p$1(() => {
-      /**
-       * @param {MouseEvent} event
+      /**
+       * @param {MouseEvent} event
        */
       function listener(event) {
         if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -110751,20 +110770,20 @@
     });
   }
 
-  /**
-   * @typedef { {
-   *   [key: string]: string;
-   * } } TranslateReplacements
+  /**
+   * @typedef { {
+   *   [key: string]: string;
+   * } } TranslateReplacements
    */
 
-  /**
-   * A simple translation stub to be used for multi-language support.
-   * Can be easily replaced with a more sophisticated solution.
-   *
-   * @param {string} template to interpolate
-   * @param {TranslateReplacements} [replacements] a map with substitutes
-   *
-   * @return {string} the translated string
+  /**
+   * A simple translation stub to be used for multi-language support.
+   * Can be easily replaced with a more sophisticated solution.
+   *
+   * @param {string} template to interpolate
+   * @param {TranslateReplacements} [replacements] a map with substitutes
+   *
+   * @return {string} the translated string
    */
   function translateFallback(template, replacements) {
     replacements = replacements || {};
@@ -110876,8 +110895,8 @@
 
   const noop$1$1 = () => {};
 
-  /**
-   * @param {import('../PropertiesPanel').ListGroupDefinition} props
+  /**
+   * @param {import('../PropertiesPanel').ListGroupDefinition} props
    */
   function ListGroup(props) {
     const {
@@ -111069,18 +111088,18 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
+   * @param {boolean} [props.disabled]
    */
   function CheckboxEntry(props) {
     const {
@@ -111201,20 +111220,20 @@
     });
   }
 
-  /**
-   * @param {object} props
-   * @param {object} props.element
-   * @param {string} props.id
-   * @param {string} [props.description]
-   * @param {string} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {Function} props.getOptions
-   * @param {boolean} [props.disabled]
-   * @param {Function} [props.validate]
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {object} props
+   * @param {object} props.element
+   * @param {string} props.id
+   * @param {string} [props.description]
+   * @param {string} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Function} props.getOptions
+   * @param {boolean} [props.disabled]
+   * @param {Function} [props.validate]
+   * @param {string|import('preact').Component} props.tooltip
    */
   function SelectEntry(props) {
     const {
@@ -111302,7 +111321,7 @@
       monospace,
       onFocus,
       onBlur,
-      autoResize,
+      autoResize = true,
       placeholder,
       rows = autoResize ? 1 : 2,
       tooltip
@@ -111359,21 +111378,21 @@
     });
   }
 
-  /**
-   * @param {object} props
-   * @param {object} props.element
-   * @param {string} props.id
-   * @param {string} props.description
-   * @param {boolean} props.debounce
-   * @param {string} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {number} props.rows
-   * @param {boolean} props.monospace
-   * @param {Function} [props.validate]
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {object} props
+   * @param {object} props.element
+   * @param {string} props.id
+   * @param {string} props.description
+   * @param {boolean} props.debounce
+   * @param {string} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {number} props.rows
+   * @param {boolean} props.monospace
+   * @param {Function} [props.validate]
+   * @param {boolean} [props.disabled]
    */
   function TextAreaEntry(props) {
     const {
@@ -111507,20 +111526,20 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
-   * @param {Function} props.validate
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
+   * @param {Function} props.validate
    */
   function TextfieldEntry(props) {
     const {
@@ -111613,20 +111632,20 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * Check if the FEEL popup is open.
-     * @return {Boolean}
+    /**
+     * 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 the FEEL popup.
+     *
+     * @param {String} entryId
+     * @param {Object} popupConfig
+     * @param {HTMLElement} sourceElement
      */
     open(entryId, popupConfig, sourceElement) {
       return this._eventBus.fire('feelPopup._open', {
@@ -111636,8 +111655,8 @@
       });
     }
 
-    /**
-     * Close the FEEL popup.
+    /**
+     * Close the FEEL popup.
      */
     close() {
       return this._eventBus.fire('feelPopup._close');
@@ -115434,8 +115453,8 @@
     });
     const selectedElement = state.selectedElement;
 
-    /**
-     * @param {djs.model.Base | Array<djs.model.Base>} element
+    /**
+     * @param {djs.model.Base | Array<djs.model.Base>} element
      */
     const _update = element => {
       if (!element) {
@@ -115620,10 +115639,10 @@
 
   const DEFAULT_PRIORITY$1 = 1000;
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').GroupDefinition } GroupDefinition
-   * @typedef { import('@bpmn-io/properties-panel').ListGroupDefinition } ListGroupDefinition
-   * @typedef { { getGroups: (ModdleElement) => (Array{GroupDefinition|ListGroupDefinition}) => Array{GroupDefinition|ListGroupDefinition}) } PropertiesProvider
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').GroupDefinition } GroupDefinition
+   * @typedef { import('@bpmn-io/properties-panel').ListGroupDefinition } ListGroupDefinition
+   * @typedef { { getGroups: (ModdleElement) => (Array{GroupDefinition|ListGroupDefinition}) => Array{GroupDefinition|ListGroupDefinition}) } PropertiesProvider
    */
 
   class BpmnPropertiesPanelRenderer {
@@ -115660,10 +115679,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) {
@@ -115688,8 +115707,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;
@@ -115699,11 +115718,11 @@
       }
     }
 
-    /**
-     * Register a new properties provider to the properties panel.
-     *
-     * @param {Number} [priority]
-     * @param {PropertiesProvider} provider
+    /**
+     * Register a new properties provider to the properties panel.
+     *
+     * @param {Number} [priority]
+     * @param {PropertiesProvider} provider
      */
     registerProvider(priority, provider) {
       if (!provider) {
@@ -115720,9 +115739,9 @@
       this._eventBus.fire('propertiesPanel.providersChanged');
     }
 
-    /**
-     * Updates the layout of the properties panel.
-     * @param {Object} layout
+    /**
+     * Updates the layout of the properties panel.
+     * @param {Object} layout
      */
     setLayout(layout) {
       this._eventBus.fire('propertiesPanel.setLayout', {
@@ -115772,12 +115791,12 @@
     return element && (element.isImplicit || element.id === '__implicitroot');
   }
 
-  /**
-   * Setup keyboard bindings (undo, redo) on the given container.
-   *
-   * @param {Element} container
-   * @param {EventBus} eventBus
-   * @param {CommandStack} commandStack
+  /**
+   * Setup keyboard bindings (undo, redo) on the given container.
+   *
+   * @param {Element} container
+   * @param {EventBus} eventBus
+   * @param {CommandStack} commandStack
    */
   function setupKeyboard(container, eventBus, commandStack) {
     function cancel(event) {
@@ -115802,14 +115821,14 @@
     });
   }
 
-  /**
-   * A handler that combines and executes multiple commands.
-   *
-   * All updates are bundled on the command stack and executed in one step.
-   * This also makes it possible to revert the changes in one step.
-   *
-   * Example use case: remove the camunda:formKey attribute and in addition
-   * add all form fields needed for the camunda:formData property.
+  /**
+   * A handler that combines and executes multiple commands.
+   *
+   * All updates are bundled on the command stack and executed in one step.
+   * This also makes it possible to revert the changes in one step.
+   *
+   * Example use case: remove the camunda:formKey attribute and in addition
+   * add all form fields needed for the camunda:formData property.
    */
   let MultiCommandHandler$1 = class MultiCommandHandler {
     constructor(commandStack) {
@@ -115936,12 +115955,12 @@
     return compensateEventDefinition && compensateEventDefinition.get('activityRef');
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function CompensationProps(props) {
     const {
@@ -116051,12 +116070,12 @@
     return getFlowElements(element, 'bpmn:BoundaryEvent');
   }
 
-  /**
-   * Checks whether an Activity is attaching a CompensateEvent of the parent container.
-   *
-   * @param {ModdleElement} activity
-   * @param {Array<ModdleElement>} boundaryEvents
-   * @returns {Boolean}
+  /**
+   * Checks whether an Activity is attaching a CompensateEvent of the parent container.
+   *
+   * @param {ModdleElement} activity
+   * @param {Array<ModdleElement>} boundaryEvents
+   * @returns {Boolean}
    */
   function hasCompensationEventAttached(activity, boundaryEvents) {
     const {
@@ -116071,15 +116090,15 @@
     });
   }
 
-  /**
-   * Checks whether an Activity can be compensated. That's the case when it is
-   * a) a CallActivity
-   * b) a SubProcess, when it is not event based and not a compensation
-   * c) any other Activity, when it is attaching a CompensateEvent of the parent container
-   *
-   * @param {ModdleElement} activity
-   * @param {Array<ModdleElement>} boundaryEvents
-   * @returns {Boolean}
+  /**
+   * Checks whether an Activity can be compensated. That's the case when it is
+   * a) a CallActivity
+   * b) a SubProcess, when it is not event based and not a compensation
+   * c) any other Activity, when it is attaching a CompensateEvent of the parent container
+   *
+   * @param {ModdleElement} activity
+   * @param {Array<ModdleElement>} boundaryEvents
+   * @returns {Boolean}
    */
   function canBeCompensated(activity, boundaryEvents) {
     return is$6(activity, 'bpmn:CallActivity') || is$6(activity, 'bpmn:SubProcess') && !activity.triggeredByEvent && !activity.isForCompensation || hasCompensationEventAttached(activity, boundaryEvents);
@@ -116092,11 +116111,11 @@
     });
   }
 
-  /**
-   * Retrieves all possible activities to reference for a Compensation.
-   *
-   * @param {djs.model.Base} element
-   * @returns {Array<ModdleElement>}
+  /**
+   * Retrieves all possible activities to reference for a Compensation.
+   *
+   * @param {djs.model.Base} element
+   * @returns {Array<ModdleElement>}
    */
   function findActivityRefs(element) {
     const businessObject = getBusinessObject$2(element);
@@ -116116,13 +116135,13 @@
     return activities;
   }
 
-  /**
-   * Retrieves an option label in the form
-   * a) with name: "my Task (id=Task_1)"
-   * b) without name: "(id=Task_1)"
-   *
-   * @param {ModdleElement} activity
-   * @returns {String}
+  /**
+   * Retrieves an option label in the form
+   * a) with name: "my Task (id=Task_1)"
+   * b) without name: "(id=Task_1)"
+   *
+   * @param {ModdleElement} activity
+   * @returns {String}
    */
   function createOptionLabel(activity) {
     const {
@@ -116137,12 +116156,12 @@
 
   const DOCUMENTATION_TEXT_FORMAT = 'text/plain';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function DocumentationProps(props) {
     const {
@@ -116213,12 +116232,12 @@
     });
   }
 
-  /**
-   * Retrieves a documentation element from a given moddle element.
-   *
-   * @param {ModdleElement} businessObject
-   *
-   * @returns {ModdleElement} documentation element inside the given moddle element.
+  /**
+   * Retrieves a documentation element from a given moddle element.
+   *
+   * @param {ModdleElement} businessObject
+   *
+   * @returns {ModdleElement} documentation element inside the given moddle element.
    */
   function getDocumentation(businessObject) {
     return function () {
@@ -116227,10 +116246,10 @@
     };
   }
 
-  /**
-   * Sets a documentation element for a given moddle element.
-   *
-   * @param {ModdleElement} businessObject
+  /**
+   * Sets a documentation element for a given moddle element.
+   *
+   * @param {ModdleElement} businessObject
    */
   function setDocumentation(element, businessObject, bpmnFactory, commandStack) {
     return function (value) {
@@ -116273,15 +116292,15 @@
     };
   }
 
-  /**
-   * Create a new element and (optionally) set its parent.
-   *
-   * @param {string} type
-   * @param {Object} properties
-   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
-   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
-   *
-   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
+  /**
+   * Create a new element and (optionally) set its parent.
+   *
+   * @param {string} type
+   * @param {Object} properties
+   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
+   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
+   *
+   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
    */
   function createElement$3(type, properties, parent, bpmnFactory) {
     const element = bpmnFactory.create(type, properties);
@@ -116291,8 +116310,8 @@
     return element;
   }
 
-  /**
-   * generate a semantic id with given prefix
+  /**
+   * generate a semantic id with given prefix
    */
   function nextId$1(prefix) {
     const ids = new Ids$1([32, 32, 1]);
@@ -116321,12 +116340,12 @@
   const EMPTY_OPTION$4 = '';
   const CREATE_NEW_OPTION$4 = 'create-new';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function ErrorProps$2(props) {
     const {
@@ -116502,12 +116521,12 @@
 
   const CREATE_NEW_OPTION$3 = 'create-new';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function EscalationProps$2(props) {
     const {
@@ -116680,12 +116699,12 @@
     return sortBy$1(elements, e => (e.name || '').toLowerCase());
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function ExecutableProps(props) {
     const {
@@ -116756,14 +116775,14 @@
   // for ID validation as per BPMN Schema (QName - Namespace)
   const ID_REGEX = /^[a-z_][\w-.]*$/i;
 
-  /**
-   * checks whether the id value is valid
-   *
-   * @param {ModdleElement} element
-   * @param {String} idValue
-   * @param {Function} translate
-   *
-   * @return {String} error message
+  /**
+   * checks whether the id value is valid
+   *
+   * @param {ModdleElement} element
+   * @param {String} idValue
+   * @param {Function} translate
+   *
+   * @return {String} error message
    */
   function isIdValid(element, idValue, translate) {
     const assigned = element.$model.ids.assigned(idValue);
@@ -116791,12 +116810,12 @@
     return SPACE_REGEX.test(value);
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function IdProps$1() {
     return [{
@@ -116838,12 +116857,12 @@
     });
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function LinkProps(props) {
     const {
@@ -116891,12 +116910,12 @@
   const EMPTY_OPTION$3 = '';
   const CREATE_NEW_OPTION$2 = 'create-new';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function MessageProps$1(props) {
     const {
@@ -117039,12 +117058,12 @@
     return sortBy$1(elements, e => (e.name || '').toLowerCase());
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function MultiInstanceProps$2(props) {
     const {
@@ -117115,59 +117134,59 @@
 
   // generic ///////////////////////////
 
-  /**
-   * isMultiInstanceSupported - check whether given element supports MultiInstanceLoopCharacteristics.
-   *
-   * @param {djs.model.Base} element
-   * @return {boolean}
+  /**
+   * isMultiInstanceSupported - check whether given element supports MultiInstanceLoopCharacteristics.
+   *
+   * @param {djs.model.Base} element
+   * @return {boolean}
    */
   function isMultiInstanceSupported$1(element) {
     const loopCharacteristics = getLoopCharacteristics$2(element);
     return !!loopCharacteristics && is$6(loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics');
   }
 
-  /**
-   * getBody - get the body of a given expression.
-   *
-   * @param {ModdleElement<bpmn:FormalExpression>} expression
-   * @return {string} the body (value) of the expression
+  /**
+   * getBody - get the body of a given expression.
+   *
+   * @param {ModdleElement<bpmn:FormalExpression>} expression
+   * @return {string} the body (value) of the expression
    */
   function getBody(expression) {
     return expression && expression.get('body');
   }
 
-  /**
-   * getProperty - get a property value of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   * @param {string} propertyName
-   *
-   * @return {any} the property value
+  /**
+   * getProperty - get a property value of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   * @param {string} propertyName
+   *
+   * @return {any} the property value
    */
   function getProperty$2(element, propertyName) {
     const loopCharacteristics = getLoopCharacteristics$2(element);
     return loopCharacteristics && loopCharacteristics.get(propertyName);
   }
 
-  /**
-   * getLoopCharacteristics - get loopCharacteristics of a given element.
-   *
-   * @param {djs.model.Base} element
-   * @return {ModdleElement<bpmn:MultiInstanceLoopCharacteristics> | undefined}
+  /**
+   * getLoopCharacteristics - get loopCharacteristics of a given element.
+   *
+   * @param {djs.model.Base} element
+   * @return {ModdleElement<bpmn:MultiInstanceLoopCharacteristics> | undefined}
    */
   function getLoopCharacteristics$2(element) {
     const bo = getBusinessObject$2(element);
     return bo.loopCharacteristics;
   }
 
-  /**
-   * createFormalExpression - creates a 'bpmn:FormalExpression' element.
-   *
-   * @param {ModdleElement} parent
-   * @param {string} body
-   * @param {BpmnFactory} bpmnFactory
-   *
-   * @result {ModdleElement<bpmn:FormalExpression>} a formal expression
+  /**
+   * createFormalExpression - creates a 'bpmn:FormalExpression' element.
+   *
+   * @param {ModdleElement} parent
+   * @param {string} body
+   * @param {BpmnFactory} bpmnFactory
+   *
+   * @result {ModdleElement<bpmn:FormalExpression>} a formal expression
    */
   function createFormalExpression$1(parent, body, bpmnFactory) {
     return createElement$3('bpmn:FormalExpression', {
@@ -117175,13 +117194,13 @@
     }, parent, bpmnFactory);
   }
 
-  /**
-   * updateFormalExpression - updates a specific formal expression of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   * @param {string} propertyName
-   * @param {string} newValue
-   * @param {BpmnFactory} bpmnFactory
+  /**
+   * updateFormalExpression - updates a specific formal expression of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
    */
   function updateFormalExpression(element, propertyName, newValue, bpmnFactory) {
     const loopCharacteristics = getLoopCharacteristics$2(element);
@@ -117218,23 +117237,23 @@
 
   // loopCardinality
 
-  /**
-   * getLoopCardinality - get the loop cardinality of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the loop cardinality
+  /**
+   * getLoopCardinality - get the loop cardinality of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the loop cardinality
    */
   function getLoopCardinality(element) {
     return getProperty$2(element, 'loopCardinality');
   }
 
-  /**
-   * getLoopCardinalityValue - get the loop cardinality value of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {string} the loop cardinality value
+  /**
+   * getLoopCardinalityValue - get the loop cardinality value of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {string} the loop cardinality value
    */
   function getLoopCardinalityValue(element) {
     const loopCardinality = getLoopCardinality(element);
@@ -117243,35 +117262,35 @@
 
   // completionCondition /////////////////////
 
-  /**
-   * getCompletionCondition - get the completion condition of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the completion condition
+  /**
+   * getCompletionCondition - get the completion condition of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the completion condition
    */
   function getCompletionCondition$1(element) {
     return getProperty$2(element, 'completionCondition');
   }
 
-  /**
-   * getCompletionConditionValue - get the completion condition value of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {string} the completion condition value
+  /**
+   * getCompletionConditionValue - get the completion condition value of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {string} the completion condition value
    */
   function getCompletionConditionValue(element) {
     const completionCondition = getCompletionCondition$1(element);
     return getBody(completionCondition);
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function NameProps(props) {
     const {
@@ -117375,12 +117394,12 @@
     return categoryValue;
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function ProcessProps$1(props) {
     const {
@@ -117471,15 +117490,15 @@
     return is$6(element, 'bpmn:Participant') && element.businessObject.get('processRef');
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
   const EMPTY_OPTION$2 = '';
   const CREATE_NEW_OPTION$1 = 'create-new';
 
-  /**
-   * @returns {Entry[]}
+  /**
+   * @returns {Entry[]}
    */
   function SignalProps$1(props) {
     const {
@@ -117629,12 +117648,12 @@
     return isAny$1(element, ['bpmn:StartEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:BoundaryEvent']) && !!getTimerEventDefinition$1(element);
   }
 
-  /**
-   * Get the timer definition type for a given timer event definition.
-   *
-   * @param {ModdleElement<bpmn:TimerEventDefinition>} timer
-   *
-   * @return {string|undefined} the timer definition type
+  /**
+   * Get the timer definition type for a given timer event definition.
+   *
+   * @param {ModdleElement<bpmn:TimerEventDefinition>} timer
+   *
+   * @return {string|undefined} the timer definition type
    */
   function getTimerDefinitionType(timer) {
     if (!timer) {
@@ -117717,12 +117736,12 @@
     return entries;
   }
 
-  /**
-   * TimerEventDefinitionType - Generic select entry allowing to select a specific
-   * timerEventDefintionType. To be used together with timerEventDefinitionValue.
-   *
-   * @param  {type} props
-   * @return {SelectEntry}
+  /**
+   * TimerEventDefinitionType - Generic select entry allowing to select a specific
+   * timerEventDefintionType. To be used together with timerEventDefinitionValue.
+   *
+   * @param  {type} props
+   * @return {SelectEntry}
    */
   function TimerEventDefinitionType$2(props) {
     const {
@@ -117790,13 +117809,13 @@
     });
   }
 
-  /**
-   * TimerEventDefinitionValue - Generic textField entry allowing to specify the
-   * timerEventDefintionValue based on the set timerEventDefintionType. To be used
-   * together with timerEventDefinitionType.
-   *
-   * @param  {type} props
-   * @return {TextFieldEntry}
+  /**
+   * TimerEventDefinitionValue - Generic textField entry allowing to specify the
+   * timerEventDefintionValue based on the set timerEventDefintionType. To be used
+   * together with timerEventDefinitionType.
+   *
+   * @param  {type} props
+   * @return {TextFieldEntry}
    */
   function TimerEventDefinitionValue$2(props) {
     const {
@@ -118081,12 +118100,12 @@
     bpmnPropertiesProvider: ['type', BpmnPropertiesProvider]
   };
 
-  /**
-   * Get extension elements of business object. Optionally filter by type.
-   *
-   * @param {ModdleElement} businessObject
-   * @param {string} [type=undefined]
-   * @returns {Array<ModdleElement>}
+  /**
+   * Get extension elements of business object. Optionally filter by type.
+   *
+   * @param {ModdleElement} businessObject
+   * @param {string} [type=undefined]
+   * @returns {Array<ModdleElement>}
    */
   function getExtensionElementsList$2(businessObject, type = undefined) {
     const extensionElements = businessObject.get('extensionElements');
@@ -118103,13 +118122,13 @@
     return values;
   }
 
-  /**
-   * Add one or more extension elements. Create bpmn:ExtensionElements if it doesn't exist.
-   *
-   * @param {ModdleElement} element
-   * @param {ModdleElement} businessObject
-   * @param {ModdleElement|Array<ModdleElement>} extensionElementsToAdd
-   * @param {CommandStack} commandStack
+  /**
+   * Add one or more extension elements. Create bpmn:ExtensionElements if it doesn't exist.
+   *
+   * @param {ModdleElement} element
+   * @param {ModdleElement} businessObject
+   * @param {ModdleElement|Array<ModdleElement>} extensionElementsToAdd
+   * @param {CommandStack} commandStack
    */
   function addExtensionElements(element, businessObject, extensionElementToAdd, bpmnFactory, commandStack) {
     const commands = [];
@@ -118147,13 +118166,13 @@
     commandStack.execute('properties-panel.multi-command-executor', commands);
   }
 
-  /**
-   * Remove one or more extension elements. Remove bpmn:ExtensionElements afterwards if it's empty.
-   *
-   * @param {ModdleElement} element
-   * @param {ModdleElement} businessObject
-   * @param {ModdleElement|Array<ModdleElement>} extensionElementsToRemove
-   * @param {CommandStack} commandStack
+  /**
+   * Remove one or more extension elements. Remove bpmn:ExtensionElements afterwards if it's empty.
+   *
+   * @param {ModdleElement} element
+   * @param {ModdleElement} businessObject
+   * @param {ModdleElement|Array<ModdleElement>} extensionElementsToRemove
+   * @param {CommandStack} commandStack
    */
   function removeExtensionElements$1(element, businessObject, extensionElementsToRemove, commandStack) {
     if (!isArray$a(extensionElementsToRemove)) {
@@ -118525,24 +118544,24 @@
     return is$6(element, 'bpmn:UserTask') || isZeebeServiceTask(element);
   }
 
-  /**
-   * Get first zeebe:TaskHeaders element for a specific element.
-   *
-   * @param  {ModdleElement} element
-   *
-   * @return {ModdleElement} a zeebe:TaskHeader element
+  /**
+   * Get first zeebe:TaskHeaders element for a specific element.
+   *
+   * @param  {ModdleElement} element
+   *
+   * @return {ModdleElement} a zeebe:TaskHeader element
    */
   function getTaskHeaders$1(element) {
     const businessObject = getBusinessObject$2(element);
     return getExtensionElementsList$2(businessObject, 'zeebe:TaskHeaders')[0];
   }
 
-  /**
-   * Retrieve all zeebe:Header elements for a specific element.
-   *
-   * @param  {ModdleElement} element
-   *
-   * @return {Array<ModdleElement>} a list of zeebe:Header elements
+  /**
+   * Retrieve all zeebe:Header elements for a specific element.
+   *
+   * @param  {ModdleElement} element
+   *
+   * @return {Array<ModdleElement>} a list of zeebe:Header elements
    */
   function getHeaders(element) {
     const taskHeaders = getTaskHeaders$1(element);
@@ -118583,10 +118602,10 @@
       return DEFAULT_IMPLEMENTATION_OPTION$1;
     };
 
-    /**
-     * Set value by either creating a zeebe:calledDecision or a zeebe:taskDefintion
-     * extension element. Note that they must not exist both at the same time, however
-     * this will be ensured by a bpmn-js behavior (and not by the propPanel).
+    /**
+     * Set value by either creating a zeebe:calledDecision or a zeebe:taskDefintion
+     * extension element. Note that they must not exist both at the same time, however
+     * this will be ensured by a bpmn-js behavior (and not by the propPanel).
      */
     const setValue = value => {
       let extensionElement, extensionElementType;
@@ -119039,12 +119058,12 @@
     return isAny$1(element, CONDITIONAL_SOURCES$1);
   }
 
-  /**
-   * getConditionExpression - get the body value of a condition expression for a given element
-   *
-   * @param  {ModdleElement} element
-   *
-   * @return {string|undefined}
+  /**
+   * getConditionExpression - get the body value of a condition expression for a given element
+   *
+   * @param  {ModdleElement} element
+   *
+   * @return {string|undefined}
    */
   function getConditionExpression$1(element) {
     const businessObject = getBusinessObject$2(element);
@@ -119100,12 +119119,12 @@
     });
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function EscalationProps$1(props) {
     const {
@@ -119733,24 +119752,24 @@
 
   // helpers /////////////
 
-  /**
-   * @typedef { { cmd: string, context: Object } } Command
-   * @typedef {Command[]} Commands
-   *
-   * @typedef {import('diagram-js/lib/model/Types').Element} Element
-   * @typedef {import('bpmn-js/lib/model/Types').ModdleElement} ModdleElement
-   *
-   * @param {import('didi').Injector} Injector
+  /**
+   * @typedef { { cmd: string, context: Object } } Command
+   * @typedef {Command[]} Commands
+   *
+   * @typedef {import('diagram-js/lib/model/Types').Element} Element
+   * @typedef {import('bpmn-js/lib/model/Types').ModdleElement} ModdleElement
+   *
+   * @param {import('didi').Injector} Injector
    */
 
-  /**
-   * @param {Injector} injector
-   * @param {Element} element
-   *
-   * @returns { {
-   *   commands: Commands,
-   *   extensionElements: ModdleElement
-   * } }
+  /**
+   * @param {Injector} injector
+   * @param {Element} element
+   *
+   * @returns { {
+   *   commands: Commands,
+   *   extensionElements: ModdleElement
+   * } }
    */
   function getOrCreateExtensionElements(injector, element, moddleElement) {
     const businessObject = moddleElement || getBusinessObject$2(element);
@@ -119773,14 +119792,14 @@
     };
   }
 
-  /**
-   * @param {Injector} injector
-   * @param {Element} element
-   *
-   * @returns { {
-  *   commands: Commands,
-  *   formDefinition: ModdleElement
-  * } }
+  /**
+   * @param {Injector} injector
+   * @param {Element} element
+   *
+   * @returns { {
+  *   commands: Commands,
+  *   formDefinition: ModdleElement
+  * } }
   */
   function getOrCreateFormDefintition(injector, element) {
     let formDefinition = getFormDefinition$1(element);
@@ -119803,15 +119822,15 @@
     };
   }
 
-  /**
-   * @param {Injector} injector
-   * @param {Element} element
-   *
-   * @returns { {
-   *   commands: Commands,
-   *   formDefinition: ModdleElement,
-   *   userTaskForm: ModdleElement
-   * } }
+  /**
+   * @param {Injector} injector
+   * @param {Element} element
+   *
+   * @returns { {
+   *   commands: Commands,
+   *   formDefinition: ModdleElement,
+   *   userTaskForm: ModdleElement
+   * } }
    */
   function getOrCreateUserTaskForm(injector, element) {
     let userTaskForm = getUserTaskForm$1(element);
@@ -119888,8 +119907,8 @@
   function removeFormDefinition(injector, element) {
     const formDefinition = getFormDefinition$1(element);
 
-    /**
-     * @type {import('bpmn-js/lib/features/modeling/Modeling').default}
+    /**
+     * @type {import('bpmn-js/lib/features/modeling/Modeling').default}
      */
     const modeling = injector.get('modeling');
     if (formDefinition) {
@@ -119901,36 +119920,36 @@
     }
   }
 
-  /**
-   * @param {Injector} injector
-   * @param {Object} properties
-   * @param {ModdleElement} parent
-   *
-   * @returns {ModdleElement}
+  /**
+   * @param {Injector} injector
+   * @param {Object} properties
+   * @param {ModdleElement} parent
+   *
+   * @returns {ModdleElement}
    */
   function createFormDefinition(injector, properties, parent) {
     const bpmnFactory = injector.get('bpmnFactory');
     return createElement$3('zeebe:FormDefinition', properties, parent, bpmnFactory);
   }
 
-  /**
-   * @param {Injector} injector
-   * @param {Object} properties
-   * @param {ModdleElement} parent
-   *
-   * @returns {ModdleElement}
+  /**
+   * @param {Injector} injector
+   * @param {Object} properties
+   * @param {ModdleElement} parent
+   *
+   * @returns {ModdleElement}
    */
   function createUserTaskForm(injector, properties, parent) {
     const bpmnFactory = injector.get('bpmnFactory');
     return createElement$3('zeebe:UserTaskForm', properties, parent, bpmnFactory);
   }
 
-  /**
-   * @param {Element} element
-   * @param {ModdleElement} moddleElement
-   * @param {Object} properties
-   *
-   * @returns {Command}
+  /**
+   * @param {Element} element
+   * @param {ModdleElement} moddleElement
+   * @param {Object} properties
+   *
+   * @returns {Command}
    */
   function createUpdateModdlePropertiesCommand(element, moddleElement, properties) {
     return {
@@ -120276,11 +120295,11 @@
 
   // helper //////////////////////////
 
-  /**
-    * Check whether the propagateAllParentVariables attribute is set on an element.
-    * @param {Object} element
-    *
-    * @returns {boolean}
+  /**
+    * Check whether the propagateAllParentVariables attribute is set on an element.
+    * @param {Object} element
+    *
+    * @returns {boolean}
     */
   function isPropagateAllParentVariables(element) {
     if (!is$6(element, 'bpmn:CallActivity')) {
@@ -120381,37 +120400,37 @@
     return ioMapping && ioMapping.get(prop) || [];
   }
 
-  /**
-   * Get a ioMapping from the business object
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {ModdleElement} the ioMapping object
+  /**
+   * Get a ioMapping from the business object
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {ModdleElement} the ioMapping object
    */
   function getIoMapping$1(element) {
     const bo = getBusinessObject$2(element);
     return (getElements$1(bo, 'zeebe:IoMapping') || [])[0];
   }
 
-  /**
-   * Return all input parameters existing in the business object, and
-   * an empty array if none exist.
-   *
-   * @param  {djs.model.Base} element
-   *
-   * @return {Array} a list of input parameter objects
+  /**
+   * Return all input parameters existing in the business object, and
+   * an empty array if none exist.
+   *
+   * @param  {djs.model.Base} element
+   *
+   * @return {Array} a list of input parameter objects
    */
   function getInputParameters$1(element) {
     return getParameters$1.apply(this, [element, 'inputParameters']);
   }
 
-  /**
-   * Return all output parameters existing in the business object, and
-   * an empty array if none exist.
-   *
-   * @param  {djs.model.Base} element
-   *
-   * @return {Array} a list of output parameter objects
+  /**
+   * Return all output parameters existing in the business object, and
+   * an empty array if none exist.
+   *
+   * @param  {djs.model.Base} element
+   *
+   * @return {Array} a list of output parameter objects
    */
   function getOutputParameters$1(element) {
     return getParameters$1.apply(this, [element, 'outputParameters']);
@@ -121082,11 +121101,11 @@
 
   // helper //////////////////////////
 
-  /**
-    * Determine default value for propagateAllChildVariables attribute
-    * @param {Object} element representing a bpmn:CallActivity
-    *
-    * @returns {boolean}
+  /**
+    * Determine default value for propagateAllChildVariables attribute
+    * @param {Object} element representing a bpmn:CallActivity
+    *
+    * @returns {boolean}
     */
   function determinePropAllChildVariablesDefault(element) {
     const outputParameters = getOutputParameters$1(element);
@@ -121095,12 +121114,12 @@
     }
   }
 
-  /**
-    * Check whether the propagateAllChildVariables attribute is set on an element.
-    * Note that a default logic will be determine if it is not explicitly set.
-    * @param {Object} element
-    *
-    * @returns {boolean}
+  /**
+    * Check whether the propagateAllChildVariables attribute is set on an element.
+    * Note that a default logic will be determine if it is not explicitly set.
+    * @param {Object} element
+    *
+    * @returns {boolean}
     */
   function isPropagateAllChildVariables(element) {
     if (!is$6(element, 'bpmn:CallActivity')) {
@@ -121259,6 +121278,117 @@
     };
   }
 
+  function PriorityDefinitionProps(props) {
+    const {
+      element
+    } = props;
+    if (!is$6(element, 'bpmn:UserTask')) {
+      return [];
+    }
+    return [{
+      id: 'priorityDefinitionPriority',
+      component: Priority$1,
+      isEdited: isEdited$6
+    }];
+  }
+  function Priority$1(props) {
+    const {
+      element
+    } = props;
+    const commandStack = useService$1('commandStack');
+    const bpmnFactory = useService$1('bpmnFactory');
+    const translate = useService$1('translate');
+    const debounce = useService$1('debounceInput');
+    const getValue = () => {
+      return (getPriorityDefinition(element) || {}).priority;
+    };
+    const setValue = value => {
+      const commands = [];
+      const businessObject = getBusinessObject$2(element);
+      let extensionElements = businessObject.get('extensionElements');
+
+      // (1) ensure extension elements
+      if (!extensionElements) {
+        extensionElements = createElement$3('bpmn:ExtensionElements', {
+          values: []
+        }, businessObject, bpmnFactory);
+        commands.push({
+          cmd: 'element.updateModdleProperties',
+          context: {
+            element,
+            moddleElement: businessObject,
+            properties: {
+              extensionElements
+            }
+          }
+        });
+      }
+
+      // (2) ensure PriorityDefinition
+      let priorityDefinition = getPriorityDefinition(element);
+      const isNullValue = value === null || value === '' || value === undefined;
+      if (priorityDefinition && isNullValue) {
+        // (3a) remove priority definition if it exists and priority is set to null
+        commands.push({
+          cmd: 'element.updateModdleProperties',
+          context: {
+            element,
+            moddleElement: extensionElements,
+            properties: {
+              values: extensionElements.get('values').filter(v => v !== priorityDefinition)
+            }
+          }
+        });
+      } else if (priorityDefinition && !isNullValue) {
+        // (3b) update priority definition if it already exists
+        commands.push({
+          cmd: 'element.updateModdleProperties',
+          context: {
+            element,
+            moddleElement: priorityDefinition,
+            properties: {
+              priority: value
+            }
+          }
+        });
+      } else if (!priorityDefinition && !isNullValue) {
+        // (3c) create priority definition if it does not exist
+        priorityDefinition = createElement$3('zeebe:PriorityDefinition', {
+          priority: value
+        }, extensionElements, bpmnFactory);
+        commands.push({
+          cmd: 'element.updateModdleProperties',
+          context: {
+            element,
+            moddleElement: extensionElements,
+            properties: {
+              values: [...extensionElements.get('values'), priorityDefinition]
+            }
+          }
+        });
+      }
+
+      // (4) commit all updates
+      commandStack.execute('properties-panel.multi-command-executor', commands);
+    };
+    return FeelEntryWithVariableContext$1({
+      element,
+      id: 'priorityDefinitionPriority',
+      label: translate('Priority'),
+      feel: 'optional',
+      getValue,
+      setValue,
+      debounce
+    });
+  }
+
+  // helper ///////////////////////
+
+  function getPriorityDefinition(element) {
+    const businessObject = getBusinessObject$2(element);
+    return getExtensionElementsList$2(businessObject, 'zeebe:PriorityDefinition')[0];
+  }
+
   const SCRIPT_IMPLEMENTATION_OPTION = 'script',
     JOB_WORKER_IMPLEMENTATION_OPTION$1 = 'jobWorker',
     DEFAULT_IMPLEMENTATION_OPTION = '';
@@ -121293,10 +121423,10 @@
       return DEFAULT_IMPLEMENTATION_OPTION;
     };
 
-    /**
-     * Set value by either creating a zeebe:script or a zeebe:taskDefintion
-     * extension element. Note that they must not exist both at the same time, however
-     * this will be ensured by a bpmn-js behavior (and not by the propPanel).
+    /**
+     * Set value by either creating a zeebe:script or a zeebe:taskDefintion
+     * extension element. Note that they must not exist both at the same time, however
+     * this will be ensured by a bpmn-js behavior (and not by the propPanel).
      */
     const setValue = value => {
       let extensionElement, extensionElementType;
@@ -121588,8 +121718,8 @@
     return getExtensionElementsList$2(businessObject, 'zeebe:Script')[0];
   }
 
-  /**
-   * @returns {Entry[]}
+  /**
+   * @returns {Entry[]}
    */
   function SignalProps(props) {
     const {
@@ -121820,7 +121950,7 @@
     return FeelEntryWithVariableContext$1({
       element,
       id,
-      label: translate('Type'),
+      label: translate('Job type'),
       feel: 'optional',
       getValue,
       setValue,
@@ -122085,13 +122215,13 @@
     return getExtensionElementsList$2(businessObject, 'zeebe:TaskSchedule')[0];
   }
 
-  /**
-   * Check whether a given timer expression type is supported for a given element.
-   *
-   * @param {string} type
-   * @param {Element|ModdleElement} element
-   *
-   * @return {boolean}
+  /**
+   * Check whether a given timer expression type is supported for a given element.
+   *
+   * @param {string} type
+   * @param {Element|ModdleElement} element
+   *
+   * @return {boolean}
    */
   function isTimerExpressionTypeSupported$1(type, element) {
     const businessObject = getBusinessObject$2(element);
@@ -122184,12 +122314,12 @@
     return options;
   }
 
-  /**
-   * TimerEventDefinitionType - Generic select entry allowing to select a specific
-   * timerEventDefintionType. To be used together with timerEventDefinitionValue.
-   *
-   * @param  {type} props
-   * @return {SelectEntry}
+  /**
+   * TimerEventDefinitionType - Generic select entry allowing to select a specific
+   * timerEventDefintionType. To be used together with timerEventDefinitionValue.
+   *
+   * @param  {type} props
+   * @return {SelectEntry}
    */
   function TimerEventDefinitionType$1(props) {
     const {
@@ -122247,16 +122377,16 @@
     });
   }
 
-  /**
-   * TimerEventDefinitionValue - Generic textField entry allowing to specify the
-   * timerEventDefintionValue based on the set timerEventDefintionType. To be used
-   * together with timerEventDefinitionType.
-   *
-   * @param {object} props
-   * @param {ModdleElement} props.element
-   * @param {'timeCycle'|'timeDate'|'timeDuration'} props.timerEventDefinitionType?
-   * @param {string} props.label?
-   * @return {TextFieldEntry}
+  /**
+   * TimerEventDefinitionValue - Generic textField entry allowing to specify the
+   * timerEventDefintionValue based on the set timerEventDefintionType. To be used
+   * together with timerEventDefinitionType.
+   *
+   * @param {object} props
+   * @param {ModdleElement} props.element
+   * @param {'timeCycle'|'timeDate'|'timeDuration'} props.timerEventDefinitionType?
+   * @param {string} props.label?
+   * @return {TextFieldEntry}
    */
   function TimerEventDefinitionValue$1(props) {
     const {
@@ -122425,10 +122555,10 @@
       return JOB_WORKER_IMPLEMENTATION_OPTION;
     };
 
-    /**
-     * Set value by either creating or removing zeebe:userTask extension element.
-     * Note that they must not exist both at the same time, however this
-     * will be ensured by a camunda-bpmn-js behavior (and not by the propPanel).
+    /**
+     * Set value by either creating or removing zeebe:userTask extension element.
+     * Note that they must not exist both at the same time, however this
+     * will be ensured by a camunda-bpmn-js behavior (and not by the propPanel).
      */
     const setValue = value => {
       if (value === ZEEBE_USER_TASK_IMPLEMENTATION_OPTION) {
@@ -122735,8 +122865,8 @@
     return properties && properties.get(getPropertyName(namespace));
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
   const LOW_PRIORITY$1$1 = 500;
@@ -122951,6 +123081,8 @@
         element
       }), ...TaskScheduleProps({
         element
+      }), ...PriorityDefinitionProps({
+        element
       })],
       component: Group$1
     };
@@ -123064,13 +123196,13 @@
     return groups.find(g => g.id === id);
   }
 
-  /**
-   * Replace entries with the same ID.
-   *s
-   * @param {Entry[]} oldEntries
-   * @param {Entry[]} newEntries
-   *
-   * @returns {Entry[]} combined entries
+  /**
+   * Replace entries with the same ID.
+   *s
+   * @param {Entry[]} oldEntries
+   * @param {Entry[]} newEntries
+   *
+   * @returns {Entry[]} combined entries
    */
   function replaceEntries(oldEntries, newEntries) {
     const filteredEntries = oldEntries.filter(oldEntry => !newEntries.find(newEntry => newEntry.id === oldEntry.id));
@@ -123378,57 +123510,67 @@
           }), translate('Uses the resource found in the same deployment.')]
         })]
       });
+    },
+    'priorityDefinitionPriority': element => {
+      const translate = useService$1('translate');
+      return u("div", {
+        children: [u("p", {
+          children: translate('An integer value that can range from 0 to 100, where a higher value indicates a higher priority.')
+        }), u("p", {
+          children: translate('If unset, the default value is 50.')
+        })]
+      });
     }
   };
 
-  /**
-   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
-   *
-   * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
-   */
-
-  /**
-   *
-   * @param {BaseViewerOptions} options
-   */
-  function Modeler$1(options = {}) {
-    Modeler$2.call(this, options);
-  }
-
-  e$7(Modeler$1, Modeler$2);
-
-  /**
-   * @param { {
-   *  disableAdjustOrigin?: boolean;
-   *  disableGrid?: boolean;
-   * } } [options]
-   *
-   * @returns {ModuleDeclaration[]}
-   */
-  Modeler$1.prototype.getModules = function(options = {}) {
-    const modules = Modeler$2.prototype.getModules.call(this, options);
-
-    return [
-      ...modules,
-      options.disableAdjustOrigin
-        ? diagramOriginModule
-        : alignToOriginModule,
-      options.disableGrid
-        ? {}
-        : index$5
-    ];
-  };
-
-  Modeler$1.prototype._extensionModules = [
-    index$6,
-    ExecutableFixModule,
-    index$3$1,
-    index$2$1
-  ];
-
-  Modeler$1.prototype._modules = [].concat(
-    Modeler$2.prototype._modules,
-    Modeler$1.prototype._extensionModules
+  /**
+   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
+   *
+   * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
+   */
+
+  /**
+   *
+   * @param {BaseViewerOptions} options
+   */
+  function Modeler$1(options = {}) {
+    Modeler$2.call(this, options);
+  }
+
+  e$7(Modeler$1, Modeler$2);
+
+  /**
+   * @param { {
+   *  disableAdjustOrigin?: boolean;
+   *  disableGrid?: boolean;
+   * } } [options]
+   *
+   * @returns {ModuleDeclaration[]}
+   */
+  Modeler$1.prototype.getModules = function(options = {}) {
+    const modules = Modeler$2.prototype.getModules.call(this, options);
+
+    return [
+      ...modules,
+      options.disableAdjustOrigin
+        ? diagramOriginModule
+        : alignToOriginModule,
+      options.disableGrid
+        ? {}
+        : index$5
+    ];
+  };
+
+  Modeler$1.prototype._extensionModules = [
+    index$6,
+    ExecutableFixModule,
+    index$3$1,
+    index$2$1
+  ];
+
+  Modeler$1.prototype._modules = [].concat(
+    Modeler$2.prototype._modules,
+    Modeler$1.prototype._extensionModules
   );
 
   /**
@@ -128545,6 +128687,9 @@
     if (notEmpty && isEmpty(value)) {
       return `${label} ${translate('must not be empty.')}`;
     }
+    if (property.feel && isFeel$1(value)) {
+      return;
+    }
     if (maxLength && (value || '').length > maxLength) {
       return `${label} ${translate('must have max length {maxLength}.', {
       maxLength
@@ -128602,6 +128747,9 @@
       return replacements[key] || '{' + key + '}';
     });
   }
+  function isFeel$1(value) {
+    return isString$3(value) && value.trim().startsWith('=');
+  }
 
   /**
    * Based on conditions, remove properties from the template.
@@ -130963,7 +131111,7 @@
   }
 
   const LOWER_PRIORITY$1 = 300;
-  const ALWAYS_DISPLAYED_GROUPS$1 = ['general', 'documentation', 'multiInstance'];
+  const ALWAYS_DISPLAYED_GROUPS$1 = ['general', 'documentation', 'multiInstance', 'Zeebe__ExecutionListeners'];
   let ElementTemplatesPropertiesProvider$1 = class ElementTemplatesPropertiesProvider {
     constructor(elementTemplates, propertiesPanel, injector) {
       propertiesPanel.registerProvider(LOWER_PRIORITY$1, this);
@@ -155914,6 +156062,24 @@
   			}
   		]
   	},
+  	{
+  		name: "PriorityDefinition",
+  		superClass: [
+  			"Element"
+  		],
+  		meta: {
+  			allowedIn: [
+  				"bpmn:UserTask"
+  			]
+  		},
+  		properties: [
+  			{
+  				name: "priority",
+  				type: "String",
+  				isAttr: true
+  			}
+  		]
+  	},
   	{
   		name: "TaskSchedule",
   		superClass: [
@@ -156128,17 +156294,17 @@
   	types: types
   };
 
-  const commonModules = [
-    iconRendererModule
-  ];
-
-  /**
-   * @type { {
-   *   zeebe: any
-   * } }
-   */
-  const commonModdleExtensions = {
-    zeebe: zeebeModdle
+  const commonModules = [
+    iconRendererModule
+  ];
+
+  /**
+   * @type { {
+   *   zeebe: any
+   * } }
+   */
+  const commonModdleExtensions = {
+    zeebe: zeebeModdle
   };
 
   /**
@@ -159986,58 +160152,58 @@
     ]
   };
 
-  /**
-   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
-   */
-
-  /**
-   * @param {BaseViewerOptions} options
-   */
-  function Modeler(options = {}) {
-
-    options = {
-      ...options,
-      moddleExtensions: {
-        ...commonModdleExtensions,
-        ...options.moddleExtensions
-      },
-      propertiesPanel: {
-        tooltip: TooltipProvider$1,
-        ...options.propertiesPanel
-      }
-    };
-
-    this._addElementTemplateChooserModule(options);
-
-    Modeler$1.call(this, options);
-  }
-
-  e$7(Modeler, Modeler$1);
-
-  Modeler.prototype._addElementTemplateChooserModule = function(options) {
-    const { elementTemplateChooser } = options;
-
-    if (elementTemplateChooser !== false) {
-      this._modules = [ ...this._modules, index$2 ];
-    }
-  };
-
-  Modeler.prototype._camundaCloudModules = [
-    ...commonModules,
-    behaviorsModule,
-    index$1$2,
-    index$1$1,
-    index$1,
-    index,
-    colorPickerModule,
-    ZeebeVariableResolverModule,
-    exampleDataPropertiesProviderModule,
-    index$3
-  ];
-
-  Modeler.prototype._modules = [].concat(
-    Modeler$1.prototype._modules,
-    Modeler.prototype._camundaCloudModules
+  /**
+   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
+   */
+
+  /**
+   * @param {BaseViewerOptions} options
+   */
+  function Modeler(options = {}) {
+
+    options = {
+      ...options,
+      moddleExtensions: {
+        ...commonModdleExtensions,
+        ...options.moddleExtensions
+      },
+      propertiesPanel: {
+        tooltip: TooltipProvider$1,
+        ...options.propertiesPanel
+      }
+    };
+
+    this._addElementTemplateChooserModule(options);
+
+    Modeler$1.call(this, options);
+  }
+
+  e$7(Modeler, Modeler$1);
+
+  Modeler.prototype._addElementTemplateChooserModule = function(options) {
+    const { elementTemplateChooser } = options;
+
+    if (elementTemplateChooser !== false) {
+      this._modules = [ ...this._modules, index$2 ];
+    }
+  };
+
+  Modeler.prototype._camundaCloudModules = [
+    ...commonModules,
+    behaviorsModule,
+    index$1$2,
+    index$1$1,
+    index$1,
+    index,
+    colorPickerModule,
+    ZeebeVariableResolverModule,
+    exampleDataPropertiesProviderModule,
+    index$3
+  ];
+
+  Modeler.prototype._modules = [].concat(
+    Modeler$1.prototype._modules,
+    Modeler.prototype._camundaCloudModules
   );
 
   return Modeler;