camunda-bpmn-js 4.20.2 → 5.1.0

package/dist/base-modeler.development.js

@@ -246,7 +246,7 @@
    * @return {Boolean}
    */
   function has$1(target, key) {
-    return nativeHasOwnProperty$1.call(target, key);
+    return !isNil(target) && nativeHasOwnProperty$1.call(target, key);
   }
 
   /**
@@ -335,7 +335,7 @@
    * @param {Collection<T>} collection
    * @param {Matcher<T>} matcher
    *
-   * @return {number}
+   * @return {number | string | undefined}
    */
   function findIndex$1(collection, matcher) {
 
@@ -5077,6 +5077,11 @@
      */
     this._rootElement = null;
 
+    /**
+     * @type {boolean}
+     */
+    this._focused = false;
+
     this._init(config || {});
   }
 
@@ -5103,14 +5108,33 @@
    * @param {CanvasConfig} config
    */
   Canvas.prototype._init = function(config) {
-
     const eventBus = this._eventBus;
 
     // html container
     const container = this._container = createContainer(config);
 
     const svg = this._svg = create$1('svg');
-    attr(svg, { width: '100%', height: '100%' });
+
+    attr(svg, {
+      width: '100%',
+      height: '100%'
+    });
+
+    attr$1(svg, 'tabindex', 0);
+
+    eventBus.on('element.hover', () => {
+      this.restoreFocus();
+    });
+
+    svg.addEventListener('focusin', () => {
+      this._focused = true;
+      eventBus.fire('canvas.focus.changed', { focused: true });
+    });
+
+    svg.addEventListener('focusout', () => {
+      this._focused = false;
+      eventBus.fire('canvas.focus.changed', { focused: false });
+    });
 
     append(container, svg);
 
@@ -5202,6 +5226,31 @@
     delete this._cachedViewbox;
   };
 
+  /**
+  * Sets focus on the canvas SVG element.
+  */
+  Canvas.prototype.focus = function() {
+    this._svg.focus({ preventScroll: true });
+  };
+
+  /**
+  * Sets focus on the canvas SVG element if `document.body` is currently focused.
+  */
+  Canvas.prototype.restoreFocus = function() {
+    if (document.activeElement === document.body) {
+      this.focus();
+    }
+  };
+
+  /**
+  * Returns true if the canvas is focused.
+  *
+  * @return {boolean}
+  */
+  Canvas.prototype.isFocused = function() {
+    return this._focused;
+  };
+
   /**
    * Returns the default layer on which
    * all elements are drawn.
@@ -8725,13 +8774,15 @@
     if (parts.length === 1) {
       localName = name;
       prefix = defaultPrefix;
-    } else
+    }
 
     // prefix + local name
-    if (parts.length === 2) {
+    else if (parts.length === 2) {
       localName = parts[1];
       prefix = parts[0];
-    } else {
+    }
+
+    else {
       throw new Error('expected <prefix:localName> or <localName>, got ' + name);
     }
 
@@ -9633,7 +9684,7 @@
    * sub-set of reserved names (&amp;) as well as
    * hex (&#xaaf;) and decimal (&#1231;) encoded characters.
    *
-   * @param {string} str
+   * @param {string} s
    *
    * @return {string} decoded string
    */
@@ -9645,10 +9696,6 @@
     return s;
   }
 
-  var XSI_URI = 'http://www.w3.org/2001/XMLSchema-instance';
-  var XSI_PREFIX = 'xsi';
-  var XSI_TYPE$1 = 'xsi:type';
-
   var NON_WHITESPACE_OUTSIDE_ROOT_NODE = 'non-whitespace outside of root node';
 
   function error$2(msg) {
@@ -9693,7 +9740,7 @@
   }
 
   function noopGetContext() {
-    return { 'line': 0, 'column': 0 };
+    return { line: 0, column: 0 };
   }
 
   function throwFunc(err) {
@@ -9859,9 +9906,6 @@
         _nsUriToPrefix[k] = nsMap[k];
       }
 
-      // FORCE default mapping for schema instance
-      _nsUriToPrefix[XSI_URI] = XSI_PREFIX;
-
       isNamespace = true;
       nsUriToPrefix = _nsUriToPrefix;
 
@@ -10185,23 +10229,6 @@
 
           // end: normalize ns attribute name
 
-          // normalize xsi:type ns attribute value
-          if (name === XSI_TYPE$1) {
-            w = value.indexOf(':');
-
-            if (w !== -1) {
-              nsName = value.substring(0, w);
-
-              // handle default prefixes, i.e. xs:String gracefully
-              nsName = nsMatrix[nsName] || nsName;
-              value = nsName + value.substring(w);
-            } else {
-              value = defaultAlias + ':' + value;
-            }
-          }
-
-          // end: normalize xsi:type ns attribute value
-
           attrs[name] = value;
         }
 
@@ -10230,23 +10257,6 @@
                 : nsName + name.substr(w);
 
               // end: normalize ns attribute name
-
-              // normalize xsi:type ns attribute value
-              if (name === XSI_TYPE$1) {
-                w = value.indexOf(':');
-
-                if (w !== -1) {
-                  nsName = value.substring(0, w);
-
-                  // handle default prefixes, i.e. xs:String gracefully
-                  nsName = nsMatrix[nsName] || nsName;
-                  value = nsName + value.substring(w);
-                } else {
-                  value = defaultAlias + ':' + value;
-                }
-              }
-
-              // end: normalize xsi:type ns attribute value
             }
 
             attrs[name] = value;
@@ -10387,11 +10397,11 @@
           }
         }
 
-        w = xml.charCodeAt(i+1);
+        w = xml.charCodeAt(i + 1);
 
         // parse comments + CDATA
         if (w === 33) { // "!"
-          q = xml.charCodeAt(i+2);
+          q = xml.charCodeAt(i + 2);
 
           // CDATA section
           if (q === 91 && xml.substr(i + 3, 6) === 'CDATA[') { // 91 == "["
@@ -10675,18 +10685,16 @@
     'xml': 'http://www.w3.org/XML/1998/namespace'
   };
 
-  var XSI_TYPE = 'xsi:type';
+  var SERIALIZE_PROPERTY = 'property';
 
-  function serializeFormat(element) {
+  function getSerialization(element) {
     return element.xml && element.xml.serialize;
   }
 
-  function serializeAsType(element) {
-    return serializeFormat(element) === XSI_TYPE;
-  }
+  function getSerializationType(element) {
+    const type = getSerialization(element);
 
-  function serializeAsProperty(element) {
-    return serializeFormat(element) === 'property';
+    return type !== SERIALIZE_PROPERTY && (type || null);
   }
 
   function capitalize(str) {
@@ -10702,12 +10710,20 @@
     return aliasNs.prefix + ':' + capitalize(aliasNs.localName);
   }
 
+  /**
+   * Un-prefix a potentially prefixed type name.
+   *
+   * @param {NsName} nameNs
+   * @param {Object} [pkg]
+   *
+   * @return {string}
+   */
   function prefixedToName(nameNs, pkg) {
 
     var name = nameNs.name,
         localName = nameNs.localName;
 
-    var typePrefix = pkg.xml && pkg.xml.typePrefix;
+    var typePrefix = pkg && pkg.xml && pkg.xml.typePrefix;
 
     if (typePrefix && localName.indexOf(typePrefix) === 0) {
       return nameNs.prefix + ':' + localName.slice(typePrefix.length);
@@ -10716,12 +10732,19 @@
     }
   }
 
-  function normalizeXsiTypeName(name, model) {
+  function normalizeTypeName(name, nsMap, model) {
 
-    var nameNs = parseName$1(name);
-    var pkg = model.getPackage(nameNs.prefix);
+    // normalize against actual NS
+    const nameNs = parseName$1(name, nsMap.xmlns);
+
+    const normalizedName = `${ nsMap[nameNs.prefix] || nameNs.prefix }:${ nameNs.localName }`;
+
+    const normalizedNameNs = parseName$1(normalizedName);
+
+    // determine actual type name, based on package-defined prefix
+    var pkg = model.getPackage(normalizedNameNs.prefix);
 
-    return prefixedToName(nameNs, pkg);
+    return prefixedToName(normalizedNameNs, pkg);
   }
 
   function error$1(message) {
@@ -11010,8 +11033,9 @@
       } else {
         if (prop) {
           value = coerceType(prop.type, value);
-        } else
-        if (name !== 'xmlns') {
+        } else if (name === 'xmlns') {
+          name = ':' + name;
+        } else {
           propNameNs = parseName$1(name, descriptor.ns.prefix);
 
           // check whether attribute is defined in a well-known namespace
@@ -11044,26 +11068,27 @@
         descriptor = getModdleDescriptor(type);
 
     var propertyName = nameNs.name,
-        property = descriptor.propertiesByName[propertyName],
-        elementTypeName,
-        elementType;
+        property = descriptor.propertiesByName[propertyName];
 
     // search for properties by name first
 
     if (property && !property.isAttr) {
 
-      if (serializeAsType(property)) {
-        elementTypeName = node.attributes[XSI_TYPE];
+      const serializationType = getSerializationType(property);
+
+      if (serializationType) {
+        const elementTypeName = node.attributes[serializationType];
 
-        // xsi type is optional, if it does not exists the
+        // type is optional, if it does not exists the
         // default type is assumed
         if (elementTypeName) {
 
+          // convert the prefix used to the mapped form, but also
           // take possible type prefixes from XML
-          // into account, i.e.: xsi:type="t{ActualType}"
-          elementTypeName = normalizeXsiTypeName(elementTypeName, model);
+          // into account, i.e.: xsi:type="t{ActualType}",
+          const normalizedTypeName = normalizeTypeName(elementTypeName, node.ns, model);
 
-          elementType = model.getType(elementTypeName);
+          const elementType = model.getType(normalizedTypeName);
 
           return assign$1({}, property, {
             effectiveType: getModdleDescriptor(elementType).name
@@ -11078,8 +11103,8 @@
     var pkg = model.getPackage(nameNs.prefix);
 
     if (pkg) {
-      elementTypeName = aliasToName(nameNs, pkg);
-      elementType = model.getType(elementTypeName);
+      const elementTypeName = aliasToName(nameNs, pkg);
+      const elementType = model.getType(elementTypeName);
 
       // search for collection members later
       property = find$1(descriptor.properties, function(p) {
@@ -11501,9 +11526,12 @@
       uriMap[p.uri] = p.prefix;
 
       return uriMap;
-    }, {
-      'http://www.w3.org/XML/1998/namespace': 'xml' // add default xml ns
-    });
+    }, Object.entries(DEFAULT_NS_MAP).reduce(function(map, [ prefix, url ]) {
+      map[url] = prefix;
+
+      return map;
+    }, model.config && model.config.nsMap || {}));
+
     parser
       .ns(uriMap)
       .on('openTag', function(obj, decodeStr, selfClosing, getContext) {
@@ -11604,75 +11632,82 @@
 
   function Namespaces(parent) {
 
-    var prefixMap = {};
-    var uriMap = {};
-    var used = {};
+    this.prefixMap = {};
+    this.uriMap = {};
+    this.used = {};
 
-    var wellknown = [];
-    var custom = [];
+    this.wellknown = [];
+    this.custom = [];
+    this.parent = parent;
 
-    // API
+    this.defaultPrefixMap = parent && parent.defaultPrefixMap || {};
+  }
 
-    this.byUri = function(uri) {
-      return uriMap[uri] || (
-        parent && parent.byUri(uri)
-      );
-    };
+  Namespaces.prototype.mapDefaultPrefixes = function(defaultPrefixMap) {
+    this.defaultPrefixMap = defaultPrefixMap;
+  };
 
-    this.add = function(ns, isWellknown) {
+  Namespaces.prototype.defaultUriByPrefix = function(prefix) {
+    return this.defaultPrefixMap[prefix];
+  };
 
-      uriMap[ns.uri] = ns;
+  Namespaces.prototype.byUri = function(uri) {
+    return this.uriMap[uri] || (
+      this.parent && this.parent.byUri(uri)
+    );
+  };
 
-      if (isWellknown) {
-        wellknown.push(ns);
-      } else {
-        custom.push(ns);
-      }
+  Namespaces.prototype.add = function(ns, isWellknown) {
 
-      this.mapPrefix(ns.prefix, ns.uri);
-    };
+    this.uriMap[ns.uri] = ns;
 
-    this.uriByPrefix = function(prefix) {
-      return prefixMap[prefix || 'xmlns'];
-    };
+    if (isWellknown) {
+      this.wellknown.push(ns);
+    } else {
+      this.custom.push(ns);
+    }
 
-    this.mapPrefix = function(prefix, uri) {
-      prefixMap[prefix || 'xmlns'] = uri;
-    };
+    this.mapPrefix(ns.prefix, ns.uri);
+  };
 
-    this.getNSKey = function(ns) {
-      return (ns.prefix !== undefined) ? (ns.uri + '|' + ns.prefix) : ns.uri;
-    };
+  Namespaces.prototype.uriByPrefix = function(prefix) {
+    return this.prefixMap[prefix || 'xmlns'] || (
+      this.parent && this.parent.uriByPrefix(prefix)
+    );
+  };
 
-    this.logUsed = function(ns) {
+  Namespaces.prototype.mapPrefix = function(prefix, uri) {
+    this.prefixMap[prefix || 'xmlns'] = uri;
+  };
 
-      var uri = ns.uri;
-      var nsKey = this.getNSKey(ns);
+  Namespaces.prototype.getNSKey = function(ns) {
+    return (ns.prefix !== undefined) ? (ns.uri + '|' + ns.prefix) : ns.uri;
+  };
 
-      used[nsKey] = this.byUri(uri);
+  Namespaces.prototype.logUsed = function(ns) {
 
-      // Inform parent recursively about the usage of this NS
-      if (parent) {
-        parent.logUsed(ns);
-      }
-    };
+    var uri = ns.uri;
+    var nsKey = this.getNSKey(ns);
 
-    this.getUsed = function(ns) {
+    this.used[nsKey] = this.byUri(uri);
 
-      function isUsed(ns) {
-        var nsKey = self.getNSKey(ns);
+    // Inform parent recursively about the usage of this NS
+    if (this.parent) {
+      this.parent.logUsed(ns);
+    }
+  };
 
-        return used[nsKey];
-      }
+  Namespaces.prototype.getUsed = function(ns) {
 
-      var self = this;
+    var allNs = [].concat(this.wellknown, this.custom);
 
-      var allNs = [].concat(wellknown, custom);
+    return allNs.filter(ns => {
+      var nsKey = this.getNSKey(ns);
 
-      return allNs.filter(isUsed);
-    };
+      return this.used[nsKey];
+    });
+  };
 
-  }
 
   function lower(string) {
     return string.charAt(0).toLowerCase() + string.slice(1);
@@ -11887,7 +11922,7 @@
     var isGeneric = elementDescriptor.isGeneric;
 
     if (isGeneric) {
-      otherAttrs = this.parseGeneric(element);
+      otherAttrs = this.parseGenericNsAttributes(element);
     } else {
       otherAttrs = this.parseNsAttributes(element);
     }
@@ -11901,7 +11936,9 @@
     // compute tag name
     this.tagName = this.addTagName(this.ns);
 
-    if (!isGeneric) {
+    if (isGeneric) {
+      this.parseGenericContainments(element);
+    } else {
       properties = getSerializableProperties(element);
 
       this.parseAttributes(filterAttributes(properties));
@@ -11964,35 +12001,29 @@
     }
   };
 
-  ElementSerializer.prototype.parseGeneric = function(element) {
+  ElementSerializer.prototype.parseGenericNsAttributes = function(element) {
 
-    var self = this,
-        body = this.body;
-
-    var attributes = [];
-
-    forEach$1(element, function(val, key) {
+    return Object.entries(element).filter(
+      ([ key, value ]) => !key.startsWith('$') && this.parseNsAttribute(element, key, value)
+    ).map(
+      ([ key, value ]) => ({ name: key, value: value })
+    );
+  };
 
-      var nonNsAttr;
+  ElementSerializer.prototype.parseGenericContainments = function(element) {
+    var body = element.$body;
 
-      if (key === '$body') {
-        body.push(new BodySerializer().build({ type: 'String' }, val));
-      } else
-      if (key === '$children') {
-        forEach$1(val, function(child) {
-          body.push(new ElementSerializer(self).build(child));
-        });
-      } else
-      if (key.indexOf('$') !== 0) {
-        nonNsAttr = self.parseNsAttribute(element, key, val);
+    if (body) {
+      this.body.push(new BodySerializer().build({ type: 'String' }, body));
+    }
 
-        if (nonNsAttr) {
-          attributes.push({ name: key, value: val });
-        }
-      }
-    });
+    var children = element.$children;
 
-    return attributes;
+    if (children) {
+      forEach$1(children, child => {
+        this.body.push(new ElementSerializer(this).build(child));
+      });
+    }
   };
 
   ElementSerializer.prototype.parseNsAttribute = function(element, name, value) {
@@ -12039,7 +12070,7 @@
    * @param  {Object} element
    * @return {Array<Object>}
    */
-  ElementSerializer.prototype.parseNsAttributes = function(element, attrs) {
+  ElementSerializer.prototype.parseNsAttributes = function(element) {
     var self = this;
 
     var genericAttrs = element.$attrs;
@@ -12067,21 +12098,16 @@
 
     forEach$1(attributes, function(attr) {
 
-      // do not serialize xsi:type attribute
-      // it is set manually based on the actual implementation type
-      if (attr.name === XSI_TYPE) {
-        return;
-      }
-
       try {
         self.addAttribute(self.nsAttributeName(attr.name), attr.value);
       } catch (e) {
-        /* global console */
 
-        console.warn(
-          'missing namespace information for ',
-          attr.name, '=', attr.value, 'on', element,
-          e);
+        // eslint-disable-next-line no-undef
+        typeof console !== 'undefined' && console.warn(
+          `missing namespace information for <${
+          attr.name
+        }=${ attr.value }> on`, element, e
+        );
       }
     });
   };
@@ -12103,13 +12129,11 @@
 
       if (p.isBody) {
         body.push(new BodySerializer().build(p, value[0]));
-      } else
-      if (isSimple(p.type)) {
+      } else if (isSimple(p.type)) {
         forEach$1(value, function(v) {
           body.push(new ValueSerializer(self.addTagName(self.nsPropertyTagName(p))).build(p, v));
         });
-      } else
-      if (isReference) {
+      } else if (isReference) {
         forEach$1(value, function(v) {
           body.push(new ReferenceSerializer(self.addTagName(self.nsPropertyTagName(p))).build(v));
         });
@@ -12117,17 +12141,17 @@
 
         // allow serialization via type
         // rather than element name
-        var asType = serializeAsType(p),
-            asProperty = serializeAsProperty(p);
+        var serialization = getSerialization(p);
 
         forEach$1(value, function(v) {
           var serializer;
 
-          if (asType) {
-            serializer = new TypeSerializer(self, p);
-          } else
-          if (asProperty) {
-            serializer = new ElementSerializer(self, p);
+          if (serialization) {
+            if (serialization === SERIALIZE_PROPERTY) {
+              serializer = new ElementSerializer(self, p);
+            } else {
+              serializer = new TypeSerializer(self, p, serialization);
+            }
           } else {
             serializer = new ElementSerializer(self);
           }
@@ -12175,9 +12199,7 @@
   };
 
   ElementSerializer.prototype.logNamespaceUsed = function(ns, local) {
-    var element = this.element,
-        model = element.$model,
-        namespaces = this.getNamespaces(local);
+    var namespaces = this.getNamespaces(local);
 
     // ns may be
     //
@@ -12195,7 +12217,7 @@
       return { localName: ns.localName };
     }
 
-    wellknownUri = DEFAULT_NS_MAP[prefix] || model && (model.getPackage(prefix) || {}).uri;
+    wellknownUri = namespaces.defaultUriByPrefix(prefix);
 
     uri = uri || wellknownUri || namespaces.uriByPrefix(prefix);
 
@@ -12205,6 +12227,11 @@
 
     ns = namespaces.byUri(uri);
 
+    // register new default prefix <xmlns> in local scope
+    if (!ns && !prefix) {
+      ns = this.logNamespace({ uri }, wellknownUri === uri, true);
+    }
+
     if (!ns) {
       newPrefix = prefix;
       idx = 1;
@@ -12236,8 +12263,7 @@
 
         if (!p.isMany) {
           value = value.id;
-        }
-        else {
+        } else {
           var values = [];
           forEach$1(value, function(v) {
             values.push(v.id);
@@ -12341,20 +12367,25 @@
   /**
    * A serializer for types that handles serialization of data types
    */
-  function TypeSerializer(parent, propertyDescriptor) {
+  function TypeSerializer(parent, propertyDescriptor, serialization) {
     ElementSerializer.call(this, parent, propertyDescriptor);
+
+    this.serialization = serialization;
   }
 
   inherits(TypeSerializer, ElementSerializer);
 
   TypeSerializer.prototype.parseNsAttributes = function(element) {
 
-    // extracted attributes
-    var attributes = ElementSerializer.prototype.parseNsAttributes.call(this, element);
+    // extracted attributes with serialization attribute
+    // <type=typeName> stripped; it may be later
+    var attributes = ElementSerializer.prototype.parseNsAttributes.call(this, element).filter(
+      attr => attr.name !== this.serialization
+    );
 
     var descriptor = element.$descriptor;
 
-    // only serialize xsi:type if necessary
+    // only serialize <type=typeName> if necessary
     if (descriptor.name === this.propertyDescriptor.type) {
       return attributes;
     }
@@ -12369,7 +12400,7 @@
         typePrefix = (pkg.xml && pkg.xml.typePrefix) || '';
 
     this.addAttribute(
-      this.nsAttributeName(XSI_TYPE),
+      this.nsAttributeName(this.serialization),
       (typeNs.prefix ? typeNs.prefix + ':' : '') + typePrefix + descriptor.ns.localName
     );
 
@@ -12442,7 +12473,13 @@
         formatingWriter.append(XML_PREAMBLE);
       }
 
-      new ElementSerializer().build(tree).serializeTo(formatingWriter);
+      var serializer = new ElementSerializer();
+
+      var model = tree.$model;
+
+      serializer.getNamespaces().mapDefaultPrefixes(getDefaultPrefixMappings(model));
+
+      serializer.build(tree).serializeTo(formatingWriter);
 
       if (!writer) {
         return internalWriter.value;
@@ -12454,6 +12491,39 @@
     };
   }
 
+
+  // helpers ///////////
+
+  /**
+   * @param {Moddle} model
+   *
+   * @return { Record<string, string> } map from prefix to URI
+   */
+  function getDefaultPrefixMappings(model) {
+
+    const nsMap = model.config && model.config.nsMap || {};
+
+    const prefixMap = {};
+
+    // { prefix -> uri }
+    for (const prefix in DEFAULT_NS_MAP) {
+      prefixMap[prefix] = DEFAULT_NS_MAP[prefix];
+    }
+
+    // { uri -> prefix }
+    for (const uri in nsMap) {
+      const prefix = nsMap[uri];
+
+      prefixMap[prefix] = uri;
+    }
+
+    for (const pkg of model.getPackages()) {
+      prefixMap[pkg.prefix] = pkg.uri;
+    }
+
+    return prefixMap;
+  }
+
   /**
    * A sub class of {@link Moddle} with support for import and export of BPMN 2.0 xml files.
    *
@@ -16180,7 +16250,7 @@
   	associations: associations
   };
 
-  var packages = {
+  const packages = {
     bpmn: BpmnPackage,
     bpmndi: BpmnDiPackage,
     dc: DcPackage,
@@ -16189,8 +16259,8 @@
     color: BpmnInColorPackage
   };
 
-  function simple(additionalPackages, options) {
-    var pks = assign$1({}, packages, additionalPackages);
+  function SimpleBpmnModdle(additionalPackages, options) {
+    const pks = assign$1({}, packages, additionalPackages);
 
     return new BpmnModdle(pks, options);
   }
@@ -17745,7 +17815,7 @@
   BaseViewer.prototype._createModdle = function(options) {
     const moddleOptions = assign$1({}, this._moddleExtensions, options.moddleExtensions);
 
-    return new simple(moddleOptions);
+    return new SimpleBpmnModdle(moddleOptions);
   };
 
   BaseViewer.prototype._modules = [];
@@ -18277,7 +18347,11 @@
     if (attr) {
 
       if (attr === 'categoryValueRef') {
-        semantic['categoryValueRef'].value = text;
+        if (!semantic[attr]) {
+          return element;
+        }
+
+        semantic[attr].value = text;
       } else {
         semantic[attr] = text;
       }
@@ -20905,6 +20979,8 @@
 
       return bbox;
     } catch (e) {
+      console.log(e);
+
       return { width: 0, height: 0 };
     }
   }
@@ -24188,409 +24264,6 @@
     subprocessCompatibility: [ 'type', SubprocessCompatibility ]
   };
 
-  var LOW_PRIORITY$p = 500;
-
-  var DEFAULT_PRIORITY$5 = 1000;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('./OutlineProvider').default} OutlineProvider
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../../draw/Styles').default} Styles
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Styles} styles
-   */
-  function Outline(eventBus, styles) {
-
-    this._eventBus = eventBus;
-
-    this.offset = 5;
-
-    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
-
-    var self = this;
-
-    /**
-     * @param {SVGElement} gfx
-     *
-     * @return {SVGElement} outline
-     */
-    function createOutline(gfx) {
-      var outline = create$1('rect');
-
-      attr(outline, assign$1({
-        x: 0,
-        y: 0,
-        rx: 4,
-        width: 100,
-        height: 100
-      }, OUTLINE_STYLE));
-
-      return outline;
-    }
-
-    // A low priortity is necessary, because outlines of labels have to be updated
-    // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$p, function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = self.getOutline(element) || createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateShapeOutline(outline, element);
-    });
-
-    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateConnectionOutline(outline, element);
-    });
-  }
-
-
-  /**
-   * Updates the outline of a shape respecting the dimension of the
-   * element and an outline offset.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} element
-   */
-  Outline.prototype.updateShapeOutline = function(outline, element) {
-
-    var updated = false;
-    var providers = this._getProviders();
-
-    if (providers.length) {
-      forEach$1(providers, function(provider) {
-        updated = updated || provider.updateOutline(element, outline);
-      });
-    }
-
-    if (!updated) {
-      attr(outline, {
-        x: -this.offset,
-        y: -this.offset,
-        width: element.width + this.offset * 2,
-        height: element.height + this.offset * 2
-      });
-    }
-  };
-
-  /**
-   * Updates the outline of a connection respecting the bounding box of
-   * the connection and an outline offset.
-   * Register an outline provider with the given priority.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} connection
-   */
-  Outline.prototype.updateConnectionOutline = function(outline, connection) {
-    var bbox = getBBox(connection);
-
-    attr(outline, {
-      x: bbox.x - this.offset,
-      y: bbox.y - this.offset,
-      width: bbox.width + this.offset * 2,
-      height: bbox.height + this.offset * 2
-    });
-  };
-
-  /**
-   * Register an outline provider with the given priority.
-   *
-   * @param {number} priority
-   * @param {OutlineProvider} provider
-   */
-  Outline.prototype.registerProvider = function(priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$5;
-    }
-
-    this._eventBus.on('outline.getProviders', priority, function(event) {
-      event.providers.push(provider);
-    });
-  };
-
-  /**
-   * Returns the registered outline providers.
-   *
-   * @returns {OutlineProvider[]}
-   */
-  Outline.prototype._getProviders = function() {
-    var event = this._eventBus.createEvent({
-      type: 'outline.getProviders',
-      providers: []
-    });
-
-    this._eventBus.fire(event);
-
-    return event.providers;
-  };
-
-  /**
-   * Returns the outline for an element.
-   *
-   * @param {Element} element
-   */
-  Outline.prototype.getOutline = function(element) {
-    var outline;
-    var providers = this._getProviders();
-
-    forEach$1(providers, function(provider) {
-
-      if (!isFunction(provider.getOutline)) {
-        return;
-      }
-
-      outline = outline || provider.getOutline(element);
-    });
-
-    return outline;
-  };
-
-  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
-
-  /**
-   * @type { import('didi').ModuleDeclaration }
-   */
-  var OutlineModule$1 = {
-    __init__: [ 'outline' ],
-    outline: [ 'type', Outline ]
-  };
-
-  const DATA_OBJECT_REFERENCE_OUTLINE_PATH = 'M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z';
-  const DATA_STORE_REFERENCE_OUTLINE_PATH = 'M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z';
-
-  /**
-   * @typedef { import('diagram-js/lib/util/Types').Dimensions} Dimensions
-   */
-
-  /**
-   * @type {Dimensions}
-   */
-  const DATA_OBJECT_REFERENCE_STANDARD_SIZE = { width: 36, height: 50 };
-
-  /**
-   * @type {Dimensions}
-   */
-  const DATA_STORE_REFERENCE_STANDARD_SIZE = { width: 50, height: 50 };
-
-  /**
-   * Create a path element with given attributes.
-   * @param {string} path
-   * @param {Object} attrs
-   * @param {Object} OUTLINE_STYLE
-   * @return {SVGElement}
-   */
-  function createPath(path, attrs, OUTLINE_STYLE) {
-    return create$1('path', {
-      d: path,
-      strokeWidth: 2,
-      transform: `translate(${attrs.x}, ${attrs.y})`,
-      ...OUTLINE_STYLE
-    });
-  }
-
-  /**
-   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').default } BaseOutlineProvider
-   *
-   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').Outline } Outline
-   *
-   * @typedef { import('diagram-js/lib/draw/Styles').default } Styles
-   *
-   * @typedef { import('diagram-js/lib/model/Types').Element } Element
-   */
-
-  const DEFAULT_OFFSET = 5;
-
-  /**
-   * BPMN-specific outline provider.
-   *
-   * @implements {BaseOutlineProvider}
-   *
-   * @param {Outline} outline
-   * @param {Styles} styles
-   */
-  function OutlineProvider(outline, styles) {
-
-    this._styles = styles;
-    outline.registerProvider(this);
-  }
-
-  OutlineProvider.$inject = [
-    'outline',
-    'styles'
-  ];
-
-  /**
-   * Returns outline for a given element.
-   *
-   * @param {Element} element
-   *
-   * @return {Outline}
-   */
-  OutlineProvider.prototype.getOutline = function(element) {
-
-    const OUTLINE_STYLE = this._styles.cls('djs-outline', [ 'no-fill' ]);
-
-    var outline;
-
-    if (isLabel(element)) {
-      return;
-    }
-
-    if (is$1(element, 'bpmn:Gateway')) {
-      outline = create$1('rect');
-
-      assign$1(outline.style, {
-        'transform-box': 'fill-box',
-        'transform': 'rotate(45deg)',
-        'transform-origin': 'center'
-      });
-
-      attr(outline, assign$1({
-        x: 2,
-        y: 2,
-        rx: 4,
-        width: element.width - 4,
-        height: element.height - 4,
-      }, OUTLINE_STYLE));
-
-    } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group', 'bpmn:CallActivity' ])) {
-      outline = create$1('rect');
-
-      attr(outline, assign$1({
-        x: -DEFAULT_OFFSET,
-        y: -DEFAULT_OFFSET,
-        rx: 14,
-        width: element.width + DEFAULT_OFFSET * 2,
-        height: element.height + DEFAULT_OFFSET * 2
-      }, OUTLINE_STYLE));
-
-    } else if (is$1(element, 'bpmn:EndEvent')) {
-
-      outline = create$1('circle');
-
-      // Extra 1px offset needed due to increased stroke-width of end event
-      // which makes it bigger than other events.
-
-      attr(outline, assign$1({
-        cx: element.width / 2,
-        cy: element.height / 2,
-        r: element.width / 2 + DEFAULT_OFFSET + 1
-      }, OUTLINE_STYLE));
-
-    } else if (is$1(element, 'bpmn:Event')) {
-      outline = create$1('circle');
-
-      attr(outline, assign$1({
-        cx: element.width / 2,
-        cy: element.height / 2,
-        r: element.width / 2 + DEFAULT_OFFSET
-      }, OUTLINE_STYLE));
-
-    } else if (is$1(element, 'bpmn:DataObjectReference') && isStandardSize(element, 'bpmn:DataObjectReference')) {
-
-      outline = createPath(
-        DATA_OBJECT_REFERENCE_OUTLINE_PATH,
-        { x: -6, y: -6 },
-        OUTLINE_STYLE
-      );
-
-    } else if (is$1(element, 'bpmn:DataStoreReference') && isStandardSize(element, 'bpmn:DataStoreReference')) {
-
-      outline = createPath(
-        DATA_STORE_REFERENCE_OUTLINE_PATH,
-        { x: -6, y: -6 },
-        OUTLINE_STYLE
-      );
-    }
-
-    return outline;
-  };
-
-  /**
-   * Updates the outline for a given element.
-   * Returns true if the update for the given element was handled by this provider.
-   *
-   * @param {Element} element
-   * @param {Outline} outline
-   * @returns {boolean}
-   */
-  OutlineProvider.prototype.updateOutline = function(element, outline) {
-
-    if (isLabel(element)) {
-      return;
-    }
-
-    if (isAny(element, [ 'bpmn:SubProcess', 'bpmn:Group' ])) {
-
-      attr(outline, {
-        width: element.width + DEFAULT_OFFSET * 2,
-        height: element.height + DEFAULT_OFFSET * 2
-      });
-
-      return true;
-
-    } else if (isAny(element, [
-      'bpmn:Event',
-      'bpmn:Gateway',
-      'bpmn:DataStoreReference',
-      'bpmn:DataObjectReference'
-    ])) {
-      return true;
-    }
-
-    return false;
-  };
-
-
-  // helpers //////////
-
-  function isStandardSize(element, type) {
-    var standardSize;
-
-    if (type === 'bpmn:DataObjectReference') {
-      standardSize = DATA_OBJECT_REFERENCE_STANDARD_SIZE;
-    } else if (type === 'bpmn:DataStoreReference') {
-      standardSize = DATA_STORE_REFERENCE_STANDARD_SIZE;
-    }
-
-    return element.width === standardSize.width
-            && element.height === standardSize.height;
-  }
-
-  var OutlineModule = {
-    __depends__: [
-      OutlineModule$1
-    ],
-    __init__: [ 'outlineProvider' ],
-    outlineProvider: [ 'type', OutlineProvider ]
-  };
-
   /**
    * @typedef {import('../util/Types').Point} Point
    */
@@ -24651,7 +24324,7 @@
    *
    * @return {boolean}
    */
-  function isButton$1(event, button) {
+  function isButton(event, button) {
     return (getOriginal$1(event) || event).button === button;
   }
 
@@ -24663,7 +24336,7 @@
   function isPrimaryButton(event) {
 
     // button === 0 -> left áka primary mouse button
-    return isButton$1(event, 0);
+    return isButton(event, 0);
   }
 
   /**
@@ -24674,7 +24347,7 @@
   function isAuxiliaryButton(event) {
 
     // button === 1 -> auxiliary áka wheel button
-    return isButton$1(event, 1);
+    return isButton(event, 1);
   }
 
   /**
@@ -24724,7 +24397,7 @@
     return isPrimaryButton(event) || isAuxiliaryButton(event);
   }
 
-  var LOW_PRIORITY$o = 500;
+  var LOW_PRIORITY$p = 500;
 
 
   /**
@@ -24921,7 +24594,7 @@
     eventBus.on([
       'shape.changed',
       'connection.changed'
-    ], LOW_PRIORITY$o, function(event) {
+    ], LOW_PRIORITY$p, function(event) {
 
       var element = event.element,
           gfx = event.gfx;
@@ -24929,7 +24602,7 @@
       eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
     });
 
-    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$o, function(event) {
+    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$p, function(event) {
       var element = event.element,
           gfx = event.gfx;
 
@@ -25332,15 +25005,11 @@
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('./Selection').default} Selection
    */
 
   var MARKER_HOVER = 'hover',
       MARKER_SELECTED = 'selected';
 
-  var SELECTION_OUTLINE_PADDING = 6;
-
-
   /**
    * A plugin that adds a visible selection UI to shapes and connections
    * by appending the <code>hover</code> and <code>selected</code> classes to them.
@@ -25351,15 +25020,10 @@
    *
    * @param {Canvas} canvas
    * @param {EventBus} eventBus
-   * @param {Selection} selection
    */
-  function SelectionVisuals(canvas, eventBus, selection) {
+  function SelectionVisuals(canvas, eventBus) {
     this._canvas = canvas;
 
-    var self = this;
-
-    this._multiSelectionBox = null;
-
     function addMarker(e, cls) {
       canvas.addMarker(e, cls);
     }
@@ -25400,63 +25064,14 @@
           select(e);
         }
       });
-
-      self._updateSelectionOutline(newSelection);
-    });
-
-
-    eventBus.on('element.changed', function(event) {
-      if (selection.isSelected(event.element)) {
-        self._updateSelectionOutline(selection.get());
-      }
     });
   }
 
   SelectionVisuals.$inject = [
     'canvas',
-    'eventBus',
-    'selection'
+    'eventBus'
   ];
 
-  SelectionVisuals.prototype._updateSelectionOutline = function(selection) {
-    var layer = this._canvas.getLayer('selectionOutline');
-
-    clear(layer);
-
-    var enabled = selection.length > 1;
-
-    var container = this._canvas.getContainer();
-
-    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
-
-    if (!enabled) {
-      return;
-    }
-
-    var bBox = addSelectionOutlinePadding(getBBox(selection));
-
-    var rect = create$1('rect');
-
-    attr(rect, assign$1({
-      rx: 3
-    }, bBox));
-
-    classes(rect).add('djs-selection-outline');
-
-    append(layer, rect);
-  };
-
-  // helpers //////////
-
-  function addSelectionOutlinePadding(bBox) {
-    return {
-      x: bBox.x - SELECTION_OUTLINE_PADDING,
-      y: bBox.y - SELECTION_OUTLINE_PADDING,
-      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
-      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
-    };
-  }
-
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
@@ -25583,7 +25198,6 @@
     __init__: [ 'selectionVisuals', 'selectionBehavior' ],
     __depends__: [
       InteractionEventsModule$1,
-      OutlineModule$1
     ],
     selection: [ 'type', Selection ],
     selectionVisuals: [ 'type', SelectionVisuals ],
@@ -25649,7 +25263,6 @@
   Viewer.prototype._modules = [
     CoreModule,
     DrilldownModdule,
-    OutlineModule,
     OverlaysModule,
     SelectionModule,
     TranslateModule
@@ -25747,9 +25360,10 @@
   var KEYDOWN_EVENT = 'keyboard.keydown',
       KEYUP_EVENT = 'keyboard.keyup';
 
-  var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
+  var DEFAULT_PRIORITY$5 = 1000;
+
+  var compatMessage = 'Keyboard binding is now implicit; explicit binding to an element got removed. For more information, see https://github.com/bpmn-io/diagram-js/issues/661';
 
-  var DEFAULT_PRIORITY$4 = 1000;
 
   /**
    * A keyboard abstraction that may be activated and
@@ -25769,8 +25383,8 @@
    *
    * All events contain one field which is node.
    *
-   * A default binding for the keyboard may be specified via the
-   * `keyboard.bindTo` configuration option.
+   * Specify the initial keyboard binding state via the
+   * `keyboard.bind=true|false` configuration option.
    *
    * @param {Object} config
    * @param {EventTarget} [config.bindTo]
@@ -25779,7 +25393,8 @@
   function Keyboard(config, eventBus) {
     var self = this;
 
-    this._config = config || {};
+    this._config = config = config || {};
+
     this._eventBus = eventBus;
 
     this._keydownHandler = this._keydownHandler.bind(this);
@@ -25792,19 +25407,22 @@
       self.unbind();
     });
 
-    eventBus.on('diagram.init', function() {
-      self._fire('init');
-    });
+    if (config.bindTo) {
+      console.error('unsupported configuration <keyboard.bindTo>', new Error(compatMessage));
+    }
+
+    var bind = config && config.bind !== false;
+
+    eventBus.on('canvas.init', function(event) {
+      self._target = event.svg;
 
-    eventBus.on('attach', function() {
-      if (config && config.bindTo) {
-        self.bind(config.bindTo);
+      if (bind) {
+        self.bind();
       }
-    });
 
-    eventBus.on('detach', function() {
-      self.unbind();
+      self._fire('init');
     });
+
   }
 
   Keyboard.$inject = [
@@ -25839,34 +25457,7 @@
   };
 
   Keyboard.prototype._isEventIgnored = function(event) {
-    if (event.defaultPrevented) {
-      return true;
-    }
-
-    return (
-      isInput$1(event.target) || (
-        isButton(event.target) && isKey([ ' ', 'Enter' ], event)
-      )
-    ) && this._isModifiedKeyIgnored(event);
-  };
-
-  Keyboard.prototype._isModifiedKeyIgnored = function(event) {
-    if (!isCmd(event)) {
-      return true;
-    }
-
-    var allowedModifiers = this._getAllowedModifiers(event.target);
-    return allowedModifiers.indexOf(event.key) === -1;
-  };
-
-  Keyboard.prototype._getAllowedModifiers = function(element) {
-    var modifierContainer = closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
-
-    if (!modifierContainer || (this._node && !this._node.contains(modifierContainer))) {
-      return [];
-    }
-
-    return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
+    return false;
   };
 
   /**
@@ -25876,10 +25467,14 @@
    */
   Keyboard.prototype.bind = function(node) {
 
+    if (node) {
+      console.error('unsupported argument <node>', new Error(compatMessage));
+    }
+
     // make sure that the keyboard is only bound once to the DOM
     this.unbind();
 
-    this._node = node;
+    node = this._node = this._target;
 
     // bind key events
     event.bind(node, 'keydown', this._keydownHandler);
@@ -25929,7 +25524,7 @@
     if (isFunction(priority)) {
       type = listener;
       listener = priority;
-      priority = DEFAULT_PRIORITY$4;
+      priority = DEFAULT_PRIORITY$5;
     }
 
     this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
@@ -25950,19 +25545,7 @@
   Keyboard.prototype.isShift = isShift;
   Keyboard.prototype.isKey = isKey;
 
-
-
-  // helpers ///////
-
-  function isInput$1(target) {
-    return target && (matches$1(target, 'input, textarea') || target.contentEditable === 'true');
-  }
-
-  function isButton(target) {
-    return target && matches$1(target, 'button, input[type=submit], input[type=button], a[href], [aria-role=button]');
-  }
-
-  var LOW_PRIORITY$n = 500;
+  var LOW_PRIORITY$o = 500;
 
 
   /**
@@ -25978,7 +25561,7 @@
 
     var self = this;
 
-    eventBus.on('editorActions.init', LOW_PRIORITY$n, function(event) {
+    eventBus.on('editorActions.init', LOW_PRIORITY$o, function(event) {
 
       var editorActions = event.editorActions;
 
@@ -27044,23 +26627,26 @@
 
   Scheduler.prototype._schedule = function(taskFn, id) {
 
-    const {
-      promise,
-      resolve,
-      reject
-    } = defer();
+    const deferred = defer();
+
+    const executionId = setTimeout(() => {
 
-    const executionId = requestAnimationFrame(() => {
       try {
-        resolve(taskFn());
+        this._scheduled[id] = null;
+
+        try {
+          deferred.resolve(taskFn());
+        } catch (error) {
+          deferred.reject(error);
+        }
       } catch (error) {
-        reject(error);
+        console.error('Scheduler#_schedule execution failed', error);
       }
     });
 
     return {
       executionId,
-      promise
+      promise: deferred.promise
     };
   };
 
@@ -27081,7 +26667,7 @@
   };
 
   Scheduler.prototype._cancel = function(scheduled) {
-    cancelAnimationFrame(scheduled.executionId);
+    clearTimeout(scheduled.executionId);
   };
 
   /**
@@ -27093,19 +26679,14 @@
    */
   function defer() {
 
-    let resolve;
-    let reject;
+    const deferred = {};
 
-    const promise = new Promise((_resolve, _reject) => {
-      resolve = _resolve;
-      reject = _reject;
+    deferred.promise = new Promise((resolve, reject) => {
+      deferred.resolve = resolve;
+      deferred.reject = reject;
     });
 
-    return {
-      promise,
-      resolve,
-      reject
-    };
+    return deferred;
   }
 
   var SchedulerModule = {
@@ -27138,7 +26719,7 @@
 
   var entrySelector = '.entry';
 
-  var DEFAULT_PRIORITY$3 = 1000;
+  var DEFAULT_PRIORITY$4 = 1000;
   var CONTEXT_PAD_MARGIN = 8;
   var HOVER_DELAY = 300;
 
@@ -27280,7 +26861,7 @@
   ContextPad.prototype.registerProvider = function(priority, provider) {
     if (!provider) {
       provider = priority;
-      priority = DEFAULT_PRIORITY$3;
+      priority = DEFAULT_PRIORITY$4;
     }
 
     this._eventBus.on('contextPad.getProviders', priority, function(event) {
@@ -28133,6 +27714,8 @@
    * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
    * @typedef {import('./PopupMenuProvider').PopupMenuEmptyPlaceholderProvider | import('./PopupMenuProvider').PopupMenuEmptyPlaceholder} PopupMenuEmptyPlaceholder
    *
+   * @typedef {import('../search/search').default} search
+   *
    * @typedef {import('../../util/Types').Point} Point
    */
 
@@ -28151,6 +27734,7 @@
    * @param {boolean} [props.search]
    * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
    * @param {number} [props.width]
+   * @param {search} props.searchFn
    */
   function PopupMenuComponent(props) {
     const {
@@ -28164,6 +27748,7 @@
       scale,
       search,
       emptyPlaceholder,
+      searchFn,
       entries: originalEntries,
       onOpened,
       onClosed
@@ -28185,29 +27770,19 @@
         return originalEntries;
       }
 
-      const filter = entry => {
-        if (!value) {
-          return (entry.rank || 0) >= 0;
-        }
-
-        if (entry.searchable === false) {
-          return false;
-        }
-
-        const searchableFields = [
-          entry.description || '',
-          entry.label || '',
-          entry.search || ''
-        ].map(string => string.toLowerCase());
+      if (!value) {
+        return originalEntries.filter(({ rank = 0 }) => rank >= 0);
+      }
 
-        // every word of `value` should be included in one of the searchable fields
-        return value
-          .toLowerCase()
-          .split(/\s/g)
-          .every(word => searchableFields.some(field => field.includes(word)));
-      };
+      const searchableEntries = originalEntries.filter(({ searchable }) => searchable !== false);
 
-      return originalEntries.filter(filter);
+      return searchFn(searchableEntries, value, {
+        keys: [
+          'label',
+          'description',
+          'search'
+        ]
+      }).map(({ item }) => item);
     }, [ searchable ]);
 
     const [ entries, setEntries ] = p$2(filterEntries(originalEntries, value));
@@ -28426,6 +28001,7 @@
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../search/search').default} search
    *
    * @typedef {import('../../util/Types').Point} Point
    *
@@ -28455,7 +28031,7 @@
     'commandStack.changed'
   ];
 
-  var DEFAULT_PRIORITY$2 = 1000;
+  var DEFAULT_PRIORITY$3 = 1000;
 
   /**
    * A popup menu to show a number of actions on the canvas.
@@ -28463,10 +28039,12 @@
    * @param {PopupMenuConfig} config
    * @param {EventBus} eventBus
    * @param {Canvas} canvas
+   * @param {search} search
    */
-  function PopupMenu(config, eventBus, canvas) {
+  function PopupMenu(config, eventBus, canvas, search) {
     this._eventBus = eventBus;
     this._canvas = canvas;
+    this._search = search;
 
     this._current = null;
 
@@ -28498,7 +28076,8 @@
   PopupMenu.$inject = [
     'config.popupMenu',
     'eventBus',
-    'canvas'
+    'canvas',
+    'search'
   ];
 
   PopupMenu.prototype._render = function() {
@@ -28542,6 +28121,7 @@
         scale=${ scale }
         onOpened=${ this._onOpened.bind(this) }
         onClosed=${ this._onClosed.bind(this) }
+        searchFn=${ this._search }
         ...${{ ...options }}
       />
     `,
@@ -28666,6 +28246,8 @@
 
     this.reset();
 
+    this._canvas.restoreFocus();
+
     this._current = null;
   };
 
@@ -28842,7 +28424,7 @@
   PopupMenu.prototype.registerProvider = function(id, priority, provider) {
     if (!provider) {
       provider = priority;
-      priority = DEFAULT_PRIORITY$2;
+      priority = DEFAULT_PRIORITY$3;
     }
 
     this._eventBus.on('popupMenu.getProviders.' + id, priority, function(event) {
@@ -28952,7 +28534,6 @@
 
 
   PopupMenu.prototype._getEmptyPlaceholder = function(providers) {
-
     const provider = providers.find(
       provider => isFunction(provider.getEmptyPlaceholder)
     );
@@ -29028,10 +28609,289 @@
     return entry;
   };
 
+  /**
+   * @typedef { {
+   *   index: number;
+   *   match: boolean;
+   *   value: string;
+   * } } Token
+   *
+   * @typedef {Token[]} Tokens
+   */
+
+  /**
+   * @template R
+   *
+   * @typedef { {
+   *   item: R,
+   *   tokens: Record<string, Tokens>
+   * } } SearchResult
+   */
+
+  /**
+   * Search items by query.
+   *
+   * @template T
+   *
+   * @param {T[]} items
+   * @param {string} pattern
+   * @param { {
+   *   keys: string[];
+   * } } options
+   *
+   * @returns {SearchResult<T>[]}
+   */
+  function search(items, pattern, options) {
+
+    const {
+      keys
+    } = options;
+
+    const words = pattern.trim().toLowerCase().split(/\s+/);
+
+    return items.flatMap((item) => {
+      const tokens = matchItem(item, words, keys);
+
+      if (!tokens) {
+        return [];
+      }
+
+      return {
+        item,
+        tokens
+      };
+    }).sort(createResultSorter(keys));
+  }
+
+  /**
+   * Match an item and return tokens in case of a match.
+   *
+   * @param {Object} item
+   * @param {string[]} words
+   * @param {string[]} keys
+   *
+   * @returns {Record<string, Tokens>}
+   */
+  function matchItem(item, words, keys) {
+
+    const {
+      matchedWords,
+      tokens
+    } = keys.reduce((result, key) => {
+      const string = item[ key ];
+
+      const {
+        tokens,
+        matchedWords
+      } = matchString(string, words);
+
+      return {
+        tokens: {
+          ...result.tokens,
+          [ key ]: tokens,
+        },
+        matchedWords: {
+          ...result.matchedWords,
+          ...matchedWords
+        }
+      };
+    }, {
+      matchedWords: {},
+      tokens: {}
+    });
+
+    // only return result if every word got matched
+    if (Object.keys(matchedWords).length !== words.length) {
+      return null;
+    }
+
+    return tokens;
+  }
+
+  /**
+   * Get index of result in list of results.
+   *
+   * @param {string[]} keys
+   *
+   * @returns { (resultA: SearchResult, resultB: SearchResult) => number}
+   */
+  function createResultSorter(keys) {
+
+    /**
+     * @param {SearchResult} resultA
+     * @param {SearchResult} resultB
+     */
+    return (resultA, resultB) => {
+
+      for (const key of keys) {
+
+        const tokenComparison = compareTokens(
+          resultA.tokens[key],
+          resultB.tokens[key]
+        );
+
+        if (tokenComparison !== 0) {
+          return tokenComparison;
+        }
+
+        const stringComparison = compareStrings(
+          resultA.item[ key ],
+          resultB.item[ key ]
+        );
+
+        if (stringComparison !== 0) {
+          return stringComparison;
+        }
+
+        // fall back to next key
+        continue;
+      }
+
+      // eventually call equality
+      return 0;
+    };
+
+  }
+
+  /**
+   * Compares two token arrays.
+   *
+   * @param {Token[]} [tokensA]
+   * @param {Token[]} [tokensB]
+   *
+   * @returns {number}
+   */
+  function compareTokens(tokensA, tokensB) {
+    return scoreTokens(tokensB) - scoreTokens(tokensA);
+  }
+
+  /**
+   * @param { Token[] } tokens
+   * @returns { number }
+   */
+  function scoreTokens(tokens) {
+    return tokens.reduce((sum, token) => sum + scoreToken(token), 0);
+  }
+
+  /**
+   * Score a token.
+   *
+   * @param { Token } token
+   *
+   * @returns { number }
+   */
+  function scoreToken(token) {
+    if (!token.match) {
+      return 0;
+    }
+
+    return token.start
+      ? 1.37
+      : token.wordStart
+        ? 1.13
+        : 1;
+  }
+
+  /**
+   * Compares two strings.
+   *
+   * @param {string} [a = '']
+   * @param {string} [b = '']
+   *
+   * @returns {number}
+   */
+  function compareStrings(a = '', b = '') {
+    return a.localeCompare(b);
+  }
+
+  /**
+   * Match a given string against a set of words,
+   * and return the result.
+   *
+   * @param {string} string
+   * @param {string[]} words
+   *
+   * @return { {
+   *   tokens: Token[],
+   *   matchedWords: Record<string, boolean>
+   * } }
+   */
+  function matchString(string, words) {
+
+    if (!string) {
+      return {
+        tokens: [],
+        matchedWords: {}
+      };
+    }
+
+    const tokens = [];
+    const matchedWords = {};
+
+    const regexpString = words.map(escapeRegexp).flatMap(str => [ '(?<wordStart>\\b' + str + ')', str ]).join('|');
+
+    const regexp = new RegExp(regexpString, 'ig');
+
+    let match;
+    let lastIndex = 0;
+
+    while ((match = regexp.exec(string))) {
+
+      const [ value ] = match;
+
+      if (match.index > lastIndex) {
+
+        // add previous token (NO match)
+        tokens.push({
+          value: string.slice(lastIndex, match.index),
+          index: lastIndex
+        });
+      }
+
+      // add current token (match)
+      tokens.push({
+        value,
+        index: match.index,
+        match: true,
+        wordStart: !!match.groups.wordStart,
+        start: match.index === 0
+      });
+
+      matchedWords[value.toLowerCase()] = true;
+
+      lastIndex = match.index + value.length;
+    }
+
+    // add after token (NO match)
+    if (lastIndex < string.length) {
+      tokens.push({
+        value: string.slice(lastIndex),
+        index: lastIndex
+      });
+    }
+
+    return {
+      tokens,
+      matchedWords
+    };
+  }
+
+  function escapeRegexp(string) {
+    return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var SearchModule$1 = {
+    search: [ 'value', search ]
+  };
+
   /**
    * @type { import('didi').ModuleDeclaration }
    */
   var PopupMenuModule$1 = {
+    __depends__: [ SearchModule$1 ],
     __init__: [ 'popupMenu' ],
     popupMenu: [ 'type', PopupMenu ]
   };
@@ -29089,7 +28949,7 @@
    * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default<Element>} ContextPadProvider
    */
 
-  var LOW_PRIORITY$m = 900;
+  var LOW_PRIORITY$n = 900;
 
   /**
    * A provider for the `Align elements` context pad entry.
@@ -29103,7 +28963,7 @@
    */
   function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {
 
-    contextPad.registerProvider(LOW_PRIORITY$m, this);
+    contextPad.registerProvider(LOW_PRIORITY$n, this);
 
     this._contextPad = contextPad;
     this._popupMenu = popupMenu;
@@ -29733,7 +29593,7 @@
    * @typedef {import('../modeling/Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$l = 100;
+  var LOW_PRIORITY$m = 100;
 
 
   /**
@@ -29746,7 +29606,7 @@
    */
   function AutoPlace$1(eventBus, modeling, canvas) {
 
-    eventBus.on('autoPlace', LOW_PRIORITY$l, function(context) {
+    eventBus.on('autoPlace', LOW_PRIORITY$m, function(context) {
       var shape = context.shape,
           source = context.source;
 
@@ -33830,7 +33690,7 @@
    */
 
   var HIGH_PRIORITY$h = 1100,
-      LOW_PRIORITY$k = 900;
+      LOW_PRIORITY$l = 900;
 
   var MARKER_OK$3 = 'connect-ok',
       MARKER_NOT_OK$3 = 'connect-not-ok';
@@ -33874,7 +33734,7 @@
       });
     });
 
-    eventBus.on('connect.hover', LOW_PRIORITY$k, function(event) {
+    eventBus.on('connect.hover', LOW_PRIORITY$l, function(event) {
       var context = event.context,
           hover = event.hover,
           canExecute = context.canExecute;
@@ -34355,12 +34215,10 @@
 
     if (gfx.childNodes) {
 
-      // TODO: use forEach once we drop PhantomJS
-      for (var i = 0; i < gfx.childNodes.length; i++) {
+      gfx.childNodes.forEach((childNode) => {
+        self._cloneMarkers(childNode, className, rootGfx);
+      });
 
-        // recursively clone markers of child nodes
-        self._cloneMarkers(gfx.childNodes[ i ], className, rootGfx);
-      }
     }
 
     if (!canHaveMarker(gfx)) {
@@ -34647,9 +34505,8 @@
   var ELEMENT_LABEL_DISTANCE = 10;
 
   /**
-   * A component that makes sure that external labels are added
-   * together with respective elements and properly updated (DI wise)
-   * during move.
+   * A behavior that ensures that labels are positioned in a way that they do not
+   * overlap with other elements or connections.
    *
    * @param {EventBus} eventBus
    * @param {Modeling} modeling
@@ -34710,6 +34567,10 @@
         return;
       }
 
+      if (isConnection$1(element)) {
+        return;
+      }
+
       var optimalPosition = getOptimalPosition(element);
 
       // no optimal position found
@@ -34970,7 +34831,7 @@
    * @typedef {import('didi').Injector} Injector
    */
 
-  var LOW_PRIORITY$j = 500;
+  var LOW_PRIORITY$k = 500;
 
 
   /**
@@ -34986,7 +34847,7 @@
 
     var self = this;
 
-    this.postExecuted('elements.create', LOW_PRIORITY$j, function(context) {
+    this.postExecuted('elements.create', LOW_PRIORITY$k, function(context) {
       var elements = context.elements;
 
       elements = elements.filter(function(shape) {
@@ -35009,7 +34870,7 @@
     }, true);
 
 
-    this.preExecute('elements.move', LOW_PRIORITY$j, function(context) {
+    this.preExecute('elements.move', LOW_PRIORITY$k, function(context) {
       var shapes = context.shapes,
           host = context.newHost;
 
@@ -36441,7 +36302,7 @@
    * @typedef {import('../../space-tool/BpmnSpaceTool').default} SpaceTool
    */
 
-  var LOW_PRIORITY$i = 500;
+  var LOW_PRIORITY$j = 500;
 
 
   /**
@@ -36554,7 +36415,7 @@
     /**
      * Adjust sizes of other lanes after lane deletion
      */
-    this.postExecuted('shape.delete', LOW_PRIORITY$i, function(event) {
+    this.postExecuted('shape.delete', LOW_PRIORITY$j, function(event) {
 
       var context = event.context,
           hints = context.hints,
@@ -36587,7 +36448,7 @@
    * @typedef {import('didi').Injector} Injector
    */
 
-  var LOW_PRIORITY$h = 500;
+  var LOW_PRIORITY$i = 500;
 
 
   /**
@@ -36603,7 +36464,7 @@
 
     var self = this;
 
-    this.postExecuted('elements.create', LOW_PRIORITY$h, function(context) {
+    this.postExecuted('elements.create', LOW_PRIORITY$i, function(context) {
       var elements = context.elements;
 
       elements.filter(function(shape) {
@@ -36617,7 +36478,7 @@
       });
     }, true);
 
-    this.preExecute('elements.move', LOW_PRIORITY$h, function(context) {
+    this.preExecute('elements.move', LOW_PRIORITY$i, function(context) {
       var shapes = context.shapes,
           newHost = context.newHost;
 
@@ -39661,14 +39522,11 @@
 
     if (/n/.test(resizeDirection)) {
       minTrbl.top = laneTrbl.bottom - minDimensions.height;
-    } else
-    if (/e/.test(resizeDirection)) {
+    } else if (/e/.test(resizeDirection)) {
       minTrbl.right = laneTrbl.left + minDimensions.width;
-    } else
-    if (/s/.test(resizeDirection)) {
+    } else if (/s/.test(resizeDirection)) {
       minTrbl.bottom = laneTrbl.top + minDimensions.height;
-    } else
-    if (/w/.test(resizeDirection)) {
+    } else if (/w/.test(resizeDirection)) {
       minTrbl.left = laneTrbl.right - minDimensions.width;
     }
 
@@ -39859,7 +39717,7 @@
    * @typedef {import('diagram-js/lib/util/Types').DirectionTRBL} DirectionTRBL
    */
 
-  var LOW_PRIORITY$g = 500;
+  var LOW_PRIORITY$h = 500;
 
 
   /**
@@ -39989,7 +39847,7 @@
       }
     });
 
-    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$g, function(context) {
+    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$h, function(context) {
       var descriptor = context.descriptor,
           businessObject = descriptor.businessObject,
           referencedRootElement = descriptor.referencedRootElement;
@@ -40234,7 +40092,7 @@
    * @typedef {import('../../../model/Types').ModdleElement} ModdleElement
    */
 
-  var LOW_PRIORITY$f = 400;
+  var LOW_PRIORITY$g = 400;
   var HIGH_PRIORITY$d = 600;
 
   var DEFAULT_POSITION = {
@@ -40487,7 +40345,7 @@
 
 
     // create/remove plane for the subprocess
-    this.executed('shape.toggleCollapse', LOW_PRIORITY$f, function(context) {
+    this.executed('shape.toggleCollapse', LOW_PRIORITY$g, function(context) {
       var shape = context.shape;
 
       if (!is$1(shape, 'bpmn:SubProcess')) {
@@ -40505,7 +40363,7 @@
 
 
     // create/remove plane for the subprocess
-    this.reverted('shape.toggleCollapse', LOW_PRIORITY$f, function(context) {
+    this.reverted('shape.toggleCollapse', LOW_PRIORITY$g, function(context) {
       var shape = context.shape;
 
       if (!is$1(shape, 'bpmn:SubProcess')) {
@@ -40952,7 +40810,7 @@
    * @typedef {import('../Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$e = 500;
+  var LOW_PRIORITY$f = 500;
 
   /**
    * @param {EventBus} eventBus
@@ -41013,7 +40871,7 @@
       };
     }
 
-    this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$e, function(e) {
+    this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$f, function(e) {
 
       var context = e.context,
           shape = context.shape;
@@ -41036,7 +40894,7 @@
       }
     });
 
-    this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$e, function(e) {
+    this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$f, function(e) {
 
       var context = e.context;
       var shape = context.shape;
@@ -41051,7 +40909,7 @@
       }
     });
 
-    this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$e, function(e) {
+    this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$f, function(e) {
       var shape = e.context.shape,
           defaultSize = elementFactory.getDefaultSize(shape),
           newBounds;
@@ -41206,7 +41064,7 @@
    * @typedef {import('../Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$d = 500,
+  var LOW_PRIORITY$e = 500,
       HIGH_PRIORITY$c = 5000;
 
 
@@ -41284,7 +41142,7 @@
       initContext();
     });
 
-    this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$d, function(event) {
+    this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$e, function(event) {
       releaseContext();
     });
 
@@ -43420,7 +43278,7 @@
    * @typedef {import('../../draw/Styles').default} Styles
    */
 
-  var LOW_PRIORITY$c = 750;
+  var LOW_PRIORITY$d = 750;
 
   /**
    * @param {Canvas} canvas
@@ -43471,7 +43329,7 @@
       return dragGroup;
     }
 
-    eventBus.on('create.move', LOW_PRIORITY$c, function(event) {
+    eventBus.on('create.move', LOW_PRIORITY$d, function(event) {
 
       var hover = event.hover,
           context = event.context,
@@ -44230,7 +44088,7 @@
     });
   }
 
-  var LOW_PRIORITY$b = 750;
+  var LOW_PRIORITY$c = 750;
 
   /**
    * BPMN-specific copy & paste.
@@ -44247,7 +44105,7 @@
       return moddleCopy.copyElement(bo, targetBo, null, clone);
     }
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$b, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$c, function(context) {
       var descriptor = context.descriptor,
           element = context.element,
           businessObject = getBusinessObject(element);
@@ -44344,7 +44202,7 @@
 
     // copy + paste processRef with participant
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$b, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$c, function(context) {
       var descriptor = context.descriptor,
           element = context.element;
 
@@ -44370,7 +44228,7 @@
 
     // resolve references
 
-    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$b, function(context) {
+    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$c, function(context) {
       var cache = context.cache,
           descriptor = context.descriptor;
 
@@ -45156,7 +45014,7 @@
    * @typedef {import('../../core/EventBus').Event} Event
    */
 
-  var LOW_PRIORITY$a = 250;
+  var LOW_PRIORITY$b = 250;
 
   /**
    * The tool manager acts as middle-man between the available tool's and the Palette,
@@ -45235,7 +45093,7 @@
       eventsToRegister.push(event + '.canceled');
     });
 
-    eventBus.on(eventsToRegister, LOW_PRIORITY$a, function(event) {
+    eventBus.on(eventsToRegister, LOW_PRIORITY$b, function(event) {
 
       // We defer the de-activation of the tool to the .activate phase,
       // so we're able to check if we want to toggle off the current
@@ -46025,7 +45883,7 @@
   var MARKER_DRAGGING$1 = 'djs-dragging',
       MARKER_RESIZING$1 = 'djs-resizing';
 
-  var LOW_PRIORITY$9 = 250;
+  var LOW_PRIORITY$a = 250;
 
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
@@ -46107,7 +45965,7 @@
     });
 
     // add and update move/resize previews
-    eventBus.on('spaceTool.move', LOW_PRIORITY$9, function(event) {
+    eventBus.on('spaceTool.move', LOW_PRIORITY$a, function(event) {
 
       var context = event.context,
           line = context.line,
@@ -46987,7 +46845,7 @@
     return collection;
   }
 
-  var LOW_PRIORITY$8 = 250,
+  var LOW_PRIORITY$9 = 250,
       HIGH_PRIORITY$8 = 1400;
 
   /**
@@ -47026,7 +46884,7 @@
     });
 
     // add labels to visual's group
-    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$8, function(e) {
+    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$9, function(e) {
 
       var context = e.context,
           shapes = context.shapes;
@@ -47169,7 +47027,7 @@
    * @typedef {import('../modeling/Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$7 = 251,
+  var LOW_PRIORITY$8 = 251,
       HIGH_PRIORITY$7 = 1401;
 
   var MARKER_ATTACH$1 = 'attach-ok';
@@ -47211,7 +47069,7 @@
     });
 
     // add attachers to the visual's group
-    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$7, function(e) {
+    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$8, function(e) {
 
       var context = e.context,
           shapes = context.shapes,
@@ -48214,17 +48072,13 @@
       }
 
       containment = 'lanes';
-    } else
-
-    if (is$1(businessObject, 'bpmn:FlowElement')) {
+    } else if (is$1(businessObject, 'bpmn:FlowElement')) {
 
       if (newParent) {
 
         if (is$1(newParent, 'bpmn:Participant')) {
           newParent = newParent.processRef;
-        } else
-
-        if (is$1(newParent, 'bpmn:Lane')) {
+        } else if (is$1(newParent, 'bpmn:Lane')) {
           do {
 
             // unwrap Lane -> LaneSet -> (Lane | FlowElementsContainer)
@@ -48236,9 +48090,7 @@
 
       containment = 'flowElements';
 
-    } else
-
-    if (is$1(businessObject, 'bpmn:Artifact')) {
+    } else if (is$1(businessObject, 'bpmn:Artifact')) {
 
       while (newParent &&
              !is$1(newParent, 'bpmn:Process') &&
@@ -48254,14 +48106,9 @@
       }
 
       containment = 'artifacts';
-    } else
-
-    if (is$1(businessObject, 'bpmn:MessageFlow')) {
+    } else if (is$1(businessObject, 'bpmn:MessageFlow')) {
       containment = 'messageFlows';
-
-    } else
-
-    if (is$1(businessObject, 'bpmn:Participant')) {
+    } else if (is$1(businessObject, 'bpmn:Participant')) {
       containment = 'participants';
 
       // make sure the participants process is properly attached / detached
@@ -48283,13 +48130,9 @@
           process.$parent = definitions;
         }
       }
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
       containment = 'dataOutputAssociations';
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
       containment = 'dataInputAssociations';
     }
 
@@ -48385,9 +48228,7 @@
 
         businessObject.targetRef = newTargetBo;
       }
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
 
       // handle obnoxious isMsome sourceRef
       businessObject.get('sourceRef')[0] = newSourceBo;
@@ -48395,9 +48236,7 @@
       visualParent = context.parent || context.newParent || newTargetBo;
 
       this.updateSemanticParent(businessObject, newTargetBo, visualParent);
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
       visualParent = context.parent || context.newParent || newSourceBo;
 
       this.updateSemanticParent(businessObject, newSourceBo, visualParent);
@@ -48614,8 +48453,7 @@
 
       if (elementType === 'root') {
         di = this._bpmnFactory.createDiPlane(businessObject, diAttrs);
-      } else
-      if (elementType === 'connection') {
+      } else if (elementType === 'connection') {
         di = this._bpmnFactory.createDiEdge(businessObject, diAttrs);
       } else {
         di = this._bpmnFactory.createDiShape(businessObject, diAttrs);
@@ -52088,15 +51926,13 @@
     if (isHorizontalLane) {
       if (location === 'left') {
         location = 'top';
-      } else
-      if (location === 'right') {
+      } else if (location === 'right') {
         location = 'bottom';
       }
     } else {
       if (location === 'top') {
         location = 'left';
-      } else
-      if (location === 'bottom') {
+      } else if (location === 'bottom') {
         location = 'right';
       }
     }
@@ -52157,22 +51993,19 @@
       spacePos = lanePosition + 10;
       direction = 'n';
       axis = 'y';
-    } else
-    if (location === 'left') {
+    } else if (location === 'left') {
       offset = -120;
       lanePosition = shape.x;
       spacePos = lanePosition + 10;
       direction = 'w';
       axis = 'x';
-    } else
-    if (location === 'bottom') {
+    } else if (location === 'bottom') {
       offset = 120;
       lanePosition = shape.y + shape.height;
       spacePos = lanePosition - 10;
       direction = 's';
       axis = 'y';
-    } else
-    if (location === 'right') {
+    } else if (location === 'right') {
       offset = 120;
       lanePosition = shape.x + shape.width;
       spacePos = lanePosition - 10;
@@ -55193,10 +55026,12 @@
    * to edit an elements text directly in the diagram
    *
    * @param {EventBus} eventBus the event bus
+   * @param {Canvas} canvas the canvas
    */
   function DirectEditing(eventBus, canvas) {
 
     this._eventBus = eventBus;
+    this._canvas = canvas;
 
     this._providers = [];
     this._textbox = new TextBox({
@@ -55260,6 +55095,9 @@
     this._active = null;
 
     this.resizable = undefined;
+
+    // restoreFocus API is available from diagram-js@15.0.0
+    this._canvas.restoreFocus && this._canvas.restoreFocus();
   };
 
 
@@ -56811,26 +56649,24 @@
     var self = this;
     var translate = this._translate;
 
-    function toggleLoopEntry(event, entry) {
-
-      // remove
+    function toggleLoopCharacteristics(event, entry) {
       if (entry.active) {
         self._modeling.updateProperties(target, { loopCharacteristics: undefined });
+
         return;
       }
 
-      const currentLoopCharacteristics = target.businessObject.get('loopCharacteristics'),
-            newLoopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
-
-      // copy old properties
-      if (currentLoopCharacteristics) {
-        self._moddleCopy.copyElement(currentLoopCharacteristics, newLoopCharacteristics);
-      }
+      var loopCharacteristics = target.businessObject.get('loopCharacteristics');
 
-      // update `isSequential` property
-      newLoopCharacteristics.set('isSequential', entry.options.isSequential);
+      if (loopCharacteristics && is$1(loopCharacteristics, entry.options.loopCharacteristics)) {
+        self._modeling.updateModdleProperties(target, loopCharacteristics, { isSequential: entry.options.isSequential });
+      } else {
+        loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics, {
+          isSequential: entry.options.isSequential
+        });
 
-      self._modeling.updateProperties(target, { loopCharacteristics: newLoopCharacteristics });
+        self._modeling.updateProperties(target, { loopCharacteristics: loopCharacteristics });
+      }
     }
 
     var businessObject = getBusinessObject(target),
@@ -56852,7 +56688,7 @@
         className: 'bpmn-icon-parallel-mi-marker',
         title: translate('Parallel multi-instance'),
         active: isParallel,
-        action: toggleLoopEntry,
+        action: toggleLoopCharacteristics,
         options: {
           loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
           isSequential: false
@@ -56862,7 +56698,7 @@
         className: 'bpmn-icon-sequential-mi-marker',
         title: translate('Sequential multi-instance'),
         active: isSequential,
-        action: toggleLoopEntry,
+        action: toggleLoopCharacteristics,
         options: {
           loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
           isSequential: true
@@ -56872,7 +56708,7 @@
         className: 'bpmn-icon-loop-marker',
         title: translate('Loop'),
         active: isLoop,
-        action: toggleLoopEntry,
+        action: toggleLoopCharacteristics,
         options: {
           loopCharacteristics: 'bpmn:StandardLoopCharacteristics'
         }
@@ -57409,9 +57245,7 @@
             { eventDefinitionType: 'bpmn:SignalEventDefinition' }
           )
         });
-      } else
-
-      if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
+      } else if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
 
         assign$1(actions, {
           'append.compensation-activity':
@@ -57424,9 +57258,7 @@
                 }
               )
         });
-      } else
-
-      if (!is$1(businessObject, 'bpmn:EndEvent') &&
+      } else if (!is$1(businessObject, 'bpmn:EndEvent') &&
           !businessObject.isForCompensation &&
           !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
           !isEventSubProcess(businessObject)) {
@@ -57906,7 +57738,7 @@
    * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuTarget} PopupMenuTarget
    */
 
-  var LOW_PRIORITY$6 = 900;
+  var LOW_PRIORITY$7 = 900;
 
   /**
    * A provider for the distribute elements popup menu.
@@ -57925,7 +57757,7 @@
     this._popupMenu = popupMenu;
     this._rules = rules;
 
-    popupMenu.registerProvider('align-elements', LOW_PRIORITY$6, this);
+    popupMenu.registerProvider('align-elements', LOW_PRIORITY$7, this);
   }
 
   DistributeElementsMenuProvider.$inject = [
@@ -58498,7 +58330,7 @@
    */
 
   var LOWER_PRIORITY = 1200;
-  var LOW_PRIORITY$5 = 800;
+  var LOW_PRIORITY$6 = 800;
 
   /**
    * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
@@ -58516,7 +58348,7 @@
 
     var self = this;
 
-    eventBus.on('diagram.init', LOW_PRIORITY$5, function() {
+    eventBus.on('diagram.init', LOW_PRIORITY$6, function() {
       self.setActive(active);
     });
 
@@ -59400,17 +59232,13 @@
 
       if (is$1(element, 'bpmn:Lane')) {
         return self._createParticipantHit(element, gfx);
-      } else
-
-      if (is$1(element, 'bpmn:Participant')) {
+      } else if (is$1(element, 'bpmn:Participant')) {
         if (isExpanded(element)) {
           return self._createParticipantHit(element, gfx);
         } else {
           return self._createDefaultHit(element, gfx);
         }
-      } else
-
-      if (is$1(element, 'bpmn:SubProcess')) {
+      } else if (is$1(element, 'bpmn:SubProcess')) {
         if (isExpanded(element)) {
           return self._createSubProcessHit(element, gfx);
         } else {
@@ -60149,7 +59977,7 @@
   var MARKER_RESIZING = 'djs-resizing',
       MARKER_RESIZE_NOT_OK = 'resize-not-ok';
 
-  var LOW_PRIORITY$4 = 500;
+  var LOW_PRIORITY$5 = 500;
 
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
@@ -60215,7 +60043,7 @@
     }
 
     // add and update previews
-    eventBus.on('resize.move', LOW_PRIORITY$4, function(event) {
+    eventBus.on('resize.move', LOW_PRIORITY$5, function(event) {
       updateFrame(event.context);
     });
 
@@ -61520,6 +61348,285 @@
     modelingFeedback: [ 'type', ModelingFeedback ]
   };
 
+  var LOW_PRIORITY$4 = 500;
+
+  var DEFAULT_PRIORITY$2 = 1000;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('./OutlineProvider').default} OutlineProvider
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../draw/Styles').default} Styles
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Styles} styles
+   */
+  function Outline(eventBus, styles) {
+
+    this._eventBus = eventBus;
+
+    this.offset = 5;
+
+    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
+
+    var self = this;
+
+    /**
+     * @param {SVGElement} gfx
+     *
+     * @return {SVGElement} outline
+     */
+    function createOutline(gfx) {
+      var outline = create$1('rect');
+
+      attr(outline, assign$1({
+        x: 0,
+        y: 0,
+        rx: 4,
+        width: 100,
+        height: 100
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
+    // A low priortity is necessary, because outlines of labels have to be updated
+    // after the label bounds have been updated in the renderer.
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$4, function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = self.getOutline(element) || createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateShapeOutline(outline, element);
+    });
+
+    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateConnectionOutline(outline, element);
+    });
+  }
+
+
+  /**
+   * Updates the outline of a shape respecting the dimension of the
+   * element and an outline offset.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} element
+   */
+  Outline.prototype.updateShapeOutline = function(outline, element) {
+
+    var updated = false;
+    var providers = this._getProviders();
+
+    if (providers.length) {
+      forEach$1(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
+
+    if (!updated) {
+      attr(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
+
+  /**
+   * Updates the outline of a connection respecting the bounding box of
+   * the connection and an outline offset.
+   * Register an outline provider with the given priority.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} connection
+   */
+  Outline.prototype.updateConnectionOutline = function(outline, connection) {
+    var bbox = getBBox(connection);
+
+    attr(outline, {
+      x: bbox.x - this.offset,
+      y: bbox.y - this.offset,
+      width: bbox.width + this.offset * 2,
+      height: bbox.height + this.offset * 2
+    });
+  };
+
+  /**
+   * Register an outline provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$2;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
+
+    return event.providers;
+  };
+
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   */
+  Outline.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$1(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
+
+  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
+
+  var SELECTION_OUTLINE_PADDING = 6;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../selection/Selection').default} Selection
+   * @typedef {import('../../core/Canvas').default} Canvas
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {Selection} selection
+   */
+  function MultiSelectionOutline(eventBus, canvas, selection) {
+    this._canvas = canvas;
+
+    var self = this;
+
+    eventBus.on('element.changed', function(event) {
+      if (selection.isSelected(event.element)) {
+        self._updateMultiSelectionOutline(selection.get());
+      }
+    });
+
+    eventBus.on('selection.changed', function(event) {
+      var newSelection = event.newSelection;
+
+      self._updateMultiSelectionOutline(newSelection);
+    });
+  }
+
+
+
+  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
+    var layer = this._canvas.getLayer('selectionOutline');
+
+    clear(layer);
+
+    var enabled = selection.length > 1;
+
+    var container = this._canvas.getContainer();
+
+    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+
+    if (!enabled) {
+      return;
+    }
+
+    var bBox = addSelectionOutlinePadding(getBBox(selection));
+
+    var rect = create$1('rect');
+
+    attr(rect, assign$1({
+      rx: 3
+    }, bBox));
+
+    classes(rect).add('djs-selection-outline');
+
+    append(layer, rect);
+  };
+
+
+  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
+
+  // helpers //////////
+
+  function addSelectionOutlinePadding(bBox) {
+    return {
+      x: bBox.x - SELECTION_OUTLINE_PADDING,
+      y: bBox.y - SELECTION_OUTLINE_PADDING,
+      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
+      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
+    };
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var Ouline = {
+    __depends__: [
+      SelectionModule
+    ],
+    __init__: [ 'outline', 'multiSelectionOutline' ],
+    outline: [ 'type', Outline ],
+    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
+  };
+
   /**
    * @typedef {import('../../core/Types').ElementLike} Element
    * @typedef {import('../../core/Types').ShapeLike} Shape
@@ -62022,7 +62129,7 @@
     __depends__: [
       InteractionEventsModule$1,
       SelectionModule,
-      OutlineModule$1,
+      Ouline,
       RulesModule$1,
       DraggingModule,
       PreviewSupportModule
@@ -64962,7 +65069,6 @@
     });
 
     if (!searchResults.length) {
-      this._clearMarkers();
       this._selection.select(null);
 
       return;
@@ -65039,16 +65145,6 @@
   };
 
 
-  /**
-   * Clears all markers.
-   */
-  SearchPad.prototype._clearMarkers = function() {
-    for (var id in this._results) {
-      this._canvas.removeMarker(this._results[id].element, 'djs-search-preselected');
-    }
-  };
-
-
   /**
    * Get currently selected result.
    *
@@ -65117,6 +65213,8 @@
     this._cachedSelection = this._selection.get();
     this._cachedViewbox = this._canvas.viewbox();
 
+    this._selection.select(null);
+
     this._bindEvents();
 
     this._open = true;
@@ -65165,14 +65263,14 @@
     classes$1(this._canvas.getContainer()).remove('djs-search-open');
     classes$1(this._container).remove('open');
 
-    this._clearMarkers();
-
     this._clearResults();
 
     this._searchInput.value = '';
     this._searchInput.blur();
 
     this._eventBus.fire('searchPad.closed');
+
+    this._canvas.restoreFocus();
   };
 
 
@@ -65205,8 +65303,6 @@
       return;
     }
 
-    this._clearMarkers();
-
     // removing preselection from current node
     if (selectedNode) {
       classes$1(selectedNode).remove(SearchPad.RESULT_SELECTED_CLASS);
@@ -65223,8 +65319,6 @@
 
     this._selection.select(element);
 
-    this._canvas.addMarker(element, 'djs-search-preselected');
-
     this._eventBus.fire('searchPad.preselected', element);
   };
 
@@ -65291,10 +65385,13 @@
     var htmlText = '';
 
     tokens.forEach(function(t) {
-      if (t.matched) {
-        htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</b>';
+      var text = escapeHTML(t.value || t.matched || t.normal);
+      var match = t.match || t.matched;
+
+      if (match) {
+        htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + text + '</b>';
       } else {
-        htmlText += escapeHTML(t.normal);
+        htmlText += text;
       }
     });
 
@@ -65352,7 +65449,11 @@
    * @typedef {import('diagram-js/lib/features/search-pad/SearchPad').default} SearchPad
    *
    * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').default} SearchPadProvider
-   * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').SearchResult} SearchResult
+   * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').SearchResult} SearchPadResult
+   * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').Token} SearchPadToken
+   * @typedef {import('diagram-js/lib/features/search/search').default} Search
+   * @typedef {import('diagram-js/lib/features/search/search').SearchResult} SearchResult
+   * @typedef {import('diagram-js/lib/features/search/search').Token} SearchToken
    */
 
   /**
@@ -65363,10 +65464,12 @@
    * @param {ElementRegistry} elementRegistry
    * @param {SearchPad} searchPad
    * @param {Canvas} canvas
+   * @param {Search} search
    */
-  function BpmnSearchProvider(elementRegistry, searchPad, canvas) {
+  function BpmnSearchProvider(elementRegistry, searchPad, canvas, search) {
     this._elementRegistry = elementRegistry;
     this._canvas = canvas;
+    this._search = search;
 
     searchPad.registerProvider(this);
   }
@@ -65374,13 +65477,14 @@
   BpmnSearchProvider.$inject = [
     'elementRegistry',
     'searchPad',
-    'canvas'
+    'canvas',
+    'search'
   ];
 
   /**
    * @param {string} pattern
    *
-   * @return {SearchResult[]}
+   * @return {SearchPadResult[]}
    */
   BpmnSearchProvider.prototype.find = function(pattern) {
     var rootElements = this._canvas.getRootElements();
@@ -65389,167 +65493,261 @@
       return !isLabel(element) && !rootElements.includes(element);
     });
 
-    return elements
-      .reduce(function(results, element) {
-        var label = getLabel(element);
-
-        var primaryTokens = findMatches(label, pattern),
-            secondaryTokens = findMatches(element.id, pattern);
-
-        if (hasMatch(primaryTokens) || hasMatch(secondaryTokens)) {
-          return [
-            ...results,
-            {
-              primaryTokens,
-              secondaryTokens,
-              element
-            }
-          ];
-        }
-
-        return results;
-      }, [])
-      .sort(function(a, b) {
-        return compareTokens(a.primaryTokens, b.primaryTokens)
-          || compareTokens(a.secondaryTokens, b.secondaryTokens)
-          || compareStrings(getLabel(a.element), getLabel(b.element))
-          || compareStrings(a.element.id, b.element.id);
-      })
-      .map(function(result) {
+    return this._search(
+      elements.map(element => {
         return {
-          element: result.element,
-          primaryTokens: result.primaryTokens.map(function(token) {
-            return omit(token, [ 'index' ]);
-          }),
-          secondaryTokens: result.secondaryTokens.map(function(token) {
-            return omit(token, [ 'index' ]);
-          })
+          element,
+          label: getLabel(element),
+          id: element.id
         };
-      });
+      }),
+      pattern, {
+        keys: [
+          'label',
+          'id'
+        ]
+      }
+    ).map(toSearchPadResult);
   };
 
   /**
-   * @param {Token} token
+   * @param {SearchResult} token
    *
-   * @return {boolean}
+   * @return {SearchPadResult}
    */
-  function isMatch(token) {
-    return 'matched' in token;
+  function toSearchPadResult(result) {
+
+    const {
+      item: {
+        element
+      },
+      tokens
+    } = result;
+
+    return {
+      element,
+      primaryTokens: tokens.label,
+      secondaryTokens: tokens.id
+    };
   }
 
+  var SearchModule = {
+    __depends__: [
+      SearchPadModule,
+      SearchModule$1
+    ],
+    __init__: [ 'bpmnSearch' ],
+    bpmnSearch: [ 'type', BpmnSearchProvider ]
+  };
+
+  const DATA_OBJECT_REFERENCE_OUTLINE_PATH = 'M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z';
+  const DATA_STORE_REFERENCE_OUTLINE_PATH = 'M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z';
+
   /**
-   * @param {Token[]} tokens
+   * @typedef { import('diagram-js/lib/util/Types').Dimensions} Dimensions
+   */
+
+  /**
+   * @type {Dimensions}
+   */
+  const DATA_OBJECT_REFERENCE_STANDARD_SIZE = { width: 36, height: 50 };
+
+  /**
+   * @type {Dimensions}
+   */
+  const DATA_STORE_REFERENCE_STANDARD_SIZE = { width: 50, height: 50 };
+
+  /**
+   * Create a path element with given attributes.
+   * @param {string} path
+   * @param {Object} attrs
+   * @param {Object} OUTLINE_STYLE
+   * @return {SVGElement}
+   */
+  function createPath(path, attrs, OUTLINE_STYLE) {
+    return create$1('path', {
+      d: path,
+      strokeWidth: 2,
+      transform: `translate(${attrs.x}, ${attrs.y})`,
+      ...OUTLINE_STYLE
+    });
+  }
+
+  /**
+   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').default } BaseOutlineProvider
    *
-   * @return {boolean}
+   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').Outline } Outline
+   *
+   * @typedef { import('diagram-js/lib/draw/Styles').default } Styles
+   *
+   * @typedef { import('diagram-js/lib/model/Types').Element } Element
+   */
+
+  const DEFAULT_OFFSET = 5;
+
+  /**
+   * BPMN-specific outline provider.
+   *
+   * @implements {BaseOutlineProvider}
+   *
+   * @param {Outline} outline
+   * @param {Styles} styles
    */
-  function hasMatch(tokens) {
-    return tokens.find(isMatch);
+  function OutlineProvider(outline, styles) {
+
+    this._styles = styles;
+    outline.registerProvider(this);
   }
 
+  OutlineProvider.$inject = [
+    'outline',
+    'styles'
+  ];
+
   /**
-   * Compares two token arrays.
+   * Returns outline for a given element.
    *
-   * @param {Token[]} tokensA
-   * @param {Token[]} tokensB
+   * @param {Element} element
    *
-   * @returns {number}
+   * @return {Outline}
    */
-  function compareTokens(tokensA, tokensB) {
-    const tokensAHasMatch = hasMatch(tokensA),
-          tokensBHasMatch = hasMatch(tokensB);
+  OutlineProvider.prototype.getOutline = function(element) {
 
-    if (tokensAHasMatch && !tokensBHasMatch) {
-      return -1;
-    }
+    const OUTLINE_STYLE = this._styles.cls('djs-outline', [ 'no-fill' ]);
 
-    if (!tokensAHasMatch && tokensBHasMatch) {
-      return 1;
-    }
+    var outline;
 
-    if (!tokensAHasMatch && !tokensBHasMatch) {
-      return 0;
+    if (isLabel(element)) {
+      return;
     }
 
-    const tokensAFirstMatch = tokensA.find(isMatch),
-          tokensBFirstMatch = tokensB.find(isMatch);
+    if (is$1(element, 'bpmn:Gateway')) {
+      outline = create$1('rect');
 
-    if (tokensAFirstMatch.index < tokensBFirstMatch.index) {
-      return -1;
-    }
+      assign$1(outline.style, {
+        'transform-box': 'fill-box',
+        'transform': 'rotate(45deg)',
+        'transform-origin': 'center'
+      });
 
-    if (tokensAFirstMatch.index > tokensBFirstMatch.index) {
-      return 1;
+      attr(outline, assign$1({
+        x: 2,
+        y: 2,
+        rx: 4,
+        width: element.width - 4,
+        height: element.height - 4,
+      }, OUTLINE_STYLE));
+
+    } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group', 'bpmn:CallActivity' ])) {
+      outline = create$1('rect');
+
+      attr(outline, assign$1({
+        x: -DEFAULT_OFFSET,
+        y: -DEFAULT_OFFSET,
+        rx: 14,
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      }, OUTLINE_STYLE));
+
+    } else if (is$1(element, 'bpmn:EndEvent')) {
+
+      outline = create$1('circle');
+
+      // Extra 1px offset needed due to increased stroke-width of end event
+      // which makes it bigger than other events.
+
+      attr(outline, assign$1({
+        cx: element.width / 2,
+        cy: element.height / 2,
+        r: element.width / 2 + DEFAULT_OFFSET + 1
+      }, OUTLINE_STYLE));
+
+    } else if (is$1(element, 'bpmn:Event')) {
+      outline = create$1('circle');
+
+      attr(outline, assign$1({
+        cx: element.width / 2,
+        cy: element.height / 2,
+        r: element.width / 2 + DEFAULT_OFFSET
+      }, OUTLINE_STYLE));
+
+    } else if (is$1(element, 'bpmn:DataObjectReference') && isStandardSize(element, 'bpmn:DataObjectReference')) {
+
+      outline = createPath(
+        DATA_OBJECT_REFERENCE_OUTLINE_PATH,
+        { x: -6, y: -6 },
+        OUTLINE_STYLE
+      );
+
+    } else if (is$1(element, 'bpmn:DataStoreReference') && isStandardSize(element, 'bpmn:DataStoreReference')) {
+
+      outline = createPath(
+        DATA_STORE_REFERENCE_OUTLINE_PATH,
+        { x: -6, y: -6 },
+        OUTLINE_STYLE
+      );
     }
 
-    return 0;
-  }
+    return outline;
+  };
 
   /**
-   * Compares two strings.
-   *
-   * @param {string} [a]
-   * @param {string} [b]
+   * Updates the outline for a given element.
+   * Returns true if the update for the given element was handled by this provider.
    *
-   * @returns {number}
+   * @param {Element} element
+   * @param {Outline} outline
+   * @returns {boolean}
    */
-  function compareStrings(a = '', b = '') {
-    return a.localeCompare(b);
-  }
+  OutlineProvider.prototype.updateOutline = function(element, outline) {
 
-  /**
-   * @param {string} text
-   * @param {string} pattern
-   *
-   * @return {Token[]}
-   */
-  function findMatches(text, pattern) {
-    var tokens = [],
-        originalText = text;
+    if (isLabel(element)) {
+      return;
+    }
 
-    if (!text) {
-      return tokens;
+    if (isAny(element, [ 'bpmn:SubProcess', 'bpmn:Group' ])) {
+
+      attr(outline, {
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      });
+
+      return true;
+
+    } else if (isAny(element, [
+      'bpmn:Event',
+      'bpmn:Gateway',
+      'bpmn:DataStoreReference',
+      'bpmn:DataObjectReference'
+    ])) {
+      return true;
     }
 
-    text = text.toLowerCase();
-    pattern = pattern.toLowerCase();
+    return false;
+  };
 
-    var index = text.indexOf(pattern);
 
-    if (index > -1) {
-      if (index !== 0) {
-        tokens.push({
-          normal: originalText.slice(0, index),
-          index: 0
-        });
-      }
+  // helpers //////////
 
-      tokens.push({
-        matched: originalText.slice(index, index + pattern.length),
-        index: index
-      });
+  function isStandardSize(element, type) {
+    var standardSize;
 
-      if (pattern.length + index < text.length) {
-        tokens.push({
-          normal: originalText.slice(index + pattern.length),
-          index: index + pattern.length
-        });
-      }
-    } else {
-      tokens.push({
-        normal: originalText,
-        index: 0
-      });
+    if (type === 'bpmn:DataObjectReference') {
+      standardSize = DATA_OBJECT_REFERENCE_STANDARD_SIZE;
+    } else if (type === 'bpmn:DataStoreReference') {
+      standardSize = DATA_STORE_REFERENCE_STANDARD_SIZE;
     }
 
-    return tokens;
+    return element.width === standardSize.width
+            && element.height === standardSize.height;
   }
 
-  var SearchModule = {
+  var OutlineModule = {
     __depends__: [
-      SearchPadModule
+      Ouline
     ],
-    __init__: [ 'bpmnSearch' ],
-    bpmnSearch: [ 'type', BpmnSearchProvider ]
+    __init__: [ 'outlineProvider' ],
+    outlineProvider: [ 'type', OutlineProvider ]
   };
 
   var initialDiagram =
@@ -65704,7 +65902,8 @@
     ReplacePreviewModule,
     ResizeModule,
     SnappingModule,
-    SearchModule
+    SearchModule,
+    OutlineModule
   ];
 
 
@@ -98283,6 +98482,21 @@
     width: "16",
     height: "16"
   };
+  var CloseIcon = function CloseIcon(props) {
+    return u("svg", {
+      ...props,
+      children: u("path", {
+        fillRule: "evenodd",
+        d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+        fill: "currentColor"
+      })
+    });
+  };
+  CloseIcon.defaultProps = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16"
+  };
   var DragIcon = function DragIcon(props) {
     return u("svg", {
       ...props,
@@ -98327,26 +98541,17 @@
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  var HelpIcon = function HelpIcon(props) {
+  var LaunchIcon = function LaunchIcon(props) {
     return u("svg", {
       ...props,
       children: [u("path", {
-        d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
-      }), u("circle", {
-        cx: "16",
-        cy: "23.5",
-        r: "1.5"
+        d: "M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2Z"
       }), u("path", {
-        d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
-      }), u("path", {
-        style: {
-          fill: "none"
-        },
-        d: "M0 0h32v32H0z"
+        d: "M20 2v2h6.586L18 12.586 19.414 14 28 5.414V12h2V2H20z"
       })]
     });
   };
-  HelpIcon.defaultProps = {
+  LaunchIcon.defaultProps = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32"
   };
@@ -98368,21 +98573,6 @@
     height: "16",
     viewBox: "0 0 32 32"
   };
-  var CloseIcon = function CloseIcon(props) {
-    return u("svg", {
-      ...props,
-      children: u("path", {
-        fillRule: "evenodd",
-        d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
-        fill: "currentColor"
-      })
-    });
-  };
-  CloseIcon.defaultProps = {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16"
-  };
 
   function Header(props) {
     const {
@@ -98422,7 +98612,7 @@
       }), u("div", {
         class: "bio-properties-panel-header-actions",
         children: documentationRef ? u("a", {
-          rel: "noopener",
+          rel: "noreferrer",
           class: "bio-properties-panel-header-link",
           href: documentationRef,
           title: "Open documentation",
@@ -98442,19 +98632,19 @@
     errors: {}
   });
 
-  /**
-   * @typedef {Function} <propertiesPanel.showEntry> callback
-   *
-   * @example
-   *
-   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
-   *   // ...
-   * });
-   *
-   * @param {Object} context
-   * @param {boolean} [context.focus]
-   *
-   * @returns void
+  /**
+   * @typedef {Function} <propertiesPanel.showEntry> callback
+   *
+   * @example
+   *
+   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+   *   // ...
+   * });
+   *
+   * @param {Object} context
+   * @param {boolean} [context.focus]
+   *
+   * @returns void
    */
 
   const EventContext = F$2({
@@ -98473,20 +98663,20 @@
     getTooltipForId: () => {}
   });
 
-  /**
-   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const tooltip = useTooltipContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const tooltip = useTooltipContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useTooltipContext(id, element) {
     const {
@@ -98639,20 +98829,20 @@
     return `bio-properties-panel-${id}`;
   }
 
-  /**
-   * Accesses the global DescriptionContext and returns a description for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const description = useDescriptionContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global DescriptionContext and returns a description for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const description = useDescriptionContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useDescriptionContext(id, element) {
     const {
@@ -98674,11 +98864,11 @@
     return errors;
   }
 
-  /**
-   * Subscribe to an event immediately. Update subscription after inputs changed.
-   *
-   * @param {string} event
-   * @param {Function} callback
+  /**
+   * Subscribe to an event immediately. Update subscription after inputs changed.
+   *
+   * @param {string} event
+   * @param {Function} callback
    */
   function useEvent(event, callback, eventBus) {
     const eventContext = q$1(EventContext);
@@ -98708,20 +98898,20 @@
     }, [callback, event, eventBus]);
   }
 
-  /**
-   * Creates a state that persists in the global LayoutContext.
-   *
-   * @example
-   * ```jsx
-   * function Group(props) {
-   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
-   * }
-   * ```
-   *
-   * @param {(string|number)[]} path
-   * @param {any} [defaultValue]
-   *
-   * @returns {[ any, Function ]}
+  /**
+   * Creates a state that persists in the global LayoutContext.
+   *
+   * @example
+   * ```jsx
+   * function Group(props) {
+   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+   * }
+   * ```
+   *
+   * @param {(string|number)[]} path
+   * @param {any} [defaultValue]
+   *
+   * @returns {[ any, Function ]}
    */
   function useLayoutState(path, defaultValue) {
     const {
@@ -98735,11 +98925,11 @@
     return [layoutForKey, setState];
   }
 
-  /**
-   * @pinussilvestrus: we need to introduce our own hook to persist the previous
-   * state on updates.
-   *
-   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+  /**
+   * @pinussilvestrus: we need to introduce our own hook to persist the previous
+   * state on updates.
+   *
+   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
    */
 
   function usePrevious(value) {
@@ -98750,12 +98940,12 @@
     return ref.current;
   }
 
-  /**
-   * Subscribe to `propertiesPanel.showEntry`.
-   *
-   * @param {string} id
-   *
-   * @returns {import('preact').Ref}
+  /**
+   * Subscribe to `propertiesPanel.showEntry`.
+   *
+   * @param {string} id
+   *
+   * @returns {import('preact').Ref}
    */
   function useShowEntryEvent(id) {
     const {
@@ -98786,20 +98976,20 @@
     return ref;
   }
 
-  /**
-   * @callback setSticky
-   * @param {boolean} value
+  /**
+   * @callback setSticky
+   * @param {boolean} value
    */
 
-  /**
-   * Use IntersectionObserver to identify when DOM element is in sticky mode.
-   * If sticky is observered setSticky(true) will be called.
-   * If sticky mode is left, setSticky(false) will be called.
-   *
-   *
-   * @param {Object} ref
-   * @param {string} scrollContainerSelector
-   * @param {setSticky} setSticky
+  /**
+   * Use IntersectionObserver to identify when DOM element is in sticky mode.
+   * If sticky is observered setSticky(true) will be called.
+   * If sticky mode is left, setSticky(false) will be called.
+   *
+   *
+   * @param {Object} ref
+   * @param {string} scrollContainerSelector
+   * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
     const [scrollContainer, setScrollContainer] = h(query(scrollContainerSelector));
@@ -98853,19 +99043,19 @@
     }, [ref.current, scrollContainer, setSticky]);
   }
 
-  /**
-   * Creates a static function reference with changing body.
-   * This is necessary when external libraries require a callback function
-   * that has references to state variables.
-   *
-   * Usage:
-   * const callback = useStaticCallback((val) => {val === currentState});
-   *
-   * The `callback` reference is static and can be safely used in external
-   * libraries or as a prop that does not cause rerendering of children.
-   *
-   * @param {Function} callback function with changing reference
-   * @returns {Function} static function reference
+  /**
+   * Creates a static function reference with changing body.
+   * This is necessary when external libraries require a callback function
+   * that has references to state variables.
+   *
+   * Usage:
+   * const callback = useStaticCallback((val) => {val === currentState});
+   *
+   * The `callback` reference is static and can be safely used in external
+   * libraries or as a prop that does not cause rerendering of children.
+   *
+   * @param {Function} callback function with changing reference
+   * @returns {Function} static function reference
    */
   function useStaticCallback(callback) {
     const callbackRef = _(callback);
@@ -99008,13 +99198,13 @@
     return null;
   }
 
-  /**
-   * @typedef { {
-   *  text: (element: object) => string,
-   *  icon?: (element: Object) => import('preact').Component
-   * } } PlaceholderDefinition
-   *
-   * @param { PlaceholderDefinition } props
+  /**
+   * @typedef { {
+   *  text: (element: object) => string,
+   *  icon?: (element: Object) => import('preact').Component
+   * } } PlaceholderDefinition
+   *
+   * @param { PlaceholderDefinition } props
    */
   function Placeholder(props) {
     const {
@@ -99053,9 +99243,9 @@
 
   const noop$6 = () => {};
 
-  /**
-   * Buffer `.focus()` calls while the editor is not initialized.
-   * Set Focus inside when the editor is ready.
+  /**
+   * Buffer `.focus()` calls while the editor is not initialized.
+   * Set Focus inside when the editor is ready.
    */
   const useBufferedFocus$1 = function (editor, ref) {
     const [buffer, setBuffer] = h(undefined);
@@ -99156,9 +99346,9 @@
 
   const noop$5 = () => {};
 
-  /**
-   * Buffer `.focus()` calls while the editor is not initialized.
-   * Set Focus inside when the editor is ready.
+  /**
+   * Buffer `.focus()` calls while the editor is not initialized.
+   * Set Focus inside when the editor is ready.
    */
   const useBufferedFocus = function (editor, ref) {
     const [buffer, setBuffer] = h(undefined);
@@ -99207,10 +99397,10 @@
     p(() => {
       let editor;
 
-      /* Trigger FEEL toggle when
-       *
-       * - `backspace` is pressed
-       * - AND the cursor is at the beginning of the input
+      /* Trigger FEEL toggle when
+       *
+       * - `backspace` is pressed
+       * - AND the cursor is at the beginning of the input
        */
       const onKeyDown = e => {
         if (e.key !== 'Backspace' || !editor) {
@@ -99292,22 +99482,22 @@
     source: null
   });
 
-  /**
-   * Add a dragger that calls back the passed function with
-   * { event, delta } on drag.
-   *
-   * @example
-   *
-   * function dragMove(event, delta) {
-   *   // we are dragging (!!)
-   * }
-   *
-   * domElement.addEventListener('dragstart', dragger(dragMove));
-   *
-   * @param {Function} fn
-   * @param {Element} [dragPreview]
-   *
-   * @return {Function} drag start callback function
+  /**
+   * Add a dragger that calls back the passed function with
+   * { event, delta } on drag.
+   *
+   * @example
+   *
+   * function dragMove(event, delta) {
+   *   // we are dragging (!!)
+   * }
+   *
+   * domElement.addEventListener('dragstart', dragger(dragMove));
+   *
+   * @param {Function} fn
+   * @param {Element} [dragPreview]
+   *
+   * @return {Function} drag start callback function
    */
   function createDragger(fn, dragPreview) {
     let self;
@@ -99362,23 +99552,23 @@
 
   const noop$3 = () => {};
 
-  /**
-   * A generic popup component.
-   *
-   * @param {Object} props
-   * @param {HTMLElement} [props.container]
-   * @param {string} [props.className]
-   * @param {boolean} [props.delayInitialFocus]
-   * @param {{x: number, y: number}} [props.position]
-   * @param {number} [props.width]
-   * @param {number} [props.height]
-   * @param {Function} props.onClose
-   * @param {Function} [props.onPostActivate]
-   * @param {Function} [props.onPostDeactivate]
-   * @param {boolean} [props.returnFocus]
-   * @param {boolean} [props.closeOnEscape]
-   * @param {string} props.title
-   * @param {Ref} [ref]
+  /**
+   * A generic popup component.
+   *
+   * @param {Object} props
+   * @param {HTMLElement} [props.container]
+   * @param {string} [props.className]
+   * @param {boolean} [props.delayInitialFocus]
+   * @param {{x: number, y: number}} [props.position]
+   * @param {number} [props.width]
+   * @param {number} [props.height]
+   * @param {Function} props.onClose
+   * @param {Function} [props.onPostActivate]
+   * @param {Function} [props.onPostDeactivate]
+   * @param {boolean} [props.returnFocus]
+   * @param {boolean} [props.closeOnEscape]
+   * @param {string} props.title
+   * @param {Ref} [ref]
    */
   function PopupComponent(props, globalRef) {
     const {
@@ -99597,12 +99787,12 @@
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
-  /**
-   * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
-   *  - `feelPopup.open` - fired before the popup is mounted
-   *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
-   *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
-   *  - `feelPopup.closed` - fired after the popup is unmounted
+  /**
+   * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
+   *  - `feelPopup.open` - fired before the popup is mounted
+   *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.closed` - fired after the popup is unmounted
    */
   function FEELPopupRoot(props) {
     const {
@@ -99612,7 +99802,8 @@
         on() {},
         off() {}
       },
-      popupContainer
+      popupContainer,
+      getPopupLinks = () => []
     } = props;
     const prevElement = usePrevious(element);
     const [popupConfig, setPopupConfig] = h({});
@@ -99687,6 +99878,7 @@
       children: [open && u(FeelPopupComponent, {
         onClose: handleClose,
         container: popupContainer,
+        getLinks: getPopupLinks,
         sourceElement: sourceElement,
         emit: emit,
         ...popupConfig
@@ -99696,6 +99888,7 @@
   function FeelPopupComponent(props) {
     const {
       container,
+      getLinks,
       id,
       hostLanguage,
       onInput,
@@ -99772,17 +99965,17 @@
         closeButtonTooltip: "Save and close",
         onClose: onClose,
         draggable: true,
-        children: [type === 'feel' && u("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
-          target: "_blank",
-          class: "bio-properties-panel-feel-popup__title-link",
-          children: ["Learn FEEL expressions", u(HelpIcon, {})]
-        }), type === 'feelers' && u("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
-          target: "_blank",
-          class: "bio-properties-panel-feel-popup__title-link",
-          children: ["Learn templating", u(HelpIcon, {})]
-        })]
+        children: u(g$2, {
+          children: getLinks(type).map((link, index) => {
+            return u("a", {
+              rel: "noreferrer",
+              href: link.href,
+              target: "_blank",
+              class: "bio-properties-panel-feel-popup__title-link",
+              children: [link.title, u(LaunchIcon, {})]
+            }, index);
+          })
+        })
       }), u(Popup.Body, {
         children: u("div", {
           onKeyDownCapture: onKeyDownCapture,
@@ -99825,11 +100018,11 @@
     return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
   }
 
-  /**
-   * This hook behaves like useEffect, but does not trigger on the first render.
-   *
-   * @param {Function} effect
-   * @param {Array} deps
+  /**
+   * This hook behaves like useEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
    */
   function useUpdateEffect(effect, deps) {
     const isMounted = _(false);
@@ -100194,84 +100387,85 @@
   const DEFAULT_DESCRIPTION = {};
   const DEFAULT_TOOLTIP = {};
 
-  /**
-   * @typedef { {
-   *    component: import('preact').Component,
-   *    id: String,
-   *    isEdited?: Function
-   * } } EntryDefinition
-   *
-   * @typedef { {
-   *    autoFocusEntry: String,
-   *    autoOpen?: Boolean,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    remove: (event: MouseEvent) => void
-   * } } ListItemDefinition
-   *
-   * @typedef { {
-   *    add: (event: MouseEvent) => void,
-   *    component: import('preact').Component,
-   *    element: Object,
-   *    id: String,
-   *    items: Array<ListItemDefinition>,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } ListGroupDefinition
-   *
-   * @typedef { {
-   *    component?: import('preact').Component,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } GroupDefinition
-   *
-   *  @typedef { {
-   *    [id: String]: GetDescriptionFunction
-   * } } DescriptionConfig
-   *
-   *  @typedef { {
-   *    [id: String]: GetTooltipFunction
-   * } } TooltipConfig
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetDescriptionFunction
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetTooltipFunction
-   *
-   * @typedef { {
-   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
-   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
-   * } } PlaceholderProvider
-   *
+  /**
+   * @typedef { {
+   *    component: import('preact').Component,
+   *    id: String,
+   *    isEdited?: Function
+   * } } EntryDefinition
+   *
+   * @typedef { {
+   *    autoFocusEntry: String,
+   *    autoOpen?: Boolean,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    remove: (event: MouseEvent) => void
+   * } } ListItemDefinition
+   *
+   * @typedef { {
+   *    add: (event: MouseEvent) => void,
+   *    component: import('preact').Component,
+   *    element: Object,
+   *    id: String,
+   *    items: Array<ListItemDefinition>,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } ListGroupDefinition
+   *
+   * @typedef { {
+   *    component?: import('preact').Component,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } GroupDefinition
+   *
+   *  @typedef { {
+   *    [id: String]: GetDescriptionFunction
+   * } } DescriptionConfig
+   *
+   *  @typedef { {
+   *    [id: String]: GetTooltipFunction
+   * } } TooltipConfig
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetDescriptionFunction
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetTooltipFunction
+   *
+   * @typedef { {
+   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+   * } } PlaceholderProvider
+   *
    */
 
-  /**
-   * A basic properties panel component. Describes *how* content will be rendered, accepts
-   * data from implementor to describe *what* will be rendered.
-   *
-   * @param {Object} props
-   * @param {Object|Array} props.element
-   * @param {import('./components/Header').HeaderProvider} props.headerProvider
-   * @param {PlaceholderProvider} [props.placeholderProvider]
-   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
-   * @param {Object} [props.layoutConfig]
-   * @param {Function} [props.layoutChanged]
-   * @param {DescriptionConfig} [props.descriptionConfig]
-   * @param {Function} [props.descriptionLoaded]
-   * @param {TooltipConfig} [props.tooltipConfig]
-   * @param {Function} [props.tooltipLoaded]
-   * @param {HTMLElement} [props.feelPopupContainer]
-   * @param {Object} [props.eventBus]
+  /**
+   * A basic properties panel component. Describes *how* content will be rendered, accepts
+   * data from implementor to describe *what* will be rendered.
+   *
+   * @param {Object} props
+   * @param {Object|Array} props.element
+   * @param {import('./components/Header').HeaderProvider} props.headerProvider
+   * @param {PlaceholderProvider} [props.placeholderProvider]
+   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+   * @param {Object} [props.layoutConfig]
+   * @param {Function} [props.layoutChanged]
+   * @param {DescriptionConfig} [props.descriptionConfig]
+   * @param {Function} [props.descriptionLoaded]
+   * @param {TooltipConfig} [props.tooltipConfig]
+   * @param {Function} [props.tooltipLoaded]
+   * @param {HTMLElement} [props.feelPopupContainer]
+   * @param {Function} [props.getFeelPopupLinks]
+   * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
     const {
@@ -100286,6 +100480,7 @@
       tooltipConfig,
       tooltipLoaded,
       feelPopupContainer,
+      getFeelPopupLinks,
       eventBus
     } = props;
 
@@ -100390,6 +100585,7 @@
                   element: element,
                   eventBus: eventBus,
                   popupContainer: feelPopupContainer,
+                  getPopupLinks: getFeelPopupLinks,
                   children: u("div", {
                     class: "bio-properties-panel",
                     children: [u(Header, {
@@ -100442,11 +100638,11 @@
 
   // hooks //////////////////
 
-  /**
-   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
-   *
-   * @param {Function} effect
-   * @param {Array} deps
+  /**
+   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
    */
   function useUpdateLayoutEffect(effect, deps) {
     const isMounted = _(false);
@@ -100513,18 +100709,18 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
+   * @param {boolean} [props.disabled]
    */
   function CheckboxEntry(props) {
     const {
@@ -100645,20 +100841,20 @@
     });
   }
 
-  /**
-   * @param {object} props
-   * @param {object} props.element
-   * @param {string} props.id
-   * @param {string} [props.description]
-   * @param {string} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {Function} props.getOptions
-   * @param {boolean} [props.disabled]
-   * @param {Function} [props.validate]
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {object} props
+   * @param {object} props.element
+   * @param {string} props.id
+   * @param {string} [props.description]
+   * @param {string} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Function} props.getOptions
+   * @param {boolean} [props.disabled]
+   * @param {Function} [props.validate]
+   * @param {string|import('preact').Component} props.tooltip
    */
   function SelectEntry(props) {
     const {
@@ -100951,20 +101147,20 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
-   * @param {Function} props.validate
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
+   * @param {Function} props.validate
    */
   function TextfieldEntry(props) {
     const {
@@ -101057,20 +101253,20 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * Check if the FEEL popup is open.
-     * @return {Boolean}
+    /**
+     * Check if the FEEL popup is open.
+     * @return {Boolean}
      */
     isOpen() {
       return this._eventBus.fire('feelPopup._isOpen');
     }
 
-    /**
-     * Open the FEEL popup.
-     *
-     * @param {String} entryId
-     * @param {Object} popupConfig
-     * @param {HTMLElement} sourceElement
+    /**
+     * Open the FEEL popup.
+     *
+     * @param {String} entryId
+     * @param {Object} popupConfig
+     * @param {HTMLElement} sourceElement
      */
     open(entryId, popupConfig, sourceElement) {
       return this._eventBus.fire('feelPopup._open', {
@@ -101080,8 +101276,8 @@
       });
     }
 
-    /**
-     * Close the FEEL popup.
+    /**
+     * Close the FEEL popup.
      */
     close() {
       return this._eventBus.fire('feelPopup._close');
@@ -102548,7 +102744,8 @@
       layoutConfig: initialLayoutConfig,
       descriptionConfig,
       tooltipConfig,
-      feelPopupContainer
+      feelPopupContainer,
+      getFeelPopupLinks
     } = props;
     const canvas = injector.get('canvas');
     const elementRegistry = injector.get('elementRegistry');
@@ -102725,6 +102922,7 @@
         tooltipConfig: tooltipConfig,
         tooltipLoaded: onTooltipLoaded,
         feelPopupContainer: feelPopupContainer,
+        getFeelPopupLinks: getFeelPopupLinks,
         eventBus: eventBus
       })
     });
@@ -102733,8 +102931,7 @@
   // helpers //////////////////////////
 
   function isImplicitRoot$1(element) {
-    // Backwards compatibility for diagram-js<7.4.0, see https://github.com/bpmn-io/bpmn-properties-panel/pull/102
-    return element && (element.isImplicit || element.id === '__implicitroot');
+    return element && element.isImplicit;
   }
   function findElement(elements, element) {
     return find$1(elements, e => e === element);
@@ -102758,7 +102955,8 @@
         layout: layoutConfig,
         description: descriptionConfig,
         tooltip: tooltipConfig,
-        feelPopupContainer
+        feelPopupContainer,
+        getFeelPopupLinks
       } = config || {};
       this._eventBus = eventBus;
       this._injector = injector;
@@ -102766,6 +102964,7 @@
       this._descriptionConfig = descriptionConfig;
       this._tooltipConfig = tooltipConfig;
       this._feelPopupContainer = feelPopupContainer;
+      this._getFeelPopupLinks = getFeelPopupLinks;
       this._container = domify$1('<div style="height: 100%" class="bio-properties-panel-container"></div>');
       var commandStack = injector.get('commandStack', false);
       commandStack && setupKeyboard(this._container, eventBus, commandStack);
@@ -102877,7 +103076,8 @@
         layoutConfig: this._layoutConfig,
         descriptionConfig: this._descriptionConfig,
         tooltipConfig: this._tooltipConfig,
-        feelPopupContainer: this._feelPopupContainer
+        feelPopupContainer: this._feelPopupContainer,
+        getFeelPopupLinks: this._getFeelPopupLinks
       }), this._container);
       this._eventBus.fire('propertiesPanel.rendered');
     }
@@ -102893,8 +103093,7 @@
   // helpers ///////////////////////
 
   function isImplicitRoot(element) {
-    // Backwards compatibility for diagram-js<7.4.0, see https://github.com/bpmn-io/bpmn-properties-panel/pull/102
-    return element && (element.isImplicit || element.id === '__implicitroot');
+    return element && element.isImplicit;
   }
 
   /**
@@ -104960,7 +105159,7 @@
           }), u("a", {
             href: "https://docs.camunda.org/manual/latest/reference/bpmn20/events/timer-events/#time-date",
             target: "_blank",
-            rel: "noopener",
+            rel: "noopener noreferrer",
             children: translate('Documentation: Timer events')
           })]
         });
@@ -104981,7 +105180,7 @@
           }), u("a", {
             href: "https://docs.camunda.org/manual/latest/reference/bpmn20/events/timer-events/#time-cycle",
             target: "_blank",
-            rel: "noopener",
+            rel: "noopener noreferrer",
             children: translate('Documentation: Timer events')
           })]
         });
@@ -105006,7 +105205,7 @@
           }), u("a", {
             href: "https://docs.camunda.org/manual/latest/reference/bpmn20/events/timer-events/#time-duration",
             target: "_blank",
-            rel: "noopener",
+            rel: "noopener noreferrer",
             children: translate('Documentation: Timer events')
           })]
         });