camunda-bpmn-js 4.10.0 → 4.11.0

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

@@ -65138,7 +65138,7 @@
    * @return {SearchResult[]}
    */
   BpmnSearchProvider.prototype.find = function(pattern) {
-    var rootElement = this._canvas.getRootElement();
+    var rootElements = this._canvas.getRootElements();
 
     var elements = this._elementRegistry.filter(function(element) {
       if (element.labelTarget) {
@@ -65149,7 +65149,7 @@
 
     // do not include root element
     elements = filter$1(elements, function(element) {
-      return element !== rootElement;
+      return !rootElements.includes(element);
     });
 
     elements = map$3(elements, function(element) {
@@ -69204,6 +69204,8 @@
           var _a;
           let depth = action >> 19 /* Action.ReduceDepthShift */, type = action & 65535 /* Action.ValueMask */;
           let { parser } = this.p;
+          if (this.reducePos < this.pos - 25 /* Lookahead.Margin */)
+              this.setLookAhead(this.pos);
           let dPrec = parser.dynamicPrecedence(type);
           if (dPrec)
               this.score += dPrec;
@@ -70083,8 +70085,8 @@
           if (!(side < 0 ? cursor.childBefore(pos) : cursor.childAfter(pos)))
               for (;;) {
                   if ((side < 0 ? cursor.to < pos : cursor.from > pos) && !cursor.type.isError)
-                      return side < 0 ? Math.max(0, Math.min(cursor.to - 1, pos - 25 /* Safety.Margin */))
-                          : Math.min(tree.length, Math.max(cursor.from + 1, pos + 25 /* Safety.Margin */));
+                      return side < 0 ? Math.max(0, Math.min(cursor.to - 1, pos - 25 /* Lookahead.Margin */))
+                          : Math.min(tree.length, Math.max(cursor.from + 1, pos + 25 /* Lookahead.Margin */));
                   if (side < 0 ? cursor.prevSibling() : cursor.nextSibling())
                       break;
                   if (!cursor.parent())
@@ -70202,7 +70204,7 @@
                   token.mask = mask;
                   token.context = context;
               }
-              if (token.lookAhead > token.end + 25 /* Safety.Margin */)
+              if (token.lookAhead > token.end + 25 /* Lookahead.Margin */)
                   lookAhead = Math.max(token.lookAhead, lookAhead);
               if (token.value != 0 /* Term.Err */) {
                   let startIndex = actionIndex;
@@ -71825,8 +71827,13 @@
   /* global console,process */
 
 
+  // @ts-expect-error env access
   const LOG_PARSE = typeof process != 'undefined' && process.env && /\bfparse(:dbg)?\b/.test(process.env.LOG);
+
+  // @ts-expect-error env access
   const LOG_PARSE_DEBUG = typeof process != 'undefined' && process.env && /\bfparse:dbg\b/.test(process.env.LOG);
+
+  // @ts-expect-error env access
   const LOG_VARS = typeof process != 'undefined' && process.env && /\bcontext\b/.test(process.env.LOG);
 
   const spaceChars = [
@@ -72220,7 +72227,7 @@
     }
 
     /**
-     * @param { Function }
+     * @param { Function } fn
      *
      * @return { ValueProducer }
      */
@@ -72279,11 +72286,13 @@
     get(key) {
       const result = this.value[key];
 
-      if (this.constructor.isAtomic(result)) {
+      const constructor = /** @type { typeof VariableContext } */ (this.constructor);
+
+      if (constructor.isAtomic(result)) {
         return result;
       }
 
-      return this.constructor.of(result);
+      return constructor.of(result);
     }
 
     /**
@@ -72291,10 +72300,14 @@
      *
      * @param {String} key
      * @param {any} value
+     *
      * @returns {VariableContext} new context with the given key added
      */
     set(key, value) {
-      return this.constructor.of({
+
+      const constructor = /** @type { typeof VariableContext } */ (this.constructor);
+
+      return constructor.of({
         ...this.value,
         [key]: value
       });
@@ -72352,9 +72365,9 @@
       tokens = [],
       children = [],
       parent = null,
-      context,
-      value,
-      raw
+      context = null,
+      value = null,
+      raw = null
     } = {}) {
       this.name = name;
       this.tokens = tokens;
@@ -72500,6 +72513,9 @@
 
     pushChildren(children) {
 
+      /**
+       * @type {Variables}
+       */
       let parent = this;
 
       for (const child of children) {
@@ -72619,7 +72635,7 @@
    * Wrap children of variables under the given named child.
    *
    * @param { Variables } variables
-   * @param { string } name
+   * @param { string } scopeName
    * @param { string } code
    * @return { Variables }
    */
@@ -72741,6 +72757,7 @@
             .assign({ context: newContext || currentContext });
         }
 
+        // @ts-expect-error internal method
         const code = input.read(input.pos, stack.pos);
 
         const end = contextEnds[term];
@@ -72948,7 +72965,7 @@
     function: tags$1.definitionKeyword,
     as: tags$1.keyword,
     'Type/...': tags$1.typeName,
-    Wildcard: tags$1.special,
+    Wildcard: tags$1.special(tags$1.variableName),
     null: tags$1.null,
     LineComment: tags$1.lineComment,
     BlockComment: tags$1.blockComment,
@@ -72989,7 +73006,7 @@
     tokenData: "+l~RuXY#fYZ$ZZ[#f]^$Zpq#fqr$`rs$kwx&cxy&hyz&mz{&r{|'P|}'U}!O'Z!O!P'h!P!Q(Q!Q![){![!]*^!]!^*c!^!_*h!_!`$f!`!a*w!b!c+R!}#O+W#P#Q+]#Q#R&z#o#p+b#q#r+g$f$g#f#BY#BZ#f$IS$I_#f$I|$I}$Z$I}$JO$Z$JT$JU#f$KV$KW#f&FU&FV#f?HT?HU#f~#kY#q~XY#fZ[#fpq#f$f$g#f#BY#BZ#f$IS$I_#f$JT$JU#f$KV$KW#f&FU&FV#f?HT?HU#f~$`O#r~~$cP!_!`$f~$kOr~~$pW$h~OY$kZr$krs%Ys#O$k#O#P%_#P;'S$k;'S;=`&]<%lO$k~%_O$h~~%bRO;'S$k;'S;=`%k;=`O$k~%pX$h~OY$kZr$krs%Ys#O$k#O#P%_#P;'S$k;'S;=`&];=`<%l$k<%lO$k~&`P;=`<%l$k~&hO#z~~&mOv~~&rOx~~&wP^~z{&z~'PO_~~'UO[~~'ZO#}~R'`PZP!`!a'cQ'hO$]Q~'mQ#y~!O!P's!Q!['x~'xO#|~~'}P$g~!Q!['x~(VQ]~z{(]!P!Q)d~(`TOz(]z{(o{;'S(];'S;=`)^<%lO(]~(rVOz(]z{(o{!P(]!P!Q)X!Q;'S(];'S;=`)^<%lO(]~)^OQ~~)aP;=`<%l(]~)iSP~OY)dZ;'S)d;'S;=`)u<%lO)d~)xP;=`<%l)d~*QQ$g~!O!P*W!Q![){~*ZP!Q!['x~*cO$Z~~*hO$q~R*oP![QsP!_!`*rP*wOsPR+OP!XQsP!_!`*r~+WO$j~~+]O!h~~+bO!f~~+gO#R~~+lO#Q~",
     tokenizers: [propertyIdentifiers, identifiers, insertSemicolon, 0, 1],
     topRules: {"Expression":[0,3],"Expressions":[1,101],"UnaryTests":[2,102]},
-    dynamicPrecedences: {"31":-1,"71":-1,"73":-1},
+    dynamicPrecedences: {"31":-1,"67":1,"71":-1,"73":-1},
     specialized: [{term: 121, get: (value) => spec_identifier[value] || -1}],
     tokenPrec: 2500
   });
@@ -94178,176 +94195,182 @@
 
   var lint = linter$1(cmFeelersLinter());
 
-  /**
-   * Creates a Feelers editor in the supplied container.
-   *
-   * @param {Object} config Configuration options for the Feelers editor.
-   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
-   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
-   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
-   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
-   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
-   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
-   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
-   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
-   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
-   * @param {String} [config.value] Initial value of the editor.
-   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
-   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
-   *
-   * @returns {Object} editor An instance of the FeelersEditor class.
-   */
-  function FeelersEditor({
-    container,
-    tooltipContainer,
-    hostLanguage,
-    hostLanguageParser,
-    onChange = () => { },
-    onKeyDown = () => { },
-    onLint = () => { },
-    contentAttributes = { },
-    readOnly = false,
-    value = '',
-    enableGutters = false,
-    singleLine = false,
-    darkMode = false
-  }) {
-
-    const changeHandler = EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        onChange(update.state.doc.toString());
-      }
-    });
-
-    const lintHandler = EditorView.updateListener.of((update) => {
-      const diagnosticEffects = update.transactions
-        .flatMap(t => t.effects)
-        .filter(effect => effect.is(setDiagnosticsEffect));
-
-      if (!diagnosticEffects.length) {
-        return;
-      }
-
-      const messages = diagnosticEffects.flatMap(effect => effect.value);
-
-      onLint(messages);
-    });
-
-    const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
-
-    const keyHandler = EditorView.domEventHandlers(
-      {
-        keydown: onKeyDown
-      }
-    );
-
-    if (typeof tooltipContainer === 'string') {
-      // eslint-disable-next-line no-undef
-      tooltipContainer = document.querySelector(tooltipContainer);
-    }
-
-    const tooltipLayout = tooltipContainer ? tooltips({
-      tooltipSpace: function() {
-        return tooltipContainer.getBoundingClientRect();
-      }
-    }) : [];
-
-    const _getHostLanguageParser = (hostLanguage) => {
-      switch (hostLanguage) {
-      case 'markdown':
-        return parser$1;
-      default:
-        return null;
-      }
-    };
-
-    const feelersLanguageSupport = createFeelersLanguageSupport(hostLanguageParser || hostLanguage && _getHostLanguageParser(hostLanguage));
-
-    const extensions = [
-      bracketMatching(),
-      changeHandler,
-      contentAttributesExtension,
-      closeBrackets(),
-      indentOnInput(),
-      keyHandler,
-      keymap.of([
-        ...defaultKeymap,
-      ]),
-      feelersLanguageSupport,
-      lint,
-      lintHandler,
-      tooltipLayout,
-      darkMode ? darkTheme : lightTheme,
-      ...(enableGutters ? [
-
-        // todo: adjust folding boundaries first foldGutter(),
-        lineNumbers()
-      ] : []),
-      ...(singleLine ? [
-        EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)
-      ] : [])
-    ];
-
-    if (readOnly) {
-      extensions.push(EditorView.editable.of(false));
-    }
-
-    if (singleLine && value) {
-      value = value.toString().split('\n')[0];
-    }
-
-    this._cmEditor = new EditorView({
-      state: EditorState.create({
-        doc: value,
-        extensions: extensions
-      }),
-      parent: container
-    });
-
-    return this;
-  }
-
-  /**
-   * Replaces the content of the Editor
-   *
-   * @param {String} value
-   */
-  FeelersEditor.prototype.setValue = function(value) {
-    this._cmEditor.dispatch({
-      changes: {
-        from: 0,
-        to: this._cmEditor.state.doc.length,
-        insert: value,
-      }
-    });
-  };
-
-  /**
-   * Sets the focus in the editor.
-   */
-  FeelersEditor.prototype.focus = function(position) {
-    const cmEditor = this._cmEditor;
-
-    // the Codemirror `focus` method always calls `focus` with `preventScroll`,
-    // so we have to focus + scroll manually
-    cmEditor.contentDOM.focus();
-    cmEditor.focus();
-
-    if (typeof position === 'number') {
-      const end = cmEditor.state.doc.length;
-      cmEditor.dispatch({ selection: { anchor: position <= end ? position : end } });
-    }
-  };
-
-  /**
-   * Returns the current selection ranges. If no text is selected, a single
-   * range with the start and end index at the cursor position will be returned.
-   *
-   * @returns {Object} selection
-   * @returns {Array} selection.ranges
-   */
-  FeelersEditor.prototype.getSelection = function() {
-    return this._cmEditor.state.selection;
+  /**
+   * Creates a Feelers editor in the supplied container.
+   *
+   * @param {Object} config Configuration options for the Feelers editor.
+   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
+   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
+   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
+   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
+   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
+   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
+   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
+   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
+   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
+   * @param {String} [config.value] Initial value of the editor.
+   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
+   * @param {Boolean} [config.singleLine] Set to true to limit the editor to a single line.
+   * @param {Boolean} [config.lineWrap] Set to true to enable line wrapping.
+   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
+   *
+   * @returns {Object} editor An instance of the FeelersEditor class.
+   */
+  function FeelersEditor({
+    container,
+    tooltipContainer,
+    hostLanguage,
+    hostLanguageParser,
+    onChange = () => { },
+    onKeyDown = () => { },
+    onLint = () => { },
+    contentAttributes = { },
+    readOnly = false,
+    value = '',
+    enableGutters = false,
+    singleLine = false,
+    lineWrap = false,
+    darkMode = false
+  }) {
+
+    const changeHandler = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        onChange(update.state.doc.toString());
+      }
+    });
+
+    const lintHandler = EditorView.updateListener.of((update) => {
+      const diagnosticEffects = update.transactions
+        .flatMap(t => t.effects)
+        .filter(effect => effect.is(setDiagnosticsEffect));
+
+      if (!diagnosticEffects.length) {
+        return;
+      }
+
+      const messages = diagnosticEffects.flatMap(effect => effect.value);
+
+      onLint(messages);
+    });
+
+    const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
+
+    const keyHandler = EditorView.domEventHandlers(
+      {
+        keydown: onKeyDown
+      }
+    );
+
+    if (typeof tooltipContainer === 'string') {
+      // eslint-disable-next-line no-undef
+      tooltipContainer = document.querySelector(tooltipContainer);
+    }
+
+    const tooltipLayout = tooltipContainer ? tooltips({
+      tooltipSpace: function() {
+        return tooltipContainer.getBoundingClientRect();
+      }
+    }) : [];
+
+    const _getHostLanguageParser = (hostLanguage) => {
+      switch (hostLanguage) {
+      case 'markdown':
+        return parser$1;
+      default:
+        return null;
+      }
+    };
+
+    const feelersLanguageSupport = createFeelersLanguageSupport(hostLanguageParser || hostLanguage && _getHostLanguageParser(hostLanguage));
+
+    const extensions = [
+      bracketMatching(),
+      changeHandler,
+      contentAttributesExtension,
+      closeBrackets(),
+      indentOnInput(),
+      keyHandler,
+      keymap.of([
+        ...defaultKeymap,
+      ]),
+      feelersLanguageSupport,
+      lint,
+      lintHandler,
+      tooltipLayout,
+      darkMode ? darkTheme : lightTheme,
+      ...(enableGutters ? [
+
+        // todo: adjust folding boundaries first foldGutter(),
+        lineNumbers()
+      ] : []),
+      ...(singleLine ? [
+        EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)
+      ] : []),
+      ...(lineWrap ? [
+        EditorView.lineWrapping
+      ] : [])
+    ];
+
+    if (readOnly) {
+      extensions.push(EditorView.editable.of(false));
+    }
+
+    if (singleLine && value) {
+      value = value.toString().split('\n')[0];
+    }
+
+    this._cmEditor = new EditorView({
+      state: EditorState.create({
+        doc: value,
+        extensions: extensions
+      }),
+      parent: container
+    });
+
+    return this;
+  }
+
+  /**
+   * Replaces the content of the Editor
+   *
+   * @param {String} value
+   */
+  FeelersEditor.prototype.setValue = function(value) {
+    this._cmEditor.dispatch({
+      changes: {
+        from: 0,
+        to: this._cmEditor.state.doc.length,
+        insert: value,
+      }
+    });
+  };
+
+  /**
+   * Sets the focus in the editor.
+   */
+  FeelersEditor.prototype.focus = function(position) {
+    const cmEditor = this._cmEditor;
+
+    // the Codemirror `focus` method always calls `focus` with `preventScroll`,
+    // so we have to focus + scroll manually
+    cmEditor.contentDOM.focus();
+    cmEditor.focus();
+
+    if (typeof position === 'number') {
+      const end = cmEditor.state.doc.length;
+      cmEditor.dispatch({ selection: { anchor: position <= end ? position : end } });
+    }
+  };
+
+  /**
+   * Returns the current selection ranges. If no text is selected, a single
+   * range with the start and end index at the cursor position will be returned.
+   *
+   * @returns {Object} selection
+   * @returns {Array} selection.ranges
+   */
+  FeelersEditor.prototype.getSelection = function() {
+    return this._cmEditor.state.selection;
   };
 
   /**
@@ -97182,6 +97205,21 @@
     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 {
@@ -97926,7 +97964,8 @@
         tooltipContainer,
         enableGutters,
         hostLanguage,
-        singleLine
+        singleLine,
+        lineWrap: true
       });
       setEditor(editor);
       return () => {
@@ -97963,7 +98002,7 @@
         title: "Open pop-up editor",
         class: "bio-properties-panel-open-feel-popup",
         onClick: () => onPopupOpen('feelers'),
-        children: u(ExternalLinkIcon, {})
+        children: u(PopupIcon, {})
       })]
     });
   });
@@ -98286,6 +98325,9 @@
       draggable,
       emit = () => {},
       title,
+      showCloseButton = false,
+      closeButtonTooltip = 'Close popup',
+      onClose,
       ...rest
     } = props;
 
@@ -98356,7 +98398,12 @@
       }), u("div", {
         class: "bio-properties-panel-popup__title",
         children: title
-      }), children]
+      }), children, showCloseButton && u("button", {
+        title: closeButtonTooltip,
+        class: "bio-properties-panel-popup__close",
+        onClick: onClose,
+        children: u(CloseIcon, {})
+      })]
     });
   }
   function Body(props) {
@@ -98574,6 +98621,9 @@
       children: [u(Popup.Title, {
         title: title,
         emit: emit,
+        showCloseButton: true,
+        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/",
@@ -98615,14 +98665,6 @@
             tooltipContainer: tooltipContainer
           })]
         })
-      }), u(Popup.Footer, {
-        children: u("button", {
-          type: "button",
-          onClick: () => onClose(),
-          title: "Close pop-up editor",
-          class: "bio-properties-panel-feel-popup__close-btn",
-          children: "Close"
-        })
       })]
     });
   }
@@ -99424,6 +99466,28 @@
     });
   }
 
+  /**
+   * @typedef { {
+   *   [key: string]: string;
+   * } } TranslateReplacements
+   */
+
+  /**
+   * A simple translation stub to be used for multi-language support.
+   * Can be easily replaced with a more sophisticated solution.
+   *
+   * @param {string} template to interpolate
+   * @param {TranslateReplacements} [replacements] a map with substitutes
+   *
+   * @return {string} the translated string
+   */
+  function translateFallback(template, replacements) {
+    replacements = replacements || {};
+    return template.replace(/{([^}]+)}/g, function (_, key) {
+      return replacements[key] || '{' + key + '}';
+    });
+  }
+
   function CollapsibleEntry(props) {
     const {
       element,
@@ -99431,7 +99495,8 @@
       id,
       label,
       open: shouldOpen,
-      remove
+      remove,
+      translate = translateFallback
     } = props;
     const [open, setOpen] = h(shouldOpen);
     const toggleOpen = () => setOpen(!open);
@@ -99447,9 +99512,7 @@
         }
       }, [onShow, setOpen])
     };
-
-    // todo(pinussilvestrus): translate once we have a translate mechanism for the core
-    const placeholderLabel = '<empty>';
+    const placeholderLabel = translate('<empty>');
     return u("div", {
       "data-entry-id": id,
       class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
@@ -99462,14 +99525,14 @@
           children: label || placeholderLabel
         }), u("button", {
           type: "button",
-          title: "Toggle list item",
+          title: translate('Toggle list item'),
           class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
           children: u(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
           })
         }), remove ? u("button", {
           type: "button",
-          title: "Delete item",
+          title: translate('Delete item'),
           class: "bio-properties-panel-remove-entry",
           onClick: remove,
           children: u(DeleteIcon, {})
@@ -99497,7 +99560,8 @@
   function ListItem$1(props) {
     const {
       autoFocusEntry,
-      autoOpen
+      autoOpen,
+      translate = translateFallback
     } = props;
 
     // focus specified entry on auto open
@@ -99519,7 +99583,8 @@
       class: "bio-properties-panel-list-item",
       children: u(CollapsibleEntry, {
         ...props,
-        open: autoOpen
+        open: autoOpen,
+        translate: translate
       })
     });
   }
@@ -99536,7 +99601,8 @@
       id,
       items,
       label,
-      shouldOpen = true
+      shouldOpen = true,
+      translate = translateFallback
     } = props;
     p$1(() => {
       if (props.shouldSort != undefined) {
@@ -99638,20 +99704,22 @@
           class: "bio-properties-panel-group-header-buttons",
           children: [add ? u("button", {
             type: "button",
-            title: "Create new list item",
+            title: translate('Create new list item'),
             class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
             onClick: handleAddClick,
             children: [u(CreateIcon, {}), !hasItems ? u("span", {
               class: "bio-properties-panel-add-entry-label",
-              children: "Create"
+              children: translate('Create')
             }) : null]
           }) : null, hasItems ? u("div", {
-            title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+            title: translate(`List contains {numOfItems} item${items.length != 1 ? 's' : ''}`, {
+              numOfItems: items.length
+            }),
             class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
             children: items.length
           }) : null, hasItems ? u("button", {
             type: "button",
-            title: "Toggle section",
+            title: translate('Toggle section'),
             class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
             children: u(ArrowIcon, {
               class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -99678,7 +99746,8 @@
               autoOpen: autoOpen,
               element: element,
               index: index,
-              key: id
+              key: id,
+              translate: translate
             });
           })
         })