@bpmn-io/form-js-playground 0.14.1 → 1.0.0-alpha.0

package/dist/form-playground.umd.js

@@ -315,8 +315,6 @@
    *
    * @return {Array<?>}
    */
-  var proto = typeof Element !== 'undefined' ? Element.prototype : {};
-  proto.matches || proto.matchesSelector || proto.webkitMatchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector;
 
   /**
    * Expose `parse`.
@@ -925,9 +923,9 @@
   };
 
   /*!
-    Copyright (c) 2018 Jed Watson.
-    Licensed under the MIT License (MIT), see
-    http://jedwatson.github.io/classnames
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
   */
 
   (function (module) {
@@ -952,14 +950,14 @@
   	          }
   	        }
   	      } else if (argType === 'object') {
-  	        if (arg.toString === Object.prototype.toString) {
-  	          for (var key in arg) {
-  	            if (hasOwn.call(arg, key) && arg[key]) {
-  	              classes.push(key);
-  	            }
-  	          }
-  	        } else {
+  	        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
   	          classes.push(arg.toString());
+  	          continue;
+  	        }
+  	        for (var key in arg) {
+  	          if (hasOwn.call(arg, key) && arg[key]) {
+  	            classes.push(key);
+  	          }
   	        }
   	      }
   	    }
@@ -12804,7 +12802,7 @@
      * @return { ValueProducer }
      */
     static of(fn) {
-      return new ValueProducer$2(fn);
+      return new ValueProducer(fn);
     }
   };
   const dateTimeLiterals$2 = {
@@ -12969,7 +12967,7 @@
      * @return { Variables }
      */
     assign(options = {}) {
-      return Variables$2.of({
+      return Variables.of({
         ...this,
         ...options
       });
@@ -12985,7 +12983,7 @@
         context: this.context,
         parent: this.parent
       };
-      return Variables$2.of({
+      return Variables.of({
         ...defaultOptions,
         ...options
       });
@@ -13000,7 +12998,7 @@
         value,
         raw
       } = options;
-      return new Variables$2({
+      return new Variables({
         name,
         tokens: [...tokens],
         children: [...children],
@@ -15334,7 +15332,7 @@
      * @return { ValueProducer }
      */
     static of(fn) {
-      return new ValueProducer$1(fn);
+      return new ValueProducer(fn);
     }
   };
   const dateTimeLiterals$1 = {
@@ -15499,7 +15497,7 @@
      * @return { Variables }
      */
     assign(options = {}) {
-      return Variables$1.of({
+      return Variables.of({
         ...this,
         ...options
       });
@@ -15515,7 +15513,7 @@
         context: this.context,
         parent: this.parent
       };
-      return Variables$1.of({
+      return Variables.of({
         ...defaultOptions,
         ...options
       });
@@ -15530,7 +15528,7 @@
         value,
         raw
       } = options;
-      return new Variables$1({
+      return new Variables({
         name,
         tokens: [...tokens],
         children: [...children],
@@ -17665,7 +17663,7 @@
     */
     static of(text) {
       if (text.length == 0) throw new RangeError("A document must have at least one line");
-      if (text.length == 1 && !text[0]) return Text$2.empty;
+      if (text.length == 1 && !text[0]) return Text.empty;
       return text.length <= 32 /* Tree.Branch */ ? new TextLeaf(text) : TextNode.from(TextLeaf.split(text, []));
     }
   };
@@ -19892,12 +19890,12 @@
   }
   function resolveTransactionInner(state, spec, docSize) {
     let sel = spec.selection,
-      annotations = asArray$1(spec.annotations);
+      annotations = asArray$2(spec.annotations);
     if (spec.userEvent) annotations = annotations.concat(Transaction.userEvent.of(spec.userEvent));
     return {
       changes: spec.changes instanceof ChangeSet ? spec.changes : ChangeSet.of(spec.changes || [], docSize, state.facet(lineSeparator)),
       selection: sel && (sel instanceof EditorSelection ? sel : EditorSelection.single(sel.anchor, sel.head)),
-      effects: asArray$1(spec.effects),
+      effects: asArray$2(spec.effects),
       annotations,
       scrollIntoView: !!spec.scrollIntoView
     };
@@ -19942,7 +19940,7 @@
     let filters = state.facet(transactionFilter);
     for (let i = filters.length - 1; i >= 0; i--) {
       let filtered = filters[i](tr);
-      if (filtered instanceof Transaction) tr = filtered;else if (Array.isArray(filtered) && filtered.length == 1 && filtered[0] instanceof Transaction) tr = filtered[0];else tr = resolveTransaction(state, asArray$1(filtered), false);
+      if (filtered instanceof Transaction) tr = filtered;else if (Array.isArray(filtered) && filtered.length == 1 && filtered[0] instanceof Transaction) tr = filtered[0];else tr = resolveTransaction(state, asArray$2(filtered), false);
     }
     return tr;
   }
@@ -19957,7 +19955,7 @@
     return spec == tr ? tr : Transaction.create(state, tr.changes, tr.selection, spec.effects, spec.annotations, spec.scrollIntoView);
   }
   const none$3 = [];
-  function asArray$1(value) {
+  function asArray$2(value) {
     return value == null ? none$3 : Array.isArray(value) ? value : [value];
   }
 
@@ -20091,7 +20089,7 @@
           base = effect.value;
         } else if (effect.is(StateEffect.appendConfig)) {
           conf = null;
-          base = asArray$1(base).concat(effect.value);
+          base = asArray$2(base).concat(effect.value);
         }
       }
       let startValues;
@@ -20135,7 +20133,7 @@
       let result1 = f(sel.ranges[0]);
       let changes = this.changes(result1.changes),
         ranges = [result1.range];
-      let effects = asArray$1(result1.effects);
+      let effects = asArray$2(result1.effects);
       for (let i = 1; i < sel.ranges.length; i++) {
         let result = f(sel.ranges[i]);
         let newChanges = this.changes(result.changes),
@@ -20144,7 +20142,7 @@
         let mapBy = changes.mapDesc(newChanges, true);
         ranges.push(result.range.map(mapBy));
         changes = changes.compose(newMapped);
-        effects = StateEffect.mapEffects(effects, newMapped).concat(StateEffect.mapEffects(asArray$1(result.effects), mapBy));
+        effects = StateEffect.mapEffects(effects, newMapped).concat(StateEffect.mapEffects(asArray$2(result.effects), mapBy));
       }
       return {
         changes,
@@ -30554,7 +30552,7 @@
       };
     })
   });
-  function asArray(val) {
+  function asArray$1(val) {
     return Array.isArray(val) ? val : [val];
   }
   function advanceCursor(cursor, collect, pos) {
@@ -30613,7 +30611,7 @@
           if (config.domEventHandlers[prop](view, line, event)) event.preventDefault();
         });
       }
-      this.markers = asArray(config.markers(view));
+      this.markers = asArray$1(config.markers(view));
       if (config.initialSpacer) {
         this.spacer = new GutterElement(view, 0, 0, [config.initialSpacer(view)]);
         this.dom.appendChild(this.spacer.dom);
@@ -30622,7 +30620,7 @@
     }
     update(update) {
       let prevMarkers = this.markers;
-      this.markers = asArray(this.config.markers(update.view));
+      this.markers = asArray$1(this.config.markers(update.view));
       if (this.spacer && this.config.updateSpacer) {
         let updated = this.config.updateSpacer(this.spacer.markers[0], update);
         if (updated != this.spacer.markers[0]) this.spacer.update(update.view, 0, 0, [updated]);
@@ -37979,7 +37977,7 @@
     }
   }
   /// Elements are used to compose syntax nodes during parsing.
-  let Element$2 = class Element {
+  let Element$1 = class Element {
     /// @internal
     constructor(
     /// The node's
@@ -38030,7 +38028,7 @@
     }
   }
   function elt(type, from, to, children) {
-    return new Element$2(type, from, to, children);
+    return new Element$1(type, from, to, children);
   }
   const EmphasisUnderscore = {
     resolve: "Emphasis",
@@ -38324,7 +38322,7 @@
         // Move the covered region into content, optionally adding marker nodes
         if (open.type.mark) content.push(this.elt(open.type.mark, start, open.to));
         for (let k = j + 1; k < i; k++) {
-          if (this.parts[k] instanceof Element$2) content.push(this.parts[k]);
+          if (this.parts[k] instanceof Element$1) content.push(this.parts[k]);
           this.parts[k] = null;
         }
         if (close.type.mark) content.push(this.elt(close.type.mark, close.from, end));
@@ -38339,7 +38337,7 @@
       let result = [];
       for (let i = from; i < this.parts.length; i++) {
         let part = this.parts[i];
-        if (part instanceof Element$2) result.push(part);
+        if (part instanceof Element$1) result.push(part);
       }
       return result;
     }
@@ -38383,7 +38381,7 @@
       while (eI < elts.length && elts[eI].to < mark.to) eI++;
       if (eI < elts.length && elts[eI].from < mark.from) {
         let e = elts[eI];
-        if (e instanceof Element$2) elts[eI] = new Element$2(e.type, e.from, e.to, injectMarks(e.children, [mark]));
+        if (e instanceof Element$1) elts[eI] = new Element$1(e.type, e.from, e.to, injectMarks(e.children, [mark]));
       } else {
         elts.splice(eI++, 0, mark);
       }
@@ -49707,6 +49705,30 @@
   var DEFAULT_PRIORITY$3 = 1000;
   var slice$1 = Array.prototype.slice;
 
+  /**
+   * @typedef { {
+   *   stopPropagation(): void;
+   *   preventDefault(): void;
+   *   cancelBubble: boolean;
+   *   defaultPrevented: boolean;
+   *   returnValue: any;
+   * } } Event
+   */
+
+  /**
+   * @template E
+   *
+   * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+   */
+
+  /**
+   * @typedef { {
+   *  priority: number;
+   *  next: EventBusListener | null;
+   *  callback: EventBusEventCallback<any>;
+   * } } EventBusListener
+   */
+
   /**
    * A general purpose event bus.
    *
@@ -49791,6 +49813,9 @@
    * ```
    */
   function EventBus$1() {
+    /**
+     * @type { Record<string, EventBusListener> }
+     */
     this._listeners = {};
 
     // cleanup on destroy on lowest priority to allow
@@ -49810,10 +49835,12 @@
    *
    * Returning anything but `undefined` from a listener will stop the listener propagation.
    *
-   * @param {string|Array<string>} events
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
   EventBus$1.prototype.on = function (events, priority, callback, that) {
     events = isArray$4(events) ? events : [events];
@@ -49845,14 +49872,16 @@
   };
 
   /**
-   * Register an event listener that is executed only once.
+   * Register an event listener that is called only once.
+   *
+   * @template T
    *
-   * @param {string} event the event name to register for
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback the callback to execute
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] the listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
-  EventBus$1.prototype.once = function (event, priority, callback, that) {
+  EventBus$1.prototype.once = function (events, priority, callback, that) {
     var self = this;
     if (isFunction$1(priority)) {
       that = callback;
@@ -49865,7 +49894,7 @@
     function wrappedCallback() {
       wrappedCallback.__isTomb = true;
       var result = callback.apply(that, arguments);
-      self.off(event, wrappedCallback);
+      self.off(events, wrappedCallback);
       return result;
     }
 
@@ -49873,7 +49902,7 @@
     // bound callbacks via {@link #off} using the original
     // callback
     wrappedCallback[FN_REF$1] = callback;
-    this.on(event, priority, wrappedCallback);
+    this.on(events, priority, wrappedCallback);
   };
 
   /**
@@ -49881,8 +49910,8 @@
    *
    * If no callback is given, all listeners for a given event name are being removed.
    *
-   * @param {string|Array<string>} events
-   * @param {Function} [callback]
+   * @param {string|string[]} events
+   * @param {EventBusEventCallback} [callback]
    */
   EventBus$1.prototype.off = function (events, callback) {
     events = isArray$4(events) ? events : [events];
@@ -49893,11 +49922,11 @@
   };
 
   /**
-   * Create an EventBus event.
+   * Create an event recognized be the event bus.
    *
-   * @param {Object} data
+   * @param {Object} data Event data.
    *
-   * @return {Object} event, recognized by the eventBus
+   * @return {Event} An event that will be recognized by the event bus.
    */
   EventBus$1.prototype.createEvent = function (data) {
     var event = new InternalEvent$1();
@@ -49906,10 +49935,11 @@
   };
 
   /**
-   * Fires a named event.
+   * Fires an event.
    *
    * @example
    *
+   * ```javascript
    * // fire event by name
    * events.fire('foo');
    *
@@ -49927,13 +49957,13 @@
    * });
    *
    * events.fire({ type: 'foo' }, 'I am bar!');
+   * ```
    *
-   * @param {string} [name] the optional event name
-   * @param {Object} [event] the event object
-   * @param {...Object} additional arguments to be passed to the callback functions
+   * @param {string} [type] event type
+   * @param {Object} [data] event or event data
+   * @param {...any} [args] additional arguments the callback will be called with.
    *
-   * @return {boolean} the events return value, if specified or false if the
-   *                   default action was prevented by listeners
+   * @return {any} The return value. Will be set to `false` if the default was prevented.
    */
   EventBus$1.prototype.fire = function (type, data) {
     var event, firstListener, returnValue, args;
@@ -49985,6 +50015,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * Handle an error by firing an event.
+   *
+   * @param {Error} error The error to be handled.
+   *
+   * @return {boolean} Whether the error was handled.
+   */
   EventBus$1.prototype.handleError = function (error) {
     return this.fire('error', {
       error: error
@@ -49993,6 +50031,14 @@
   EventBus$1.prototype._destroy = function () {
     this._listeners = {};
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus$1.prototype._invokeListeners = function (event, args, listener) {
     var returnValue;
     while (listener) {
@@ -50005,6 +50051,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus$1.prototype._invokeListener = function (event, args, listener) {
     var returnValue;
     if (listener.callback.__isTomb) {
@@ -50033,7 +50087,7 @@
     return returnValue;
   };
 
-  /*
+  /**
    * Add new listener with a certain priority to the list
    * of listeners (for the given event).
    *
@@ -50047,7 +50101,7 @@
    *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
    *
    * @param {string} event
-   * @param {Object} listener { priority, callback }
+   * @param {EventBusListener} listener
    */
   EventBus$1.prototype._addListener = function (event, newListener) {
     var listener = this._getListeners(event),
@@ -50078,9 +50132,20 @@
     // add new listener to back
     previousListener.next = newListener;
   };
+
+  /**
+   * @param {string} name
+   *
+   * @return {EventBusListener}
+   */
   EventBus$1.prototype._getListeners = function (name) {
     return this._listeners[name];
   };
+
+  /**
+   * @param {string} name
+   * @param {EventBusListener} listener
+   */
   EventBus$1.prototype._setListeners = function (name, listener) {
     this._listeners[name] = listener;
   };
@@ -50128,9 +50193,9 @@
    * Invoke function. Be fast...
    *
    * @param {Function} fn
-   * @param {Array<Object>} args
+   * @param {any[]} args
    *
-   * @return {Any}
+   * @return {any}
    */
   function invokeFunction$1(fn, args) {
     return fn.apply(null, args);
@@ -50501,7 +50566,7 @@
     container.classList.add(`${prefix}-container`);
     return container;
   }
-  const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+  const EXPRESSION_PROPERTIES = ['alt', 'source', 'readonly', 'text'];
   const TEMPLATE_PROPERTIES = ['text'];
   function findErrors(errors, path) {
     return errors[pathStringify(path)];
@@ -50705,16 +50770,18 @@
         // if unavailable - get empty value from form field
 
         if (_path) {
-          const fieldImplementation = this._formFields.get(type);
+          const {
+            config: fieldConfig
+          } = this._formFields.get(type);
           let valueData = get$1(data, _path);
-          if (!isUndefined$2(valueData) && fieldImplementation.sanitizeValue) {
-            valueData = fieldImplementation.sanitizeValue({
+          if (!isUndefined$2(valueData) && fieldConfig.sanitizeValue) {
+            valueData = fieldConfig.sanitizeValue({
               formField,
               data,
               value: valueData
             });
           }
-          const initializedFieldValue = !isUndefined$2(valueData) ? valueData : !isUndefined$2(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
+          const initializedFieldValue = !isUndefined$2(valueData) ? valueData : !isUndefined$2(defaultValue) ? defaultValue : fieldConfig.emptyValue;
           initializedData = {
             ...initializedData,
             [_path[0]]: initializedFieldValue
@@ -50730,14 +50797,16 @@
   };
   function formFieldClasses(type, {
     errors = [],
-    disabled = false
+    disabled = false,
+    readonly = false
   } = {}) {
     if (!type) {
       throw new Error('type required');
     }
     return classNames('fjs-form-field', `fjs-form-field-${type}`, {
       'fjs-has-errors': errors.length > 0,
-      'fjs-disabled': disabled
+      'fjs-disabled': disabled,
+      'fjs-readonly': readonly
     });
   }
   function gridColumnClasses(formField) {
@@ -50751,7 +50820,7 @@
     // always fall back to top-down on smallest screens
     'cds--col-sm-16', 'cds--col-md-16');
   }
-  function prefixId(id, formId) {
+  function prefixId$2(id, formId) {
     if (formId) {
       return `fjs-form-${formId}-${id}`;
     }
@@ -50776,14 +50845,16 @@
       })
     });
   }
-  Button.create = (options = {}) => ({
-    action: 'submit',
-    ...options
-  });
-  Button.type = type$b;
-  Button.label = 'Button';
-  Button.keyed = true;
-  Button.group = 'action';
+  Button.config = {
+    type: type$b,
+    keyed: true,
+    label: 'Button',
+    group: 'action',
+    create: (options = {}) => ({
+      action: 'submit',
+      ...options
+    })
+  };
   const FormRenderContext = D$1({
     Empty: props => {
       return null;
@@ -50844,13 +50915,16 @@
   }
   function Errors(props) {
     const {
-      errors
+      errors,
+      id
     } = props;
     if (!errors.length) {
       return null;
     }
     return e$1("div", {
       class: "fjs-form-field-error",
+      "aria-live": "polite",
+      id: id,
       children: e$1("ul", {
         children: errors.map(error => {
           return e$1("li", {
@@ -50884,6 +50958,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = false
     } = props;
     const {
@@ -50906,43 +50981,50 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$a, {
         errors,
-        disabled
+        disabled,
+        readonly
       }), {
         'fjs-checked': value
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required,
         children: e$1("input", {
           checked: value,
           class: "fjs-input",
           disabled: disabled,
-          id: prefixId(id, formId),
+          readOnly: readonly,
+          id: prefixId$2(id, formId),
           type: "checkbox",
-          onChange: onChange
+          onChange: onChange,
+          "aria-describedby": errorMessageId
         })
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Checkbox$1.create = (options = {}) => ({
-    ...options
-  });
-  Checkbox$1.type = type$a;
-  Checkbox$1.label = 'Checkbox';
-  Checkbox$1.keyed = true;
-  Checkbox$1.emptyValue = false;
-  Checkbox$1.sanitizeValue = ({
-    value
-  }) => value === true;
-  Checkbox$1.group = 'selection';
+  Checkbox$1.config = {
+    type: type$a,
+    keyed: true,
+    label: 'Checkbox',
+    group: 'selection',
+    emptyValue: false,
+    sanitizeValue: ({
+      value
+    }) => value === true,
+    create: (options = {}) => ({
+      ...options
+    })
+  };
 
   // parses the options data from the provided form field and form data
   function getValuesData(formField, formData) {
@@ -51274,6 +51356,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = []
     } = props;
     const {
@@ -51304,17 +51387,19 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$9, {
         errors,
-        disabled
+        disabled,
+        readonly
       })),
       children: [e$1(Label$1, {
         label: label,
         required: required
       }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
         return e$1(Label$1, {
-          id: prefixId(`${id}-${index}`, formId),
+          id: prefixId$2(`${id}-${index}`, formId),
           label: v.label,
           class: classNames({
             'fjs-checked': value.includes(v.value)
@@ -51324,39 +51409,44 @@
             checked: value.includes(v.value),
             class: "fjs-input",
             disabled: disabled,
-            id: prefixId(`${id}-${index}`, formId),
+            readOnly: readonly,
+            id: prefixId$2(`${id}-${index}`, formId),
             type: "checkbox",
-            onClick: () => toggleCheckbox(v.value)
+            onClick: () => toggleCheckbox(v.value),
+            "aria-describedby": errorMessageId
           })
         }, `${id}-${index}`);
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Checklist.create = (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Checklist.config = {
+    type: type$9,
+    keyed: true,
+    label: 'Checklist',
+    group: 'selection',
+    emptyValue: [],
+    sanitizeValue: sanitizeMultiSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Checklist.type = type$9;
-  Checklist.label = 'Checklist';
-  Checklist.keyed = true;
-  Checklist.emptyValue = [];
-  Checklist.sanitizeValue = sanitizeMultiSelectValue;
-  Checklist.group = 'selection';
 
   /**
    * Returns the conditionally filtered data of a form reactively.
@@ -51427,6 +51517,33 @@
     });
   }
 
+  /**
+   * Retrieve readonly value of a form field, given it can be an
+   * expression optionally or configured globally.
+   *
+   * @typedef { import('../../types').FormProperties } FormProperties
+   *
+   * @param {any} formField
+   * @param {FormProperties} properties
+   *
+   * @returns {boolean}
+   */
+  function useReadonly(formField, properties = {}) {
+    const expressionLanguage = useService$2('expressionLanguage');
+    const conditionChecker = useService$2('conditionChecker', false);
+    const filteredData = useFilteredFormData();
+    const {
+      readonly
+    } = formField;
+    if (properties.readOnly) {
+      return true;
+    }
+    if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
+      return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
+    }
+    return readonly || false;
+  }
+
   /**
    * Template a string reactively based on form data. If the string is not a template, it is returned as is.
    * Memoised to minimize re-renders
@@ -51454,9 +51571,6 @@
       field,
       onChange
     } = props;
-    const {
-      _path
-    } = field;
     const formFields = useService$2('formFields'),
       form = useService$2('form');
     const {
@@ -51473,9 +51587,12 @@
     if (!FormFieldComponent) {
       throw new Error(`cannot render field <${field.type}>`);
     }
-    const value = get$1(data, _path);
-    const fieldErrors = findErrors(errors, _path);
-    const disabled = properties.readOnly || field.disabled || false;
+    const value = get$1(data, field._path);
+    const fieldErrors = findErrors(errors, field._path);
+    const readonly = useReadonly(field, properties);
+
+    // add precedence: global readonly > form field disabled
+    const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
     const hidden = useCondition(field.conditional && field.conditional.hide || null);
     if (hidden) {
       return e$1(Empty, {});
@@ -51490,7 +51607,8 @@
           ...props,
           disabled: disabled,
           errors: fieldErrors,
-          onChange: disabled ? noop$1$1 : onChange,
+          onChange: disabled || readonly ? noop$1$1 : onChange,
+          readonly: readonly,
           value: value
         })
       })
@@ -51540,14 +51658,16 @@
       }), components.length ? null : e$1(Empty, {})]
     });
   }
-  Default.create = (options = {}) => ({
-    components: [],
-    ...options
-  });
-  Default.type = 'default';
-  Default.keyed = false;
-  Default.label = null;
-  Default.group = null;
+  Default.config = {
+    type: 'default',
+    keyed: false,
+    label: null,
+    group: null,
+    create: (options = {}) => ({
+      components: [],
+      ...options
+    })
+  };
   function _extends$j() {
     _extends$j = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -51585,12 +51705,14 @@
       inputRef,
       children,
       disabled,
+      readonly,
       hasErrors
     } = props;
     const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
     return e$1("div", {
       class: classNames('fjs-input-group', {
-        'fjs-disabled': disabled
+        'fjs-disabled': disabled,
+        'fjs-readonly': readonly
       }, {
         'hasErrors': hasErrors
       }),
@@ -51622,6 +51744,7 @@
       disabled,
       disallowPassedDates,
       date,
+      readonly,
       setDate
     } = props;
     const dateInputRef = s$1();
@@ -51701,9 +51824,9 @@
       }
     }, [flatpickrInstance, isInputDirty]);
     const onInputFocus = A$1(e => {
-      if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget)) return;
+      if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget) || readonly) return;
       flatpickrInstance.open();
-    }, [flatpickrInstance]);
+    }, [flatpickrInstance, readonly]);
 
     // simulate an enter press on blur to make sure the date value is submitted in all scenarios
     const onInputBlur = A$1(e => {
@@ -51711,7 +51834,7 @@
       dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
       setIsInputDirty(false);
     }, [isInputDirty]);
-    const fullId = `${prefixId(id, formId)}--date`;
+    const fullId = `${prefixId$2(id, formId)}--date`;
     return e$1("div", {
       class: "fjs-datetime-subsection",
       children: [e$1(Label$1, {
@@ -51722,6 +51845,7 @@
       }), e$1(InputAdorner, {
         pre: e$1(CalendarIcon, {}),
         disabled: disabled,
+        readonly: readonly,
         rootRef: focusScopeRef,
         inputRef: dateInputRef,
         children: e$1("div", {
@@ -51733,16 +51857,18 @@
             ref: dateInputRef,
             type: "text",
             id: fullId,
-            class: 'fjs-input',
+            class: "fjs-input",
             disabled: disabled,
+            readOnly: readonly,
             placeholder: "mm/dd/yyyy",
             autoComplete: "off",
             onFocus: onInputFocus,
             onKeyDown: onInputKeyDown,
-            onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
+            onMouseDown: () => !flatpickrInstance.isOpen && !readonly && flatpickrInstance.open(),
             onBlur: onInputBlur,
-            onInput: e => setIsInputDirty(true),
-            "data-input": true
+            onInput: () => setIsInputDirty(true),
+            "data-input": true,
+            "aria-describedby": props['aria-describedby']
           })
         })
       })]
@@ -51882,6 +52008,7 @@
       formId,
       required,
       disabled,
+      readonly,
       use24h = false,
       timeInterval,
       time,
@@ -51975,7 +52102,7 @@
       setDropdownIsOpen(false);
       propagateRawToMinute(value);
     };
-    const fullId = `${prefixId(id, formId)}--time`;
+    const fullId = `${prefixId$2(id, formId)}--time`;
     return e$1("div", {
       class: "fjs-datetime-subsection",
       children: [e$1(Label$1, {
@@ -51987,6 +52114,7 @@
         pre: e$1(ClockIcon, {}),
         inputRef: timeInputRef,
         disabled: disabled,
+        readonly: readonly,
         children: e$1("div", {
           class: "fjs-timepicker fjs-timepicker-anchor",
           children: [e$1("input", {
@@ -51996,10 +52124,11 @@
             class: "fjs-input",
             value: rawValue,
             disabled: disabled,
+            readOnly: readonly,
             placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
             autoComplete: "off",
-            onFocus: () => useDropdown && setDropdownIsOpen(true),
-            onClick: () => useDropdown && setDropdownIsOpen(true)
+            onFocus: () => !readonly && useDropdown && setDropdownIsOpen(true),
+            onClick: () => !readonly && useDropdown && setDropdownIsOpen(true)
 
             // @ts-ignore
             ,
@@ -52010,7 +52139,8 @@
             },
             onBlur: onInputBlur,
             onKeyDown: onInputKeyDown,
-            "data-input": true
+            "data-input": true,
+            "aria-describedby": props['aria-describedby']
           }), dropdownIsOpen && e$1(DropdownList, {
             values: timeOptions,
             height: 150,
@@ -52029,6 +52159,7 @@
       errors = [],
       field,
       onChange,
+      readonly,
       value = ''
     } = props;
     const {
@@ -52145,6 +52276,7 @@
         time
       });
     }, []);
+    const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const datePickerProps = {
       id,
       label: dateLabel,
@@ -52154,7 +52286,9 @@
       disabled,
       disallowPassedDates,
       date: dateTime.date,
-      setDate
+      readonly,
+      setDate,
+      'aria-describedby': errorMessageId
     };
     const timePickerProps = {
       id,
@@ -52163,15 +52297,18 @@
       formId,
       required,
       disabled,
+      readonly,
       use24h,
       timeInterval,
       time: dateTime.time,
-      setTime
+      setTime,
+      'aria-describedby': errorMessageId
     };
     return e$1("div", {
       class: formFieldClasses(type$8, {
         errors: allErrors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1("div", {
         class: classNames('fjs-vertical-group'),
@@ -52185,25 +52322,28 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: allErrors
+        errors: allErrors,
+        id: errorMessageId
       })]
     });
   }
-  Datetime.create = (options = {}) => {
-    const defaults = {};
-    set$2(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-    set$2(defaults, DATE_LABEL_PATH, 'Date');
-    return {
-      ...defaults,
-      ...options
-    };
+  Datetime.config = {
+    type: type$8,
+    keyed: true,
+    label: 'Date time',
+    group: 'basic-input',
+    emptyValue: null,
+    sanitizeValue: sanitizeDateTimePickerValue,
+    create: (options = {}) => {
+      const defaults = {};
+      set$2(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+      set$2(defaults, DATE_LABEL_PATH, 'Date');
+      return {
+        ...defaults,
+        ...options
+      };
+    }
   };
-  Datetime.type = type$8;
-  Datetime.keyed = true;
-  Datetime.emptyValue = null;
-  Datetime.sanitizeValue = sanitizeDateTimePickerValue;
-  Datetime.label = 'Date time';
-  Datetime.group = 'basic-input';
 
   /**
    * This file must not be changed or exchanged.
@@ -52247,7 +52387,7 @@
           href: "https://bpmn.io",
           target: "_blank",
           rel: "noopener",
-          style: "margin: 15px 20px 15px 10px; align-self: center; color: #404040",
+          style: "margin: 15px 20px 15px 10px; align-self: center; color: var(--cds-icon-primary, #404040)",
           children: e$1(Logo, {})
         }), e$1("span", {
           children: ["Web-based tooling for BPMN, DMN, and forms powered by ", e$1("a", {
@@ -52270,7 +52410,7 @@
         rel: "noopener",
         class: "fjs-powered-by-link",
         title: "Powered by bpmn.io",
-        style: "color: #404040",
+        style: "color: var(--cds-text-primary, #404040)",
         onClick: props.onClick,
         children: e$1(Logo, {})
       })
@@ -52297,8 +52437,12 @@
   function FormComponent(props) {
     const form = useService$2('form');
     const {
-      schema
+      schema,
+      properties
     } = form._getState();
+    const {
+      ariaLabel
+    } = properties;
     const {
       onSubmit = noop,
       onReset = noop,
@@ -52316,6 +52460,7 @@
       class: "fjs-form",
       onSubmit: handleSubmit,
       onReset: handleReset,
+      "aria-label": ariaLabel,
       noValidate: true,
       children: [e$1(FormField, {
         field: schema,
@@ -52325,7 +52470,7 @@
   }
   const NODE_TYPE_TEXT = 3,
     NODE_TYPE_ELEMENT = 1;
-  const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
+  const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong', 'table', 'thead', 'tbody', 'tr', 'th', 'td'];
   const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
   const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
   const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
@@ -52515,7 +52660,7 @@
           alt: altText,
           src: safeSource,
           class: "fjs-image",
-          id: prefixId(id, formId)
+          id: prefixId$2(id, formId)
         }), !safeSource && e$1("div", {
           class: "fjs-image-placeholder",
           children: e$1(ImagePlaceholder, {
@@ -52525,13 +52670,15 @@
       })
     });
   }
-  Image.create = (options = {}) => ({
-    ...options
-  });
-  Image.type = type$7;
-  Image.keyed = false;
-  Image.label = 'Image view';
-  Image.group = 'presentation';
+  Image.config = {
+    type: type$7,
+    keyed: false,
+    label: 'Image view',
+    group: 'presentation',
+    create: (options = {}) => ({
+      ...options
+    })
+  };
   function _extends$g() {
     _extends$g = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -52597,6 +52744,7 @@
       errors = [],
       field,
       value,
+      readonly,
       onChange
     } = props;
     const {
@@ -52621,10 +52769,10 @@
 
     // checks whether the value currently in the form data is practically different from the one in the input field cache
     // this allows us to guarantee the field always displays valid form data, but without auto-simplifying values like 1.000 to 1
-    const cacheValueMatchesState = d(() => Numberfield.sanitizeValue({
+    const cacheValueMatchesState = d(() => Numberfield.config.sanitizeValue({
       value,
       formField: field
-    }) === Numberfield.sanitizeValue({
+    }) === Numberfield.config.sanitizeValue({
       value: stringValueCache,
       formField: field
     }), [stringValueCache, value, field]);
@@ -52669,6 +52817,9 @@
       });
     }, [field, onChange, serializeToString]);
     const increment = () => {
+      if (readonly) {
+        return;
+      }
       const base = isValidNumber$1(value) ? Big$1(value) : Big$1(0);
       const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
 
@@ -52676,6 +52827,9 @@
       setValue(stepFlooredValue.plus(arrowIncrementValue).toFixed());
     };
     const decrement = () => {
+      if (readonly) {
+        return;
+      }
       const base = isValidNumber$1(value) ? Big$1(value) : Big$1(0);
       const offset = base.mod(arrowIncrementValue);
       if (offset.cmp(0) === 0) {
@@ -52718,22 +52872,26 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$6, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required
       }), e$1(InputAdorner, {
         disabled: disabled,
+        readonly: readonly,
         pre: prefixAdorner,
         post: suffixAdorner,
         children: e$1("div", {
           class: classNames('fjs-vertical-group', {
-            'fjs-disabled': disabled
+            'fjs-disabled': disabled,
+            'fjs-readonly': readonly
           }, {
             'hasErrors': errors.length
           }),
@@ -52741,7 +52899,8 @@
             ref: inputRef,
             class: "fjs-input",
             disabled: disabled,
-            id: prefixId(id, formId),
+            readOnly: readonly,
+            id: prefixId$2(id, formId),
             onKeyDown: onKeyDown,
             onKeyPress: onKeyPress
 
@@ -52752,10 +52911,12 @@
             type: "text",
             autoComplete: "off",
             step: arrowIncrementValue,
-            value: displayValue
+            value: displayValue,
+            "aria-describedby": errorMessageId
           }), e$1("div", {
             class: classNames('fjs-number-arrow-container', {
-              'fjs-disabled': disabled
+              'fjs-disabled': disabled,
+              'fjs-readonly': readonly
             }),
             children: [e$1("button", {
               class: "fjs-number-arrow-up",
@@ -52779,37 +52940,41 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Numberfield.create = (options = {}) => ({
-    ...options
-  });
-  Numberfield.sanitizeValue = ({
-    value,
-    formField
-  }) => {
-    // null state is allowed
-    if (isNullEquivalentValue(value)) return null;
+  Numberfield.config = {
+    type: type$6,
+    keyed: true,
+    label: 'Number',
+    group: 'basic-input',
+    emptyValue: null,
+    sanitizeValue: ({
+      value,
+      formField
+    }) => {
+      // null state is allowed
+      if (isNullEquivalentValue(value)) return null;
 
-    // if data cannot be parsed as a valid number, go into invalid NaN state
-    if (!isValidNumber$1(value)) return 'NaN';
+      // if data cannot be parsed as a valid number, go into invalid NaN state
+      if (!isValidNumber$1(value)) return 'NaN';
 
-    // otherwise parse to formatting type
-    return formField.serializeToString ? value.toString() : Number(value);
+      // otherwise parse to formatting type
+      return formField.serializeToString ? value.toString() : Number(value);
+    },
+    create: (options = {}) => ({
+      ...options
+    })
   };
-  Numberfield.type = type$6;
-  Numberfield.keyed = true;
-  Numberfield.label = 'Number';
-  Numberfield.emptyValue = null;
-  Numberfield.group = 'basic-input';
   const type$5 = 'radio';
   function Radio(props) {
     const {
       disabled,
       errors = [],
       field,
+      readonly,
       value
     } = props;
     const {
@@ -52834,17 +52999,19 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$5, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
         label: label,
         required: required
       }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
         return e$1(Label$1, {
-          id: prefixId(`${id}-${index}`, formId),
+          id: prefixId$2(`${id}-${index}`, formId),
           label: option.label,
           class: classNames({
             'fjs-checked': option.value === value
@@ -52854,39 +53021,44 @@
             checked: option.value === value,
             class: "fjs-input",
             disabled: disabled,
-            id: prefixId(`${id}-${index}`, formId),
+            readOnly: readonly,
+            id: prefixId$2(`${id}-${index}`, formId),
             type: "radio",
-            onClick: () => onChange(option.value)
+            onClick: () => onChange(option.value),
+            "aria-describedby": errorMessageId
           })
         }, `${id}-${index}`);
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Radio.create = function (options = {}) {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Radio.config = {
+    type: type$5,
+    keyed: true,
+    label: 'Radio',
+    group: 'selection',
+    emptyValue: null,
+    sanitizeValue: sanitizeSingleSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Radio.type = type$5;
-  Radio.label = 'Radio';
-  Radio.keyed = true;
-  Radio.emptyValue = null;
-  Radio.sanitizeValue = sanitizeSingleSelectValue;
-  Radio.group = 'selection';
   function _extends$e() {
     _extends$e = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -52922,6 +53094,7 @@
       disabled,
       errors,
       field,
+      readonly,
       value
     } = props;
     const {
@@ -52994,11 +53167,11 @@
     }, [isDropdownExpanded, isEscapeClosed]);
     const displayState = d(() => {
       const ds = {};
-      ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+      ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
       ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-      ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+      ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
       return ds;
-    }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+    }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
     const onAngelMouseDown = A$1(e => {
       setIsEscapeClose(false);
       setIsDropdownExpanded(!isDropdownExpanded);
@@ -53008,17 +53181,19 @@
     }, [isDropdownExpanded]);
     return e$1(d$1, {
       children: [e$1("div", {
-        id: prefixId(`${id}`, formId),
+        id: prefixId$2(`${id}`, formId),
         class: classNames('fjs-input-group', {
-          'disabled': disabled
+          'disabled': disabled,
+          'readonly': readonly
         }, {
           'hasErrors': errors.length
         }),
         children: [e$1("input", {
           disabled: disabled,
+          readOnly: readonly,
           class: "fjs-input",
           ref: searchbarRef,
-          id: prefixId(`${id}-search`, formId),
+          id: prefixId$2(`${id}-search`, formId),
           onChange: onChange,
           type: "text",
           value: filter,
@@ -53037,7 +53212,8 @@
           onBlur: () => {
             setIsDropdownExpanded(false);
             setFilter(valueLabel);
-          }
+          },
+          "aria-describedby": props['aria-describedby']
         }), displayState.displayCross && e$1("span", {
           class: "fjs-select-cross",
           onMouseDown: e => {
@@ -53070,6 +53246,7 @@
       disabled,
       errors,
       field,
+      readonly,
       value
     } = props;
     const {
@@ -53095,9 +53272,9 @@
     }, [field, props]);
     const displayState = d(() => {
       const ds = {};
-      ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+      ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
       ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-      ds.displayDropdown = !disabled && isDropdownExpanded;
+      ds.displayDropdown = !disabled && !readonly && isDropdownExpanded;
       return ds;
     }, [disabled, isDropdownExpanded, loadState, value]);
     const onMouseDown = A$1(e => {
@@ -53114,22 +53291,29 @@
     return e$1(d$1, {
       children: [e$1("div", {
         ref: selectRef,
-        id: prefixId(`${id}`, formId),
+        id: prefixId$2(`${id}`, formId),
         class: classNames('fjs-input-group', {
-          'disabled': disabled
+          disabled,
+          readonly
         }, {
           'hasErrors': errors.length
         }),
         onFocus: () => setIsDropdownExpanded(true),
         onBlur: () => setIsDropdownExpanded(false),
-        onMouseDown: e => onMouseDown(e),
-        tabIndex: disabled ? undefined : 0,
+        onMouseDown: onMouseDown,
         children: [e$1("div", {
           class: classNames('fjs-select-display', {
             'fjs-select-placeholder': !value
           }),
-          id: prefixId(`${id}-display`, formId),
+          id: prefixId$2(`${id}-display`, formId),
           children: valueLabel || 'Select'
+        }), !disabled && e$1("input", {
+          id: prefixId$2(`${id}-search`, formId),
+          class: "fjs-select-hidden-input",
+          value: valueLabel,
+          onFocus: () => !readonly && setIsDropdownExpanded(true),
+          onBlur: () => !readonly && setIsDropdownExpanded(false),
+          "aria-describedby": props['aria-describedby']
         }), displayState.displayCross && e$1("span", {
           class: "fjs-select-cross",
           onMouseDown: e => {
@@ -53163,6 +53347,7 @@
       errors = [],
       field,
       onChange,
+      readonly,
       value
     } = props;
     const {
@@ -53178,18 +53363,22 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const selectProps = d(() => ({
       id,
       disabled,
       errors,
       field,
       value,
-      onChange
-    }), [disabled, errors, field, id, value, onChange]);
+      onChange,
+      readonly,
+      'aria-describedby': errorMessageId
+    }), [disabled, errors, field, id, value, onChange, readonly, errorMessageId]);
     return e$1("div", {
       class: formFieldClasses(type$4, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       onKeyDown: event => {
         if (event.key === 'Enter') {
@@ -53198,7 +53387,7 @@
         }
       },
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(`${id}-search`, formId),
         label: label,
         required: required
       }), searchable ? e$1(SearchableSelect, {
@@ -53208,37 +53397,41 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Select$1.create = (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Select$1.config = {
+    type: type$4,
+    keyed: true,
+    label: 'Select',
+    group: 'selection',
+    emptyValue: null,
+    sanitizeValue: sanitizeSingleSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Select$1.type = type$4;
-  Select$1.label = 'Select';
-  Select$1.keyed = true;
-  Select$1.emptyValue = null;
-  Select$1.sanitizeValue = sanitizeSingleSelectValue;
-  Select$1.group = 'selection';
   const type$3 = 'taglist';
   function Taglist(props) {
     const {
       disabled,
       errors = [],
       field,
+      readonly,
       value: values = []
     } = props;
     const {
@@ -53253,6 +53446,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const [filter, setFilter] = l$2('');
     const [filteredOptions, setFilteredOptions] = l$2([]);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
@@ -53328,6 +53522,10 @@
           break;
       }
     };
+    const onBlur = () => {
+      setIsDropdownExpanded(false);
+      setFilter('');
+    };
     const onTagRemoveClick = (event, value) => {
       const {
         target
@@ -53344,7 +53542,8 @@
     return e$1("div", {
       class: formFieldClasses(type$3, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       onKeyDown: event => {
         if (event.key === 'Enter') {
@@ -53355,23 +53554,25 @@
       children: [e$1(Label$1, {
         label: label,
         required: required,
-        id: prefixId(`${id}-search`, formId)
+        id: prefixId$2(`${id}-search`, formId)
       }), e$1("div", {
         class: classNames('fjs-taglist', {
-          'fjs-disabled': disabled
+          'fjs-disabled': disabled,
+          'fjs-readonly': readonly
         }),
         children: [loadState === LOAD_STATES.LOADED && e$1("div", {
           class: "fjs-taglist-tags",
           children: values.map(v => {
             return e$1("div", {
               class: classNames('fjs-taglist-tag', {
-                'fjs-disabled': disabled
+                'fjs-disabled': disabled,
+                'fjs-readonly': readonly
               }),
               onMouseDown: e => e.preventDefault(),
               children: [e$1("span", {
                 class: "fjs-taglist-tag-label",
                 children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-              }), !disabled && e$1("button", {
+              }), !disabled && !readonly && e$1("button", {
                 type: "button",
                 title: "Remove tag",
                 class: "fjs-taglist-tag-remove",
@@ -53382,21 +53583,22 @@
           })
         }), e$1("input", {
           disabled: disabled,
+          readOnly: readonly,
           class: "fjs-taglist-input",
           ref: searchbarRef,
-          id: prefixId(`${id}-search`, formId),
+          id: prefixId$2(`${id}-search`, formId),
           onChange: onFilterChange,
           type: "text",
           value: filter,
-          placeholder: disabled ? '' : 'Search',
+          placeholder: disabled || readonly ? undefined : 'Search',
           autoComplete: "off",
-          onKeyDown: e => onInputKeyDown(e),
+          onKeyDown: onInputKeyDown,
           onMouseDown: () => setIsEscapeClose(false),
-          onFocus: () => setIsDropdownExpanded(true),
+          onFocus: () => !readonly && setIsDropdownExpanded(true),
           onBlur: () => {
-            setIsDropdownExpanded(false);
-            setFilter('');
-          }
+            !readonly && onBlur();
+          },
+          "aria-describedby": errorMessageId
         })]
       }), e$1("div", {
         class: "fjs-taglist-anchor",
@@ -53410,33 +53612,40 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Taglist.create = (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Taglist.config = {
+    type: type$3,
+    keyed: true,
+    label: 'Tag list',
+    group: 'selection',
+    emptyValue: [],
+    sanitizeValue: sanitizeMultiSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Taglist.type = type$3;
-  Taglist.label = 'Tag list';
-  Taglist.keyed = true;
-  Taglist.emptyValue = [];
-  Taglist.sanitizeValue = sanitizeMultiSelectValue;
-  Taglist.group = 'selection';
   const type$2 = 'text';
   function Text$1(props) {
+    const form = useService$2('form');
+    const {
+      textLinkTarget
+    } = form._getState().properties;
     const {
       field,
       disableLinks
@@ -53458,9 +53667,20 @@
       const html = markdownRenderer.render(markdown);
       return sanitizeHTML(html);
     }, [markdownRenderer, markdown]);
-    const componentOverrides = d(() => disableLinks ? {
-      'a': DisabledLink
-    } : {}, [disableLinks]);
+    const OverridenTargetLink = d(() => BuildOverridenTargetLink(textLinkTarget), [textLinkTarget]);
+    const componentOverrides = d(() => {
+      if (disableLinks) {
+        return {
+          'a': DisabledLink
+        };
+      }
+      if (textLinkTarget) {
+        return {
+          'a': OverridenTargetLink
+        };
+      }
+      return {};
+    }, [disableLinks, OverridenTargetLink, textLinkTarget]);
     return e$1("div", {
       class: formFieldClasses(type$2),
       children: e$1(Markup, {
@@ -53470,21 +53690,35 @@
       })
     });
   }
-  Text$1.create = (options = {}) => ({
-    text: '# Text',
-    ...options
-  });
-  Text$1.type = type$2;
-  Text$1.keyed = false;
-  Text$1.group = 'presentation';
-  Text$1.label = 'Text view';
+  Text$1.config = {
+    type: type$2,
+    keyed: false,
+    label: 'Text view',
+    group: 'presentation',
+    create: (options = {}) => ({
+      text: '# Text',
+      ...options
+    })
+  };
+  function BuildOverridenTargetLink(target) {
+    return function ({
+      children,
+      ...rest
+    }) {
+      return e$1("a", {
+        ...rest,
+        target: target,
+        children: children
+      });
+    };
+  }
   function DisabledLink({
-    href,
-    children
+    children,
+    ...rest
   }) {
     return e$1("a", {
+      ...rest,
       class: "fjs-disabled-link",
-      href: href,
       tabIndex: -1,
       children: children
     });
@@ -53495,6 +53729,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = ''
     } = props;
     const {
@@ -53522,51 +53757,70 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$1, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required
       }), e$1(InputAdorner, {
         disabled: disabled,
+        readonly: readonly,
         pre: prefixAdorner,
         post: suffixAdorner,
         children: e$1("input", {
           class: "fjs-input",
           disabled: disabled,
-          id: prefixId(id, formId),
+          readOnly: readonly,
+          id: prefixId$2(id, formId),
           onInput: onChange,
           type: "text",
-          value: value
+          value: value,
+          "aria-describedby": errorMessageId
         })
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Textfield$1.create = (options = {}) => ({
-    ...options
-  });
-  Textfield$1.type = type$1;
-  Textfield$1.label = 'Text field';
-  Textfield$1.keyed = true;
-  Textfield$1.emptyValue = '';
-  Textfield$1.sanitizeValue = ({
-    value
-  }) => isArray$4(value) || isObject$1(value) ? '' : String(value);
-  Textfield$1.group = 'basic-input';
+  Textfield$1.config = {
+    type: type$1,
+    keyed: true,
+    label: 'Text field',
+    group: 'basic-input',
+    emptyValue: '',
+    sanitizeValue: ({
+      value
+    }) => {
+      if (isArray$4(value) || isObject$1(value)) {
+        return '';
+      }
+
+      // sanitize newlines to spaces
+      if (typeof value === 'string') {
+        return value.replace(/[\r\n\t]/g, ' ');
+      }
+      return String(value);
+    },
+    create: (options = {}) => ({
+      ...options
+    })
+  };
   const type = 'textarea';
   function Textarea(props) {
     const {
       disabled,
       errors = [],
       field,
+      readonly,
       value = ''
     } = props;
     const {
@@ -53606,40 +53860,47 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required
       }), e$1("textarea", {
         class: "fjs-textarea",
         disabled: disabled,
-        id: prefixId(id, formId),
+        readonly: readonly,
+        id: prefixId$2(id, formId),
         onInput: onInput,
         value: value,
-        ref: textareaRef
+        ref: textareaRef,
+        "aria-describedby": errorMessageId
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Textarea.create = (options = {}) => ({
-    ...options
-  });
-  Textarea.type = type;
-  Textarea.label = 'Text area';
-  Textarea.keyed = true;
-  Textarea.emptyValue = '';
-  Textarea.sanitizeValue = ({
-    value
-  }) => isArray$4(value) || isObject$1(value) ? '' : String(value);
-  Textarea.group = 'basic-input';
+  Textarea.config = {
+    type,
+    keyed: true,
+    label: 'Text area',
+    group: 'basic-input',
+    emptyValue: '',
+    sanitizeValue: ({
+      value
+    }) => isArray$4(value) || isObject$1(value) ? '' : String(value),
+    create: (options = {}) => ({
+      ...options
+    })
+  };
   function _extends$d() {
     _extends$d = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -53660,10 +53921,11 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
+    d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18v-2.222z"
   }));
   function _extends$c() {
     _extends$c = Object.assign ? Object.assign.bind() : function (target) {
@@ -53685,7 +53947,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
   }));
@@ -53708,18 +53971,35 @@
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: "54",
     height: "54",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
-    fill: "#161616"
+    fill: "currentcolor"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a",
+    y: "24"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a",
+    y: "12"
+  })), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#b"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#b",
+    y: "12"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#b",
+    y: "24"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: "a",
+    d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
-    fill: "#161616"
-  }));
+    id: "b",
+    d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z"
+  })));
   function _extends$a() {
     _extends$a = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -53741,20 +54021,15 @@
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none"
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#000",
     fillRule: "evenodd",
-    d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36c-1.132 0-2.06.928-2.06 2.06v23.549c0 1.132.928 2.06 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 01-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592c.39 0 .707.317.707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z",
-    clipRule: "evenodd"
+    d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 00-2.06 2.06v23.549a2.07 2.07 0 002.06 2.06h6.77v-1.766h-6.358a.707.707 0 01-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 01.707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#000",
     d: "M35.13 37.603l1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#000",
     fillRule: "evenodd",
-    d: "M23.08 36.962a9.678 9.678 0 1017.883-7.408 9.678 9.678 0 00-17.882 7.408zm4.54-10.292a7.924 7.924 0 118.805 13.177A7.924 7.924 0 0127.62 26.67z",
-    clipRule: "evenodd"
+    d: "M23.08 36.962a9.678 9.678 0 1017.883-7.408 9.678 9.678 0 00-17.882 7.408zm4.54-10.292a7.924 7.924 0 118.805 13.177A7.924 7.924 0 0127.62 26.67z"
   }));
   function _extends$9() {
     _extends$9 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53774,18 +54049,15 @@
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1z",
-    fill: "#000"
+    d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z",
-    fill: "#505562"
+    d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z"
   }));
   function _extends$8() {
     _extends$8 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53809,22 +54081,22 @@
     width: "54",
     height: "54"
   }, props), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "17",
     width: "24",
     height: "4",
+    x: "15",
+    y: "17",
     rx: "1"
   }), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "25",
     width: "24",
     height: "4",
+    x: "15",
+    y: "25",
     rx: "1"
   }), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "33",
     width: "13",
     height: "4",
+    x: "15",
+    y: "33",
     rx: "1"
   }));
   function _extends$7() {
@@ -53872,7 +54144,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
@@ -53897,9 +54170,10 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 110-16 8 8 0 110 16z"
   }));
   function _extends$4() {
     _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53921,7 +54195,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
@@ -53946,9 +54221,10 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$3$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
+    d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zm19.62.92l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
   }));
   function _extends$2$1() {
     _extends$2$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53970,7 +54246,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$2$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
@@ -53995,10 +54272,11 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$1$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M45 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.848.849-6.363 6.363-.849-.848 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
+    d: "M45 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
   }));
   function _extends$k() {
     _extends$k = Object.assign ? Object.assign.bind() : function (target) {
@@ -54018,20 +54296,18 @@
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
     d: "M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z",
-    fill: "#000"
+    clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754c.06-.038.116-.083.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
-    fill: "#000"
+    d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754a.975.975 0 00.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
+    clipRule: "evenodd"
   }));
   const iconsByType = type => {
     return {
@@ -54056,7 +54332,7 @@
     constructor() {
       this._formFields = {};
       formFields.forEach(formField => {
-        this.register(formField.type, formField);
+        this.register(formField.config.type, formField);
       });
     }
     register(type, formField) {
@@ -54274,7 +54550,7 @@
       const {
         properties
       } = this._getState();
-      if (properties.readOnly) {
+      if (properties.readOnly || properties.disabled) {
         throw new Error('form is read-only');
       }
       const data = this._getSubmitData();
@@ -54502,7 +54778,7 @@
       return conditionChecker.applyConditions(toFilter, data);
     }
   }
-  const schemaVersion = 8;
+  const schemaVersion = 9;
 
   /**
    * Flatten array, one level deep.
@@ -55307,16 +55583,16 @@
       }
 
       var handle = item;
-      while (getParent(item) && isContainer(getParent(item)) === false) {
+      while (getParent$1(item) && isContainer(getParent$1(item)) === false) {
         if (o.invalid(item, handle)) {
           return;
         }
-        item = getParent(item); // drag target should be a top element
+        item = getParent$1(item); // drag target should be a top element
         if (!item) {
           return;
         }
       }
-      var source = getParent(item);
+      var source = getParent$1(item);
       if (!source) {
         return;
       }
@@ -55360,7 +55636,7 @@
         return;
       }
       var item = _copy || _item;
-      drop(item, getParent(item));
+      drop(item, getParent$1(item));
     }
     function ungrab() {
       _grabbed = false;
@@ -55386,7 +55662,7 @@
       }
     }
     function drop(item, target) {
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       if (_copy && o.copySortSource && target === _source) {
         parent.removeChild(_item);
       }
@@ -55402,7 +55678,7 @@
         return;
       }
       var item = _copy || _item;
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       if (parent) {
         parent.removeChild(item);
       }
@@ -55415,7 +55691,7 @@
       }
       var reverts = arguments.length > 0 ? revert : o.revertOnSpill;
       var item = _copy || _item;
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       var initial = isInitialPlacement(parent);
       if (initial === false && reverts) {
         if (_copy) {
@@ -55464,7 +55740,7 @@
     function findDropTarget(elementBehindCursor, clientX, clientY) {
       var target = elementBehindCursor;
       while (target && !accepted()) {
-        target = getParent(target);
+        target = getParent$1(target);
       }
       return target;
       function accepted() {
@@ -55502,7 +55778,7 @@
         _lastDropTarget = dropTarget;
         over();
       }
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       if (dropTarget === _source && _copy && !o.copySortSource) {
         if (parent) {
           parent.removeChild(item);
@@ -55568,14 +55844,14 @@
       if (_mirror) {
         classes$1.rm(o.mirrorContainer, 'gu-unselectable');
         touchy(documentElement, 'remove', 'mousemove', drag);
-        getParent(_mirror).removeChild(_mirror);
+        getParent$1(_mirror).removeChild(_mirror);
         _mirror = null;
       }
     }
     function getImmediateChild(dropTarget, target) {
       var immediate = target;
-      while (immediate !== dropTarget && getParent(immediate) !== dropTarget) {
-        immediate = getParent(immediate);
+      while (immediate !== dropTarget && getParent$1(immediate) !== dropTarget) {
+        immediate = getParent$1(immediate);
       }
       if (immediate === documentElement) {
         return null;
@@ -55698,7 +55974,7 @@
   function getRectHeight(rect) {
     return rect.height || rect.bottom - rect.top;
   }
-  function getParent(el) {
+  function getParent$1(el) {
     return el.parentNode === doc ? null : el.parentNode;
   }
   function isInput$1(el) {
@@ -55714,7 +55990,7 @@
     if (el.contentEditable === 'true') {
       return true;
     } // found a contentEditable element in the chain
-    return isEditable(getParent(el)); // contentEditable is set to 'inherit'
+    return isEditable(getParent$1(el)); // contentEditable is set to 'inherit'
   }
 
   function nextEl(el) {
@@ -55932,10 +56208,10 @@
     }
     return matches(currentElem, selector) ? currentElem : null;
   }
-  var componentEvent$1 = {};
-  var bind$1$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-    unbind$1$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-    prefix$1 = bind$1$1 !== 'addEventListener' ? 'on' : '';
+  var componentEvent = {};
+  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
+    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
+    prefix = bind$1 !== 'addEventListener' ? 'on' : '';
 
   /**
    * Bind `el` event `type` to `fn`.
@@ -55948,8 +56224,8 @@
    * @api public
    */
 
-  var bind_1 = componentEvent$1.bind = function (el, type, fn, capture) {
-    el[bind$1$1](prefix$1 + type, fn, capture || false);
+  var bind_1 = componentEvent.bind = function (el, type, fn, capture) {
+    el[bind$1](prefix + type, fn, capture || false);
     return fn;
   };
 
@@ -55964,16 +56240,16 @@
    * @api public
    */
 
-  var unbind_1 = componentEvent$1.unbind = function (el, type, fn, capture) {
-    el[unbind$1$1](prefix$1 + type, fn, capture || false);
+  var unbind_1 = componentEvent.unbind = function (el, type, fn, capture) {
+    el[unbind$1](prefix + type, fn, capture || false);
     return fn;
   };
   var event = /*#__PURE__*/_mergeNamespaces$1({
     __proto__: null,
     bind: bind_1,
     unbind: unbind_1,
-    'default': componentEvent$1
-  }, [componentEvent$1]);
+    'default': componentEvent
+  }, [componentEvent]);
 
   /**
    * Expose `parse`.
@@ -56168,48 +56444,6 @@
     }
   });
 
-  var componentEvent = {};
-  var bind$1, unbind$1, prefix;
-  function detect() {
-    bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent';
-    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent';
-    prefix = bind$1 !== 'addEventListener' ? 'on' : '';
-  }
-
-  /**
-   * Bind `el` event `type` to `fn`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-  componentEvent.bind = function (el, type, fn, capture) {
-    if (!bind$1) detect();
-    el[bind$1](prefix + type, fn, capture || false);
-    return fn;
-  };
-
-  /**
-   * Unbind `el` event `type`'s callback `fn`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-  componentEvent.unbind = function (el, type, fn, capture) {
-    if (!unbind$1) detect();
-    el[unbind$1](prefix + type, fn, capture || false);
-    return fn;
-  };
-
   /**
    * Expose `parse`.
    */
@@ -56748,6 +56982,15 @@
     '&.cm-editor.cm-focused': {
       outline: 'none'
     },
+    '& .cm-completionInfo': {
+      whiteSpace: 'pre-wrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    // Don't wrap whitespace for custom HTML
+    '& .cm-completionInfo > *': {
+      whiteSpace: 'normal'
+    },
     '& .cm-completionInfo ul': {
       margin: 0,
       paddingLeft: '15px'
@@ -57879,6 +58122,30 @@
   var DEFAULT_PRIORITY$2 = 1000;
   var slice = Array.prototype.slice;
 
+  /**
+   * @typedef { {
+   *   stopPropagation(): void;
+   *   preventDefault(): void;
+   *   cancelBubble: boolean;
+   *   defaultPrevented: boolean;
+   *   returnValue: any;
+   * } } Event
+   */
+
+  /**
+   * @template E
+   *
+   * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+   */
+
+  /**
+   * @typedef { {
+   *  priority: number;
+   *  next: EventBusListener | null;
+   *  callback: EventBusEventCallback<any>;
+   * } } EventBusListener
+   */
+
   /**
    * A general purpose event bus.
    *
@@ -57963,6 +58230,9 @@
    * ```
    */
   function EventBus() {
+    /**
+     * @type { Record<string, EventBusListener> }
+     */
     this._listeners = {};
 
     // cleanup on destroy on lowest priority to allow
@@ -57982,10 +58252,12 @@
    *
    * Returning anything but `undefined` from a listener will stop the listener propagation.
    *
-   * @param {string|Array<string>} events
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
   EventBus.prototype.on = function (events, priority, callback, that) {
     events = isArray(events) ? events : [events];
@@ -58017,14 +58289,16 @@
   };
 
   /**
-   * Register an event listener that is executed only once.
+   * Register an event listener that is called only once.
    *
-   * @param {string} event the event name to register for
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback the callback to execute
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] the listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
-  EventBus.prototype.once = function (event, priority, callback, that) {
+  EventBus.prototype.once = function (events, priority, callback, that) {
     var self = this;
     if (isFunction(priority)) {
       that = callback;
@@ -58037,7 +58311,7 @@
     function wrappedCallback() {
       wrappedCallback.__isTomb = true;
       var result = callback.apply(that, arguments);
-      self.off(event, wrappedCallback);
+      self.off(events, wrappedCallback);
       return result;
     }
 
@@ -58045,7 +58319,7 @@
     // bound callbacks via {@link #off} using the original
     // callback
     wrappedCallback[FN_REF] = callback;
-    this.on(event, priority, wrappedCallback);
+    this.on(events, priority, wrappedCallback);
   };
 
   /**
@@ -58053,8 +58327,8 @@
    *
    * If no callback is given, all listeners for a given event name are being removed.
    *
-   * @param {string|Array<string>} events
-   * @param {Function} [callback]
+   * @param {string|string[]} events
+   * @param {EventBusEventCallback} [callback]
    */
   EventBus.prototype.off = function (events, callback) {
     events = isArray(events) ? events : [events];
@@ -58065,11 +58339,11 @@
   };
 
   /**
-   * Create an EventBus event.
+   * Create an event recognized be the event bus.
    *
-   * @param {Object} data
+   * @param {Object} data Event data.
    *
-   * @return {Object} event, recognized by the eventBus
+   * @return {Event} An event that will be recognized by the event bus.
    */
   EventBus.prototype.createEvent = function (data) {
     var event = new InternalEvent();
@@ -58078,10 +58352,11 @@
   };
 
   /**
-   * Fires a named event.
+   * Fires an event.
    *
    * @example
    *
+   * ```javascript
    * // fire event by name
    * events.fire('foo');
    *
@@ -58099,13 +58374,13 @@
    * });
    *
    * events.fire({ type: 'foo' }, 'I am bar!');
+   * ```
    *
-   * @param {string} [name] the optional event name
-   * @param {Object} [event] the event object
-   * @param {...Object} additional arguments to be passed to the callback functions
+   * @param {string} [type] event type
+   * @param {Object} [data] event or event data
+   * @param {...any} [args] additional arguments the callback will be called with.
    *
-   * @return {boolean} the events return value, if specified or false if the
-   *                   default action was prevented by listeners
+   * @return {any} The return value. Will be set to `false` if the default was prevented.
    */
   EventBus.prototype.fire = function (type, data) {
     var event, firstListener, returnValue, args;
@@ -58157,6 +58432,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * Handle an error by firing an event.
+   *
+   * @param {Error} error The error to be handled.
+   *
+   * @return {boolean} Whether the error was handled.
+   */
   EventBus.prototype.handleError = function (error) {
     return this.fire('error', {
       error: error
@@ -58165,6 +58448,14 @@
   EventBus.prototype._destroy = function () {
     this._listeners = {};
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus.prototype._invokeListeners = function (event, args, listener) {
     var returnValue;
     while (listener) {
@@ -58177,6 +58468,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus.prototype._invokeListener = function (event, args, listener) {
     var returnValue;
     if (listener.callback.__isTomb) {
@@ -58205,7 +58504,7 @@
     return returnValue;
   };
 
-  /*
+  /**
    * Add new listener with a certain priority to the list
    * of listeners (for the given event).
    *
@@ -58219,7 +58518,7 @@
    *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
    *
    * @param {string} event
-   * @param {Object} listener { priority, callback }
+   * @param {EventBusListener} listener
    */
   EventBus.prototype._addListener = function (event, newListener) {
     var listener = this._getListeners(event),
@@ -58250,9 +58549,20 @@
     // add new listener to back
     previousListener.next = newListener;
   };
+
+  /**
+   * @param {string} name
+   *
+   * @return {EventBusListener}
+   */
   EventBus.prototype._getListeners = function (name) {
     return this._listeners[name];
   };
+
+  /**
+   * @param {string} name
+   * @param {EventBusListener} listener
+   */
   EventBus.prototype._setListeners = function (name, listener) {
     this._listeners[name] = listener;
   };
@@ -58300,9 +58610,9 @@
    * Invoke function. Be fast...
    *
    * @param {Function} fn
-   * @param {Array<Object>} args
+   * @param {any[]} args
    *
-   * @return {Any}
+   * @return {any}
    */
   function invokeFunction(fn, args) {
     return fn.apply(null, args);
@@ -58343,21 +58653,24 @@
       if (!fieldDefinition) {
         throw new Error(`form field of type <${type}> not supported`);
       }
+      const {
+        config
+      } = fieldDefinition;
       if (id && this._formFieldRegistry._ids.assigned(id)) {
         throw new Error(`ID <${id}> already assigned`);
       }
       if (key && this._formFieldRegistry._keys.assigned(key)) {
         throw new Error(`key <${key}> already assigned`);
       }
-      const labelAttrs = applyDefaults && fieldDefinition.label ? {
-        label: fieldDefinition.label
+      const labelAttrs = applyDefaults && config.label ? {
+        label: config.label
       } : {};
-      const field = fieldDefinition.create({
+      const field = config.create({
         ...labelAttrs,
         ...attrs
       });
       this._ensureId(field);
-      if (fieldDefinition.keyed) {
+      if (config.keyed) {
         this._ensureKey(field, applyDefaults);
       }
       return field;
@@ -58428,6 +58741,10 @@
       }
     }
   }
+  const MAX_COLUMNS_PER_ROW = 16;
+  const MAX_COLUMNS = 16;
+  const MIN_COLUMNS = 2;
+  const MAX_FIELDS_PER_ROW = 4;
   class FormLayoutValidator {
     /**
      * @constructor
@@ -58441,15 +58758,15 @@
     }
     validateField(field = {}, columns, row) {
       // allow empty (auto columns)
-      if (columns) {
-        // allow minimum 2 cols
-        if (columns < 2) {
-          return 'Minimum 2 columns are allowed';
+      if (Number.isInteger(columns)) {
+        // allow minimum cols
+        if (columns < MIN_COLUMNS) {
+          return `Minimum ${MIN_COLUMNS} columns are allowed`;
         }
 
-        // allow maximum 16 cols
-        if (columns > 16) {
-          return 'Maximum 16 columns are allowed';
+        // allow maximum cols
+        if (columns > MAX_COLUMNS) {
+          return `Maximum ${MAX_COLUMNS} columns are allowed`;
         }
       }
       if (!row) {
@@ -58474,16 +58791,23 @@
       });
 
       // do not allow overflows
-      if (sumColumns > 16 || sumColumns === 16 && sumAutoCols > 0 || columns === 16 && sumFields > 1) {
-        return 'New value exceeds the maximum of 16 columns per row';
+      if (sumColumns > MAX_COLUMNS_PER_ROW || sumAutoCols > 0 && sumColumns > calculateMaxColumnsWithAuto(sumAutoCols) || columns === MAX_COLUMNS_PER_ROW && sumFields > 1) {
+        return `New value exceeds the maximum of ${MAX_COLUMNS_PER_ROW} columns per row`;
       }
-      if (sumFields > 4) {
-        return 'Maximum 4 fields per row are allowed';
+      if (sumFields > MAX_FIELDS_PER_ROW) {
+        return `Maximum ${MAX_FIELDS_PER_ROW} fields per row are allowed`;
       }
       return null;
     }
   }
   FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
+
+  // helper //////////////////////
+
+  // on normal screen sizes, auto columns take minimum 2 columns
+  function calculateMaxColumnsWithAuto(autoCols) {
+    return MAX_COLUMNS_PER_ROW - autoCols * 2;
+  }
   class Importer {
     /**
      * @constructor
@@ -58597,6 +58921,91 @@
       'fjs-disabled': disabled
     });
   }
+
+  /**
+   * 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;
+    let startX, startY;
+
+    /** drag start */
+    function onDragStart(event) {
+      self = this;
+      startX = event.clientX;
+      startY = event.clientY;
+
+      // (1) prevent preview image
+      if (event.dataTransfer) {
+        event.dataTransfer.setDragImage(dragPreview, 0, 0);
+      }
+
+      // (2) setup drag listeners
+
+      // attach drag + cleanup event
+      document.addEventListener('dragover', onDrag);
+      document.addEventListener('dragend', onEnd);
+      document.addEventListener('drop', preventDefault);
+    }
+    function onDrag(event) {
+      const delta = {
+        x: event.clientX - startX,
+        y: event.clientY - startY
+      };
+
+      // call provided fn with event, delta
+      return fn.call(self, event, delta);
+    }
+    function onEnd() {
+      document.removeEventListener('dragover', onDrag);
+      document.removeEventListener('dragend', onEnd);
+      document.removeEventListener('drop', preventDefault);
+    }
+    return onDragStart;
+  }
+
+  /**
+   * Throttle function call according UI update cycle.
+   *
+   * @param  {Function} fn
+   *
+   * @return {Function} throttled fn
+   */
+  function throttle(fn) {
+    let active = false;
+    let lastArgs = [];
+    let lastThis = undefined;
+    return function (...args) {
+      lastArgs = args;
+      lastThis = this;
+      if (active) {
+        return;
+      }
+      active = true;
+      fn.apply(lastThis, lastArgs);
+      window.requestAnimationFrame(function () {
+        lastArgs = lastThis = active = undefined;
+      });
+    };
+  }
+  function preventDefault(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
   const DragAndDropContext = D$1({
     drake: null
   });
@@ -58660,10 +59069,54 @@
     };
     return _extends$2.apply(this, arguments);
   }
-  var DraggableIcon = ({
+  var DeleteIcon$1 = ({
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    width: "16",
+    height: "16",
+    x: ".536",
+    fill: "#fff",
+    rx: "3",
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M.536 0h16v16h-16z",
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
+  }));
+  function _extends$1() {
+    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$1.apply(this, arguments);
+  }
+  var DraggableIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -58675,8 +59128,8 @@
     d: "M0 0h32v32H0z",
     fill: "none"
   }));
-  function _extends$1() {
-    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -58687,12 +59140,12 @@
       }
       return target;
     };
-    return _extends$1.apply(this, arguments);
+    return _extends.apply(this, arguments);
   }
   var SearchIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$1({
+  }) => /*#__PURE__*/React.createElement("svg", _extends({
     width: "15",
     height: "15",
     fill: "none",
@@ -58747,47 +59200,25 @@
       disableLinks: true
     });
   }
-  EditorText.create = Text$1.create;
-  EditorText.type = Text$1.type;
-  EditorText.keyed = Text$1.keyed;
+  EditorText.config = Text$1.config;
   const editorFormFields = [EditorText];
   class EditorFormFields extends FormFields {
     constructor() {
       super();
       editorFormFields.forEach(formField => {
-        this.register(formField.type, formField);
+        this.register(formField.config.type, formField);
       });
     }
   }
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-  var ListDeleteIcon = ({
-    styles = {},
-    ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "11",
-    height: "14"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
-  }));
-  const PALETTE_ENTRIES = formFields.filter(f => f.type !== 'default').map(f => {
+  const PALETTE_ENTRIES = formFields.filter(({
+    config: fieldConfig
+  }) => fieldConfig.type !== 'default').map(({
+    config: fieldConfig
+  }) => {
     return {
-      label: f.label,
-      type: f.type,
-      group: f.group
+      label: fieldConfig.label,
+      type: fieldConfig.type,
+      group: fieldConfig.group
     };
   });
   const PALETTE_GROUPS = [{
@@ -58808,19 +59239,24 @@
     const [searchTerm, setSearchTerm] = l$2('');
     const inputRef = s$1();
     const groups = groupEntries(entries);
+    const simplifyString = A$1(str => {
+      return str.toLowerCase().replace(/\s+/g, '');
+    }, []);
+    const filter = A$1(entry => {
+      const simplifiedSearchTerm = simplifyString(searchTerm);
+      if (!simplifiedSearchTerm) {
+        return true;
+      }
+      const simplifiedEntryLabel = simplifyString(entry.label);
+      const simplifiedEntryType = simplifyString(entry.type);
+      return simplifiedEntryLabel.includes(simplifiedSearchTerm) || simplifiedEntryType.includes(simplifiedSearchTerm);
+    }, [searchTerm, simplifyString]);
 
     // filter entries on search change
     y(() => {
-      const filter = entry => {
-        if (!searchTerm) {
-          return true;
-        }
-        const search = entry.label.toLowerCase();
-        return searchTerm.toLowerCase().split(/\s/g).every(term => search.includes(term));
-      };
       const entries = PALETTE_ENTRIES.filter(filter);
       setEntries(entries);
-    }, [searchTerm]);
+    }, [filter, searchTerm]);
     const handleInput = A$1(event => {
       setSearchTerm(() => event.target.value);
     }, [setSearchTerm]);
@@ -59229,6 +59665,135 @@
       })]
     });
   }
+  const COLUMNS_REGEX = /^cds--col(-lg)?/;
+  const ELEMENT_RESIZING_CLS = 'fjs-element-resizing';
+  const RESIZE_DRAG_PREVIEW_CLS = 'fjs-resize-drag-preview';
+  const GRID_OFFSET_PX = 16;
+  function FieldResizer(props) {
+    const {
+      field,
+      position
+    } = props;
+    const ref = s$1(null);
+    const formLayoutValidator = useService$1('formLayoutValidator');
+    const modeling = useService$1('modeling');
+
+    // we can't use state as we need to
+    // manipulate this inside dragging events
+    const context = s$1({
+      startColumns: 0,
+      newColumns: 0
+    });
+    const onResize = throttle((_, delta) => {
+      const {
+        x: dx
+      } = delta;
+      const {
+        layout = {}
+      } = field;
+      const newColumns = calculateNewColumns(ref.current, layout.columns || context.current.startColumns, dx, position);
+      const errorMessage = formLayoutValidator.validateField(field, newColumns);
+      if (!errorMessage) {
+        context.current.newColumns = newColumns;
+
+        // make visual updates to preview change
+        const columnNode = ref.current.closest('.fjs-layout-column');
+        removeMatching(columnNode, COLUMNS_REGEX);
+        columnNode.classList.add(`cds--col-lg-${newColumns}`);
+      }
+    });
+    const onResizeStart = event => {
+      const target = getElementNode(field);
+      const parent = getParent(target);
+
+      // create a blank element to use as drag preview
+      // ensure it was only created once
+      let blankPreview = getDragPreviewImage(parent);
+      if (!blankPreview) {
+        blankPreview = document.createElement('div');
+        blankPreview.classList.add(RESIZE_DRAG_PREVIEW_CLS);
+        parent.appendChild(blankPreview);
+      }
+
+      // initialize drag handler
+      const onDragStart = createDragger(onResize, blankPreview);
+      onDragStart(event);
+
+      // mitigate auto columns on the grid that
+      // has a offset of 16px (1rem) to both side
+      const columnNode = getColumnNode(target);
+      const startWidth = columnNode.getBoundingClientRect().width + GRID_OFFSET_PX;
+      context.current.startColumns = asColumns(startWidth, parent);
+      setResizing(target, position);
+    };
+    const onResizeEnd = () => {
+      const {
+        layout = {}
+      } = field;
+      if (context.current.newColumns) {
+        modeling.editFormField(field, 'layout', {
+          ...layout,
+          columns: context.current.newColumns
+        });
+      }
+      const target = getElementNode(field);
+      unsetResizing(target, position);
+      context.current.newColumns = null;
+
+      // remove blank preview
+      const blankPreview = getDragPreviewImage(getParent(target));
+      blankPreview.remove();
+    };
+    if (field.type === 'default') {
+      return null;
+    }
+    return e$1("div", {
+      ref: ref,
+      class: classNames('fjs-field-resize-handle', 'fjs-field-resize-handle-' + position, DRAG_NO_MOVE_CLS),
+      draggable: true,
+      onDragStart: onResizeStart,
+      onDragEnd: onResizeEnd
+    });
+  }
+
+  // helper //////
+
+  function asColumns(width, parent) {
+    const totalWidth = parent.getBoundingClientRect().width;
+    const oneColumn = 1 / 16 * totalWidth;
+    return Math.round(width / oneColumn);
+  }
+  function calculateNewColumns(node, currentColumns, deltaX, position) {
+    const parent = getParent(node);
+
+    // invert delta if we are resizing from the left
+    if (position === 'left') {
+      deltaX = deltaX * -1;
+    }
+    const deltaColumns = asColumns(deltaX, parent);
+    return currentColumns + deltaColumns;
+  }
+  function getParent(node) {
+    return node.closest('.fjs-layout-row');
+  }
+  function removeMatching(node, regex) {
+    return classes(node).removeMatching(regex);
+  }
+  function getColumnNode(node) {
+    return node.closest('.fjs-layout-column');
+  }
+  function getElementNode(field) {
+    return query('.fjs-element[data-id="' + field.id + '"]');
+  }
+  function getDragPreviewImage(node) {
+    return query('.fjs-resize-drag-preview', node);
+  }
+  function setResizing(node, position) {
+    classes(node).add(ELEMENT_RESIZING_CLS + '-' + position);
+  }
+  function unsetResizing(node, position) {
+    classes(node).remove(ELEMENT_RESIZING_CLS + '-' + position);
+  }
   function ContextPad(props) {
     if (!props.children) {
       return null;
@@ -59241,7 +59806,7 @@
   function Empty(props) {
     return null;
   }
-  function Element$1(props) {
+  function Element(props) {
     const eventBus = useService$1('eventBus'),
       formEditor = useService$1('formEditor'),
       formFieldRegistry = useService$1('formFieldRegistry'),
@@ -59271,9 +59836,17 @@
       eventBus.on('selection.changed', scrollIntoView);
       return () => eventBus.off('selection.changed', scrollIntoView);
     }, [id]);
+    h(() => {
+      if (selection.isSelected(field)) {
+        ref.current.focus();
+      }
+    }, [selection, field]);
     function onClick(event) {
       event.stopPropagation();
       selection.toggle(field);
+
+      // properly focus on field
+      ref.current.focus();
     }
     const classes = [];
     if (props.class) {
@@ -59288,11 +59861,19 @@
       const index = getFormFieldIndex(parentField, field);
       modeling.removeFormField(field, parentField, index);
     };
+    const onKeyPress = event => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+        selection.toggle(field);
+      }
+    };
     return e$1("div", {
       class: classes.join(' '),
       "data-id": id,
       "data-field-type": type,
+      tabIndex: type === 'default' ? -1 : 0,
       onClick: onClick,
+      onKeyPress: onKeyPress,
       ref: ref,
       children: [e$1(DebugColumns, {
         field: field
@@ -59300,9 +59881,15 @@
         children: selection.isSelected(field) && field.type !== 'default' ? e$1("button", {
           class: "fjs-context-pad-item",
           onClick: onRemove,
-          children: e$1(ListDeleteIcon, {})
+          children: e$1(DeleteIcon$1, {})
         }) : null
-      }), props.children]
+      }), props.children, e$1(FieldResizer, {
+        position: "left",
+        field: field
+      }), e$1(FieldResizer, {
+        position: "right",
+        field: field
+      })]
     });
   }
   function DebugColumns(props) {
@@ -59387,8 +59974,12 @@
       propertiesPanel = useService$1('propertiesPanel'),
       propertiesPanelConfig = useService$1('config.propertiesPanel');
     const {
-      schema
+      schema,
+      properties
     } = formEditor._getState();
+    const {
+      ariaLabel
+    } = properties;
     const formContainerRef = s$1(null);
     const paletteRef = s$1(null);
     const propertiesPanelRef = s$1(null);
@@ -59460,7 +60051,7 @@
     const formRenderContext = {
       Children,
       Column,
-      Element: Element$1,
+      Element,
       Empty,
       Row
     };
@@ -59474,7 +60065,8 @@
                 data: {},
                 errors: {},
                 properties: {
-                  readOnly: true
+                  ariaLabel,
+                  disabled: true
                 },
                 schema
               };
@@ -59656,6 +60248,13 @@
     formLayoutValidator: ['type', FormLayoutValidator],
     fieldFactory: ['type', FieldFactory]
   };
+
+  /**
+   * @typedef {import('didi').Injector} Injector
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   */
+
   var NOT_REGISTERED_ERROR = 'is not a registered action',
     IS_REGISTERED_ERROR = 'is already registered';
 
@@ -59785,10 +60384,10 @@
   /**
    * Triggers a registered action
    *
-   * @param  {string} action
-   * @param  {Object} opts
+   * @param {string} action
+   * @param {Object} opts
    *
-   * @return {Unknown} Returns what the registered listener returns
+   * @return {unknown} Returns what the registered listener returns
    */
   EditorActions.prototype.trigger = function (action, opts) {
     if (!this._actions[action]) {
@@ -59817,7 +60416,7 @@
    * editorActions.isRegistered('spaceTool'); // true
    * ´´´
    *
-   * @param  {Object} actions
+   * @param {Object} actions
    */
   EditorActions.prototype.register = function (actions, listener) {
     var self = this;
@@ -59832,8 +60431,8 @@
   /**
    * Registers a listener to an action key
    *
-   * @param  {string} action
-   * @param  {Function} listener
+   * @param {string} action
+   * @param {Function} listener
    */
   EditorActions.prototype._registerAction = function (action, listener) {
     if (this.isRegistered(action)) {
@@ -59876,6 +60475,10 @@
   function error(action, message) {
     return new Error(action + ' ' + message);
   }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var EditorActionsModule$1 = {
     __init__: ['editorActions'],
     editorActions: ['type', EditorActions]
@@ -59931,10 +60534,10 @@
     __init__: ['dragging'],
     dragging: ['type', Dragging]
   };
-  var KEYS_COPY = ['c', 'C', 'KeyC'];
-  var KEYS_PASTE = ['v', 'V', 'KeyV'];
-  var KEYS_REDO$1 = ['y', 'Y', 'KeyY'];
-  var KEYS_UNDO$1 = ['z', 'Z', 'KeyZ'];
+  var KEYS_COPY = ['c', 'C'];
+  var KEYS_PASTE = ['v', 'V'];
+  var KEYS_REDO = ['y', 'Y'];
+  var KEYS_UNDO = ['z', 'Z'];
 
   /**
    * Returns true if event was triggered with any modifier
@@ -59959,7 +60562,7 @@
   /**
    * Checks if key pressed is one of provided keys.
    *
-   * @param {string|Array<string>} keys
+   * @param {string|string[]} keys
    * @param {KeyboardEvent} event
    */
   function isKey(keys, event) {
@@ -59980,11 +60583,16 @@
     return isCmd(event) && isKey(KEYS_PASTE, event);
   }
   function isUndo(event) {
-    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO$1, event);
+    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
   function isRedo(event) {
-    return isCmd(event) && (isKey(KEYS_REDO$1, event) || isKey(KEYS_UNDO$1, event) && isShift(event));
+    return isCmd(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
   }
+
+  /**
+   * @typedef {import('../../core/EventBus').default} EventBus
+   */
+
   var KEYDOWN_EVENT = 'keyboard.keydown',
     KEYUP_EVENT = 'keyboard.keyup';
   var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
@@ -60011,7 +60619,7 @@
    * A default binding for the keyboard may be specified via the
    * `keyboard.bindTo` configuration option.
    *
-   * @param {Config} config
+   * @param {Object} config
    * @param {EventBus} eventBus
    */
   function Keyboard(config, eventBus) {
@@ -60139,8 +60747,6 @@
     return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
   }
   var LOW_PRIORITY$1 = 500;
-  var KEYS_REDO = ['y', 'Y', 'KeyY'];
-  var KEYS_UNDO = ['z', 'Z', 'KeyZ'];
 
   /**
    * Adds default keyboard bindings.
@@ -60270,6 +60876,10 @@
       }
     });
   };
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var KeyboardModule$1 = {
     __init__: ['keyboard', 'keyboardBindings'],
     keyboard: ['type', Keyboard],
@@ -60794,32 +61404,47 @@
     }
   }
   Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
+
+  /**
+   * @typedef {import('../core/Types').ElementLike} ElementLike
+   * @typedef {import('../core/EventBus').default} EventBus
+   * @typedef {import('./CommandStack').CommandContext} CommandContext
+   *
+   * @typedef {string|string[]} Events
+   * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
+   * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
+   */
+
   var DEFAULT_PRIORITY = 1000;
 
   /**
-   * A utility that can be used to plug-in into the command execution for
+   * A utility that can be used to plug into the command execution for
    * extension and/or validation.
    *
-   * @param {EventBus} eventBus
+   * @class
+   * @constructor
    *
    * @example
    *
-   * import inherits from 'inherits-browser';
-   *
+   * ```javascript
    * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
    *
-   * function CommandLogger(eventBus) {
-   *   CommandInterceptor.call(this, eventBus);
+   * class CommandLogger extends CommandInterceptor {
+   *   constructor(eventBus) {
+   *     super(eventBus);
    *
-   *   this.preExecute(function(event) {
-   *     console.log('command pre-execute', event);
+   *   this.preExecute('shape.create', (event) => {
+   *     console.log('commandStack.shape-create.preExecute', event);
    *   });
    * }
+   * ```
    *
-   * inherits(CommandLogger, CommandInterceptor);
-   *
+   * @param {EventBus} eventBus
    */
   function CommandInterceptor(eventBus) {
+    /**
+     * @type {EventBus}
+     */
     this._eventBus = eventBus;
   }
   CommandInterceptor.$inject = ['eventBus'];
@@ -60830,15 +61455,14 @@
   }
 
   /**
-   * Register an interceptor for a command execution
+   * Intercept a command during one of the phases.
    *
-   * @param {string|Array<string>} [events] list of commands to register on
-   * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
-   * @param {number} [priority] the priority on which to hook into the execution
-   * @param {Function} handlerFn interceptor to be invoked with (event)
-   * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
-   *                          listener instead
-   * @param {Object} [that] Pass context (`this`) to the handler function
+   * @param {Events} [events] command(s) to intercept
+   * @param {string} [hook] phase to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
    */
   CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, unwrap, that) {
     if (isFunction(hook) || isNumber(hook)) {
@@ -60873,28 +61497,130 @@
       eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
     });
   };
-  var hooks = ['canExecute', 'preExecute', 'preExecuted', 'execute', 'executed', 'postExecute', 'postExecuted', 'revert', 'reverted'];
+
+  /**
+   * Add a <canExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.canExecute = createHook('canExecute');
+
+  /**
+   * Add a <preExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecute = createHook('preExecute');
+
+  /**
+   * Add a <preExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecuted = createHook('preExecuted');
+
+  /**
+   * Add a <execute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.execute = createHook('execute');
+
+  /**
+   * Add a <executed> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.executed = createHook('executed');
+
+  /**
+   * Add a <postExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecute = createHook('postExecute');
+
+  /**
+   * Add a <postExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecuted = createHook('postExecuted');
+
+  /**
+   * Add a <revert> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.revert = createHook('revert');
+
+  /**
+   * Add a <reverted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.reverted = createHook('reverted');
 
   /*
-   * Install hook shortcuts
+   * Add prototype methods for each phase of command execution (e.g. execute,
+   * revert).
+   *
+   * @param {string} hook
    *
-   * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
-   * which will in term forward to CommandInterceptor#on.
+   * @return { (
+   *   events?: Events,
+   *   priority?: number,
+   *   handlerFn: ComposeHandlerFunction|HandlerFunction,
+   *   unwrap?: boolean
+   * ) => any }
    */
-  forEach(hooks, function (hook) {
+  function createHook(hook) {
     /**
-     * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
-     *
-     * A named hook for plugging into the command execution
+     * @this {CommandInterceptor}
      *
-     * @param {string|Array<string>} [events] list of commands to register on
-     * @param {number} [priority] the priority on which to hook into the execution
-     * @param {Function} handlerFn interceptor to be invoked with (event)
-     * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
-     *                          listener instead
-     * @param {Object} [that] Pass context (`this`) to the handler function
+     * @param {Events} [events]
+     * @param {number} [priority]
+     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+     * @param {boolean} [unwrap]
+     * @param {any} [that]
      */
-    CommandInterceptor.prototype[hook] = function (events, priority, handlerFn, unwrap, that) {
+    const hookFn = function (events, priority, handlerFn, unwrap, that) {
       if (isFunction(events) || isNumber(events)) {
         that = unwrap;
         unwrap = handlerFn;
@@ -60904,7 +61630,8 @@
       }
       this.on(events, hook, priority, handlerFn, unwrap, that);
     };
-  });
+    return hookFn;
+  }
   class FormLayoutUpdater extends CommandInterceptor {
     constructor(eventBus, formLayouter, modeling, formEditor) {
       super(eventBus);
@@ -61037,6 +61764,34 @@
     validateBehavior: ['type', ValidateBehavior]
   };
 
+  /**
+   * @typedef {import('didi').Injector} Injector
+   *
+   * @typedef {import('../core/Types').ElementLike} ElementLike
+   *
+   * @typedef {import('../core/EventBus').default} EventBus
+   * @typedef {import('./CommandHandler').default} CommandHandler
+   *
+   * @typedef { any } CommandContext
+   * @typedef { {
+   *   new (...args: any[]) : CommandHandler
+   * } } CommandHandlerConstructor
+   * @typedef { {
+   *   [key: string]: CommandHandler;
+   * } } CommandHandlerMap
+   * @typedef { {
+   *   command: string;
+   *   context: any;
+   *   id?: any;
+   * } } CommandStackAction
+   * @typedef { {
+   *   actions: CommandStackAction[];
+   *   dirty: ElementLike[];
+   *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
+   *   atomic?: boolean;
+   * } } CurrentExecution
+   */
+
   /**
    * A service that offers un- and redoable execution of commands.
    *
@@ -61087,7 +61842,7 @@
    * got changed during the `execute` and `revert` operations.
    *
    * Command handlers may execute other modeling operations (and thus
-   * commands) in their `preExecute` and `postExecute` phases. The command
+   * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
    * stack will properly group all commands together into a logical unit
    * that may be re- and undone atomically.
    *
@@ -61117,14 +61872,14 @@
     /**
      * A map of all registered command handlers.
      *
-     * @type {Object}
+     * @type {CommandHandlerMap}
      */
     this._handlerMap = {};
 
     /**
      * A stack containing all re/undoable actions on the diagram
      *
-     * @type {Array<Object>}
+     * @type {CommandStackAction[]}
      */
     this._stack = [];
 
@@ -61138,18 +61893,27 @@
     /**
      * Current active commandStack execution
      *
-     * @type {Object}
-     * @property {Object[]} actions
-     * @property {Object[]} dirty
-     * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
+     * @type {CurrentExecution}
      */
     this._currentExecution = {
       actions: [],
       dirty: [],
       trigger: null
     };
+
+    /**
+     * @type {Injector}
+     */
     this._injector = injector;
+
+    /**
+     * @type EventBus
+     */
     this._eventBus = eventBus;
+
+    /**
+     * @type { number }
+     */
     this._uid = 1;
     eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
       this.clear(false);
@@ -61158,10 +61922,10 @@
   CommandStack.$inject = ['eventBus', 'injector'];
 
   /**
-   * Execute a command
+   * Execute a command.
    *
-   * @param {string} command the command to execute
-   * @param {Object} context the environment to execute the command in
+   * @param {string} command The command to execute.
+   * @param {CommandContext} context The context with which to execute the command.
    */
   CommandStack.prototype.execute = function (command, context) {
     if (!command) {
@@ -61174,11 +61938,11 @@
     };
     this._pushAction(action);
     this._internalExecute(action);
-    this._popAction(action);
+    this._popAction();
   };
 
   /**
-   * Ask whether a given command can be executed.
+   * Check whether a command can be executed.
    *
    * Implementors may hook into the mechanism on two ways:
    *
@@ -61192,10 +61956,10 @@
    *     If the method {@link CommandHandler#canExecute} is implemented in a handler
    *     it will be called to figure out whether the execution is allowed.
    *
-   * @param  {string} command the command to execute
-   * @param  {Object} context the environment to execute the command in
+   * @param {string} command The command to execute.
+   * @param {CommandContext} context The context with which to execute the command.
    *
-   * @return {boolean} true if the command can be executed
+   * @return {boolean} Whether the command can be executed with the given context.
    */
   CommandStack.prototype.canExecute = function (command, context) {
     const action = {
@@ -61219,7 +61983,9 @@
   };
 
   /**
-   * Clear the command stack, erasing all undo / redo history
+   * Clear the command stack, erasing all undo / redo history.
+   *
+   * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
    */
   CommandStack.prototype.clear = function (emit) {
     this._stack.length = 0;
@@ -61274,21 +62040,21 @@
   };
 
   /**
-   * Register a handler instance with the command stack
+   * Register a handler instance with the command stack.
    *
-   * @param {string} command
-   * @param {CommandHandler} handler
+   * @param {string} command Command to be executed.
+   * @param {CommandHandler} handler Handler to execute the command.
    */
   CommandStack.prototype.register = function (command, handler) {
     this._setHandler(command, handler);
   };
 
   /**
-   * Register a handler type with the command stack
-   * by instantiating it and injecting its dependencies.
+   * Register a handler type with the command stack  by instantiating it and
+   * injecting its dependencies.
    *
-   * @param {string} command
-   * @param {Function} a constructor for a {@link CommandHandler}
+   * @param {string} command Command to be executed.
+   * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
    */
   CommandStack.prototype.registerHandler = function (command, handlerCls) {
     if (!command || !handlerCls) {
@@ -61297,9 +62063,17 @@
     const handler = this._injector.instantiate(handlerCls);
     this.register(command, handler);
   };
+
+  /**
+   * @return {boolean}
+   */
   CommandStack.prototype.canUndo = function () {
     return !!this._getUndoAction();
   };
+
+  /**
+   * @return {boolean}
+   */
   CommandStack.prototype.canRedo = function () {
     return !!this._getRedoAction();
   };
@@ -61393,7 +62167,7 @@
       }
       this._fire(command, 'postExecuted', action);
     }
-    this._popAction(action);
+    this._popAction();
   };
   CommandStack.prototype._pushAction = function (action) {
     const execution = this._currentExecution,
@@ -61453,6 +62227,10 @@
     }
     this._handlerMap[command] = handler;
   };
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var commandModule = {
     commandStack: ['type', CommandStack]
   };
@@ -61652,44 +62430,18 @@
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  var FeelRequiredIcon = function FeelRequiredIcon(props) {
-    return e$1("svg", {
-      ...props,
-      children: [e$1("path", {
-        d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
-        fill: "currentColor"
-      }), e$1("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268Z",
-        fill: "currentColor"
-      }), e$1("path", {
-        d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304Z",
-        fill: "currentColor"
-      })]
-    });
-  };
-  FeelRequiredIcon.defaultProps = {
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  };
-  var FeelOptionalIcon = function FeelOptionalIcon(props) {
+  var FeelIcon$1 = function FeelIcon(props) {
     return e$1("svg", {
       ...props,
-      children: [e$1("path", {
-        d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
-        fill: "currentColor"
-      }), e$1("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z",
-        fill: "currentColor"
-      })]
+      children: e$1("path", {
+        d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
+        fill: "currentcolor"
+      })
     });
   };
-  FeelOptionalIcon.defaultProps = {
-    viewBox: "0 0 16 16",
+  FeelIcon$1.defaultProps = {
+    width: "14",
+    height: "14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
@@ -61929,6 +62681,18 @@
    * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+    const [scrollContainer, setScrollContainer] = l$2(query(scrollContainerSelector));
+    const updateScrollContainer = A$1(() => {
+      const newScrollContainer = query(scrollContainerSelector);
+      if (newScrollContainer !== scrollContainer) {
+        setScrollContainer(newScrollContainer);
+      }
+    }, [scrollContainerSelector, scrollContainer]);
+    y(() => {
+      updateScrollContainer();
+    }, [updateScrollContainer]);
+    useEvent('propertiesPanel.attach', updateScrollContainer);
+    useEvent('propertiesPanel.detach', updateScrollContainer);
     y(() => {
       const Observer = IntersectionObserver;
 
@@ -61936,33 +62700,36 @@
       if (!Observer) {
         return;
       }
-      let observer;
-      if (ref.current) {
-        const scrollContainer = query(scrollContainerSelector);
-        observer = new Observer(entries => {
-          entries.forEach(entry => {
-            if (entry.intersectionRatio < 1) {
-              setSticky(true);
-            } else if (entry.intersectionRatio === 1) {
-              setSticky(false);
-            }
-          });
-        }, {
-          root: scrollContainer,
-          rootMargin: '0px 0px 999999% 0px',
-          // Use bottom margin to avoid stickyness when scrolling out to bottom
-          threshold: [1]
-        });
-        observer.observe(ref.current);
+
+      // TODO(@barmac): test this
+      if (!ref.current || !scrollContainer) {
+        return;
       }
+      const observer = new Observer(entries => {
+        // scroll container is unmounted, do not update sticky state
+        if (scrollContainer.scrollHeight === 0) {
+          return;
+        }
+        entries.forEach(entry => {
+          if (entry.intersectionRatio < 1) {
+            setSticky(true);
+          } else if (entry.intersectionRatio === 1) {
+            setSticky(false);
+          }
+        });
+      }, {
+        root: scrollContainer,
+        rootMargin: '0px 0px 999999% 0px',
+        // Use bottom margin to avoid stickyness when scrolling out to bottom
+        threshold: [1]
+      });
+      observer.observe(ref.current);
 
       // Unobserve if unmounted
       return () => {
-        if (ref.current && observer) {
-          observer.unobserve(ref.current);
-        }
+        observer.unobserve(ref.current);
       };
-    }, [ref, scrollContainerSelector, setSticky]);
+    }, [ref.current, scrollContainer, setSticky]);
   }
 
   /**
@@ -62095,9 +62862,7 @@
       })
     });
   }
-  const DEFAULT_LAYOUT = {
-    open: true
-  };
+  const DEFAULT_LAYOUT = {};
   const DEFAULT_DESCRIPTION = {};
 
   /**
@@ -62184,7 +62949,7 @@
     const [layout, setLayout] = l$2(createLayout(layoutConfig));
 
     // react to external changes in the layout config
-    useUpdateEffect(() => {
+    useUpdateLayoutEffect(() => {
       const newLayout = createLayout(layoutConfig);
       setLayout(newLayout);
     }, [layoutConfig]);
@@ -62261,7 +63026,7 @@
             children: e$1(EventContext.Provider, {
               value: eventContext,
               children: e$1("div", {
-                class: classNames('bio-properties-panel', layout.open ? 'open' : ''),
+                class: "bio-properties-panel",
                 children: [e$1(Header, {
                   element: element,
                   headerProvider: headerProvider
@@ -62305,14 +63070,14 @@
   // hooks //////////////////
 
   /**
-   * This hook behaves like useEffect, but does not trigger on the first render.
+   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
    *
    * @param {Function} effect
    * @param {Array} deps
    */
-  function useUpdateEffect(effect, deps) {
+  function useUpdateLayoutEffect(effect, deps) {
     const isMounted = s$1(false);
-    y(() => {
+    h(() => {
       if (isMounted.current) {
         return effect();
       } else {
@@ -62930,14 +63695,13 @@
    */
   function FeelIcon(props) {
     const {
-      label,
       feel = false,
       active,
       disabled = false,
       onClick = noop$2
     } = props;
-    const feelRequiredLabel = ' must be a FEEL expression';
-    const feelOptionalLabel = ' can optionally be a FEEL expression';
+    const feelRequiredLabel = 'FEEL expression is mandatory';
+    const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
     const handleClick = e => {
       onClick(e);
 
@@ -62950,10 +63714,124 @@
       class: classNames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
       onClick: handleClick,
       disabled: feel === 'required' || disabled,
-      title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
-      children: feel === 'required' ? e$1(FeelRequiredIcon, {}) : e$1(FeelOptionalIcon, {})
+      title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+      children: e$1(FeelIcon$1, {})
+    });
+  }
+  function ToggleSwitch(props) {
+    const {
+      id,
+      label,
+      onInput,
+      value,
+      switcherLabel,
+      inline,
+      onFocus,
+      onBlur,
+      inputRef
+    } = props;
+    const [localValue, setLocalValue] = l$2(value);
+    const handleInputCallback = async () => {
+      onInput(!value);
+    };
+    const handleInput = e => {
+      handleInputCallback();
+      setLocalValue(e.target.value);
+    };
+    y(() => {
+      if (value === localValue) {
+        return;
+      }
+      setLocalValue(value);
+    }, [value]);
+    return e$1("div", {
+      class: classNames('bio-properties-panel-toggle-switch', {
+        inline
+      }),
+      children: [e$1("label", {
+        class: "bio-properties-panel-label",
+        for: prefixId$6(id),
+        children: label
+      }), e$1("div", {
+        class: "bio-properties-panel-field-wrapper",
+        children: [e$1("label", {
+          class: "bio-properties-panel-toggle-switch__switcher",
+          children: [e$1("input", {
+            ref: inputRef,
+            id: prefixId$6(id),
+            class: "bio-properties-panel-input",
+            type: "checkbox",
+            onFocus: onFocus,
+            onBlur: onBlur,
+            name: id,
+            onInput: handleInput,
+            checked: !!localValue
+          }), e$1("span", {
+            class: "bio-properties-panel-toggle-switch__slider"
+          })]
+        }), switcherLabel && e$1("p", {
+          class: "bio-properties-panel-toggle-switch__label",
+          children: switcherLabel
+        })]
+      })]
+    });
+  }
+
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {String} props.switcherLabel
+   * @param {Boolean} props.inline
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   */
+  function ToggleSwitchEntry(props) {
+    const {
+      element,
+      id,
+      description,
+      label,
+      switcherLabel,
+      inline,
+      getValue,
+      setValue,
+      onFocus,
+      onBlur
+    } = props;
+    const value = getValue(element);
+    return e$1("div", {
+      class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+      "data-entry-id": id,
+      children: [e$1(ToggleSwitch, {
+        id: id,
+        label: label,
+        value: value,
+        onInput: setValue,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        switcherLabel: switcherLabel,
+        inline: inline
+      }), e$1(Description$1, {
+        forId: id,
+        element: element,
+        value: description
+      })]
     });
   }
+  function isEdited$7(node) {
+    return node && !!node.checked;
+  }
+
+  // helpers /////////////////
+
+  function prefixId$6(id) {
+    return `bio-properties-panel-${id}`;
+  }
   const noop$1 = () => {};
   function FeelTextfield(props) {
     const {
@@ -62972,8 +63850,8 @@
     const [localValue, _setLocalValue] = l$2(value);
     const editorRef = useShowEntryEvent(id);
     const containerRef = s$1();
-    const feelActive = localValue.startsWith('=') || feel === 'required';
-    const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
+    const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
+    const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
     const [focus, _setFocus] = l$2(undefined);
     const setFocus = (offset = 0) => {
       const hasFocus = containerRef.current.contains(document.activeElement);
@@ -63013,7 +63891,7 @@
         return;
       }
       setLocalValue(newValue);
-      if (!feelActive && newValue.startsWith('=')) {
+      if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
         // focus is behind `=` sign that will be removed
         setFocus(-1);
       }
@@ -63076,9 +63954,11 @@
       };
     }, [containerRef, feelActive, handleFeelToggle, setFocus]);
     return e$1("div", {
-      class: "bio-properties-panel-feel-entry",
+      class: classNames('bio-properties-panel-feel-entry', {
+        'feel-active': feelActive
+      }),
       children: [e$1("label", {
-        for: prefixId$6(id),
+        for: prefixId$5(id),
         class: "bio-properties-panel-label",
         onClick: () => setFocus(),
         children: [label, e$1(FeelIcon, {
@@ -63095,7 +63975,7 @@
           disabled: feel !== 'optional' || disabled,
           onClick: handleFeelToggle
         }), feelActive ? e$1(CodeEditor, {
-          id: prefixId$6(id),
+          id: prefixId$5(id),
           name: id,
           onInput: handleLocalInput,
           disabled: disabled,
@@ -63112,7 +63992,8 @@
           ...props,
           onInput: handleLocalInput,
           contentAttributes: {
-            'id': prefixId$6(id)
+            'id': prefixId$5(id),
+            'aria-label': label
           },
           value: localValue,
           ref: editorRef
@@ -63149,7 +64030,7 @@
       }
     };
     return e$1("input", {
-      id: prefixId$6(id),
+      id: prefixId$5(id),
       type: "text",
       ref: inputRef,
       name: id,
@@ -63187,7 +64068,7 @@
       }
     };
     return e$1("textarea", {
-      id: prefixId$6(id),
+      id: prefixId$5(id),
       type: "text",
       ref: inputRef,
       name: id,
@@ -63202,6 +64083,78 @@
       "data-gramm": "false"
     });
   });
+  const OptionalFeelToggleSwitch = x((props, ref) => {
+    const {
+      id,
+      onInput,
+      value,
+      onFocus,
+      onBlur,
+      switcherLabel
+    } = props;
+    const inputRef = s$1();
+
+    // To be consistent with the FEEL editor, set focus at start of input
+    // this ensures clean editing experience when switching with the keyboard
+    ref.current = {
+      focus: () => {
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        input.focus();
+      }
+    };
+    return e$1(ToggleSwitch, {
+      id: id,
+      value: value,
+      inputRef: inputRef,
+      onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      switcherLabel: switcherLabel
+    });
+  });
+  x((props, ref) => {
+    const {
+      id,
+      disabled,
+      onInput,
+      value,
+      onFocus,
+      onBlur
+    } = props;
+    const inputRef = s$1();
+    const handleChange = ({
+      target
+    }) => {
+      onInput(target.checked);
+    };
+
+    // To be consistent with the FEEL editor, set focus at start of input
+    // this ensures clean editing experience when switching with the keyboard
+    ref.current = {
+      focus: () => {
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        input.focus();
+      }
+    };
+    return e$1("input", {
+      ref: inputRef,
+      id: prefixId$5(id),
+      name: id,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      type: "checkbox",
+      class: "bio-properties-panel-input",
+      onChange: handleChange,
+      checked: value,
+      disabled: disabled
+    });
+  });
 
   /**
    * @param {Object} props
@@ -63309,6 +64262,33 @@
     });
   }
 
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   */
+  function FeelToggleSwitchEntry(props) {
+    return e$1(FeelEntry, {
+      class: "bio-properties-panel-feel-toggle-switch",
+      OptionalComponent: OptionalFeelToggleSwitch,
+      ...props
+    });
+  }
+
   /**
    * @param {Object} props
    * @param {Object} props.element
@@ -63337,13 +64317,19 @@
       ...props
     });
   }
-  function isEdited$7(node) {
-    return node && (!!node.value || node.classList.contains('edited'));
+  function isEdited$6(node) {
+    if (!node) {
+      return false;
+    }
+    if (node.type === 'checkbox') {
+      return !!node.checked || node.classList.contains('edited');
+    }
+    return !!node.value || node.classList.contains('edited');
   }
 
   // helpers /////////////////
 
-  function prefixId$6(id) {
+  function prefixId$5(id) {
     return `bio-properties-panel-${id}`;
   }
   function NumberField(props) {
@@ -63385,11 +64371,11 @@
     return e$1("div", {
       class: "bio-properties-panel-numberfield",
       children: [e$1("label", {
-        for: prefixId$5(id),
+        for: prefixId$4(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("input", {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         type: "number",
         name: id,
         spellCheck: "false",
@@ -63493,13 +64479,13 @@
       })]
     });
   }
-  function isEdited$5(node) {
+  function isEdited$4(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$5(id) {
+  function prefixId$4(id) {
     return `bio-properties-panel-${id}`;
   }
   function Select(props) {
@@ -63533,12 +64519,12 @@
     return e$1("div", {
       class: "bio-properties-panel-select",
       children: [e$1("label", {
-        for: prefixId$4(id),
+        for: prefixId$3(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("select", {
         ref: ref,
-        id: prefixId$4(id),
+        id: prefixId$3(id),
         name: id,
         class: "bio-properties-panel-input",
         onInput: handleChange,
@@ -63645,13 +64631,13 @@
       })]
     });
   }
-  function isEdited$4(node) {
+  function isEdited$3(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$4(id) {
+  function prefixId$3(id) {
     return `bio-properties-panel-${id}`;
   }
   function resizeToContents(element) {
@@ -63699,12 +64685,12 @@
     return e$1("div", {
       class: "bio-properties-panel-textarea",
       children: [e$1("label", {
-        for: prefixId$2(id),
+        for: prefixId$1(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("textarea", {
         ref: ref,
-        id: prefixId$2(id),
+        id: prefixId$1(id),
         name: id,
         spellCheck: "false",
         class: classNames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
@@ -63732,6 +64718,7 @@
    * @param {Function} props.onBlur
    * @param {number} props.rows
    * @param {boolean} props.monospace
+   * @param {Function} [props.validate]
    * @param {boolean} [props.disabled]
    */
   function TextAreaEntry(props) {
@@ -63746,12 +64733,38 @@
       rows,
       monospace,
       disabled,
+      validate,
       onFocus,
       onBlur,
       autoResize
     } = props;
-    const value = getValue(element);
-    const error = useError(id);
+    const [cachedInvalidValue, setCachedInvalidValue] = l$2(null);
+    const globalError = useError(id);
+    const [localError, setLocalError] = l$2(null);
+    let value = getValue(element);
+    const previousValue = usePrevious(value);
+    y(() => {
+      if (isFunction(validate)) {
+        const newValidationError = validate(value) || null;
+        setLocalError(newValidationError);
+      }
+    }, [value]);
+    const onInput = newValue => {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      if (newValidationError) {
+        setCachedInvalidValue(newValue);
+      } else {
+        setValue(newValue);
+      }
+      setLocalError(newValidationError);
+    };
+    if (previousValue === value && localError) {
+      value = cachedInvalidValue;
+    }
+    const error = globalError || localError;
     return e$1("div", {
       class: classNames('bio-properties-panel-entry', error ? 'has-error' : ''),
       "data-entry-id": id,
@@ -63759,7 +64772,7 @@
         id: id,
         label: label,
         value: value,
-        onInput: setValue,
+        onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
         rows: rows,
@@ -63777,13 +64790,13 @@
       })]
     });
   }
-  function isEdited$2(node) {
+  function isEdited$1(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$2(id) {
+  function prefixId$1(id) {
     return `bio-properties-panel-${id}`;
   }
   function Textfield(props) {
@@ -63817,12 +64830,12 @@
     return e$1("div", {
       class: "bio-properties-panel-textfield",
       children: [e$1("label", {
-        for: prefixId$1(id),
+        for: prefixId(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("input", {
         ref: ref,
-        id: prefixId$1(id),
+        id: prefixId(id),
         type: "text",
         name: id,
         spellCheck: "false",
@@ -63914,13 +64927,13 @@
       })]
     });
   }
-  function isEdited$1(node) {
+  function isEdited(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$1(id) {
+  function prefixId(id) {
     return `bio-properties-panel-${id}`;
   }
 
@@ -64045,7 +65058,7 @@
         component: Action,
         editField: editField,
         field: field,
-        isEdited: isEdited$4
+        isEdited: isEdited$3
       });
     }
     return entries;
@@ -64111,7 +65124,7 @@
         component: AltText,
         editField: editField,
         field: field,
-        isEdited: isEdited$7
+        isEdited: isEdited$6
       });
     }
     return entries;
@@ -64155,7 +65168,7 @@
       component: Columns,
       field,
       editField,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     return entries;
   }
@@ -64185,7 +65198,7 @@
       },
       // todo(pinussilvestrus): make options dependant on field type
       // cf. https://github.com/bpmn-io/form-js/issues/575
-      ...[2, 4, 6, 8, 10, 12, 14, 16].map(asOption)];
+      ...asArray(16).filter(i => i >= MIN_COLUMNS).map(asOption)];
     };
     return SelectEntry({
       debounce,
@@ -64207,6 +65220,11 @@
       label: number.toString()
     };
   }
+  function asArray(length) {
+    return Array.from({
+      length
+    }).map((_, i) => i + 1);
+  }
   function DescriptionEntry(props) {
     const {
       editField,
@@ -64222,7 +65240,7 @@
         component: Description,
         editField: editField,
         field: field,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -64275,21 +65293,21 @@
       entries.push({
         ...defaultOptions,
         component: DefaultValueCheckbox,
-        isEdited: isEdited$4
+        isEdited: isEdited$3
       });
     }
     if (type === 'number') {
       entries.push({
         ...defaultOptions,
         component: DefaultValueNumber,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     if (type === 'radio' || type === 'select') {
       entries.push({
         ...defaultOptions,
         component: DefaultValueSingleSelect,
-        isEdited: isEdited$4
+        isEdited: isEdited$3
       });
     }
 
@@ -64299,14 +65317,14 @@
       entries.push({
         ...defaultOptions,
         component: DefaultValueTextfield,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     if (type === 'textarea') {
       entries.push({
         ...defaultOptions,
         component: DefaultValueTextarea,
-        isEdited: isEdited$2
+        isEdited: isEdited$1
       });
     }
     return entries;
@@ -64499,7 +65517,7 @@
         component: Disabled,
         editField: editField,
         field: field,
-        isEdited: isEdited$8
+        isEdited: isEdited$7
       });
     }
     return entries;
@@ -64517,11 +65535,12 @@
     const setValue = value => {
       return editField(field, path, value);
     };
-    return CheckboxEntry({
+    return ToggleSwitchEntry({
       element: field,
       getValue,
       id,
       label: 'Disabled',
+      inline: true,
       setValue
     });
   }
@@ -64537,7 +65556,7 @@
         component: Id,
         editField: editField,
         field: field,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -64616,7 +65635,7 @@
         component: Key$1,
         editField: editField,
         field: field,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -64678,7 +65697,7 @@
       field,
       editField,
       component: SimpleStringComponent,
-      isEdited: isEdited$1
+      isEdited: isEdited
     };
   }
   const SimpleStringComponent = props => {
@@ -64795,7 +65814,7 @@
         component: Source,
         editField: editField,
         field: field,
-        isEdited: isEdited$7
+        isEdited: isEdited$6
       });
     }
     return entries;
@@ -64849,7 +65868,7 @@
       component: Text,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     }];
 
     // todo: skipped to make the release without too much risk
@@ -64917,14 +65936,14 @@
     entries.push({
       id: id + '-decimalDigits',
       component: NumberDecimalDigits,
-      isEdited: isEdited$5,
+      isEdited: isEdited$4,
       editField,
       field
     });
     entries.push({
       id: id + '-step',
       component: NumberArrowStep,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field
     });
@@ -65060,7 +66079,7 @@
     const entries = [{
       id: 'subtype',
       component: DateTimeSubtypeSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     }];
@@ -65171,7 +66190,7 @@
       entries.push({
         id: id + '-timeInterval',
         component: TimeIntervalSelect,
-        isEdited: isEdited$4,
+        isEdited: isEdited$3,
         editField,
         field
       });
@@ -65249,7 +66268,7 @@
       entries.push({
         id: 'time-format',
         component: TimeFormatSelect,
-        isEdited: isEdited$4,
+        isEdited: isEdited$3,
         editField,
         field
       });
@@ -65505,7 +66524,7 @@
     return [{
       id: id + '-select',
       component: ValuesSourceSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     }];
@@ -65562,7 +66581,7 @@
       component: InputValuesKey,
       label: 'Input values key',
       description,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field
     }];
@@ -65697,7 +66716,7 @@
       entries.push({
         id: 'prefix-adorner',
         component: PrefixAdorner,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         editField,
         field,
         onChange,
@@ -65706,7 +66725,7 @@
       entries.push({
         id: 'suffix-adorner',
         component: SuffixAdorner,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         editField,
         field,
         onChange,
@@ -65749,6 +66768,54 @@
       setValue: onChange('suffixAdorner')
     });
   }
+  function ReadonlyEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const {
+      type
+    } = field;
+    const entries = [];
+    if (INPUTS.includes(type)) {
+      entries.push({
+        id: 'readonly',
+        component: Readonly,
+        editField: editField,
+        field: field,
+        isEdited: isEdited$6
+      });
+    }
+    return entries;
+  }
+  function Readonly(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const variables = useVariables().map(name => ({
+      name
+    }));
+    const path = ['readonly'];
+    const getValue = () => {
+      return get(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value || false);
+    };
+    return FeelToggleSwitchEntry({
+      debounce,
+      element: field,
+      feel: 'optional',
+      getValue,
+      id,
+      label: 'Read only',
+      setValue,
+      variables
+    });
+  }
   function ConditionEntry(props) {
     const {
       editField,
@@ -65759,7 +66826,7 @@
       component: Condition,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     }];
   }
   function Condition(props) {
@@ -65837,6 +66904,9 @@
     }), ...DisabledEntry({
       field,
       editField
+    }), ...ReadonlyEntry({
+      field,
+      editField
     })];
     return {
       id: 'general',
@@ -65924,7 +66994,7 @@
         getValue,
         field,
         editField,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         onChange
       });
     }
@@ -65934,14 +67004,14 @@
         component: MinLength,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       }, {
         id: 'maxLength',
         component: MaxLength,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       });
     }
@@ -65951,7 +67021,7 @@
         component: Pattern,
         getValue,
         field,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         onChange
       });
     }
@@ -65961,14 +67031,14 @@
         component: Min,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       }, {
         id: 'max',
         component: Max,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       });
     }
@@ -68237,7 +69307,8 @@
 
   function JSONEditor(options = {}) {
     const {
-      readonly = false
+      readonly = false,
+      contentAttributes = {}
     } = options;
     const emitter = mitt();
     let language = new Compartment().of(json());
@@ -68264,14 +69335,15 @@
         }
       });
       const editable = EditorView.editable.of(!readonly);
+      const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
       const view = new EditorView({
-        state: createState('', [updateListener, editable])
+        state: createState('', [updateListener, editable, contentAttributesExtension])
       });
       view.setValue = function (value) {
-        this.setState(createState(value, [updateListener, editable]));
+        this.setState(createState(value, [updateListener, editable, contentAttributesExtension]));
       };
       view.setVariables = function (variables) {
-        this.setState(createState(view.state.doc.toString(), [updateListener, editable], variables));
+        this.setState(createState(view.state.doc.toString(), [updateListener, editable, contentAttributesExtension], variables));
       };
       return view;
     }
@@ -68338,7 +69410,11 @@
     const {
       actions: actionsConfig = {},
       emit,
-      exporter: exporterConfig = {}
+      exporter: exporterConfig = {},
+      viewerProperties = {},
+      editorProperties = {},
+      viewerAdditionalModules = [],
+      editorAdditionalModules = []
     } = props;
     const {
       display: displayActions = true
@@ -68386,13 +69462,25 @@
     }, [props.schema]);
     y(() => {
       const dataEditor = dataEditorRef.current = new JSONEditor({
-        value: toString(data)
+        value: toString(data),
+        contentAttributes: {
+          'aria-label': 'Form Input'
+        }
       });
       const resultView = resultViewRef.current = new JSONEditor({
         readonly: true,
-        value: toString(resultData)
+        value: toString(resultData),
+        contentAttributes: {
+          'aria-label': 'Form Output'
+        }
+      });
+      const form = formRef.current = new Form({
+        additionalModules: viewerAdditionalModules,
+        properties: {
+          ...viewerProperties,
+          'ariaLabel': 'Form Preview'
+        }
       });
-      const form = formRef.current = new Form();
       const formEditor = formEditorRef.current = new FormEditor({
         renderer: {
           compact: true
@@ -68403,7 +69491,12 @@
         propertiesPanel: {
           parent: propertiesPanelContainerRef.current
         },
-        exporter: exporterConfig
+        exporter: exporterConfig,
+        properties: {
+          ...editorProperties,
+          'ariaLabel': 'Form Definition'
+        },
+        additionalModules: editorAdditionalModules
       });
       paletteRef.current = formEditor.get('palette');
       propertiesPanelRef.current = formEditor.get('propertiesPanel');