camunda-bpmn-js 2.4.0 → 2.6.0

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

@@ -4785,6 +4785,28 @@
 
   var intersectPaths = /*@__PURE__*/getDefaultExportFromCjs(intersect);
 
+  /**
+   * Checks whether a value is an instance of Connection.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isConnection$2(value) {
+    return isObject$1(value) && has$2(value, 'waypoints');
+  }
+
+  /**
+   * Checks whether a value is an instance of Label.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isLabel$2(value) {
+    return isObject$1(value) && has$2(value, 'labelTarget');
+  }
+
   /**
    * @typedef {import('../core/Types').ElementLike} Element
    * @typedef {import('../core/Types').ConnectionLike} Connection
@@ -4939,7 +4961,7 @@
    * @return {Point}
    */
   function getMid(element) {
-    if (isConnection$h(element)) {
+    if (isConnection$2(element)) {
       return getConnectionMid(element);
     }
 
@@ -5079,10 +5101,6 @@
     return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
   }
 
-  function isConnection$h(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * @typedef {import('./Types').ConnectionLike} ConnectionLike
    * @typedef {import('./Types').RootLike} RootLike
@@ -7386,6 +7404,7 @@
    *
    * @return {Root}
    */
+
   /**
    * Creates a connection.
    *
@@ -7409,6 +7428,7 @@
    *
    * @return {Connection}
    */
+
   /**
    * Creates a shape.
    *
@@ -7432,6 +7452,7 @@
    *
    * @return {Shape}
    */
+
   /**
    * Creates a label.
    *
@@ -7451,6 +7472,7 @@
    *
    * @param {'label'} type
    * @param {Object} [attrs]
+   *
    * @return {Label}
    */
   function create(type, attrs) {
@@ -7465,6 +7487,7 @@
    * Checks whether an object is a model instance.
    *
    * @param {any} obj
+   *
    * @return {boolean}
    */
   function isModelElement(obj) {
@@ -11712,7 +11735,7 @@
     }
   }
 
-  function inherits$1(ctor, superCtor) {
+  function inherits(ctor, superCtor) {
     ctor.super_ = superCtor;
     ctor.prototype = Object.create(superCtor.prototype, {
       constructor: {
@@ -11878,7 +11901,7 @@
     this.tagName = tagName;
   }
 
-  inherits$1(ValueSerializer, BodySerializer);
+  inherits(ValueSerializer, BodySerializer);
 
   ValueSerializer.prototype.serializeTo = function(writer) {
 
@@ -12371,7 +12394,7 @@
     ElementSerializer.call(this, parent, propertyDescriptor);
   }
 
-  inherits$1(TypeSerializer, ElementSerializer);
+  inherits(TypeSerializer, ElementSerializer);
 
   TypeSerializer.prototype.parseNsAttributes = function(element) {
 
@@ -18069,7 +18092,7 @@
    *
    * @return {boolean}
    */
-  function isInterrupting(element) {
+  function isInterrupting$1(element) {
     return element && getBusinessObject$2(element).isInterrupting !== false;
   }
 
@@ -18166,7 +18189,7 @@
    * @return {boolean}
    */
   function hasExternalLabel(element) {
-    return isLabel$7(element.label);
+    return isLabel$2(element.label);
   }
 
   /**
@@ -18290,19 +18313,10 @@
   }
 
   /**
-   * @param {Element} element
+   * @param {ModdleElement} semantic
    *
-   * @return {boolean}
-   */
-  function isLabel$7(element) {
-    return element && !!element.labelTarget;
-  }
-
-
-  /**
-   * @typedef { import('../model').DiagramElement } DiagramElement
+   * @returns {string}
    */
-
   function getLabelAttr(semantic) {
     if (
       is$6(semantic, 'bpmn:FlowElement') ||
@@ -18325,6 +18339,11 @@
     }
   }
 
+  /**
+   * @param {ModdleElement} semantic
+   *
+   * @returns {string}
+   */
   function getCategoryValue(semantic) {
     var categoryValueRef = semantic['categoryValueRef'];
 
@@ -18337,9 +18356,9 @@
   }
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
-   * @return {string} label
+   * @return {string}
    */
   function getLabel(element) {
     var semantic = element.businessObject,
@@ -18358,10 +18377,10 @@
 
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    * @param {string} text
    *
-   * @return {DiagramElement} element
+   * @return {Element}
    */
   function setLabel(element, text) {
     var semantic = element.businessObject,
@@ -18583,7 +18602,7 @@
    */
 
   /**
-   * @typedef { import('../model').DiagramElement } DiagramElement
+   * @typedef { import('../model/Types').Element } Element
    */
 
   /**
@@ -18949,8 +18968,8 @@
     }
 
     function as(type) {
-      return function(parentGfx, element) {
-        return renderer(type)(parentGfx, element);
+      return function(parentGfx, element, options) {
+        return renderer(type)(parentGfx, element, options);
       };
     }
 
@@ -19089,7 +19108,7 @@
 
         return drawCircle(parentGfx, element.width, element.height, attrs);
       },
-      'bpmn:StartEvent': function(parentGfx, element) {
+      'bpmn:StartEvent': function(parentGfx, element, options) {
         var attrs = {
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
@@ -19107,7 +19126,9 @@
 
         var circle = renderer('bpmn:Event')(parentGfx, element, attrs);
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return circle;
       },
@@ -19360,14 +19381,16 @@
           stroke: getStrokeColor$1(event, defaultStrokeColor)
         });
       },
-      'bpmn:EndEvent': function(parentGfx, element) {
+      'bpmn:EndEvent': function(parentGfx, element, options) {
         var circle = renderer('bpmn:Event')(parentGfx, element, {
           strokeWidth: 4,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return circle;
       },
@@ -19380,7 +19403,7 @@
 
         return circle;
       },
-      'bpmn:IntermediateEvent': function(parentGfx, element) {
+      'bpmn:IntermediateEvent': function(parentGfx, element, options) {
         var outer = renderer('bpmn:Event')(parentGfx, element, {
           strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
@@ -19394,7 +19417,9 @@
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return outer;
       },
@@ -20112,7 +20137,7 @@
 
         return elementStore;
       },
-      'bpmn:BoundaryEvent': function(parentGfx, element) {
+      'bpmn:BoundaryEvent': function(parentGfx, element, options) {
 
         var semantic = getBusinessObject$2(element),
             cancel = semantic.cancelActivity;
@@ -20143,7 +20168,9 @@
 
         /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return outer;
       },
@@ -20424,7 +20451,7 @@
 
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {boolean}
    */
@@ -20436,7 +20463,7 @@
    * Draw shape into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {SVGElement} mainGfx
    */
@@ -20452,7 +20479,7 @@
    * Draw connection into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {SVGElement} mainGfx
    */
@@ -20467,7 +20494,7 @@
   /**
    * Get shape path.
    *
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {string} path
    */
@@ -24007,7 +24034,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.canExecute = createHook('canExecute');
+  CommandInterceptor$1.prototype.canExecute = createHook$1('canExecute');
 
   /**
    * Add a <preExecute> phase of command interceptor.
@@ -24018,7 +24045,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.preExecute = createHook('preExecute');
+  CommandInterceptor$1.prototype.preExecute = createHook$1('preExecute');
 
   /**
    * Add a <preExecuted> phase of command interceptor.
@@ -24029,7 +24056,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.preExecuted = createHook('preExecuted');
+  CommandInterceptor$1.prototype.preExecuted = createHook$1('preExecuted');
 
   /**
    * Add a <execute> phase of command interceptor.
@@ -24040,7 +24067,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.execute = createHook('execute');
+  CommandInterceptor$1.prototype.execute = createHook$1('execute');
 
   /**
    * Add a <executed> phase of command interceptor.
@@ -24051,7 +24078,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.executed = createHook('executed');
+  CommandInterceptor$1.prototype.executed = createHook$1('executed');
 
   /**
    * Add a <postExecute> phase of command interceptor.
@@ -24062,7 +24089,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.postExecute = createHook('postExecute');
+  CommandInterceptor$1.prototype.postExecute = createHook$1('postExecute');
 
   /**
    * Add a <postExecuted> phase of command interceptor.
@@ -24073,7 +24100,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.postExecuted = createHook('postExecuted');
+  CommandInterceptor$1.prototype.postExecuted = createHook$1('postExecuted');
 
   /**
    * Add a <revert> phase of command interceptor.
@@ -24084,7 +24111,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.revert = createHook('revert');
+  CommandInterceptor$1.prototype.revert = createHook$1('revert');
 
   /**
    * Add a <reverted> phase of command interceptor.
@@ -24095,7 +24122,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.reverted = createHook('reverted');
+  CommandInterceptor$1.prototype.reverted = createHook$1('reverted');
 
   /*
    * Add prototype methods for each phase of command execution (e.g. execute,
@@ -24110,7 +24137,7 @@
    *   unwrap?: boolean
    * ) => any }
    */
-  function createHook(hook) {
+  function createHook$1(hook) {
 
     /**
      * @this {CommandInterceptor}
@@ -30977,7 +31004,7 @@
       let element = closest(event.delegateTarget || event.target, '.entry', true);
       let entryId = attr$1(element, DATA_REF);
 
-      entry = this._getEntry(entryId);
+      entry = { id: entryId, ...this._getEntry(entryId) };
     }
 
     const handler = entry.action;
@@ -31950,7 +31977,7 @@
       y: sourceTrbl.top - 50 - element.height / 2
     };
 
-    if (isConnection$g(source)) {
+    if (isConnection$2(source)) {
       position = getMid(source);
       position.x += 100;
       position.y -= 50;
@@ -31995,10 +32022,6 @@
     return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
   }
 
-  function isConnection$g(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
    */
@@ -32436,7 +32459,7 @@
 
     forEach$2(elements, function(element) {
 
-      if (is$6(element, 'bpmn:Lane') || isLabel$7(element)) {
+      if (is$6(element, 'bpmn:Lane') || isLabel$2(element)) {
         canResize = false;
         return;
       }
@@ -35450,7 +35473,7 @@
           hoverMid = hover && getSnapPoint(hover, event);
 
       // only snap on connections, elements can have multiple connect endpoints
-      if (!isConnection$f(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
+      if (!isConnection$2(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
         return;
       }
 
@@ -35502,13 +35525,6 @@
 
   BendpointSnapping.$inject = [ 'eventBus' ];
 
-
-  // helpers //////////////////////
-
-  function isConnection$f(element) {
-    return element && !!element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -37035,11 +37051,11 @@
       elements = filter(elements, function(element) {
         var labelTarget = element.labelTarget;
 
-        return !element.parent && !(isLabel$6(element) && elements.indexOf(labelTarget) !== -1);
+        return !element.parent && !(isLabel$2(element) && elements.indexOf(labelTarget) !== -1);
       });
 
       var shape = find$2(elements, function(element) {
-        return !isConnection$e(element);
+        return !isConnection$2(element);
       });
 
       var attach = false,
@@ -37194,7 +37210,7 @@
 
         // update shape
         shape = find$2(elements, function(element) {
-          return !isConnection$e(element);
+          return !isConnection$2(element);
         });
       }
 
@@ -37235,7 +37251,7 @@
       }
 
       var shape = find$2(elements, function(element) {
-        return !isConnection$e(element);
+        return !isConnection$2(element);
       });
 
       if (!shape) {
@@ -37269,7 +37285,7 @@
 
       // center elements around cursor
       forEach$2(elements, function(element) {
-        if (isConnection$e(element)) {
+        if (isConnection$2(element)) {
           element.waypoints = map$2(element.waypoints, function(waypoint) {
             return {
               x: waypoint.x - bbox.x - bbox.width / 2,
@@ -37331,16 +37347,8 @@
     }
   }
 
-  function isConnection$e(element) {
-    return !!element.waypoints;
-  }
-
   function isSingleShape(elements) {
-    return elements && elements.length === 1 && !isConnection$e(elements[0]);
-  }
-
-  function isLabel$6(element) {
-    return !!element.labelTarget;
+    return elements && elements.length === 1 && !isConnection$2(elements[ 0 ]);
   }
 
   /**
@@ -37673,7 +37681,7 @@
       }
 
       // connections (priority = 3)
-      if (isConnection$d(element)) {
+      if (isConnection$2(element)) {
         descriptor.priority = 3;
 
         descriptor.source = element.source.id;
@@ -37683,7 +37691,7 @@
       }
 
       // labels (priority = 4)
-      if (isLabel$5(element)) {
+      if (isLabel$2(element)) {
         descriptor.priority = 4;
 
         descriptor.labelTarget = element.labelTarget.id;
@@ -37816,7 +37824,7 @@
 
     // center elements around cursor
     forEach$2(elements, function(element) {
-      if (isConnection$d(element)) {
+      if (isConnection$2(element)) {
         element.waypoints = map$2(element.waypoints, function(waypoint) {
           return {
             x: waypoint.x - bbox.x - bbox.width / 2,
@@ -37869,7 +37877,7 @@
 
         var element;
 
-        if (isConnection$d(attrs)) {
+        if (isConnection$2(attrs)) {
           attrs.source = cache[ descriptor.source ];
           attrs.target = cache[ descriptor.target ];
 
@@ -37880,7 +37888,7 @@
           return;
         }
 
-        if (isLabel$5(attrs)) {
+        if (isLabel$2(attrs)) {
           attrs.labelTarget = cache[ attrs.labelTarget ];
 
           element = cache[ descriptor.id ] = self.createLabel(attrs);
@@ -37935,7 +37943,7 @@
         source,
         target;
 
-    if (isConnection$d(element)) {
+    if (isConnection$2(element)) {
       source = find$2(elements, matchPattern({ id: element.source.id }));
       target = find$2(elements, matchPattern({ id: element.target.id }));
 
@@ -37944,7 +37952,7 @@
       }
     }
 
-    if (isLabel$5(element)) {
+    if (isLabel$2(element)) {
       labelTarget = find$2(elements, matchPattern({ id: element.labelTarget.id }));
 
       if (!labelTarget) {
@@ -38037,7 +38045,7 @@
     eachElement$2(parents, function(element, _index, depth) {
 
       // do NOT add external labels directly
-      if (isLabel$5(element)) {
+      if (isLabel$2(element)) {
         return;
       }
 
@@ -38135,14 +38143,6 @@
     return !!element.host;
   }
 
-  function isConnection$d(element) {
-    return !!element.waypoints;
-  }
-
-  function isLabel$5(element) {
-    return !!element.labelTarget;
-  }
-
   function copyWaypoints$1(element) {
     return map$2(element.waypoints, function(waypoint) {
 
@@ -38226,7 +38226,7 @@
 
       // do not copy business object + di for labels;
       // will be pulled from the referenced label target
-      if (isLabel$7(element)) {
+      if (isLabel$2(element)) {
         return descriptor;
       }
 
@@ -38294,7 +38294,7 @@
           di = descriptor.di;
 
       // wire existing di + businessObject for external label
-      if (isLabel$7(descriptor)) {
+      if (isLabel$2(descriptor)) {
         descriptor.businessObject = getBusinessObject$2(cache[ descriptor.labelTarget ]);
         descriptor.di = getDi$1(cache[ descriptor.labelTarget ]);
 
@@ -44375,7 +44375,7 @@
   ResizeHandles.prototype.addResizer = function(element) {
     var self = this;
 
-    if (isConnection$c(element) || !this._resize.canResize({ shape: element })) {
+    if (isConnection$2(element) || !this._resize.canResize({ shape: element })) {
       return;
     }
 
@@ -44427,10 +44427,6 @@
     return offset;
   }
 
-  function isConnection$c(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -44790,7 +44786,7 @@
     // external label not yet created
     if (isLabelExternal(target)
         && !hasExternalLabel(target)
-        && !isLabel$7(target)) {
+        && !isLabel$2(target)) {
 
       var externalLabelMid = getExternalLabelMid(element);
 
@@ -45467,7 +45463,7 @@
   }
 
   function shouldReplace$1(shape, host) {
-    return !isLabel$7(shape) &&
+    return !isLabel$2(shape) &&
       isAny$1(shape, [ 'bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent' ]) && !!host;
   }
 
@@ -45644,8 +45640,8 @@
       // ignore connections, groups and labels
       var children = rootElement.children.filter(function(element) {
         return !is$6(element, 'bpmn:Group') &&
-          !isLabel$7(element) &&
-          !isConnection$b(element);
+          !isLabel$2(element) &&
+          !isConnection$2(element);
       });
 
       // ensure for available children to calculate bounds
@@ -45816,10 +45812,6 @@
     };
   }
 
-  function isConnection$b(element) {
-    return !!element.waypoints;
-  }
-
   function findParticipant(elements) {
     return find$2(elements, function(element) {
       return is$6(element, 'bpmn:Participant');
@@ -46424,7 +46416,7 @@
   }
 
   function shouldReplace(shape, host) {
-    return !isLabel$7(shape) && is$6(shape, 'bpmn:BoundaryEvent') && !host;
+    return !isLabel$2(shape) && is$6(shape, 'bpmn:BoundaryEvent') && !host;
   }
 
   function includes$6(array, item) {
@@ -48131,7 +48123,7 @@
 
       var element = context.shape || context.connection;
 
-      if (isLabel$7(element) || !isLabelExternal(element)) {
+      if (isLabel$2(element) || !isLabelExternal(element)) {
         return;
       }
 
@@ -50670,7 +50662,7 @@
           shape = context.shape,
           shapeBo = shape.businessObject;
 
-      if (isLabel$7(shape)) {
+      if (isLabel$2(shape)) {
         return;
       }
 
@@ -51119,12 +51111,12 @@
           position = context.position,
           target = context.target;
 
-      if (isConnection$a(target) && !canInsert(elements, target)) {
+      if (isConnection$2(target) && !canInsert(elements, target)) {
         return false;
       }
 
       return every(elements, function(element) {
-        if (isConnection$a(element)) {
+        if (isConnection$2(element)) {
           return canConnect(element.source, element.target, element);
         }
 
@@ -51233,7 +51225,7 @@
    * @return {boolean}
    */
   function nonExistingOrLabel(element) {
-    return !element || isLabel$7(element);
+    return !element || isLabel$2(element);
   }
 
   function isSame$1(a, b) {
@@ -51467,15 +51459,6 @@
     );
   }
 
-  /**
-   * @param {Element} element
-   *
-   * @return {boolean}
-   */
-  function isConnection$a(element) {
-    return element.waypoints;
-  }
-
   /**
    * @param {Element} element
    *
@@ -51566,7 +51549,7 @@
   function canDrop(element, target) {
 
     // can move labels and groups everywhere
-    if (isLabel$7(element) || isGroup(element)) {
+    if (isLabel$2(element) || isGroup(element)) {
       return true;
     }
 
@@ -51656,7 +51639,7 @@
    * @return {boolean}
    */
   function isBoundaryEvent(element) {
-    return !isLabel$7(element) && is$6(element, 'bpmn:BoundaryEvent');
+    return !isLabel$2(element) && is$6(element, 'bpmn:BoundaryEvent');
   }
 
   /**
@@ -51765,7 +51748,7 @@
     var element = elements[0];
 
     // do not attach labels
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return false;
     }
 
@@ -51840,7 +51823,7 @@
 
           // replace a non-interrupting start event by a blank interrupting start event
           // when the target is not an event sub process
-          if (!isInterrupting(element)) {
+          if (!isInterrupting$1(element)) {
             canExecute.replacements.push({
               oldElementId: element.id,
               newElementType: 'bpmn:StartEvent'
@@ -51937,7 +51920,7 @@
       return false;
     }
 
-    if (isLabel$7(shape) || isGroup(shape)) {
+    if (isLabel$2(shape) || isGroup(shape)) {
       return true;
     }
 
@@ -52118,7 +52101,7 @@
     // return true if shape can be inserted into connection parent
     return (
       isAny$1(connection, [ 'bpmn:SequenceFlow', 'bpmn:MessageFlow' ]) &&
-      !isLabel$7(connection) &&
+      !isLabel$2(connection) &&
       is$6(shape, 'bpmn:FlowNode') &&
       !is$6(shape, 'bpmn:BoundaryEvent') &&
       canDrop(shape, connection.parent));
@@ -52141,7 +52124,7 @@
    * @return {boolean}
    */
   function canCopy(elements, element) {
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return true;
     }
 
@@ -53049,12 +53032,12 @@
     }
 
     forEach$2(elements, function(element) {
-      if (!element.parent || isLabel$4(element)) {
+      if (!element.parent || isLabel$2(element)) {
         return;
       }
 
       // handle connections separately
-      if (isConnection$9(element)) {
+      if (isConnection$2(element)) {
         connections.push(element);
 
         return;
@@ -53225,15 +53208,15 @@
 
       // find children that are not moving or resizing
       var nonMovingResizingChildren = filter(children, function(child) {
-        return !isConnection$9(child) &&
-          !isLabel$4(child) &&
+        return !isConnection$2(child) &&
+          !isLabel$2(child) &&
           !includes$3(movingShapes, child) &&
           !includes$3(resizingShapes, child);
       });
 
       // find children that are moving
       var movingChildren = filter(children, function(child) {
-        return !isConnection$9(child) && !isLabel$4(child) && includes$3(movingShapes, child);
+        return !isConnection$2(child) && !isLabel$2(child) && includes$3(movingShapes, child);
       });
 
       var minOrMax,
@@ -53367,14 +53350,6 @@
     return !!element.host;
   }
 
-  function isConnection$9(element) {
-    return !!element.waypoints;
-  }
-
-  function isLabel$4(element) {
-    return !!element.labelTarget;
-  }
-
   var MARKER_DRAGGING$1 = 'djs-dragging',
       MARKER_RESIZING = 'djs-resizing';
 
@@ -53533,7 +53508,7 @@
             });
           });
 
-          return isConnection$8(element)
+          return isConnection$2(element)
             && (sourceIsMoving || sourceIsResizing)
             && (targetIsMoving || targetIsResizing);
         });
@@ -53663,16 +53638,6 @@
     'previewSupport'
   ];
 
-
-  // helpers //////////////////////
-
-  /**
-   * Checks if an element is a connection.
-   */
-  function isConnection$8(element) {
-    return element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -55712,7 +55677,7 @@
   BpmnUpdater.prototype.updateParent = function(element, oldParent) {
 
     // do not update BPMN 2.0 label parent
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return;
     }
 
@@ -55777,7 +55742,7 @@
       });
     }
 
-    var target = isLabel$7(shape) ? this._getLabel(di) : di;
+    var target = isLabel$2(shape) ? this._getLabel(di) : di;
 
     var bounds = target.bounds;
 
@@ -56838,7 +56803,7 @@
 
     // center elements around position
     forEach$2(elements, function(element) {
-      if (isConnection$7(element)) {
+      if (isConnection$2(element)) {
         element.waypoints = map$2(element.waypoints, function(waypoint) {
           return {
             x: round$3(waypoint.x - bbox.x - bbox.width / 2 + position.x),
@@ -56858,7 +56823,7 @@
     var cache = {};
 
     forEach$2(elements, function(element) {
-      if (isConnection$7(element)) {
+      if (isConnection$2(element)) {
         cache[ element.id ] = isNumber$1(parentIndex) ?
           modeling.createConnection(
             cache[ element.source.id ],
@@ -56885,6 +56850,10 @@
         createShapeHints.autoResize = false;
       }
 
+      if (isLabel$2(element)) {
+        createShapeHints = omit(createShapeHints, [ 'attach' ]);
+      }
+
       cache[ element.id ] = isNumber$1(parentIndex) ?
         modeling.createShape(
           element,
@@ -56902,13 +56871,7 @@
     });
 
     context.elements = values(cache);
-  };
-
-  // helpers //////////
-
-  function isConnection$7(element) {
-    return !!element.waypoints;
-  }
+  };
 
   /**
    * @typedef {import('../../../model/Types').Element} Element
@@ -57231,7 +57194,7 @@
 
     // remove child shapes and connections
     saveClear(shape.children, function(child) {
-      if (isConnection$6(child)) {
+      if (isConnection$2(child)) {
         modeling.removeConnection(child, { nested: true });
       } else {
         modeling.removeShape(child, { nested: true });
@@ -57279,10 +57242,6 @@
     return shape;
   };
 
-  function isConnection$6(element) {
-    return element.waypoints;
-  }
-
   /**
    * @typedef {import('../Modeling').default} Modeling
    */
@@ -60413,13 +60372,13 @@
     }
 
     forEach$2(elements, function(element) {
-      var assignedDi = isConnection$5(element) ? pick(di, [ 'border-color' ]) : di,
+      var assignedDi = isConnection$2(element) ? pick(di, [ 'border-color' ]) : di,
           elementDi = getDi$1(element);
 
       // TODO @barmac: remove once we drop bpmn.io properties
       ensureLegacySupport(assignedDi);
 
-      if (isLabel$7(element)) {
+      if (isLabel$2(element)) {
 
         // set label colors as bpmndi:BPMNLabel#color
         self._commandStack.execute('element.updateModdleProperties', {
@@ -60479,10 +60438,6 @@
     return /^#[0-9a-fA-F]{6}$/.test(context.fillStyle) ? context.fillStyle : null;
   }
 
-  function isConnection$5(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * Add legacy properties if required.
    *
@@ -60545,7 +60500,7 @@
           businessObject = element.businessObject,
           newLabel = ctx.newLabel;
 
-      if (!isLabel$7(element)
+      if (!isLabel$2(element)
           && isLabelExternal(element)
           && !hasExternalLabel(element)
           && !isEmptyText(newLabel)) {
@@ -60585,11 +60540,11 @@
           hints = ctx.hints || {};
 
       // ignore internal labels for elements except text annotations
-      if (!isLabel$7(label) && !is$6(label, 'bpmn:TextAnnotation')) {
+      if (!isLabel$2(label) && !is$6(label, 'bpmn:TextAnnotation')) {
         return;
       }
 
-      if (isLabel$7(label) && isEmptyText(newLabel)) {
+      if (isLabel$2(label) && isEmptyText(newLabel)) {
 
         if (hints.removeShape !== false) {
           modeling.removeShape(label, { unsetLabel: false });
@@ -62698,7 +62653,7 @@
 
     var filteredElements = filter(elements, function(element) {
 
-      if (!isConnection$4(element)) {
+      if (!isConnection$2(element)) {
         return true;
       } else {
 
@@ -62716,13 +62671,6 @@
     return size(groupBy(elements, function(e) { return e.parent && e.parent.id; })) !== 1;
   }
 
-  /**
-   * Checks if an element is a connection.
-   */
-  function isConnection$4(element) {
-    return element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -64779,7 +64727,7 @@
     });
 
     // snap labels to mid only
-    if (isLabel$3(shape)) {
+    if (isLabel$2(shape)) {
       return snapContext;
     }
 
@@ -64802,9 +64750,9 @@
     forEach$2(snapTargets, function(snapTarget) {
 
       // handle labels
-      if (isLabel$3(snapTarget)) {
+      if (isLabel$2(snapTarget)) {
 
-        if (isLabel$3(shape)) {
+        if (isLabel$2(shape)) {
           snapPoints.add('mid', mid$2(snapTarget));
         }
 
@@ -64812,7 +64760,7 @@
       }
 
       // handle connections
-      if (isConnection$3(snapTarget)) {
+      if (isConnection$2(snapTarget)) {
 
         // ignore single segment connections
         if (snapTarget.waypoints.length < 3) {
@@ -64853,16 +64801,8 @@
 
   // helpers //////////
 
-  function isConnection$3(element) {
-    return !!element.waypoints;
-  }
-
   function isHidden$1(element) {
     return !!element.hidden;
-  }
-
-  function isLabel$3(element) {
-    return !!element.labelTarget;
   }
 
   /**
@@ -65271,18 +65211,10 @@
     return element.host === host;
   }
 
-  function isConnection$2(element) {
-    return !!element.waypoints;
-  }
-
   function isHidden(element) {
     return !!element.hidden;
   }
 
-  function isLabel$2(element) {
-    return !!element.labelTarget;
-  }
-
   function isHorizontal(direction) {
     return direction === 'n' || direction === 's';
   }
@@ -67812,6 +67744,10 @@
 
   var t$1,u,r,o$2=0,i$2=[],c=n$1.__b,f=n$1.__r,e$2=n$1.diffed,a$1=n$1.__c,v=n$1.unmount;function m(t,r){n$1.__h&&n$1.__h(u,t,o$2||r),o$2=0;var i=u.__H||(u.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function l$1(n){return o$2=1,p$1(w$1,n)}function p$1(n,r,o){var i=m(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u),i.__}function y(r,o){var i=m(t$1++,3);!n$1.__s&&k$1(i.__H,o)&&(i.__=r,i.__H=o,u.__H.__h.push(i));}function h(r,o){var i=m(t$1++,4);!n$1.__s&&k$1(i.__H,o)&&(i.__=r,i.__H=o,u.__h.push(i));}function s(n){return o$2=5,d(function(){return {current:n}},[])}function _(n,t,u){o$2=6,h(function(){"function"==typeof n?n(t()):n&&(n.current=t());},null==u?u:u.concat(n));}function d(n,u){var r=m(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A$1(n,t){return o$2=8,d(function(){return n},t)}function F$1(n){var r=u.context[n.__c],o=m(t$1++,9);return o.__c=n,r?(null==o.__&&(o.__=!0,r.sub(u)),r.props.value):n.__}function T$1(t,u){n$1.useDebugValue&&n$1.useDebugValue(u?u(t):t);}function x$1(){i$2.forEach(function(t){if(t.__P)try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],n$1.__e(u,t.__v);}}),i$2=[];}n$1.__b=function(n){u=null,c&&c(n);},n$1.__r=function(n){f&&f(n),t$1=0;var r=(u=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},n$1.diffed=function(t){e$2&&e$2(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i$2.push(o)&&r===n$1.requestAnimationFrame||((r=n$1.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b&&(t=requestAnimationFrame(u));})(x$1)),u=void 0;},n$1.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],n$1.__e(r,t.__v);}}),a$1&&a$1(t,u);},n$1.unmount=function(t){v&&v(t);var u=t.__c;if(u&&u.__H)try{u.__H.__.forEach(g$1);}catch(t){n$1.__e(t,u.__v);}};var b="function"==typeof requestAnimationFrame;function g$1(n){var t=u;"function"==typeof n.__c&&n.__c(),u=t;}function j$1(n){var t=u;n.__c=n.__(),u=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t}
 
+  function C$1(n,t){for(var e in t)n[e]=t[e];return n}function S(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}function g(n,t){function e(n){var e=this.props.ref,r=e==n.ref;return !r&&e&&(e.call?e(null):e.current=null),t?!t(this.props,n)||!r:S(this.props,n)}function r(t){return this.shouldComponentUpdate=e,a$2(n,t)}return r.displayName="Memo("+(n.displayName||n.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r}(E.prototype=new p$2).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return S(this.props,n)||S(this.state,t)};var w=n$1.__b;n$1.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),w&&w(n);};var R="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function x(n){function t(t,e){var r=C$1({},t);return delete r.ref,n(r,(e=t.ref||e)&&("object"!=typeof e||"current"in e)?e:null)}return t.$$typeof=R,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var N=function(n,t){return null==n?null:w$2(w$2(n).map(t))},k={map:N,forEach:N,count:function(n){return n?w$2(n).length:0},only:function(n){var t=w$2(n);if(1!==t.length)throw "Children.only";return t[0]},toArray:w$2},A=n$1.__e;n$1.__e=function(n,t,e){if(n.then)for(var r,u=t;u=u.__;)if((r=u.__c)&&r.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),r.__c(n,t);A(n,t,e);};var O=n$1.unmount;function L(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__e&&t.__e(n)}function D(n){var t,e,r;function u(u){if(t||(t=n()).then(function(n){e=n.default||n;},function(n){r=n;}),r)throw r;if(!e)throw t;return a$2(e,u)}return u.displayName="Lazy",u.__f=!0,u}function F(){this.u=null,this.o=null;}n$1.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),O&&O(n);},(L.prototype=new p$2).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__e){var n=r.state.__e;r.__v.__k[0]=function n(t,e,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)}),t.__c&&t.__c.__P===e&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate();}},f=!0===t.__h;r.__u++||f||r.setState({__e:r.__b=r.__v.__k[0]}),n.then(i,i);},L.prototype.componentWillUnmount=function(){this.t=[];},L.prototype.render=function(n,t){if(this.__b){if(this.__v.__k){var e=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function n(t,e,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),t.__c.__H=null),null!=(t=C$1({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=e),t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)})),t}(this.__b,e,r.__O=r.__P);}this.__b=null;}var u=t.__e&&a$2(y$1,null,n.fallback);return u&&(u.__h=null),[a$2(y$1,null,t.__e?null:n.children),u]};var M=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function T(n){return this.getChildContext=function(){return n.context},n.children}function j(n){var t=this,e=n.i;t.componentWillUnmount=function(){N$1(null,t.l),t.l=null,t.i=null;},t.i&&t.i!==e&&t.componentWillUnmount(),n.__v?(t.l||(t.i=e,t.l={nodeType:1,parentNode:e,childNodes:[],appendChild:function(n){this.childNodes.push(n),t.i.appendChild(n);},insertBefore:function(n,e){this.childNodes.push(n),t.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),t.i.removeChild(n);}}),N$1(a$2(T,{context:t.context},n.__v),t.l)):t.l&&t.componentWillUnmount();}function I(n,t){return a$2(j,{__v:n,i:t})}(F.prototype=new p$2).__e=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),M(t,n,r)):u();};e?e(o):o();}},F.prototype.render=function(n){this.u=null,this.o=new Map;var t=w$2(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},F.prototype.componentDidUpdate=F.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){M(n,e,t);});};var W="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,V=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};function z(n,t,e){return null==t.__k&&(t.textContent=""),N$1(n,t),"function"==typeof e&&e(),n?n.__c:null}function B(n,t,e){return O$1(n,t),"function"==typeof e&&e(),n?n.__c:null}p$2.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(n){Object.defineProperty(p$2.prototype,n,{configurable:!0,get:function(){return this["UNSAFE_"+n]},set:function(t){Object.defineProperty(this,n,{configurable:!0,writable:!0,value:t});}});});var H=n$1.event;function Z(){}function Y(){return this.cancelBubble}function $(){return this.defaultPrevented}n$1.event=function(n){return H&&(n=H(n)),n.persist=Z,n.isPropagationStopped=Y,n.isDefaultPrevented=$,n.nativeEvent=n};var q,G={configurable:!0,get:function(){return this.class}},J=n$1.vnode;n$1.vnode=function(n){var t=n.type,e=n.props,r=e;if("string"==typeof t){for(var u in r={},e){var o=e[u];"value"===u&&"defaultValue"in e&&null==o||("defaultValue"===u&&"value"in e&&null==e.value?u="value":"download"===u&&!0===o?o="":/ondoubleclick/i.test(u)?u="ondblclick":/^onchange(textarea|input)/i.test(u+t)&&!V(e.type)?u="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(u)?u=u.toLowerCase():P.test(u)?u=u.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===o&&(o=void 0),r[u]=o);}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=w$2(e.children).forEach(function(n){n.props.selected=-1!=r.value.indexOf(n.props.value);})),"select"==t&&null!=r.defaultValue&&(r.value=w$2(e.children).forEach(function(n){n.props.selected=r.multiple?-1!=r.defaultValue.indexOf(n.props.value):r.defaultValue==n.props.value;})),n.props=r;}t&&e.class!=e.className&&(G.enumerable="className"in e,null!=e.className&&(r.class=e.className),Object.defineProperty(r,"className",G)),n.$$typeof=W,J&&J(n);};var K=n$1.__r;n$1.__r=function(n){K&&K(n),q=n.__c;};var Q={ReactCurrentDispatcher:{current:{readContext:function(n){return q.__n[n.__c].props.value}}}};"object"==typeof performance&&"function"==typeof performance.now?performance.now.bind(performance):function(){return Date.now()};function fn(n){return a$2.bind(null,n)}function cn(n){return !!n&&n.$$typeof===W}function an(n){return cn(n)?S$1.apply(null,arguments):n}function sn(n){return !!n.__k&&(N$1(null,n),!0)}function hn(n){return n&&(n.base||1===n.nodeType&&n)||null}var pn=function(n,t){return n(t)};var React = {useState:l$1,useReducer:p$1,useEffect:y,useLayoutEffect:h,useRef:s,useImperativeHandle:_,useMemo:d,useCallback:A$1,useContext:F$1,useDebugValue:T$1,version:"16.8.0",Children:k,render:z,hydrate:B,unmountComponentAtNode:sn,createPortal:I,createElement:a$2,createContext:q$1,createFactory:fn,cloneElement:an,createRef:h$1,Fragment:y$1,isValidElement:cn,findDOMNode:hn,Component:p$2,PureComponent:E,memo:g,forwardRef:x,unstable_batchedUpdates:pn,StrictMode:y$1,Suspense:L,SuspenseList:F,lazy:D,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Q};
+
+  function o$1(_,o,e,n,t){var f={};for(var l in o)"ref"!=l&&(f[l]=o[l]);var s,u,a={type:_,props:f,key:e,ref:o&&o.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++n$1.__v,__source:n,__self:t};if("function"==typeof _&&(s=_.defaultProps))for(u in s)void 0===f[u]&&(f[u]=s[u]);return n$1.vnode&&n$1.vnode(a),a}
+
   var classnames$1 = {exports: {}};
 
   /*!
@@ -67873,10 +67809,6 @@
   var classnamesExports = classnames$1.exports;
   var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-  function C$1(n,t){for(var e in t)n[e]=t[e];return n}function S(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}function g(n,t){function e(n){var e=this.props.ref,r=e==n.ref;return !r&&e&&(e.call?e(null):e.current=null),t?!t(this.props,n)||!r:S(this.props,n)}function r(t){return this.shouldComponentUpdate=e,a$2(n,t)}return r.displayName="Memo("+(n.displayName||n.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r}(E.prototype=new p$2).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return S(this.props,n)||S(this.state,t)};var w=n$1.__b;n$1.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),w&&w(n);};var R="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function x(n){function t(t,e){var r=C$1({},t);return delete r.ref,n(r,(e=t.ref||e)&&("object"!=typeof e||"current"in e)?e:null)}return t.$$typeof=R,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var N=function(n,t){return null==n?null:w$2(w$2(n).map(t))},k={map:N,forEach:N,count:function(n){return n?w$2(n).length:0},only:function(n){var t=w$2(n);if(1!==t.length)throw "Children.only";return t[0]},toArray:w$2},A=n$1.__e;n$1.__e=function(n,t,e){if(n.then)for(var r,u=t;u=u.__;)if((r=u.__c)&&r.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),r.__c(n,t);A(n,t,e);};var O=n$1.unmount;function L(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__e&&t.__e(n)}function D(n){var t,e,r;function u(u){if(t||(t=n()).then(function(n){e=n.default||n;},function(n){r=n;}),r)throw r;if(!e)throw t;return a$2(e,u)}return u.displayName="Lazy",u.__f=!0,u}function F(){this.u=null,this.o=null;}n$1.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),O&&O(n);},(L.prototype=new p$2).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__e){var n=r.state.__e;r.__v.__k[0]=function n(t,e,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)}),t.__c&&t.__c.__P===e&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate();}},f=!0===t.__h;r.__u++||f||r.setState({__e:r.__b=r.__v.__k[0]}),n.then(i,i);},L.prototype.componentWillUnmount=function(){this.t=[];},L.prototype.render=function(n,t){if(this.__b){if(this.__v.__k){var e=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function n(t,e,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),t.__c.__H=null),null!=(t=C$1({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=e),t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)})),t}(this.__b,e,r.__O=r.__P);}this.__b=null;}var u=t.__e&&a$2(y$1,null,n.fallback);return u&&(u.__h=null),[a$2(y$1,null,t.__e?null:n.children),u]};var M=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function T(n){return this.getChildContext=function(){return n.context},n.children}function j(n){var t=this,e=n.i;t.componentWillUnmount=function(){N$1(null,t.l),t.l=null,t.i=null;},t.i&&t.i!==e&&t.componentWillUnmount(),n.__v?(t.l||(t.i=e,t.l={nodeType:1,parentNode:e,childNodes:[],appendChild:function(n){this.childNodes.push(n),t.i.appendChild(n);},insertBefore:function(n,e){this.childNodes.push(n),t.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),t.i.removeChild(n);}}),N$1(a$2(T,{context:t.context},n.__v),t.l)):t.l&&t.componentWillUnmount();}function I(n,t){return a$2(j,{__v:n,i:t})}(F.prototype=new p$2).__e=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),M(t,n,r)):u();};e?e(o):o();}},F.prototype.render=function(n){this.u=null,this.o=new Map;var t=w$2(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},F.prototype.componentDidUpdate=F.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){M(n,e,t);});};var W="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,V=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};function z(n,t,e){return null==t.__k&&(t.textContent=""),N$1(n,t),"function"==typeof e&&e(),n?n.__c:null}function B(n,t,e){return O$1(n,t),"function"==typeof e&&e(),n?n.__c:null}p$2.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(n){Object.defineProperty(p$2.prototype,n,{configurable:!0,get:function(){return this["UNSAFE_"+n]},set:function(t){Object.defineProperty(this,n,{configurable:!0,writable:!0,value:t});}});});var H=n$1.event;function Z(){}function Y(){return this.cancelBubble}function $(){return this.defaultPrevented}n$1.event=function(n){return H&&(n=H(n)),n.persist=Z,n.isPropagationStopped=Y,n.isDefaultPrevented=$,n.nativeEvent=n};var q,G={configurable:!0,get:function(){return this.class}},J=n$1.vnode;n$1.vnode=function(n){var t=n.type,e=n.props,r=e;if("string"==typeof t){for(var u in r={},e){var o=e[u];"value"===u&&"defaultValue"in e&&null==o||("defaultValue"===u&&"value"in e&&null==e.value?u="value":"download"===u&&!0===o?o="":/ondoubleclick/i.test(u)?u="ondblclick":/^onchange(textarea|input)/i.test(u+t)&&!V(e.type)?u="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(u)?u=u.toLowerCase():P.test(u)?u=u.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===o&&(o=void 0),r[u]=o);}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=w$2(e.children).forEach(function(n){n.props.selected=-1!=r.value.indexOf(n.props.value);})),"select"==t&&null!=r.defaultValue&&(r.value=w$2(e.children).forEach(function(n){n.props.selected=r.multiple?-1!=r.defaultValue.indexOf(n.props.value):r.defaultValue==n.props.value;})),n.props=r;}t&&e.class!=e.className&&(G.enumerable="className"in e,null!=e.className&&(r.class=e.className),Object.defineProperty(r,"className",G)),n.$$typeof=W,J&&J(n);};var K=n$1.__r;n$1.__r=function(n){K&&K(n),q=n.__c;};var Q={ReactCurrentDispatcher:{current:{readContext:function(n){return q.__n[n.__c].props.value}}}};"object"==typeof performance&&"function"==typeof performance.now?performance.now.bind(performance):function(){return Date.now()};function fn(n){return a$2.bind(null,n)}function cn(n){return !!n&&n.$$typeof===W}function an(n){return cn(n)?S$1.apply(null,arguments):n}function sn(n){return !!n.__k&&(N$1(null,n),!0)}function hn(n){return n&&(n.base||1===n.nodeType&&n)||null}var pn=function(n,t){return n(t)};var React = {useState:l$1,useReducer:p$1,useEffect:y,useLayoutEffect:h,useRef:s,useImperativeHandle:_,useMemo:d,useCallback:A$1,useContext:F$1,useDebugValue:T$1,version:"16.8.0",Children:k,render:z,hydrate:B,unmountComponentAtNode:sn,createPortal:I,createElement:a$2,createContext:q$1,createFactory:fn,cloneElement:an,createRef:h$1,Fragment:y$1,isValidElement:cn,findDOMNode:hn,Component:p$2,PureComponent:E,memo:g,forwardRef:x,unstable_batchedUpdates:pn,StrictMode:y$1,Suspense:L,SuspenseList:F,lazy:D,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Q};
-
-  function o$1(_,o,e,n,t){var f={};for(var l in o)"ref"!=l&&(f[l]=o[l]);var s,u,a={type:_,props:f,key:e,ref:o&&o.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++n$1.__v,__source:n,__self:t};if("function"==typeof _&&(s=_.defaultProps))for(u in s)void 0===f[u]&&(f[u]=s[u]);return n$1.vnode&&n$1.vnode(a),a}
-
   // FIXME profile adding a per-Tree TreeNode cache, validating it by
   // parent pointer
   /// The default maximum length of a `TreeBuffer` node.
@@ -95257,44 +95189,18 @@
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  var FeelRequiredIcon = function FeelRequiredIcon(props) {
+  var FeelIcon$1 = function FeelIcon(props) {
     return o$1("svg", {
       ...props,
-      children: [o$1("path", {
-        d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
-        fill: "currentColor"
-      }), o$1("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268Z",
-        fill: "currentColor"
-      }), o$1("path", {
-        d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304Z",
-        fill: "currentColor"
-      })]
-    });
-  };
-  FeelRequiredIcon.defaultProps = {
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  };
-  var FeelOptionalIcon = function FeelOptionalIcon(props) {
-    return o$1("svg", {
-      ...props,
-      children: [o$1("path", {
-        d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
-        fill: "currentColor"
-      }), o$1("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z",
-        fill: "currentColor"
-      })]
+      children: o$1("path", {
+        d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
+        fill: "currentcolor"
+      })
     });
   };
-  FeelOptionalIcon.defaultProps = {
-    viewBox: "0 0 16 16",
+  FeelIcon$1.defaultProps = {
+    width: "14",
+    height: "14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
@@ -95539,6 +95445,18 @@
    * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+    const [scrollContainer, setScrollContainer] = l$1(query$1(scrollContainerSelector));
+    const updateScrollContainer = A$1(() => {
+      const newScrollContainer = query$1(scrollContainerSelector);
+      if (newScrollContainer !== scrollContainer) {
+        setScrollContainer(newScrollContainer);
+      }
+    }, [scrollContainerSelector, scrollContainer]);
+    y(() => {
+      updateScrollContainer();
+    }, [updateScrollContainer]);
+    useEvent('propertiesPanel.attach', updateScrollContainer);
+    useEvent('propertiesPanel.detach', updateScrollContainer);
     y(() => {
       const Observer = IntersectionObserver;
 
@@ -95546,37 +95464,36 @@
       if (!Observer) {
         return;
       }
-      let observer;
-      if (ref.current) {
-        const scrollContainer = query$1(scrollContainerSelector);
-        observer = new Observer(entries => {
-          // The ScrollContainer is unmounted, do not update sticky state
-          if (scrollContainer.scrollHeight === 0) {
-            return;
+
+      // TODO(@barmac): test this
+      if (!ref.current || !scrollContainer) {
+        return;
+      }
+      const observer = new Observer(entries => {
+        // scroll container is unmounted, do not update sticky state
+        if (scrollContainer.scrollHeight === 0) {
+          return;
+        }
+        entries.forEach(entry => {
+          if (entry.intersectionRatio < 1) {
+            setSticky(true);
+          } else if (entry.intersectionRatio === 1) {
+            setSticky(false);
           }
-          entries.forEach(entry => {
-            if (entry.intersectionRatio < 1) {
-              setSticky(true);
-            } else if (entry.intersectionRatio === 1) {
-              setSticky(false);
-            }
-          });
-        }, {
-          root: scrollContainer,
-          rootMargin: '0px 0px 999999% 0px',
-          // Use bottom margin to avoid stickyness when scrolling out to bottom
-          threshold: [1]
         });
-        observer.observe(ref.current);
-      }
+      }, {
+        root: scrollContainer,
+        rootMargin: '0px 0px 999999% 0px',
+        // Use bottom margin to avoid stickyness when scrolling out to bottom
+        threshold: [1]
+      });
+      observer.observe(ref.current);
 
       // Unobserve if unmounted
       return () => {
-        if (ref.current && observer) {
-          observer.unobserve(ref.current);
-        }
+        observer.unobserve(ref.current);
       };
-    }, [ref, scrollContainerSelector, setSticky]);
+    }, [ref.current, scrollContainer, setSticky]);
   }
 
   /**
@@ -95711,9 +95628,7 @@
     });
   }
 
-  const DEFAULT_LAYOUT = {
-    open: true
-  };
+  const DEFAULT_LAYOUT = {};
   const DEFAULT_DESCRIPTION = {};
 
   /**
@@ -95877,7 +95792,7 @@
             children: o$1(EventContext.Provider, {
               value: eventContext,
               children: o$1("div", {
-                class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+                class: "bio-properties-panel",
                 children: [o$1(Header$1, {
                   element: element,
                   headerProvider: headerProvider
@@ -96656,14 +96571,13 @@
    */
   function FeelIcon(props) {
     const {
-      label,
       feel = false,
       active,
       disabled = false,
       onClick = noop$2
     } = props;
-    const feelRequiredLabel = ' must be a FEEL expression';
-    const feelOptionalLabel = ' can optionally be a FEEL expression';
+    const feelRequiredLabel = 'FEEL expression is mandatory';
+    const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
     const handleClick = e => {
       onClick(e);
 
@@ -96676,11 +96590,196 @@
       class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
       onClick: handleClick,
       disabled: feel === 'required' || disabled,
-      title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
-      children: feel === 'required' ? o$1(FeelRequiredIcon, {}) : o$1(FeelOptionalIcon, {})
+      title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+      children: o$1(FeelIcon$1, {})
+    });
+  }
+
+  function ToggleSwitch(props) {
+    const {
+      id,
+      label,
+      onInput,
+      value,
+      switcherLabel,
+      inline,
+      onFocus,
+      onBlur,
+      inputRef
+    } = props;
+    const [localValue, setLocalValue] = l$1(value);
+    const handleInputCallback = async () => {
+      onInput(!value);
+    };
+    const handleInput = e => {
+      handleInputCallback();
+      setLocalValue(e.target.value);
+    };
+    y(() => {
+      if (value === localValue) {
+        return;
+      }
+      setLocalValue(value);
+    }, [value]);
+    return o$1("div", {
+      class: classnames('bio-properties-panel-toggle-switch', {
+        inline
+      }),
+      children: [o$1("label", {
+        class: "bio-properties-panel-label",
+        for: prefixId$6(id),
+        children: label
+      }), o$1("div", {
+        class: "bio-properties-panel-field-wrapper",
+        children: [o$1("label", {
+          class: "bio-properties-panel-toggle-switch__switcher",
+          children: [o$1("input", {
+            ref: inputRef,
+            id: prefixId$6(id),
+            class: "bio-properties-panel-input",
+            type: "checkbox",
+            onFocus: onFocus,
+            onBlur: onBlur,
+            name: id,
+            onInput: handleInput,
+            checked: !!localValue
+          }), o$1("span", {
+            class: "bio-properties-panel-toggle-switch__slider"
+          })]
+        }), switcherLabel && o$1("p", {
+          class: "bio-properties-panel-toggle-switch__label",
+          children: switcherLabel
+        })]
+      })]
+    });
+  }
+
+  /**
+   * @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
+   */
+  function ToggleSwitchEntry(props) {
+    const {
+      element,
+      id,
+      description,
+      label,
+      switcherLabel,
+      inline,
+      getValue,
+      setValue,
+      onFocus,
+      onBlur
+    } = props;
+    const value = getValue(element);
+    return o$1("div", {
+      class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+      "data-entry-id": id,
+      children: [o$1(ToggleSwitch, {
+        id: id,
+        label: label,
+        value: value,
+        onInput: setValue,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        switcherLabel: switcherLabel,
+        inline: inline
+      }), o$1(Description, {
+        forId: id,
+        element: element,
+        value: description
+      })]
+    });
+  }
+  function isEdited$7(node) {
+    return node && !!node.checked;
+  }
+
+  // helpers /////////////////
+
+  function prefixId$6(id) {
+    return `bio-properties-panel-${id}`;
+  }
+
+  function NumberField(props) {
+    const {
+      debounce,
+      disabled,
+      displayLabel = true,
+      id,
+      inputRef,
+      label,
+      max,
+      min,
+      onInput,
+      step,
+      value = '',
+      onFocus,
+      onBlur
+    } = props;
+    const [localValue, setLocalValue] = l$1(value);
+    const handleInputCallback = d(() => {
+      return debounce(event => {
+        const {
+          validity,
+          value
+        } = event.target;
+        if (validity.valid) {
+          onInput(value ? parseFloat(value) : undefined);
+        }
+      });
+    }, [onInput, debounce]);
+    const handleInput = e => {
+      handleInputCallback(e);
+      setLocalValue(e.target.value);
+    };
+    y(() => {
+      if (value === localValue) {
+        return;
+      }
+      setLocalValue(value);
+    }, [value]);
+    return o$1("div", {
+      class: "bio-properties-panel-numberfield",
+      children: [displayLabel && o$1("label", {
+        for: prefixId$5(id),
+        class: "bio-properties-panel-label",
+        children: label
+      }), o$1("input", {
+        id: prefixId$5(id),
+        ref: inputRef,
+        type: "number",
+        name: id,
+        spellCheck: "false",
+        autoComplete: "off",
+        disabled: disabled,
+        class: "bio-properties-panel-input",
+        max: max,
+        min: min,
+        onInput: handleInput,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        step: step,
+        value: localValue
+      })]
     });
   }
 
+  // helpers /////////////////
+
+  function prefixId$5(id) {
+    return `bio-properties-panel-${id}`;
+  }
+
   const noop$1 = () => {};
   function FeelTextfield(props) {
     const {
@@ -96699,8 +96798,8 @@
     const [localValue, _setLocalValue] = l$1(value);
     const editorRef = useShowEntryEvent(id);
     const containerRef = s();
-    const feelActive = localValue.startsWith('=') || feel === 'required';
-    const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
+    const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
+    const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
     const [focus, _setFocus] = l$1(undefined);
     const setFocus = (offset = 0) => {
       const hasFocus = containerRef.current.contains(document.activeElement);
@@ -96740,7 +96839,7 @@
         return;
       }
       setLocalValue(newValue);
-      if (!feelActive && newValue.startsWith('=')) {
+      if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
         // focus is behind `=` sign that will be removed
         setFocus(-1);
       }
@@ -96803,9 +96902,11 @@
       };
     }, [containerRef, feelActive, handleFeelToggle, setFocus]);
     return o$1("div", {
-      class: "bio-properties-panel-feel-entry",
+      class: classnames('bio-properties-panel-feel-entry', {
+        'feel-active': feelActive
+      }),
       children: [o$1("label", {
-        for: prefixId$6(id),
+        for: prefixId$4(id),
         class: "bio-properties-panel-label",
         onClick: () => setFocus(),
         children: [label, o$1(FeelIcon, {
@@ -96822,7 +96923,7 @@
           disabled: feel !== 'optional' || disabled,
           onClick: handleFeelToggle
         }), feelActive ? o$1(CodeEditor, {
-          id: prefixId$6(id),
+          id: prefixId$4(id),
           name: id,
           onInput: handleLocalInput,
           disabled: disabled,
@@ -96839,7 +96940,8 @@
           ...props,
           onInput: handleLocalInput,
           contentAttributes: {
-            'id': prefixId$6(id)
+            'id': prefixId$4(id),
+            'aria-label': label
           },
           value: localValue,
           ref: editorRef
@@ -96876,7 +96978,7 @@
       }
     };
     return o$1("input", {
-      id: prefixId$6(id),
+      id: prefixId$4(id),
       type: "text",
       ref: inputRef,
       name: id,
@@ -96890,6 +96992,53 @@
       value: value || ''
     });
   });
+  x((props, ref) => {
+    const {
+      id,
+      debounce,
+      disabled,
+      onInput,
+      value,
+      min,
+      max,
+      step,
+      onFocus,
+      onBlur
+    } = props;
+    const inputRef = s();
+
+    // To be consistent with the FEEL editor, set focus at start of input
+    // this ensures clean editing experience when switching with the keyboard
+    ref.current = {
+      focus: position => {
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        input.focus();
+        if (typeof position === 'number' && position !== Infinity) {
+          if (position > value.length) {
+            position = value.length;
+          }
+          input.setSelectionRange(position, position);
+        }
+      }
+    };
+    return o$1(NumberField, {
+      id: id,
+      debounce: debounce,
+      disabled: disabled,
+      displayLabel: false,
+      inputRef: inputRef,
+      max: max,
+      min: min,
+      onInput: onInput,
+      step: step,
+      value: value,
+      onFocus: onFocus,
+      onBlur: onBlur
+    });
+  });
   const OptionalFeelTextArea = x((props, ref) => {
     const {
       id,
@@ -96914,7 +97063,7 @@
       }
     };
     return o$1("textarea", {
-      id: prefixId$6(id),
+      id: prefixId$4(id),
       type: "text",
       ref: inputRef,
       name: id,
@@ -96929,6 +97078,78 @@
       "data-gramm": "false"
     });
   });
+  x((props, ref) => {
+    const {
+      id,
+      onInput,
+      value,
+      onFocus,
+      onBlur,
+      switcherLabel
+    } = props;
+    const inputRef = s();
+
+    // To be consistent with the FEEL editor, set focus at start of input
+    // this ensures clean editing experience when switching with the keyboard
+    ref.current = {
+      focus: () => {
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        input.focus();
+      }
+    };
+    return o$1(ToggleSwitch, {
+      id: id,
+      value: value,
+      inputRef: inputRef,
+      onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      switcherLabel: switcherLabel
+    });
+  });
+  x((props, ref) => {
+    const {
+      id,
+      disabled,
+      onInput,
+      value,
+      onFocus,
+      onBlur
+    } = props;
+    const inputRef = s();
+    const handleChange = ({
+      target
+    }) => {
+      onInput(target.checked);
+    };
+
+    // To be consistent with the FEEL editor, set focus at start of input
+    // this ensures clean editing experience when switching with the keyboard
+    ref.current = {
+      focus: () => {
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        input.focus();
+      }
+    };
+    return o$1("input", {
+      ref: inputRef,
+      id: prefixId$4(id),
+      name: id,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      type: "checkbox",
+      class: "bio-properties-panel-input",
+      onChange: handleChange,
+      checked: value,
+      disabled: disabled
+    });
+  });
 
   /**
    * @param {Object} props
@@ -97007,11 +97228,13 @@
     return o$1("div", {
       class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
       "data-entry-id": id,
-      children: [o$1(FeelTextfield, {
+      children: [a$2(FeelTextfield, {
+        ...props,
         debounce: debounce,
         disabled: disabled,
         feel: feel,
         id: id,
+        key: element,
         label: label,
         onInput: onInput,
         onError: onError,
@@ -97025,7 +97248,7 @@
         variables: variables,
         tooltipContainer: tooltipContainer,
         OptionalComponent: props.OptionalComponent
-      }, element), error && o$1("div", {
+      }), error && o$1("div", {
         class: "bio-properties-panel-error",
         children: error
       }), o$1(Description, {
@@ -97062,13 +97285,19 @@
       ...props
     });
   }
-  function isEdited$7(node) {
-    return node && (!!node.value || node.classList.contains('edited'));
+  function isEdited$5(node) {
+    if (!node) {
+      return false;
+    }
+    if (node.type === 'checkbox') {
+      return !!node.checked || node.classList.contains('edited');
+    }
+    return !!node.value || node.classList.contains('edited');
   }
 
   // helpers /////////////////
 
-  function prefixId$6(id) {
+  function prefixId$4(id) {
     return `bio-properties-panel-${id}`;
   }
 
@@ -97103,12 +97332,12 @@
     return o$1("div", {
       class: "bio-properties-panel-select",
       children: [o$1("label", {
-        for: prefixId$4(id),
+        for: prefixId$3(id),
         class: "bio-properties-panel-label",
         children: label
       }), o$1("select", {
         ref: ref,
-        id: prefixId$4(id),
+        id: prefixId$3(id),
         name: id,
         class: "bio-properties-panel-input",
         onInput: handleChange,
@@ -97215,13 +97444,13 @@
       })]
     });
   }
-  function isEdited$4(node) {
+  function isEdited$3(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$4(id) {
+  function prefixId$3(id) {
     return `bio-properties-panel-${id}`;
   }
 
@@ -97270,12 +97499,12 @@
     return o$1("div", {
       class: "bio-properties-panel-textarea",
       children: [o$1("label", {
-        for: prefixId$2(id),
+        for: prefixId$1(id),
         class: "bio-properties-panel-label",
         children: label
       }), o$1("textarea", {
         ref: ref,
-        id: prefixId$2(id),
+        id: prefixId$1(id),
         name: id,
         spellCheck: "false",
         class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
@@ -97375,13 +97604,13 @@
       })]
     });
   }
-  function isEdited$2(node) {
+  function isEdited$1(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$2(id) {
+  function prefixId$1(id) {
     return `bio-properties-panel-${id}`;
   }
 
@@ -97416,12 +97645,12 @@
     return o$1("div", {
       class: "bio-properties-panel-textfield",
       children: [o$1("label", {
-        for: prefixId$1(id),
+        for: prefixId(id),
         class: "bio-properties-panel-label",
         children: label
       }), o$1("input", {
         ref: ref,
-        id: prefixId$1(id),
+        id: prefixId(id),
         type: "text",
         name: id,
         spellCheck: "false",
@@ -97513,115 +97742,8 @@
       })]
     });
   }
-  function isEdited$1(node) {
-    return node && !!node.value;
-  }
-
-  // helpers /////////////////
-
-  function prefixId$1(id) {
-    return `bio-properties-panel-${id}`;
-  }
-
-  function ToggleSwitch(props) {
-    const {
-      id,
-      label,
-      onInput,
-      value,
-      switcherLabel,
-      onFocus,
-      onBlur
-    } = props;
-    const [localValue, setLocalValue] = l$1(value);
-    const handleInputCallback = async () => {
-      onInput(!value);
-    };
-    const handleInput = e => {
-      handleInputCallback();
-      setLocalValue(e.target.value);
-    };
-    y(() => {
-      if (value === localValue) {
-        return;
-      }
-      setLocalValue(value);
-    }, [value]);
-    return o$1("div", {
-      class: "bio-properties-panel-toggle-switch",
-      children: [o$1("label", {
-        class: "bio-properties-panel-label",
-        for: prefixId(id),
-        children: label
-      }), o$1("div", {
-        class: "bio-properties-panel-field-wrapper",
-        children: [o$1("label", {
-          class: "bio-properties-panel-toggle-switch__switcher",
-          children: [o$1("input", {
-            id: prefixId(id),
-            class: "bio-properties-panel-input",
-            type: "checkbox",
-            onFocus: onFocus,
-            onBlur: onBlur,
-            name: id,
-            onInput: handleInput,
-            checked: !!localValue
-          }), o$1("span", {
-            class: "bio-properties-panel-toggle-switch__slider"
-          })]
-        }), o$1("p", {
-          class: "bio-properties-panel-toggle-switch__label",
-          children: switcherLabel
-        })]
-      })]
-    });
-  }
-
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {String} props.switcherLabel
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   */
-  function ToggleSwitchEntry(props) {
-    const {
-      element,
-      id,
-      description,
-      label,
-      switcherLabel,
-      getValue,
-      setValue,
-      onFocus,
-      onBlur
-    } = props;
-    const value = getValue(element);
-    return o$1("div", {
-      class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
-      "data-entry-id": id,
-      children: [o$1(ToggleSwitch, {
-        id: id,
-        label: label,
-        value: value,
-        onInput: setValue,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        switcherLabel: switcherLabel
-      }), o$1(Description, {
-        forId: id,
-        element: element,
-        value: description
-      })]
-    });
-  }
   function isEdited(node) {
-    return node && !!node.checked;
+    return node && !!node.value;
   }
 
   // helpers /////////////////
@@ -101020,7 +101142,7 @@
       type = `${getEventDefinitionPrefix(eventDefinition)}${type}`;
 
       // (1.1) interrupting / non interrupting
-      if (is$6(element, 'bpmn:StartEvent') && !isInterrupting(element) || is$6(element, 'bpmn:BoundaryEvent') && !isCancelActivity(element)) {
+      if (is$6(element, 'bpmn:StartEvent') && !isInterrupting$1(element) || is$6(element, 'bpmn:BoundaryEvent') && !isCancelActivity(element)) {
         type = `${type}NonInterrupting`;
       }
       return type;
@@ -101397,7 +101519,7 @@
       eventBus.fire('propertiesPanel.layoutChanged', {
         layout: newLayout
       });
-    }, [eventBus, layoutConfig]);
+    }, [eventBus]);
 
     // React to external layout changes
     y(() => {
@@ -101724,17 +101846,17 @@
   function getLinkEventDefinition(element) {
     return getEventDefinition$1(element, 'bpmn:LinkEventDefinition');
   }
-  function getSignalEventDefinition(element) {
+  function getSignalEventDefinition$1(element) {
     return getEventDefinition$1(element, 'bpmn:SignalEventDefinition');
   }
   function isLinkSupported(element) {
     return isAny$1(element, ['bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent']) && !!getLinkEventDefinition(element);
   }
-  function isSignalSupported(element) {
-    return is$6(element, 'bpmn:Event') && !!getSignalEventDefinition(element);
+  function isSignalSupported$1(element) {
+    return is$6(element, 'bpmn:Event') && !!getSignalEventDefinition$1(element);
   }
-  function getSignal(element) {
-    const signalEventDefinition = getSignalEventDefinition(element);
+  function getSignal$1(element) {
+    const signalEventDefinition = getSignalEventDefinition$1(element);
     return signalEventDefinition && signalEventDefinition.get('signalRef');
   }
   function getEscalationEventDefinition(element) {
@@ -101779,7 +101901,7 @@
     }, {
       id: 'activityRef',
       component: ActivityRef,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
   }
   function WaitForCompletion(props) {
@@ -101973,13 +102095,13 @@
     const entries = [{
       id: 'documentation',
       component: ElementDocumentationProperty,
-      isEdited: isEdited$2
+      isEdited: isEdited$1
     }];
     if (hasProcessRef$2(element)) {
       entries.push({
         id: 'processDocumentation',
         component: ProcessDocumentationProperty,
-        isEdited: isEdited$2
+        isEdited: isEdited$1
       });
     }
     return entries;
@@ -102161,17 +102283,17 @@
     let entries = [{
       id: 'errorRef',
       component: ErrorRef$1,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     if (error) {
       entries = [...entries, {
         id: 'errorName',
         component: ErrorName$1,
-        isEdited: isEdited$1
+        isEdited: isEdited
       }, {
         id: 'errorCode',
         component: ErrorCode$2,
-        isEdited: isEdited$1
+        isEdited: isEdited
       }];
     }
     return entries;
@@ -102342,17 +102464,17 @@
     let entries = [{
       id: 'escalationRef',
       component: EscalationRef,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     if (escalation) {
       entries = [...entries, {
         id: 'escalationName',
         component: EscalationName,
-        isEdited: isEdited$1
+        isEdited: isEdited
       }, {
         id: 'escalationCode',
         component: EscalationCode$1,
-        isEdited: isEdited$1
+        isEdited: isEdited
       }];
     }
     return entries;
@@ -102624,7 +102746,7 @@
     return [{
       id: 'id',
       component: Id$3,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }];
   }
   function Id$3(props) {
@@ -102674,7 +102796,7 @@
     return [{
       id: 'linkName',
       component: LinkName,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }];
   }
   function LinkName(props) {
@@ -102728,13 +102850,13 @@
     let entries = [{
       id: 'messageRef',
       component: MessageRef$1,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     if (message) {
       entries = [...entries, {
         id: 'messageName',
         component: MessageName$1,
-        isEdited: isEdited$1
+        isEdited: isEdited
       }];
     }
     return entries;
@@ -102875,11 +102997,11 @@
     const entries = [{
       id: 'loopCardinality',
       component: LoopCardinality,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }, {
       id: 'completionCondition',
       component: CompletionCondition$1,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }];
     return entries;
   }
@@ -103102,7 +103224,7 @@
     return [{
       id: 'name',
       component: Name$3,
-      isEdited: isEdited$2
+      isEdited: isEdited$1
     }];
   }
   function Name$3(props) {
@@ -103211,11 +103333,11 @@
     return [{
       id: 'processId',
       component: ProcessId,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }, {
       id: 'processName',
       component: ProcessName,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }];
   }
   function ProcessName(props) {
@@ -103287,34 +103409,34 @@
     return is$6(element, 'bpmn:Participant') && element.businessObject.get('processRef');
   }
 
-  const EMPTY_OPTION$3 = '';
-  const CREATE_NEW_OPTION$2 = 'create-new';
-
   /**
    * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
+  const EMPTY_OPTION$3 = '';
+  const CREATE_NEW_OPTION$2 = 'create-new';
+
   /**
-   * @returns {Array<Entry>} entries
+   * @returns {Entry[]}
    */
-  function SignalProps(props) {
+  function SignalProps$1(props) {
     const {
       element
     } = props;
-    if (!isSignalSupported(element)) {
+    if (!isSignalSupported$1(element)) {
       return [];
     }
-    const signal = getSignal(element);
+    const signal = getSignal$1(element);
     let entries = [{
       id: 'signalRef',
       component: SignalRef,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     if (signal) {
       entries = [...entries, {
         id: 'signalName',
-        component: SignalName,
-        isEdited: isEdited$1
+        component: SignalName$1,
+        isEdited: isEdited
       }];
     }
     return entries;
@@ -103326,9 +103448,9 @@
     const bpmnFactory = useService('bpmnFactory');
     const commandStack = useService('commandStack');
     const translate = useService('translate');
-    const signalEventDefinition = getSignalEventDefinition(element);
+    const signalEventDefinition = getSignalEventDefinition$1(element);
     const getValue = () => {
-      const signal = getSignal(element);
+      const signal = getSignal$1(element);
       if (signal) {
         return signal.get('id');
       }
@@ -103402,14 +103524,14 @@
       getOptions
     });
   }
-  function SignalName(props) {
+  function SignalName$1(props) {
     const {
       element
     } = props;
     const commandStack = useService('commandStack');
     const translate = useService('translate');
     const debounce = useService('debounceInput');
-    const signal = getSignal(element);
+    const signal = getSignal$1(element);
     const getValue = () => {
       return signal.get('name');
     };
@@ -103489,6 +103611,16 @@
     const messageEventDefinition = getMessageEventDefinition(element);
     return messageEventDefinition && messageEventDefinition.get('messageRef');
   }
+  function getSignalEventDefinition(element) {
+    return getEventDefinition(element, 'bpmn:SignalEventDefinition');
+  }
+  function isSignalSupported(element) {
+    return is$6(element, 'bpmn:Event') && !!getSignalEventDefinition(element);
+  }
+  function getSignal(element) {
+    const signalEventDefinition = getSignalEventDefinition(element);
+    return signalEventDefinition && signalEventDefinition.get('signalRef');
+  }
 
   function TimerProps$2(props) {
     const {
@@ -103514,7 +103646,7 @@
     entries.push({
       id: getId$1(idPrefix, 'timerEventDefinitionType'),
       component: TimerEventDefinitionType$2,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       timerEventDefinition,
       timerEventDefinitionType
     });
@@ -103522,7 +103654,7 @@
       entries.push({
         id: getId$1(idPrefix, 'timerEventDefinitionValue'),
         component: TimerEventDefinitionValue$2,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         timerEventDefinition,
         timerEventDefinitionType
       });
@@ -103800,7 +103932,7 @@
       id: 'signal',
       label: translate('Signal'),
       component: Group,
-      entries: [...SignalProps({
+      entries: [...SignalProps$1({
         element
       })]
     };
@@ -104015,15 +104147,15 @@
     return [{
       id: 'assignmentDefinitionAssignee',
       component: Assignee$1,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'assignmentDefinitionCandidateGroups',
       component: CandidateGroups$1,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'assignmentDefinitionCandidateUsers',
       component: CandidateUsers$1,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }];
   }
   function Assignee$1(props) {
@@ -104458,11 +104590,11 @@
     return [{
       id: 'decisionId',
       component: DecisionID,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'resultVariable',
       component: ResultVariable$4,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }];
   }
   function DecisionID(props) {
@@ -104634,7 +104766,7 @@
       conditionProps.push({
         id: 'conditionExpression',
         component: ConditionExpression$1,
-        isEdited: isEdited$7
+        isEdited: isEdited$5
       });
     }
     return conditionProps;
@@ -104730,7 +104862,7 @@
       entries.push({
         id: 'errorCode',
         component: ErrorCode$1,
-        isEdited: isEdited$7
+        isEdited: isEdited$5
       });
     }
     return entries;
@@ -104788,7 +104920,7 @@
       entries.push({
         id: 'escalationCode',
         component: EscalationCode,
-        isEdited: isEdited$7
+        isEdited: isEdited$5
       });
     }
     return entries;
@@ -104836,19 +104968,19 @@
     const entries = [{
       id: 'formType',
       component: FormType$1,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     if (isCamundaForm(element, formHelper)) {
       entries.push({
         id: 'formConfiguration',
         component: FormConfiguration,
-        isEdited: isEdited$2
+        isEdited: isEdited$1
       });
     } else if (isCustomKey(element, formHelper)) {
       entries.push({
         id: 'customFormKey',
         component: CustomFormKey,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -105505,7 +105637,7 @@
     return getParameters$1.apply(this, [element, 'outputParameters']);
   }
   function areInputParametersSupported$1(element) {
-    return isAny$1(element, ['bpmn:UserTask', 'bpmn:SubProcess', 'bpmn:CallActivity', 'bpmn:BusinessRuleTask', 'bpmn:ScriptTask']) || isZeebeServiceTask(element);
+    return isAny$1(element, ['bpmn:UserTask', 'bpmn:SubProcess', 'bpmn:CallActivity', 'bpmn:BusinessRuleTask', 'bpmn:ScriptTask']) || isZeebeServiceTask(element) || isSignalThrowEvent(element);
   }
   function areOutputParametersSupported$1(element) {
     return isAny$1(element, ['zeebe:ZeebeServiceTask', 'bpmn:UserTask', 'bpmn:SubProcess', 'bpmn:ReceiveTask', 'bpmn:CallActivity', 'bpmn:Event', 'bpmn:BusinessRuleTask']);
@@ -105513,6 +105645,12 @@
   function createIOMapping(properties, parent, bpmnFactory) {
     return createElement$1('zeebe:IoMapping', properties, parent, bpmnFactory);
   }
+  function isSignalThrowEvent(element) {
+    if (!isAny$1(element, ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'])) {
+      return false;
+    }
+    return !!getEventDefinition$1(element, 'bpmn:SignalEventDefinition');
+  }
 
   function InputProps$1({
     element,
@@ -105673,14 +105811,14 @@
       entries.push({
         id: 'messageName',
         component: MessageName,
-        isEdited: isEdited$7
+        isEdited: isEdited$5
       });
     }
     if (message && canHaveSubscriptionCorrelationKey(element)) {
       entries.push({
         id: 'messageSubscriptionCorrelationKey',
         component: SubscriptionCorrelationKey,
-        isEdited: isEdited$7
+        isEdited: isEdited$5
       });
     }
     return entries;
@@ -105833,23 +105971,23 @@
     return [{
       id: 'multiInstance-inputCollection',
       component: InputCollection,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'multiInstance-inputElement',
       component: InputElement,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }, {
       id: 'multiInstance-outputCollection',
       component: OutputCollection,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }, {
       id: 'multiInstance-outputElement',
       component: OutputElement,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'multiInstance-completionCondition',
       component: CompletionCondition,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }];
   }
   function InputCollection(props) {
@@ -106088,7 +106226,7 @@
     return [{
       id: 'propagateAllChildVariables',
       component: PropagateAllChildVariables,
-      isEdited: isEdited
+      isEdited: isEdited$7
     }];
   }
   function PropagateAllChildVariables(props) {
@@ -106511,11 +106649,11 @@
     return [{
       id: 'resultVariable',
       component: ResultVariable$3,
-      isEdited: isEdited$1
+      isEdited: isEdited
     }, {
       id: 'scriptExpression',
       component: Expression$3,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }];
   }
   function Expression$3(props) {
@@ -106675,6 +106813,58 @@
     return getExtensionElementsList$2(businessObject, 'zeebe:Script')[0];
   }
 
+  /**
+   * @returns {Entry[]}
+   */
+  function SignalProps(props) {
+    const {
+      element
+    } = props;
+    if (!isSignalSupported(element)) {
+      return [];
+    }
+    const signal = getSignal(element);
+    let entries = [];
+    if (signal) {
+      entries = [...entries, {
+        id: 'signalName',
+        component: SignalName,
+        isEdited: isEdited$5
+      }];
+    }
+    return entries;
+  }
+  function SignalName(props) {
+    const {
+      element
+    } = props;
+    const commandStack = useService('commandStack');
+    const translate = useService('translate');
+    const debounce = useService('debounceInput');
+    const signal = getSignal(element);
+    const getValue = () => {
+      return signal.get('name');
+    };
+    const setValue = value => {
+      return commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: signal,
+        properties: {
+          name: value
+        }
+      });
+    };
+    return FeelEntryWithVariableContext({
+      element,
+      id: 'signalName',
+      label: translate('Name'),
+      feel: 'optional',
+      getValue,
+      setValue,
+      debounce
+    });
+  }
+
   function TargetProps(props) {
     const {
       element
@@ -106685,7 +106875,7 @@
     return [{
       id: 'targetProcessId',
       component: TargetProcessId,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }];
   }
   function TargetProcessId(props) {
@@ -106774,11 +106964,11 @@
     return [{
       id: 'taskDefinitionType',
       component: TaskDefinitionType,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'taskDefinitionRetries',
       component: TaskDefinitionRetries,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }];
   }
   function TaskDefinitionType(props) {
@@ -106947,11 +107137,11 @@
     return [{
       id: 'taskScheduleDueDate',
       component: DueDate$1,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }, {
       id: 'taskScheduleFollowUpDate',
       component: FollowUpDate$1,
-      isEdited: isEdited$7
+      isEdited: isEdited$5
     }];
   }
   function DueDate$1(props) {
@@ -107135,7 +107325,7 @@
       entries.push({
         id: 'timerEventDefinitionType',
         component: TimerEventDefinitionType$1,
-        isEdited: isEdited$4,
+        isEdited: isEdited$3,
         options: timerOptions
       });
     }
@@ -107143,7 +107333,7 @@
       entries.push({
         id: 'timerEventDefinitionValue',
         component: TimerEventDefinitionValue$1,
-        isEdited: isEdited$7,
+        isEdited: isEdited$5,
         label: singleOption ? timerOptions[0].label : undefined,
         timerEventDefinitionType: timerEventDefinitionType || timerOptions[0].value
       });
@@ -107320,7 +107510,7 @@
         }
         return false;
       case 'timeCycle':
-        if (is$6(element, 'bpmn:StartEvent') && !isInterruptingStartEvent$1(businessObject)) {
+        if (is$6(element, 'bpmn:StartEvent') && !isInterruptingStartEvent(businessObject)) {
           return true;
         }
         if (is$6(element, 'bpmn:BoundaryEvent') && !businessObject.cancelActivity) {
@@ -107424,10 +107614,10 @@
         });
     }
   }
-  function isInterruptingStartEvent$1(bo) {
-    return isInEventSubProcess$1(bo) && bo.get('isInterrupting') !== false;
+  function isInterruptingStartEvent(bo) {
+    return isInEventSubProcess$2(bo) && bo.get('isInterrupting') !== false;
   }
-  function isInEventSubProcess$1(bo) {
+  function isInEventSubProcess$2(bo) {
     const parent = bo.$parent;
     return is$6(parent, 'bpmn:SubProcess') && parent.triggeredByEvent;
   }
@@ -107702,6 +107892,10 @@
     return properties && properties.get(getPropertyName(namespace));
   }
 
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+   */
+
   const LOW_PRIORITY$1$1 = 500;
   const ZEEBE_GROUPS = [BusinessRuleImplementationGroup, CalledDecisionGroup, ScriptImplementationGroup, ScriptGroup$1, TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup, ExtensionPropertiesGroup$1];
   let ZeebePropertiesProvider$1 = class ZeebePropertiesProvider {
@@ -107718,6 +107912,7 @@
         updateErrorGroup$1(groups, element);
         updateEscalationGroup$1(groups, element);
         updateMessageGroup$1(groups, element);
+        updateSignalGroup(groups, element);
         updateTimerGroup$1(groups, element, this._injector);
         updateMultiInstanceGroup$1(groups, element);
 
@@ -107902,7 +108097,7 @@
     if (!errorGroup) {
       return;
     }
-    errorGroup.entries = overrideGenericEntries$1(errorGroup.entries, ErrorProps$1({
+    errorGroup.entries = replaceEntries(errorGroup.entries, ErrorProps$1({
       element
     }));
   }
@@ -107911,7 +108106,16 @@
     if (!escalationGroup) {
       return;
     }
-    escalationGroup.entries = overrideGenericEntries$1(escalationGroup.entries, EscalationProps$1({
+    escalationGroup.entries = replaceEntries(escalationGroup.entries, EscalationProps$1({
+      element
+    }));
+  }
+  function updateSignalGroup(groups, element) {
+    const signalGroup = findGroup$2(groups, 'signal');
+    if (!signalGroup) {
+      return;
+    }
+    signalGroup.entries = replaceEntries(signalGroup.entries, SignalProps({
       element
     }));
   }
@@ -107920,7 +108124,7 @@
     if (!messageGroup) {
       return;
     }
-    messageGroup.entries = overrideGenericEntries$1(messageGroup.entries, MessageProps$1({
+    messageGroup.entries = replaceEntries(messageGroup.entries, MessageProps$1({
       element
     }));
   }
@@ -107964,13 +108168,14 @@
   }
 
   /**
-   * Replace generic bpmn components with specific zeebe ones.
+   * Replace entries with the same ID.
+   *s
+   * @param {Entry[]} oldEntries
+   * @param {Entry[]} newEntries
    *
-   * @param {Array} oldEntries
-   * @param {Array} newEntries
-   * @returns {Array} combined entries
+   * @returns {Entry[]} combined entries
    */
-  function overrideGenericEntries$1(oldEntries, newEntries) {
+  function replaceEntries(oldEntries, newEntries) {
     const filteredEntries = oldEntries.filter(oldEntry => !newEntries.find(newEntry => newEntry.id === oldEntry.id));
     return [...filteredEntries, ...newEntries];
   }
@@ -109666,7 +109871,11 @@
   ElementTemplatesLoader.$inject = ['config.elementTemplates', 'eventBus', 'elementTemplates', 'moddle'];
 
   function unlinkTemplate$1(element, injector) {
-    const modeling = injector.get('modeling');
+    const modeling = injector.get('modeling'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.unlink', {
+      element
+    });
     modeling.updateProperties(element, {
       'camunda:modelerTemplate': null,
       'camunda:modelerTemplateVersion': null
@@ -109674,7 +109883,11 @@
   }
   function removeTemplate(element, injector) {
     const replace = injector.get('replace'),
-      selection = injector.get('selection');
+      selection = injector.get('selection'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.remove', {
+      element
+    });
     const businessObject = getBusinessObject$2(element);
     const type = businessObject.$type,
       eventDefinitionType = getEventDefinitionType(businessObject);
@@ -109687,7 +109900,12 @@
     selection.select(newElement);
   }
   function updateTemplate$1(element, newTemplate, injector) {
-    const elementTemplates = injector.get('elementTemplates');
+    const elementTemplates = injector.get('elementTemplates'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.update', {
+      element,
+      newTemplate
+    });
     return elementTemplates.applyTemplate(element, newTemplate);
   }
   function getVersionOrDateFromTemplate(template) {
@@ -109761,7 +109979,11 @@
   }
 
   function unlinkTemplate(element, injector) {
-    const modeling = injector.get('modeling');
+    const modeling = injector.get('modeling'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.unlink', {
+      element
+    });
 
     // remove template attributes
     modeling.updateProperties(element, {
@@ -109771,7 +109993,12 @@
     });
   }
   function updateTemplate(element, newTemplate, injector) {
-    const elementTemplates = injector.get('elementTemplates');
+    const elementTemplates = injector.get('elementTemplates'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.update', {
+      element,
+      newTemplate
+    });
     return elementTemplates.applyTemplate(element, newTemplate);
   }
 
@@ -111797,7 +112024,7 @@
       return {
         id,
         component: DropdownProperty$1,
-        isEdited: isEdited$4,
+        isEdited: isEdited$3,
         property
       };
     }
@@ -111806,14 +112033,14 @@
         return {
           id,
           component: FeelProperty,
-          isEdited: isEdited$7,
+          isEdited: isEdited$5,
           property
         };
       }
       return {
         id,
         component: StringProperty$1,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         property
       };
     }
@@ -111822,14 +112049,14 @@
         return {
           id,
           component: FeelTextAreaProperty,
-          isEdited: isEdited$7,
+          isEdited: isEdited$5,
           property
         };
       }
       return {
         id,
         component: TextAreaProperty$1,
-        isEdited: isEdited$2,
+        isEdited: isEdited$1,
         property
       };
     }
@@ -111882,7 +112109,8 @@
       label
     } = property;
     const bpmnFactory = useService('bpmnFactory'),
-      commandStack = useService('commandStack');
+      commandStack = useService('commandStack'),
+      translate = useService('translate');
     const getOptions = () => {
       const {
         choices,
@@ -111916,6 +112144,7 @@
       }),
       getValue: propertyGetter$1(element, property),
       setValue: propertySetter$1(bpmnFactory, commandStack, element, property),
+      validate: propertyValidator$1(translate, property),
       disabled: editable === false
     });
   }
@@ -112029,7 +112258,8 @@
     } = property;
     const bpmnFactory = useService('bpmnFactory'),
       commandStack = useService('commandStack'),
-      debounce = useService('debounceInput');
+      debounce = useService('debounceInput'),
+      translate = useService('translate');
     return TextAreaEntry({
       debounce,
       element,
@@ -112043,6 +112273,7 @@
       }),
       getValue: propertyGetter$1(element, property),
       setValue: propertySetter$1(bpmnFactory, commandStack, element, property),
+      validate: propertyValidator$1(translate, property),
       disabled: editable === false
     });
   }
@@ -112066,15 +112297,15 @@
         minLength,
         notEmpty
       } = constraints;
-      if (notEmpty && isEmptyString$1(value)) {
+      if (notEmpty && isEmpty(value)) {
         return translate('Must not be empty.');
       }
-      if (maxLength && value.length > maxLength) {
+      if (maxLength && (value || '').length > maxLength) {
         return translate('Must have max length {maxLength}.', {
           maxLength
         });
       }
-      if (minLength && value.length < minLength) {
+      if (minLength && (value || '').length < minLength) {
         return translate('Must have min length {minLength}.', {
           minLength
         });
@@ -112096,8 +112327,11 @@
       }
     };
   }
-  function isEmptyString$1(string) {
-    return !string || !string.trim().length;
+  function isEmpty(value) {
+    if (typeof value === 'string') {
+      return !value.trim().length;
+    }
+    return value === undefined;
   }
   function matchesPattern$1(string, pattern) {
     return new RegExp(pattern).test(string);
@@ -112139,7 +112373,7 @@
     return [{
       id: 'messageRef',
       component: MessageRef,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
   }
   function MessageRef(props) {
@@ -112505,7 +112739,7 @@
     }
 
     /**
-     * Remove referenced element when template is unlinked.
+     * Unlink referenced element when template is unlinked.
      */
     _handlePropertiesUpdate(context) {
       const {
@@ -112521,11 +112755,9 @@
       const bo = getBusinessObject$2(element);
       const message = findMessage(bo);
       if (message && getTemplateId$1(message)) {
-        const messageEventDefinition = bo.eventDefinitions[0];
-        this._modeling.updateModdleProperties(element, messageEventDefinition, {
-          'messageRef': undefined
+        this._modeling.updateModdleProperties(element, message, {
+          [TEMPLATE_ID_ATTR$1]: null
         });
-        this._removeRootElement(message);
       }
     }
 
@@ -112752,7 +112984,7 @@
     },
     messageName: element => {
       const translate = useService('translate');
-      if (is$6(element, 'bpmn:StartEvent') && !isInEventSubProcess$2(element)) {
+      if (is$6(element, 'bpmn:StartEvent') && !isInEventSubProcess(element)) {
         return o$1("a", {
           href: "https://docs.camunda.io/docs/components/modeler/bpmn/message-events/#messages",
           target: "_blank",
@@ -112844,7 +113076,7 @@
 
   // helper ////////////
 
-  function isInEventSubProcess$2(element) {
+  function isInEventSubProcess(element) {
     const bo = getBusinessObject$2(element),
       parent = bo.$parent;
     return is$6(parent, 'bpmn:SubProcess') && parent.triggeredByEvent;
@@ -113059,59 +113291,74 @@
   }
 
   function getTimerEventDefinition(element) {
-    const bo = getBusinessObject$2(element);
+    const businessObject = getBusinessObject$2(element);
 
-    return bo.get('eventDefinitions').find(definition => is$6(definition, 'bpmn:TimerEventDefinition'));
+    return businessObject.get('eventDefinitions').find(eventDefinition => {
+      return is$6(eventDefinition, 'bpmn:TimerEventDefinition');
+    });
   }
 
   /**
-   * isTypeSupported - Checks whether a given time property is supported for a given element.
+   * Check whether a given timer expression type is supported for a given element.
    *
-   * @param  {string} timerDefinitionType
-   * @param  {ModdleElement} element
+   * @param {string} type
+   * @param {Element|ModdleElement} element
    *
    * @return {boolean}
    */
-  function isTypeSupported(timerDefinitionType, element) {
+  function isTimerExpressionTypeSupported(type, element) {
     const businessObject = getBusinessObject$2(element);
 
-    switch (timerDefinitionType) {
+    switch (type) {
     case 'timeDate':
-      if (is$6(element, 'bpmn:StartEvent')) {
-        return true;
-      }
-      return false;
+      return isAny$1(element, [
+        'bpmn:BoundaryEvent',
+        'bpmn:IntermediateCatchEvent',
+        'bpmn:StartEvent'
+      ]);
 
     case 'timeCycle':
-      if (is$6(element, 'bpmn:StartEvent') && !isInterruptingStartEvent(businessObject)) {
+      if (is$6(element, 'bpmn:StartEvent') && (!hasParentEventSubProcess(businessObject)) || !isInterrupting(businessObject)) {
         return true;
       }
 
-      if (is$6(element, 'bpmn:BoundaryEvent') && !businessObject.cancelActivity) {
+      if (is$6(element, 'bpmn:BoundaryEvent') && !isInterrupting(businessObject)) {
         return true;
       }
+
       return false;
 
     case 'timeDuration':
-      if (is$6(element, 'bpmn:IntermediateCatchEvent')) {
+      if (isAny$1(element, [
+        'bpmn:BoundaryEvent',
+        'bpmn:IntermediateCatchEvent'
+      ])) {
         return true;
       }
 
-      if (is$6(element, 'bpmn:BoundaryEvent')) {
+      if (is$6(element, 'bpmn:StartEvent') && hasParentEventSubProcess(businessObject)) {
         return true;
       }
+
+      return false;
+
+    default:
       return false;
     }
   }
 
-  function isInterruptingStartEvent(bo) {
-    return isInEventSubProcess(bo) && bo.get('isInterrupting') !== false;
+  function isInterrupting(businessObject) {
+    if (is$6(businessObject, 'bpmn:BoundaryEvent')) {
+      return businessObject.get('cancelActivity') !== false;
+    }
+
+    return businessObject.get('isInterrupting') !== false;
   }
 
-  function isInEventSubProcess(bo) {
-    const parent = bo.$parent;
+  function hasParentEventSubProcess(businessObject) {
+    const parent = businessObject.$parent;
 
-    return is$6(parent, 'bpmn:SubProcess') && parent.triggeredByEvent;
+    return parent && is$6(parent, 'bpmn:SubProcess') && parent.get('triggeredByEvent');
   }
 
   /**
@@ -113156,7 +113403,7 @@
           'timeDate',
           'timeDuration'
         ].forEach((type) => {
-          if (timerEventDefinition.get(type) && !isTypeSupported(type, element)) {
+          if (timerEventDefinition.get(type) && !isTimerExpressionTypeSupported(type, element)) {
             propertiesUpdate[ type ] = undefined;
           }
         });
@@ -113238,11 +113485,7 @@
         return true;
       }
 
-      if (!isTypeSupported(propertyName, parent.$parent)) {
-        return false;
-      }
-
-      return true;
+      return isTimerExpressionTypeSupported(propertyName, parent.$parent);
     }
   }
 
@@ -114026,7 +114269,7 @@
    */
   function canAttach(elements, target, source, position) {
     function isBoundaryEvent(element) {
-      return !isLabel$7(element) && is$6(element, 'bpmn:BoundaryEvent');
+      return !isLabel$2(element) && is$6(element, 'bpmn:BoundaryEvent');
     }
 
     /**
@@ -114072,7 +114315,7 @@
     const element = elements[0];
 
     // do not attach labels
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return false;
     }
 
@@ -116802,7 +117045,7 @@
             {
               id: 'exampleJson',
               component: JSONDataProperty,
-              isEdited: isEdited$2
+              isEdited: isEdited$1
             }
           ],
           component: Group
@@ -117196,100 +117439,100 @@
     elementTemplateChooserEntryProvider: [ 'type', ElementTemplateChooserEntryProvider ]
   };
 
-  var inherits_browser = {exports: {}};
-
-  if (typeof Object.create === 'function') {
-    // implementation from standard node.js 'util' module
-    inherits_browser.exports = function inherits(ctor, superCtor) {
-      if (superCtor) {
-        ctor.super_ = superCtor;
-        ctor.prototype = Object.create(superCtor.prototype, {
-          constructor: {
-            value: ctor,
-            enumerable: false,
-            writable: true,
-            configurable: true
-          }
-        });
-      }
-    };
-  } else {
-    // old school shim for old browsers
-    inherits_browser.exports = function inherits(ctor, superCtor) {
-      if (superCtor) {
-        ctor.super_ = superCtor;
-        var TempCtor = function () {};
-        TempCtor.prototype = superCtor.prototype;
-        ctor.prototype = new TempCtor();
-        ctor.prototype.constructor = ctor;
-      }
-    };
-  }
-
-  var inherits_browserExports = inherits_browser.exports;
-  var inherits = /*@__PURE__*/getDefaultExportFromCjs(inherits_browserExports);
+  /**
+   * Get icon defined on a moddle element.
+   *
+   * @param { ModdleElement } element
+   * @param { string } iconProperty
+   *
+   * @return { string }
+   */
+  function getModelerTemplateIcon(element, iconProperty) {
+    iconProperty = iconProperty || 'zeebe:modelerTemplateIcon';
 
-  function getModelerTemplateIcon(element) {
-    var modelerTemplateIcon = getBusinessObject$2(element).get('zeebe:modelerTemplateIcon');
-    return modelerTemplateIcon;
+    return getBusinessObject$2(element).get(iconProperty);
   }
 
   var HIGH_PRIORITY = 1250;
 
 
-  function IconsRenderer(
+  function ElementTemplateIconRenderer(
+      config,
       bpmnRenderer,
-      eventBus
-  ) {
+      eventBus) {
+
     this._bpmnRenderer = bpmnRenderer;
 
+    this._iconProperty = config && config.iconProperty;
+
     BaseRenderer.call(this, eventBus, HIGH_PRIORITY);
   }
 
-  inherits(IconsRenderer, BaseRenderer);
+  e$7(ElementTemplateIconRenderer, BaseRenderer);
 
-  IconsRenderer.prototype.canRender = function(element) {
+  ElementTemplateIconRenderer.prototype.canRender = function(element) {
 
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return false;
     }
 
-    return (
-      is$6(element, 'bpmn:Task') &&
-      !!getModelerTemplateIcon(element)
+    return !!(
+      isAny$1(element, [ 'bpmn:Task', 'bpmn:Event' ]) && this._getIcon(element)
     );
   };
 
-  IconsRenderer.prototype.drawShape = function(parentGfx, element) {
+  ElementTemplateIconRenderer.prototype._getIcon = function(element) {
+    return getModelerTemplateIcon(element, this._iconProperty);
+  };
+
+  ElementTemplateIconRenderer.prototype.drawShape = function(parentGfx, element) {
 
-    var renderer = this._bpmnRenderer.handlers['bpmn:Task'];
+    var renderer = this._bpmnRenderer.handlers[
+      [
+        'bpmn:Task',
+        'bpmn:StartEvent',
+        'bpmn:IntermediateEvent',
+        'bpmn:BoundaryEvent',
+        'bpmn:EndEvent'
+      ].find(t => is$6(element, t))
+    ];
 
-    var gfx = renderer(parentGfx, element);
+    var gfx = renderer(parentGfx, element, { renderIcon: false });
 
-    var modelerTemplateIcon = getModelerTemplateIcon(element);
+    var icon = this._getIcon(element);
 
-    var icon = create$1('image');
-    attr(icon, {
-      href: modelerTemplateIcon,
+    var size = 18;
+
+    var padding = is$6(element, 'bpmn:Task') ? {
       x: 5,
-      y: 5,
-      width: 18,
-      height: 18
+      y: 5
+    } : {
+      x: (element.width - size) / 2,
+      y: (element.height - size) / 2
+    };
+
+    var img = create$1('image');
+    attr(img, {
+      href: icon,
+      width: size,
+      height: size,
+      ...padding
     });
 
-    append(parentGfx, icon);
+    append(parentGfx, img);
 
     return gfx;
   };
 
-  IconsRenderer.$inject = [
+  ElementTemplateIconRenderer.$inject = [
+    'config.elementTemplateIconRenderer',
     'bpmnRenderer',
     'eventBus'
   ];
 
   var iconRendererModule = {
-    __init__: [ 'elementTemplatesIconsRenderer' ],
-    elementTemplatesIconsRenderer: [ 'type', IconsRenderer ]
+    __init__: [ 'elementTemplateIconRenderer' ],
+    elementTemplateIconRenderer: [ 'type', ElementTemplateIconRenderer ]
   };
 
   var name = "zeebe";
@@ -117772,9 +118015,11 @@
   /**
    * Flatten array, one level deep.
    *
-   * @param {Array<?>} arr
+   * @template T
    *
-   * @return {Array<?>}
+   * @param {T[][]} arr
+   *
+   * @return {T[]}
    */
 
   const nativeToString = Object.prototype.toString;
@@ -117796,6 +118041,11 @@
     return nativeToString.call(obj) === '[object Number]';
   }
 
+  /**
+   * @param {any} obj
+   *
+   * @return {boolean}
+   */
   function isFunction(obj) {
     const tag = nativeToString.call(obj);
 
@@ -117820,22 +118070,74 @@
     return nativeHasOwnProperty.call(target, key);
   }
 
+  /**
+   * @template T
+   * @typedef { (
+   *   ((e: T) => boolean) |
+   *   ((e: T, idx: number) => boolean) |
+   *   ((e: T, key: string) => boolean) |
+   *   string |
+   *   number
+   * ) } Matcher
+   */
+
+  /**
+   * @template T
+   * @template U
+   *
+   * @typedef { (
+   *   ((e: T) => U) | string | number
+   * ) } Extractor
+   */
+
+
+  /**
+   * @template T
+   * @typedef { (val: T, key: any) => boolean } MatchFn
+   */
+
+  /**
+   * @template T
+   * @typedef { T[] } ArrayCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { { [key: string]: T } } StringKeyValueCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { { [key: number]: T } } NumberKeyValueCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { StringKeyValueCollection<T> | NumberKeyValueCollection<T> } KeyValueCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { KeyValueCollection<T> | ArrayCollection<T> } Collection
+   */
+
   /**
    * Find element in collection.
    *
-   * @param  {Array|Object} collection
-   * @param  {Function|Object} matcher
+   * @template T
+   * @param {Collection<T>} collection
+   * @param {Matcher<T>} matcher
    *
    * @return {Object}
    */
   function find(collection, matcher) {
 
-    matcher = toMatcher(matcher);
+    const matchFn = toMatcher(matcher);
 
     let match;
 
     forEach(collection, function(val, key) {
-      if (matcher(val, key)) {
+      if (matchFn(val, key)) {
         match = val;
 
         return false;
@@ -117851,10 +118153,11 @@
    * Iterate over collection; returning something
    * (non-undefined) will stop iteration.
    *
-   * @param  {Array|Object} collection
-   * @param  {Function} iterator
+   * @template T
+   * @param {Collection<T>} collection
+   * @param { ((item: T, idx: number) => (boolean|void)) | ((item: T, key: string) => (boolean|void)) } iterator
    *
-   * @return {Object} return result that stopped the iteration
+   * @return {T} return result that stopped the iteration
    */
   function forEach(collection, iterator) {
 
@@ -117897,6 +118200,12 @@
   }
 
 
+  /**
+   * @template T
+   * @param {Matcher<T>} matcher
+   *
+   * @return {MatchFn<T>}
+   */
   function toMatcher(matcher) {
     return isFunction(matcher) ? matcher : (e) => {
       return e === matcher;
@@ -118728,8 +119037,12 @@
    * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,
    * and then replace respective icons with the optimized data URIs in `./dist`.
    */
-  const appendIcon = 'data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%205.82%205.82%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M1.3%203.4c.3%200%20.5-.2.5-.5s-.2-.4-.5-.4c-.2%200-.4.1-.4.4%200%20.3.2.5.4.5zM3%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5zM4.6%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5z%22%2F%3E%0A%3C%2Fsvg%3E';
-  const createIcon = 'data:image/svg+xml,%3Csvg%20width%3D%2246%22%20height%3D%2246%22%20viewBox%3D%22-2%20-2%209.82%209.82%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1.3%203.4c.3%200%20.5-.2.5-.5s-.2-.4-.5-.4c-.2%200-.4.1-.4.4%200%20.3.2.5.4.5zM3%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5zM4.6%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5z%22%2F%3E%0A%3C%2Fsvg%3E';
+  const appendIcon = `<svg width="22" height="22" viewBox="0 0 5.82 5.82" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M1.3 3.4c.3 0 .5-.2.5-.5s-.2-.4-.5-.4c-.2 0-.4.1-.4.4 0 .3.2.5.4.5zM3 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5zM4.6 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5z"/>
+                    </svg>`;
+  const createIcon = `<svg width="46" height="46" viewBox="-2 -2 9.82 9.82" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M1.3 3.4c.3 0 .5-.2.5-.5s-.2-.4-.5-.4c-.2 0-.4.1-.4.4 0 .3.2.5.4.5zM3 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5zM4.6 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5z"/>
+                    </svg>`;
 
   /**
    * A provider for append context pad button
@@ -118775,7 +119088,7 @@
       return {
         'append': {
           group: 'model',
-          imageUrl: appendIcon,
+          html: `<div class="entry">${appendIcon}</div>`,
           title: translate('Append element'),
           action: {
             click: function(event, element) {
@@ -118821,10 +119134,15 @@
 
   function e(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
 
+  /**
+   * @typedef { import('../model/Types').Element } Element
+   * @typedef { import('../model/Types').ModdleElement } ModdleElement
+   */
+
   /**
    * Is an element of the given BPMN type?
    *
-   * @param  {djs.model.Base|ModdleElement} element
+   * @param  {Element|ModdleElement} element
    * @param  {string} type
    *
    * @return {boolean}
@@ -118839,8 +119157,8 @@
   /**
    * Return true if element has any of the given types.
    *
-   * @param {djs.model.Base} element
-   * @param {Array<string>} types
+   * @param {Element|ModdleElement} element
+   * @param {string[]} types
    *
    * @return {boolean}
    */
@@ -118853,7 +119171,7 @@
   /**
    * Return the business object for a given element.
    *
-   * @param  {djs.model.Base|ModdleElement} element
+   * @param {Element|ModdleElement} element
    *
    * @return {ModdleElement}
    */
@@ -118864,7 +119182,7 @@
   /**
    * Return the di object for a given element.
    *
-   * @param  {djs.model.Base} element
+   * @param {Element} element
    *
    * @return {ModdleElement}
    */
@@ -118872,14 +119190,25 @@
     return element && element.di;
   }
 
-  function isLabel(element) {
-    return element && !!element.labelTarget;
+  /**
+   * Checks whether a value is an instance of Label.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isLabel(value) {
+    return isObject(value) && has(value, 'labelTarget');
   }
 
   /**
+   * @typedef {import('../core/Types').ElementLike} ElementLike
    * @typedef {import('../core/EventBus').default} EventBus
-   * @typedef {import(./CommandInterceptor).HandlerFunction} HandlerFunction
-   * @typedef {import(./CommandInterceptor).ComposeHandlerFunction} ComposeHandlerFunction
+   * @typedef {import('./CommandStack').CommandContext} CommandContext
+   *
+   * @typedef {string|string[]} Events
+   * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
+   * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
    */
 
   var DEFAULT_PRIORITY = 1000;
@@ -118891,10 +119220,9 @@
    * @class
    * @constructor
    *
-   * @param {EventBus} eventBus
-   *
    * @example
    *
+   * ```javascript
    * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
    *
    * class CommandLogger extends CommandInterceptor {
@@ -118905,6 +119233,9 @@
    *     console.log('commandStack.shape-create.preExecute', event);
    *   });
    * }
+   * ```
+   *
+   * @param {EventBus} eventBus
    */
   function CommandInterceptor(eventBus) {
 
@@ -118922,16 +119253,17 @@
     };
   }
 
+
   /**
-     * Intercept a command during one of the phases.
-     *
-     * @param {string|string[]} [events] One or more commands to intercept.
-     * @param {string} [hook] Phase during which to intercept command.
-     * @param {number} [priority] Priority with which command will be intercepted.
-     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn Callback.
-     * @param {boolean} [unwrap] Whether the event should be unwrapped.
-     * @param {*} [that] `this` value the callback will be called with.
-     */
+   * Intercept a command during one of the phases.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {string} [hook] phase to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
   CommandInterceptor.prototype.on = function(events, hook, priority, handlerFn, unwrap, that) {
 
     if (isFunction(hook) || isNumber(hook)) {
@@ -118973,35 +119305,130 @@
     });
   };
 
+  /**
+   * Add a <canExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.canExecute = createHook('canExecute');
 
-  var hooks = [
-    'canExecute',
-    'preExecute',
-    'preExecuted',
-    'execute',
-    'executed',
-    'postExecute',
-    'postExecuted',
-    'revert',
-    'reverted'
-  ];
+  /**
+   * Add a <preExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecute = createHook('preExecute');
+
+  /**
+   * Add a <preExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecuted = createHook('preExecuted');
+
+  /**
+   * Add a <execute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.execute = createHook('execute');
+
+  /**
+   * Add a <executed> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.executed = createHook('executed');
+
+  /**
+   * Add a <postExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecute = createHook('postExecute');
+
+  /**
+   * Add a <postExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecuted = createHook('postExecuted');
+
+  /**
+   * Add a <revert> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.revert = createHook('revert');
+
+  /**
+   * Add a <reverted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.reverted = createHook('reverted');
 
   /*
    * Add prototype methods for each phase of command execution (e.g. execute,
    * revert).
+   *
+   * @param {string} hook
+   *
+   * @return { (
+   *   events?: Events,
+   *   priority?: number,
+   *   handlerFn: ComposeHandlerFunction|HandlerFunction,
+   *   unwrap?: boolean
+   * ) => any }
    */
-  forEach(hooks, function(hook) {
+  function createHook(hook) {
 
     /**
-     * Add prototype method for a specific phase of command execution.
+     * @this {CommandInterceptor}
      *
-     * @param {string|string[]} [events] One or more commands to intercept.
-     * @param {number} [priority] Priority with which command will be intercepted.
-     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn Callback.
-     * @param {boolean} [unwrap] Whether the event should be unwrapped.
-     * @param {*} [that] `this` value the callback will be called with.
+     * @param {Events} [events]
+     * @param {number} [priority]
+     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+     * @param {boolean} [unwrap]
+     * @param {any} [that]
      */
-    CommandInterceptor.prototype[hook] = function(events, priority, handlerFn, unwrap, that) {
+    const hookFn = function(events, priority, handlerFn, unwrap, that) {
 
       if (isFunction(events) || isNumber(events)) {
         that = unwrap;
@@ -119013,7 +119440,9 @@
 
       this.on(events, hook, priority, handlerFn, unwrap, that);
     };
-  });
+
+    return hookFn;
+  }
 
   /**
    * @typedef {import('../../core/EventBus').default} EventBus
@@ -119025,6 +119454,8 @@
    * Extensions should implement the init method to actually add their custom
    * modeling checks. Checks may be added via the #addRule(action, fn) method.
    *
+   * @class
+   *
    * @param {EventBus} eventBus
    */
   function RuleProvider(eventBus) {
@@ -119042,15 +119473,16 @@
    * Adds a modeling rule for the given action, implemented through
    * a callback function.
    *
-   * The function will receive the modeling specific action context
+   * The callback receives a modeling specific action context
    * to perform its check. It must return `false` to disallow the
-   * action from happening or `true` to allow the action.
-   *
-   * A rule provider may pass over the evaluation to lower priority
-   * rules by returning return nothing (or <code>undefined</code>).
+   * action from happening or `true` to allow the action. Usually returing
+   * `null` denotes that a particular interaction shall be ignored.
+   * By returning nothing or `undefined` you pass evaluation to lower
+   * priority rules.
    *
    * @example
    *
+   * ```javascript
    * ResizableRules.prototype.init = function() {
    *
    *   \/**
@@ -119077,10 +119509,11 @@
    *     }
    *   });
    * };
+   * ```
    *
-   * @param {string|Array<string>} actions the identifier for the modeling action to check
+   * @param {string|string[]} actions the identifier for the modeling action to check
    * @param {number} [priority] the priority at which this rule is being applied
-   * @param {Function} fn the callback function that performs the actual check
+   * @param {(any) => any} fn the callback function that performs the actual check
    */
   RuleProvider.prototype.addRule = function(actions, priority, fn) {
 
@@ -119373,7 +119806,7 @@
     return {
       'create': {
         group: 'create',
-        imageUrl: createIcon,
+        html: `<div class="entry"> ${createIcon}</div>`,
         title: translate('Create element'),
         action: {
           click: function(event) {
@@ -119476,6 +119909,7 @@
 
   /**
    * @param {KeyboardEvent} event
+   * @return {boolean}
    */
   function isCmd(event) {
 
@@ -119491,8 +119925,9 @@
   /**
    * Checks if key pressed is one of provided keys.
    *
-   * @param {string|Array<string>} keys
+   * @param {string|string[]} keys
    * @param {KeyboardEvent} event
+   * @return {boolean}
    */
   function isKey(keys, event) {
     keys = isArray(keys) ? keys : [ keys ];
@@ -119507,18 +119942,30 @@
     return event.shiftKey;
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isCopy(event) {
     return isCmd(event) && isKey(KEYS_COPY, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isPaste(event) {
     return isCmd(event) && isKey(KEYS_PASTE, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isUndo(event) {
     return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isRedo(event) {
     return isCmd(event) && (
       isKey(KEYS_REDO, event) || (
@@ -120197,6 +120644,17 @@
     elementTemplatesReplaceProvider: [ 'type', ElementTemplatesReplaceProvider ]
   };
 
+  /**
+   * @typedef {import('../model/Types').Element} Element
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
+  /**
+   * @param {Element} element
+   * @param {ModdleElement} [di]
+   *
+   * @return {boolean}
+   */
   function isExpanded(element, di) {
 
     if (is(element, 'bpmn:CallActivity')) {
@@ -120220,14 +120678,21 @@
     return true;
   }
 
+  /**
+   * @typedef {import('../../../model/Types').Element} Element
+   * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuTarget} PopupMenuTarget
+   *
+   * @typedef {(entry: PopupMenuTarget) => boolean} DifferentTypeValidator
+   */
+
   /**
    * Returns true, if an element is from a different type
    * than a target definition. Takes into account the type,
    * event definition type and triggeredByEvent property.
    *
-   * @param {djs.model.Base} element
+   * @param {Element} element
    *
-   * @return {boolean}
+   * @return {DifferentTypeValidator}
    */
   function isDifferentType(element) {
 
@@ -120258,6 +120723,28 @@
     };
   }
 
+  /**
+   * @typedef { () => string } LabelGetter
+   *
+   * @typedef { {
+   *   label: string | LabelGetter;
+   *   actionName: string;
+   *   className: string;
+   *   target?: {
+   *     type: string;
+   *     isExpanded?: boolean;
+   *     isInterrupting?: boolean;
+   *     triggeredByEvent?: boolean;
+   *     cancelActivity?: boolean;
+   *     eventDefinitionType?: string;
+   *     eventDefinitionAttrs?: Record<string, any>
+   *   };
+   * } } ReplaceOption
+   */
+
+  /**
+   * @type {ReplaceOption[]}
+   */
   var START_EVENT = [
     {
       label: 'Start Event',
@@ -120321,6 +120808,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var START_EVENT_SUB_PROCESS = [
     {
       label: 'Start Event',
@@ -120348,6 +120838,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var INTERMEDIATE_EVENT = [
     {
       label: 'Start Event',
@@ -120471,6 +120964,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var END_EVENT = [
     {
       label: 'Start Event',
@@ -120561,6 +121057,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var GATEWAY = [
     {
       label: 'Exclusive Gateway',
@@ -120630,6 +121129,9 @@
     // }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var SUBPROCESS_EXPANDED = [
     {
       label: 'Transaction',
@@ -120661,6 +121163,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var TRANSACTION = [
     {
       label: 'Transaction',
@@ -120692,8 +121197,14 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var EVENT_SUB_PROCESS = TRANSACTION;
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var TASK = [
     {
       label: 'Task',
@@ -120787,6 +121298,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var DATA_OBJECT_REFERENCE = [
     {
       label: 'Data Store Reference',
@@ -120798,6 +121312,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var DATA_STORE_REFERENCE = [
     {
       label: 'Data Object Reference',
@@ -120809,6 +121326,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var BOUNDARY_EVENT = [
     {
       label: 'Message Boundary Event',
@@ -120934,6 +121454,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var EVENT_SUB_PROCESS_START_EVENT = [
     {
       label: 'Message Start Event',
@@ -121050,6 +121573,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var SEQUENCE_FLOW = [
     {
       label: 'Sequence Flow',
@@ -121068,6 +121594,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var PARTICIPANT = [
     {
       label: 'Expanded Pool',