@bpmn-io/form-js-playground 1.7.0 → 1.7.2

package/dist/form-playground.umd.js

@@ -53323,20 +53323,59 @@
     }, [conditionChecker, condition, expressionContextInfo]);
   }
 
-  // parses the options data from the provided form field and form data
-  function getOptionsData(formField, formData) {
+  /**
+   * Returns the options data for the provided if they can be simply determined, ignoring expression defined options.
+   *
+   * @param {object} formField
+   * @param {object} formData
+   */
+  function getSimpleOptionsData(formField, formData) {
     const {
+      valuesExpression: optionsExpression,
       valuesKey: optionsKey,
       values: staticOptions
     } = formField;
+    if (optionsExpression) {
+      return null;
+    }
     return optionsKey ? get$1(formData, [optionsKey]) : staticOptions;
   }
 
-  // transforms the provided options into a normalized format, trimming invalid options
+  /**
+   * Normalizes the provided options data to a format that can be used by the select components.
+   * If the options data is not valid, it is filtered out.
+   *
+   * @param {any[]} optionsData
+   *
+   * @returns {object[]}
+   */
   function normalizeOptionsData(optionsData) {
     return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !isNil$1(o));
   }
 
+  /**
+   * Creates an options object with default values if no options are provided.
+   *
+   * @param {object} options
+   *
+   * @returns {object}
+   */
+  function createEmptyOptions(options = {}) {
+    const defaults = {};
+
+    // provide default options if valuesKey and valuesExpression are not set
+    if (!options.valuesKey && !options.valuesExpression) {
+      defaults.values = [{
+        label: 'Value',
+        value: 'value'
+      }];
+    }
+    return {
+      ...defaults,
+      ...options
+    };
+  }
+
   /**
    * Converts the provided option to a normalized format.
    * If the option is not valid, null is returned.
@@ -53387,21 +53426,6 @@
     }
     return _isAllowedPrimitive(value);
   }
-  function createEmptyOptions(options = {}) {
-    const defaults = {};
-
-    // provide default options if valuesKey and valuesExpression are not set
-    if (!options.valuesKey && !options.valuesExpression) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
 
   /**
    * Evaluate a string reactively based on the expressionLanguage and form data.
@@ -53421,29 +53445,20 @@
       return value;
     }, [expressionLanguage, expressionContextInfo, value]);
   }
-  function usePrevious$1(value, defaultValue = null) {
-    const ref = s$1(defaultValue);
-    y(() => ref.current = value, [value]);
-    return ref.current;
-  }
 
   /**
    * A custom hook to manage state changes with deep comparison.
    *
-   * @param {any} value - The current value to manage.
-   * @param {any} defaultValue - The initial default value for the state.
-   * @returns {any} - Returns the current state.
+   * @template T
+   * @param {T} value - The current value to manage.
+   * @returns {T} - Returns the current state.
    */
-  function useDeepCompareState(value, defaultValue) {
-    const [state, setState] = l$1(defaultValue);
-    const previous = usePrevious$1(value, defaultValue);
-    const changed = !isEqual$1(previous, value);
-    y(() => {
-      if (changed) {
-        setState(value);
-      }
-    }, [changed, value]);
-    return state;
+  function useDeepCompareMemoize(value) {
+    const ref = s$1();
+    if (!isEqual$1(value, ref.current)) {
+      ref.current = value;
+    }
+    return ref.current;
   }
 
   /**
@@ -53473,15 +53488,10 @@
       valuesKey: optionsKey,
       values: staticOptions
     } = field;
-    const [optionsGetter, setOptionsGetter] = l$1({
-      options: [],
-      error: undefined,
-      loadState: LOAD_STATES.LOADING
-    });
     const initialData = useService$2('form')._getState().initialData;
     const expressionEvaluation = useExpressionEvaluation(optionsExpression);
-    const evaluatedOptions = useDeepCompareState(expressionEvaluation || [], []);
-    y(() => {
+    const evaluatedOptions = useDeepCompareMemoize(expressionEvaluation || []);
+    const optionsGetter = d(() => {
       let options = [];
 
       // dynamic options
@@ -53496,18 +53506,16 @@
         options = Array.isArray(staticOptions) ? staticOptions : [];
 
         // expression
-      } else if (optionsExpression) {
-        if (evaluatedOptions && Array.isArray(evaluatedOptions)) {
-          options = evaluatedOptions;
-        }
+      } else if (optionsExpression && evaluatedOptions && Array.isArray(evaluatedOptions)) {
+        options = evaluatedOptions;
+
+        // error case
       } else {
-        setOptionsGetter(buildErrorState('No options source defined in the form definition'));
-        return;
+        return buildErrorState('No options source defined in the form definition');
       }
 
       // normalize data to support primitives and partially defined objects
-      options = normalizeOptionsData(options);
-      setOptionsGetter(buildLoadedState(options));
+      return buildLoadedState(normalizeOptionsData(options));
     }, [optionsKey, staticOptions, initialData, optionsExpression, evaluatedOptions]);
     return optionsGetter;
   }
@@ -53552,14 +53560,14 @@
     };
   };
 
-  /**
-   * A custom hook to build up security attributes from form configuration.
-   *
-   * @param {Object} security - The security configuration.
-   * @returns {Array} - Returns a tuple with sandbox and allow attributes.
+  /**
+   * A custom hook to build up security attributes from form configuration.
+   *
+   * @param {Object} security - The security configuration.
+   * @returns {Array} - Returns a tuple with sandbox and allow attributes.
    */
   function useSecurityAttributesMap(security) {
-    const securityMemoized = useDeepCompareState(security);
+    const securityMemoized = useDeepCompareMemoize(security);
     const sandbox = d(() => SECURITY_ATTRIBUTES_DEFINITIONS.filter(({
       attribute
     }) => attribute === SANDBOX_ATTRIBUTE).filter(({
@@ -53729,6 +53737,11 @@
     }
     return readonly || false;
   }
+  function usePrevious$1(value, defaultValue = null) {
+    const ref = s$1(defaultValue);
+    y(() => ref.current = value, [value]);
+    return ref.current;
+  }
   function useFlushDebounce(func) {
     const timeoutRef = s$1(null);
     const lastArgsRef = s$1(null);
@@ -53991,8 +54004,16 @@
       data,
       value
     } = options;
+    const {
+      valuesExpression: optionsExpression
+    } = formField;
     try {
-      const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+      // if options are expression evaluated, we don't need to sanitize the value against the options
+      // and defer to the field's internal validation
+      if (optionsExpression) {
+        return value;
+      }
+      const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
       return hasEqualValue(value, validValues) ? value : null;
     } catch (error) {
       // use default value in case of formatting error
@@ -54006,8 +54027,16 @@
       data,
       value
     } = options;
+    const {
+      valuesExpression: optionsExpression
+    } = formField;
     try {
-      const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+      // if options are expression evaluated, we don't need to sanitize the values against the options
+      // and defer to the field's internal validation
+      if (optionsExpression) {
+        return value;
+      }
+      const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
       return value.filter(v => hasEqualValue(v, validValues));
     } catch (error) {
       // use default value in case of formatting error
@@ -54093,7 +54122,7 @@
       onChange,
       values
     } = props;
-    const memoizedValues = useDeepCompareState(values, []);
+    const memoizedValues = useDeepCompareMemoize(values || []);
 
     // ensures that the values are always a subset of the possible options
     y(() => {
@@ -54112,7 +54141,8 @@
   }
   function Description$2(props) {
     const {
-      description
+      description,
+      id
     } = props;
     const evaluatedDescription = useSingleLineTemplateEvaluation(description || '', {
       debug: true
@@ -54121,6 +54151,7 @@
       return null;
     }
     return e("div", {
+      id: id,
       class: "fjs-form-field-description",
       children: evaluatedDescription
     });
@@ -54149,6 +54180,7 @@
   function Label$3(props) {
     const {
       id,
+      htmlFor,
       label,
       collapseOnEmpty = true,
       required = false
@@ -54157,12 +54189,14 @@
       debug: true
     });
     return e("label", {
-      for: id,
+      id: id,
+      for: htmlFor,
       class: classNames('fjs-form-field-label', {
         'fjs-incollapsible-label': !collapseOnEmpty
       }, props['class']),
       children: [props.children, evaluatedLabel, required && e("span", {
         class: "fjs-asterix",
+        "aria-hidden": true,
         children: "*"
       })]
     });
@@ -54172,7 +54206,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -54196,6 +54229,8 @@
         value: target.checked
       });
     };
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: classNames(formFieldClasses(type$f, {
         errors,
@@ -54205,7 +54240,7 @@
         'fjs-checked': value
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required,
         children: e("input", {
@@ -54218,13 +54253,16 @@
           onChange: onChange,
           onBlur: () => onBlur && onBlur(),
           onFocus: () => onFocus && onFocus(),
-          "aria-describedby": errorMessageId
+          required: required,
+          "aria-invalid": errors.length > 0,
+          "aria-describedby": [descriptionId, errorMessageId].join(' ')
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -54246,7 +54284,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -54293,6 +54330,8 @@
       values,
       onChange: props.onChange
     });
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: classNames(formFieldClasses(type$e, {
         errors,
@@ -54307,7 +54346,7 @@
         const itemDomId = `${domId}-${index}`;
         const isChecked = hasEqualValue(o.value, values);
         return e(Label$3, {
-          id: itemDomId,
+          htmlFor: itemDomId,
           label: o.label,
           class: classNames({
             'fjs-checked': isChecked
@@ -54323,14 +54362,17 @@
             onClick: () => toggleCheckbox(o.value),
             onBlur: onCheckboxBlur,
             onFocus: onCheckboxFocus,
-            "aria-describedby": errorMessageId
+            required: required,
+            "aria-invalid": errors.length > 0,
+            "aria-describedby": [descriptionId, errorMessageId].join(' ')
           })
         });
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -54409,6 +54451,7 @@
       }
     }, [viewerCommands, field, initialValue, initialValidationTrigger, indexes]);
     const onBlur = A$1(() => {
+      const value = get$1(data, valuePath);
       if (initialValidationTrigger) {
         setInitialValidationTrigger(false);
         viewerCommands.updateFieldValidation(field, value, indexes);
@@ -54416,7 +54459,7 @@
       eventBus.fire('formField.blur', {
         formField: field
       });
-    }, [eventBus, field, indexes, value, viewerCommands, initialValidationTrigger]);
+    }, [eventBus, field, indexes, viewerCommands, initialValidationTrigger, data, valuePath]);
     const onFocus = A$1(() => {
       eventBus.fire('formField.focus', {
         formField: field
@@ -54440,7 +54483,6 @@
     }
     const domId = `${prefixId$2(field.id, formId, indexes)}`;
     const fieldErrors = get$1(errors, [field.id, ...Object.values(indexes || {})]) || [];
-    const errorMessageId = errors.length === 0 ? undefined : `${domId}-error-message`;
     return e(Column, {
       field: field,
       class: gridColumnClasses(field),
@@ -54451,7 +54493,6 @@
           ...props,
           disabled: disabled,
           errors: fieldErrors,
-          errorMessageId: errorMessageId,
           domId: domId,
           onChange: disabled || readonly ? noop$1$1 : onChangeIndexed,
           onBlur: disabled || readonly ? noop$1$1 : onBlur,
@@ -54771,7 +54812,7 @@
     const [forceFocusCalendar, setForceFocusCalendar] = l$1(false);
 
     // ensures we render based on date value instead of reference
-    const date = useDeepCompareState(dateObject, null);
+    const date = useDeepCompareMemoize(dateObject);
 
     // shorts the date value back to the source
     y(() => {
@@ -54862,7 +54903,7 @@
     return e("div", {
       class: "fjs-datetime-subsection",
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         collapseOnEmpty: collapseLabelOnEmpty,
         required: required
@@ -55144,7 +55185,7 @@
     return e("div", {
       class: "fjs-datetime-subsection",
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         collapseOnEmpty: collapseLabelOnEmpty,
         required: required
@@ -55331,6 +55372,7 @@
       });
     }, []);
     const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
+    const descriptionId = `${prefixId$2(id, formId)}-description`;
     const datePickerProps = {
       label: dateLabel,
       collapseLabelOnEmpty: !timeLabel,
@@ -55343,7 +55385,7 @@
       date: dateTime.date,
       readonly,
       setDate,
-      'aria-describedby': errorMessageId
+      'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     const timePickerProps = {
       label: timeLabel,
@@ -55358,7 +55400,7 @@
       timeInterval,
       time: dateTime.time,
       setTime,
-      'aria-describedby': errorMessageId
+      'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return e("div", {
       class: formFieldClasses(type$d, {
@@ -55377,6 +55419,7 @@
           ...timePickerProps
         })]
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
         errors: allErrors,
@@ -55478,7 +55521,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: evaluatedLabel
       }), !evaluatedUrl && e(IFramePlaceholder, {
         text: "No content to show."
@@ -56283,7 +56326,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -56421,6 +56463,8 @@
         e.preventDefault();
       }
     };
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$a, {
         errors,
@@ -56428,7 +56472,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), e(TemplatedInputAdorner, {
@@ -56463,15 +56507,17 @@
             autoComplete: "off",
             step: incrementAmount,
             value: displayValue,
-            "aria-describedby": errorMessageId
+            "aria-describedby": [descriptionId, errorMessageId].join(' '),
+            required: required,
+            "aria-invalid": errors.length > 0
           }), e("div", {
             class: classNames('fjs-number-arrow-container', {
               'fjs-disabled': disabled,
               'fjs-readonly': readonly
             }),
             children: [e("button", {
-              class: "fjs-number-arrow-up",
               type: "button",
+              class: "fjs-number-arrow-up",
               "aria-label": "Increment",
               onClick: () => increment(),
               tabIndex: -1,
@@ -56479,8 +56525,8 @@
             }), e("div", {
               class: "fjs-number-arrow-separator"
             }), e("button", {
-              class: "fjs-number-arrow-down",
               type: "button",
+              class: "fjs-number-arrow-down",
               "aria-label": "Decrement",
               onClick: () => decrement(),
               tabIndex: -1,
@@ -56489,10 +56535,11 @@
           })]
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -56521,7 +56568,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -56567,6 +56613,8 @@
       value,
       onChange: props.onChange
     });
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$9, {
         errors,
@@ -56581,7 +56629,7 @@
         const itemDomId = `${domId}-${index}`;
         const isChecked = isEqual$1(option.value, value);
         return e(Label$3, {
-          id: itemDomId,
+          htmlFor: itemDomId,
           label: option.label,
           class: classNames({
             'fjs-checked': isChecked
@@ -56597,14 +56645,17 @@
             onClick: () => onChange(option.value),
             onBlur: onRadioBlur,
             onFocus: onRadioFocus,
-            "aria-describedby": errorMessageId
+            "aria-describedby": [descriptionId, errorMessageId].join(' '),
+            required: required,
+            "aria-invalid": errors.length > 0
           })
         }, index);
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -56680,7 +56731,7 @@
 
     // whenever we change the underlying value, set the label to it
     y(() => {
-      setFilter(label);
+      setFilter(label || '');
     }, [label]);
     const filteredOptions = d(() => {
       if (loadState !== LOAD_STATES.LOADED) {
@@ -56760,7 +56811,7 @@
     }, [onFocus]);
     const onInputBlur = A$1(() => {
       setIsDropdownExpanded(false);
-      setFilter(label);
+      setFilter(label || '');
       onBlur && onBlur();
     }, [onBlur, label]);
     return e(d$1, {
@@ -56855,6 +56906,9 @@
     }, [disabled, isDropdownExpanded, loadState, readonly, value]);
     const onMouseDown = A$1(e => {
       const input = inputRef.current;
+      if (disabled || !input) {
+        return;
+      }
       setIsDropdownExpanded(!isDropdownExpanded);
       if (isDropdownExpanded) {
         input.blur();
@@ -56862,7 +56916,7 @@
         input.focus();
       }
       e.preventDefault();
-    }, [isDropdownExpanded]);
+    }, [disabled, isDropdownExpanded]);
     const initialFocusIndex = d(() => value && findIndex$1(options, o => o.value === value) || 0, [options, value]);
     const onInputFocus = A$1(() => {
       if (!readonly) {
@@ -56933,7 +56987,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -56951,6 +57004,8 @@
     const {
       required
     } = validate;
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     const selectProps = {
       domId,
       disabled,
@@ -56961,7 +57016,9 @@
       value,
       onChange,
       readonly,
-      'aria-describedby': errorMessageId
+      required,
+      'aria-invalid': errors.length > 0,
+      'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return e("div", {
       class: formFieldClasses(type$8, {
@@ -56976,7 +57033,7 @@
         }
       },
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), searchable ? e(SearchableSelect, {
@@ -56984,10 +57041,11 @@
       }) : e(SimpleSelect, {
         ...selectProps
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -57115,7 +57173,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       onFocus,
       domId,
       onBlur,
@@ -57143,7 +57200,7 @@
     } = useOptionsAsync(field);
 
     // ensures we render based on array content instead of reference
-    const values = useDeepCompareState(value || [], []);
+    const values = useDeepCompareMemoize(value || []);
     useCleanupMultiSelectValue({
       field,
       loadState,
@@ -57251,6 +57308,8 @@
       inputRef.current.focus();
     };
     const shouldDisplayDropdown = d(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       ref: focusScopeRef,
       class: formFieldClasses(type$5, {
@@ -57267,7 +57326,7 @@
       children: [e(Label$3, {
         label: label,
         required: required,
-        id: domId
+        htmlFor: domId
       }), !disabled && !readonly && !!values.length && e(SkipLink, {
         className: "fjs-taglist-skip-link",
         label: "Skip to search",
@@ -57315,7 +57374,9 @@
           onMouseDown: () => setIsEscapeClose(false),
           onFocus: onInputFocus,
           onBlur: onInputBlur,
-          "aria-describedby": errorMessageId
+          "aria-describedby": [descriptionId, errorMessageId].join(' '),
+          required: required,
+          "aria-invalid": errors.length > 0
         })]
       }), e("div", {
         class: "fjs-taglist-anchor",
@@ -57327,10 +57388,11 @@
           listenerElement: inputRef.current
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -57643,7 +57705,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -57679,6 +57740,8 @@
     const onInputFocus = () => {
       onFocus && onFocus();
     };
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$2, {
         errors,
@@ -57686,7 +57749,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), e(TemplatedInputAdorner, {
@@ -57704,13 +57767,16 @@
           onFocus: onInputFocus,
           type: "text",
           value: value,
-          "aria-describedby": errorMessageId
+          "aria-describedby": [descriptionId, errorMessageId].join(' '),
+          required: required,
+          "aria-invalid": errors.length > 0
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -57742,7 +57808,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -57786,6 +57851,8 @@
     y(() => {
       autoSizeTextarea(textareaRef.current);
     }, []);
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$1, {
         errors,
@@ -57793,7 +57860,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), e("textarea", {
@@ -57806,12 +57873,15 @@
         onFocus: onInputFocus,
         value: value,
         ref: textareaRef,
-        "aria-describedby": errorMessageId
+        "aria-describedby": [descriptionId, errorMessageId].join(' '),
+        required: required,
+        "aria-invalid": errors.length > 0
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -58027,7 +58097,7 @@
     return e("div", {
       class: formFieldClasses(type),
       children: [e(Label$3, {
-        id: prefixId$2(id),
+        htmlFor: prefixId$2(id),
         label: label
       }), e("div", {
         class: classNames('fjs-table-middle-container', {
@@ -58423,7 +58493,7 @@
     }
   }
   const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression'];
-  const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
+  const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
   /**
    * @typedef { import('../types').Schema } Schema
@@ -59452,47 +59522,17 @@
       };
       const parentExpressionContextInfo = F$1(LocalExpressionContext);
       return e(d$1, {
-        children: displayValues.map((value, index) => {
-          const elementProps = d(() => ({
-            ...restProps,
-            indexes: {
-              ...(indexes || {}),
-              [repeaterField.id]: index
-            }
-          }), [index]);
-          const localExpressionContextInfo = d(() => ({
-            data: parentExpressionContextInfo.data,
-            this: value,
-            parent: buildExpressionContext(parentExpressionContextInfo),
-            i: [...parentExpressionContextInfo.i, index + 1]
-          }), [index, value]);
-          return !showRemove ? e(LocalExpressionContext.Provider, {
-            value: localExpressionContextInfo,
-            children: e(RowsRenderer, {
-              ...elementProps
-            })
-          }) : e("div", {
-            class: "fjs-repeat-row-container",
-            children: [e("div", {
-              class: "fjs-repeat-row-rows",
-              children: e(LocalExpressionContext.Provider, {
-                value: localExpressionContextInfo,
-                children: e(RowsRenderer, {
-                  ...elementProps
-                })
-              })
-            }), e("button", {
-              class: "fjs-repeat-row-remove",
-              type: "button",
-              "aria-label": `Remove list item ${index + 1}`,
-              onClick: () => onDeleteItem(index),
-              children: e("div", {
-                class: "fjs-repeat-row-remove-icon-container",
-                children: e(DeleteSvg, {})
-              })
-            })]
-          });
-        })
+        children: displayValues.map((value, index) => e(RepetitionScaffold, {
+          index: index,
+          value: value,
+          parentExpressionContextInfo: parentExpressionContextInfo,
+          repeaterField: repeaterField,
+          RowsRenderer: RowsRenderer,
+          indexes: indexes,
+          onDeleteItem: onDeleteItem,
+          showRemove: showRemove,
+          ...restProps
+        }, index))
       });
     }
     RepeatFooter(props) {
@@ -59555,18 +59595,18 @@
           'fjs-remove-allowed': repeaterField.allowAddRemove
         }),
         children: [showAdd ? e("button", {
+          type: "button",
           readOnly: readonly,
           disabled: disabled || readonly,
           class: "fjs-repeat-render-add",
-          type: "button",
           ref: addButtonRef,
           onClick: onAddItem,
           children: e(d$1, {
             children: [e(AddSvg, {}), " ", 'Add new']
           })
         }) : null, collapseEnabled ? e("button", {
-          class: "fjs-repeat-render-collapse",
           type: "button",
+          class: "fjs-repeat-render-collapse",
           onClick: toggle,
           children: isCollapsed ? e(d$1, {
             children: [e(ExpandSvg, {}), " ", `Expand all (${values.length})`]
@@ -59584,6 +59624,73 @@
       return nonCollapsedItems ? nonCollapsedItems : DEFAULT_NON_COLLAPSED_ITEMS;
     }
   }
+
+  /**
+   * Individual repetition of a repeated field and context scaffolding.
+   *
+   * @param {Object} props
+   * @param {number} props.index
+   * @param {Object} props.value
+   * @param {Object} props.parentExpressionContextInfo
+   * @param {Object} props.repeaterField
+   * @param {Function} props.RowsRenderer
+   * @param {Object} props.indexes
+   * @param {Function} props.onDeleteItem
+   * @param {boolean} props.showRemove
+   */
+
+  const RepetitionScaffold = props => {
+    const {
+      index,
+      value,
+      parentExpressionContextInfo,
+      repeaterField,
+      RowsRenderer,
+      indexes,
+      onDeleteItem,
+      showRemove,
+      ...restProps
+    } = props;
+    const elementProps = d(() => ({
+      ...restProps,
+      indexes: {
+        ...(indexes || {}),
+        [repeaterField.id]: index
+      }
+    }), [index, indexes, repeaterField.id, restProps]);
+    const localExpressionContextInfo = d(() => ({
+      data: parentExpressionContextInfo.data,
+      this: value,
+      parent: buildExpressionContext(parentExpressionContextInfo),
+      i: [...parentExpressionContextInfo.i, index + 1]
+    }), [index, parentExpressionContextInfo, value]);
+    return !showRemove ? e(LocalExpressionContext.Provider, {
+      value: localExpressionContextInfo,
+      children: e(RowsRenderer, {
+        ...elementProps
+      })
+    }) : e("div", {
+      class: "fjs-repeat-row-container",
+      children: [e("div", {
+        class: "fjs-repeat-row-rows",
+        children: e(LocalExpressionContext.Provider, {
+          value: localExpressionContextInfo,
+          children: e(RowsRenderer, {
+            ...elementProps
+          })
+        })
+      }), e("button", {
+        type: "button",
+        class: "fjs-repeat-row-remove",
+        "aria-label": `Remove list item ${index + 1}`,
+        onClick: () => onDeleteItem(index),
+        children: e("div", {
+          class: "fjs-repeat-row-remove-icon-container",
+          children: e(DeleteSvg, {})
+        })
+      })]
+    });
+  };
   RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
   const RepeatRenderModule$1 = {
     __init__: ['repeatRenderManager'],
@@ -67651,6 +67758,7 @@
       }
     };
     return e("button", {
+      type: "button",
       class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
       "data-field-type": type,
       title: `Create ${getIndefiniteArticle(type)} ${label} element`,
@@ -67742,6 +67850,7 @@
           value: searchTerm,
           onInput: handleInput
         }), searchTerm && e("button", {
+          type: "button",
           title: "Clear content",
           class: "fjs-palette-search-clear",
           onClick: handleClear,
@@ -68486,6 +68595,7 @@
         field: field
       }), e(ContextPad, {
         children: selection.isSelected(field) && field.type !== 'default' ? e("button", {
+          type: "button",
           title: getRemoveButtonTitle(field, formFields),
           class: "fjs-context-pad-item",
           onClick: onRemove,
@@ -75910,7 +76020,7 @@
       getValue,
       id,
       label: 'Disabled',
-      tooltip: 'Field cannot be edited by the end-user, and the data is not submitted.',
+      tooltip: 'Field cannot be edited by the end-user, and the data is not submitted. Takes precedence over read only.',
       inline: true,
       setValue
     });
@@ -76540,11 +76650,10 @@
       description,
       editField,
       field,
-      id,
-      defaultValue = 60 // default value for spacer
+      id
     } = props;
     const debounce = useService('debounce');
-    const getValue = e => get(field, ['height'], defaultValue);
+    const getValue = e => get(field, ['height'], null);
     const setValue = (value, error) => {
       if (error) {
         return;
@@ -76571,7 +76680,7 @@
     */
   const validate$7 = value => {
     if (typeof value !== 'number') {
-      return null;
+      return 'A number is required.';
     }
     if (!Number.isInteger(value)) {
       return 'Should be an integer.';
@@ -76583,7 +76692,6 @@
   function IFrameHeightEntry(props) {
     return [...HeightEntry({
       ...props,
-      defaultValue: 300,
       description: 'Height of the container in pixels.',
       isDefaultVisible: field => field.type === 'iframe'
     })];
@@ -76816,7 +76924,7 @@
 
   const description = e(d$1, {
     children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. ", e("a", {
-      href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
+      href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-html/",
       target: "_blank",
       children: "Learn more"
     })]
@@ -77759,15 +77867,20 @@
       editField,
       field
     } = props;
+    const {
+      disabled
+    } = field;
     const entries = [];
-    entries.push({
-      id: 'readonly',
-      component: Readonly,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$6,
-      isDefaultVisible: field => INPUTS.includes(field.type)
-    });
+    if (!disabled) {
+      entries.push({
+        id: 'readonly',
+        component: Readonly,
+        editField: editField,
+        field: field,
+        isEdited: isEdited$6,
+        isDefaultVisible: field => INPUTS.includes(field.type)
+      });
+    }
     return entries;
   }
   function Readonly(props) {
@@ -79631,6 +79744,7 @@
         }), e("div", {
           class: "fjs-pgl-modal-footer",
           children: e("button", {
+            type: "button",
             class: "fjs-pgl-button fjs-pgl-button-default",
             onClick: props.onClose,
             children: "Close"
@@ -81609,6 +81723,7 @@
           name: "Form Definition",
           children: [displayActions && e(Section.HeaderItem, {
             children: e("button", {
+              type: "button",
               class: "fjs-pgl-button",
               title: "Download form definition",
               onClick: handleDownload,
@@ -81616,6 +81731,7 @@
             })
           }), displayActions && e(Section.HeaderItem, {
             children: e("button", {
+              type: "button",
               class: "fjs-pgl-button",
               onClick: showEmbedModal,
               children: "Embed"