@plesk/ui-library 3.43.2 → 3.44.0

package/esm/components/Form/Form.js

@@ -10,7 +10,7 @@ import Button from '../Button';
 import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 import FormField from '../FormField';
 import Section from '../Section';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import FormContext from './FormContext';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import DisabledContext from './DisabledContext';
@@ -248,19 +248,22 @@ class Form extends Component {
       errors
     } = this.props;
     if (errors !== prevProps.errors) {
-      let field;
+      let fieldWithError;
       let fieldErrors;
-      Object.keys(this.fields).every(name => {
+      Object.keys(this.fields).forEach(name => {
         const foundError = getIn(errors, name);
-        if (foundError && typeof foundError === 'object' && Object.keys(foundError).length > 0) {
-          field = this.fields[name];
+        if (!foundError || typeof foundError !== 'object' || Object.keys(foundError).length === 0) {
+          return;
+        }
+        const field = this.fields[name];
+        field.sectionContext?.expand();
+        if (!fieldWithError) {
+          fieldWithError = field;
           fieldErrors = foundError;
-          return false;
         }
-        return true;
       });
-      if (field) {
-        field.focus(fieldErrors);
+      if (fieldWithError) {
+        fieldWithError.focus(fieldErrors);
       }
     }
   }
@@ -282,9 +285,8 @@ class Form extends Component {
       onClick: this.handleSubmitClick
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/_jsx(Translate, {
-        content: "Form.submitButton",
-        fallback: "Save"
+      children: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "Form.submitButton"
       }),
       ...(typeof submitButton === 'object' ? submitButton : {})
     });
@@ -304,9 +306,8 @@ class Form extends Component {
       onClick: this.handleApplyClick
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/_jsx(Translate, {
-        content: "Form.applyButton",
-        fallback: "Apply"
+      children: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "Form.applyButton"
       }),
       ...(typeof applyButton === 'object' ? applyButton : {})
     });
@@ -324,9 +325,8 @@ class Form extends Component {
       disabled: !!state
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/_jsx(Translate, {
-        content: "Form.cancelButton",
-        fallback: "Cancel"
+      children: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "Form.cancelButton"
       }),
       ...(typeof cancelButton === 'object' ? cancelButton : {})
     });

package/esm/components/FormField/FormField.js

@@ -12,9 +12,10 @@ import Link from '../Link';
 import Icon from '../Icon';
 import Popover from '../Popover';
 import Action from '../Action';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Focuser from '../Overlay/Focuser';
 import FormContext from '../Form/FormContext';
+import SectionContext from '../Section/SectionContext';
 import VerticalContext from '../VerticalContext';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DisabledContext from '../Form/DisabledContext';
@@ -55,12 +56,26 @@ class FormField extends Component {
       if (!this.props.multi) {
         return this.fieldApi;
       }
+      const getErrors = () => {
+        const errors = this.fieldApi.getErrors();
+        if (errors instanceof Array && errors[index]) {
+          return errors[index];
+        }
+        return {};
+      };
+      const getFullDescription = () => {
+        if (index === 0) {
+          return this.fieldApi.getFullDescription();
+        }
+        return null;
+      };
       return {
         getValues: () => this.fieldApi.getValues(),
         getId: () => {
           const id = this.fieldApi.getId();
           return id ? `${id}-${index}` : id;
         },
+        getDescriptionLabelId: () => this.fieldApi.getDescriptionLabelId(),
         getName: () => {
           const name = this.fieldApi.getName();
           return name ? `${name}[${index}]` : name;
@@ -76,13 +91,7 @@ class FormField extends Component {
           const values = getArrayHelper(this.fieldApi.getValue(), true);
           return this.fieldApi.setValue(values.map((v, i) => i === index ? value : v));
         },
-        getErrors: () => {
-          const errors = this.fieldApi.getErrors();
-          if (errors instanceof Array && errors[index]) {
-            return errors[index];
-          }
-          return {};
-        },
+        getErrors,
         getRequiredMark: () => {
           if (index === 0) {
             return this.fieldApi.getRequiredMark();
@@ -93,12 +102,7 @@ class FormField extends Component {
           className: `${this.props.baseClassName}__separator`
         }),
         isDisabled: () => !!this.props.disabled,
-        getFullDescription: () => {
-          if (index === 0) {
-            return this.fieldApi.getFullDescription();
-          }
-          return null;
-        }
+        getFullDescription
       };
     });
     _defineProperty(this, "focus", errors => {
@@ -111,9 +115,11 @@ class FormField extends Component {
       } = this.props;
       const target = this.targetRefs[index];
       if (target) {
-        scrollIntoView(target, {
-          boundary: scrollableElement
-        });
+        setTimeout(() => {
+          scrollIntoView(target, {
+            boundary: scrollableElement
+          });
+        }, 0);
         this.focusTimer = setTimeout(() => {
           if (target) {
             new Focuser().focusFirstDescendant(target);
@@ -168,10 +174,9 @@ class FormField extends Component {
       return /*#__PURE__*/_jsx(Button, {
         className: `${this.props.baseClassName}__remove`,
         icon: isClearable ? 'clean' : 'cross-mark',
-        tooltip: /*#__PURE__*/_jsx(Translate, {
+        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
           namespace: "FormField",
           content: isClearable ? 'clear' : 'remove',
-          fallback: isClearable ? 'Clear' : 'Remove',
           translators: locale
         }),
         onClick: () => this.handleRemove(index),
@@ -182,7 +187,7 @@ class FormField extends Component {
     /**
      * Renders description for last row.
      */
-    _defineProperty(this, "renderDescription", index => {
+    _defineProperty(this, "renderDescription", (index, id) => {
       const {
         baseClassName,
         description,
@@ -192,6 +197,7 @@ class FormField extends Component {
         return null;
       }
       return /*#__PURE__*/_jsx(Hint, {
+        id: id ? `${id}-description` : undefined,
         component: "div",
         className: `${baseClassName}__description`,
         children: description
@@ -221,6 +227,7 @@ class FormField extends Component {
         onRemoveRow,
         locale,
         form,
+        section,
         vertical,
         scrollableElement,
         fullDescription,
@@ -240,6 +247,7 @@ class FormField extends Component {
           children: [innerField, ` `, _this.renderRemoveButton(index)]
         });
       }
+      const fieldId = fieldApi.getId();
       return /*#__PURE__*/_jsxs(SectionItem, {
         className: classNames(baseClassName, {
           [`${baseClassName}--error`]: hasErrors,
@@ -248,7 +256,7 @@ class FormField extends Component {
         title: label === null ? null : /*#__PURE__*/_jsxs("div", {
           className: `${baseClassName}__label`,
           children: [/*#__PURE__*/_jsx("label", {
-            htmlFor: fieldApi.getId(),
+            htmlFor: fieldId,
             children: label
           }), fieldApi.getFullDescription(), required ? fieldApi.getRequiredMark() : null]
         }),
@@ -258,21 +266,21 @@ class FormField extends Component {
           ref: _this.setTargetRef(index),
           children: innerField
         }), hasErrors && Object.keys(fieldErrors).map(key => /*#__PURE__*/_jsxs("span", {
+          id: fieldId ? `${id}-${key}` : undefined,
           className: `${baseClassName}__error`,
           children: [/*#__PURE__*/_jsx(Icon, {
             className: `${baseClassName}__error-icon`,
             name: "exclamation-mark-circle-filled",
             size: "12"
           }), fieldErrors[key]]
-        }, key)), _this.renderDescription(index), renderAddMore && /*#__PURE__*/_jsx(Link, {
+        }, key)), _this.renderDescription(index, fieldId), renderAddMore && /*#__PURE__*/_jsx(Link, {
           role: "button",
           onClick: _this.handleAddMore,
           className: `${baseClassName}__add-more`,
           disabled: disabled,
-          children: /*#__PURE__*/_jsx(Translate, {
+          children: /*#__PURE__*/_jsx(InternalTranslate, {
             namespace: "FormField",
             content: "addMore",
-            fallback: "Add one more",
             translators: locale
           })
         })]
@@ -292,6 +300,32 @@ class FormField extends Component {
       value: valueInState,
       errors: this.props.errors
     };
+    const _getErrors = () => {
+      if (this.props.form && this.props.name) {
+        return this.props.form.getErrors(this.props.name);
+      }
+      return this.state.errors;
+    };
+    const _getFullDescription = () => {
+      if (!this.props.fullDescription) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(Popover, {
+        target: /*#__PURE__*/_jsx(Action, {
+          outerProps: {
+            className: `${this.props.baseClassName}__full-description`
+          },
+          icon: {
+            name: 'info-circle',
+            size: '12',
+            className: `${this.props.baseClassName}__full-description-icon`
+          }
+        }),
+        placement: "right",
+        intent: "info",
+        children: this.props.fullDescription
+      });
+    };
     this.fieldApi = {
       getId: () => {
         if (this.props.id) {
@@ -302,6 +336,19 @@ class FormField extends Component {
         }
         return undefined;
       },
+      getDescriptionLabelId: () => {
+        const errors = _getErrors();
+        const id = this.fieldApi.getId();
+        if (!id) {
+          return undefined;
+        }
+        if (errors && Object.keys(errors).length > 0) {
+          const [errorKey] = Object.keys(errors);
+          return `${id}-${errorKey}`;
+        }
+        const hasDescription = !!this.props.description;
+        return hasDescription ? `${id}-description` : undefined;
+      },
       getName: () => this.props.name,
       getValues: () => {
         if (this.props.form) {
@@ -324,12 +371,7 @@ class FormField extends Component {
         }
         safeInvoke(this.props.onChange, value);
       },
-      getErrors: () => {
-        if (this.props.form && this.props.name) {
-          return this.props.form.getErrors(this.props.name);
-        }
-        return this.state.errors;
-      },
+      getErrors: _getErrors,
       getRequiredMark: () => {
         if (this.props.form) {
           return this.props.form.getRequiredMark();
@@ -337,26 +379,7 @@ class FormField extends Component {
         return null;
       },
       isDisabled: () => Boolean(this.props.disabled),
-      getFullDescription: () => {
-        if (!this.props.fullDescription) {
-          return null;
-        }
-        return /*#__PURE__*/_jsx(Popover, {
-          target: /*#__PURE__*/_jsx(Action, {
-            outerProps: {
-              className: `${this.props.baseClassName}__full-description`
-            },
-            icon: {
-              name: 'info-circle',
-              size: '12',
-              className: `${this.props.baseClassName}__full-description-icon`
-            }
-          }),
-          placement: "right",
-          intent: "info",
-          children: this.props.fullDescription
-        });
-      }
+      getFullDescription: _getFullDescription
     };
     this.targetRefs = [];
   }
@@ -389,7 +412,8 @@ class FormField extends Component {
     if (this.props.form && this.props.name) {
       this.props.form.setRequiredField(this.props.name, !!this.props.required);
       this.props.form.registerField(this.props.name, {
-        focus: this.focus
+        focus: this.focus,
+        sectionContext: this.props.section
       });
     }
   }
@@ -435,6 +459,7 @@ const FormFieldWrapper = _ref => {
     ...props
   } = _ref;
   const form = useContext(FormContext);
+  const section = useContext(SectionContext);
   const verticalContext = useContext(VerticalContext);
   const vertical = props.vertical === undefined ? verticalContext : props.vertical;
   const scrollableElement = useContext(ScrollableElementFormContext);
@@ -442,6 +467,7 @@ const FormFieldWrapper = _ref => {
   return /*#__PURE__*/_jsx(FormField, {
     ...props,
     form: form,
+    section: section,
     vertical: vertical,
     scrollableElement: scrollableElement,
     disabled: props.disabled || disabled,

package/esm/components/FormFieldCheckbox/FormFieldCheckbox.js

@@ -35,7 +35,9 @@ const FormFieldCheckbox = _ref => {
         setValue,
         getRequiredMark,
         getFullDescription,
-        isDisabled
+        isDisabled,
+        getErrors,
+        getDescriptionLabelId
       } = _ref2;
       return /*#__PURE__*/_jsxs(Fragment, {
         children: [/*#__PURE__*/_jsx("input", {
@@ -49,7 +51,9 @@ const FormFieldCheckbox = _ref => {
             id: getId(),
             name: getName(),
             value: checkedValue.toString(),
-            autoFocus
+            autoFocus,
+            'aria-invalid': !!Object.keys(getErrors() ?? {}).length,
+            'aria-describedby': getDescriptionLabelId()
           },
           disabled: isDisabled(),
           rightAddon: /*#__PURE__*/_jsxs(_Fragment, {

package/esm/components/FormFieldPassword/FormFieldPassword.js

@@ -8,10 +8,9 @@ import Button from '../Button';
 import FormField from '../FormField';
 import Input from '../Input';
 import Toast from '../Toast';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import PasswordMeter from './PasswordMeter';
 import generatePassword from './generatePassword';
-import locale from './locale/en-US';
 import { copyToClipboard } from '../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -64,9 +63,8 @@ class FormFieldPassword extends Component {
       className: `${baseClassName}__button--copy`,
       icon: 'copy',
       onClick: () => this.handleCopyToClipboard(value),
-      tooltip: /*#__PURE__*/_jsx(Translate, {
-        content: "FormFieldPassword.copyButtonHint",
-        fallback: locale.copyButtonHint
+      tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "FormFieldPassword.copyButtonHint"
       }),
       disabled: isDisabled()
     };
@@ -99,14 +97,12 @@ class FormFieldPassword extends Component {
           passwordGenerated: true
         });
       },
-      tooltip: /*#__PURE__*/_jsx(Translate, {
-        content: "FormFieldPassword.generateButtonHint",
-        fallback: locale.generateButtonHint
+      tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "FormFieldPassword.generateButtonHint"
       }),
       disabled: isDisabled(),
-      children: /*#__PURE__*/_jsx(Translate, {
-        content: "FormFieldPassword.generateButton",
-        fallback: locale.generateButton
+      children: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "FormFieldPassword.generateButton"
       })
     };
     let button;
@@ -150,7 +146,9 @@ class FormFieldPassword extends Component {
           getName,
           getValue,
           setValue,
-          isDisabled
+          getErrors,
+          isDisabled,
+          getDescriptionLabelId
         } = _ref4;
         const value = getValue('');
         const input = /*#__PURE__*/_jsx(Input, {
@@ -169,16 +167,16 @@ class FormFieldPassword extends Component {
           autoComplete: autoComplete,
           className: `${baseClassName}__input`,
           size: size,
+          "aria-invalid": !!Object.keys(getErrors() ?? {}).length,
+          "aria-describedby": getDescriptionLabelId(),
           suffix: hideShowButton ? null : /*#__PURE__*/_jsx(Button, {
             className: `${baseClassName}__button--show`,
             onClick: this.handleToggleClick,
             icon: visible ? 'visible' : 'invisible',
-            tooltip: visible ? /*#__PURE__*/_jsx(Translate, {
-              content: "FormFieldPassword.hidePassword",
-              fallback: locale.hidePassword
-            }) : /*#__PURE__*/_jsx(Translate, {
-              content: "FormFieldPassword.showPassword",
-              fallback: locale.showPassword
+            tooltip: visible ? /*#__PURE__*/_jsx(InternalTranslate, {
+              content: "FormFieldPassword.hidePassword"
+            }) : /*#__PURE__*/_jsx(InternalTranslate, {
+              content: "FormFieldPassword.showPassword"
             }),
             ghost: true,
             disabled: isDisabled()
@@ -199,9 +197,8 @@ class FormFieldPassword extends Component {
               }),
               icon: "check-mark-circle-filled",
               intent: "success",
-              message: /*#__PURE__*/_jsx(Translate, {
-                content: "FormFieldPassword.copySuccessToast",
-                fallback: locale.copySuccessToast
+              message: /*#__PURE__*/_jsx(InternalTranslate, {
+                content: "FormFieldPassword.copySuccessToast"
               })
             })
           }), /*#__PURE__*/_jsx("div", {

package/esm/components/FormFieldPassword/PasswordMeter.js

@@ -2,9 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import Popover from '../Popover';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import estimatePassword, { DEFAULT_RULES } from './estimatePassword';
-import locale from './locale/en-US';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const strengthIntents = {
   VeryWeak: 'danger',
@@ -38,22 +37,19 @@ const PasswordMeter = _ref => {
     canCloseOnEscapePress: false,
     ...props,
     target: children,
-    children: [result?.strength ? /*#__PURE__*/_jsx(Translate, {
+    children: [result?.strength ? /*#__PURE__*/_jsx(InternalTranslate, {
       component: "div",
       content: "FormFieldPassword.passwordStrength",
-      fallback: locale.passwordStrength,
       params: {
         strength: /*#__PURE__*/_jsx("b", {
-          children: /*#__PURE__*/_jsx(Translate, {
-            content: `FormFieldPassword.strength${result?.strength}`,
-            fallback: locale[`strength${result?.strength}`]
+          children: /*#__PURE__*/_jsx(InternalTranslate, {
+            content: `FormFieldPassword.strength${result?.strength}`
           })
         })
       }
     }) : null, result?.suggestions.length ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Translate, {
-        content: "FormFieldPassword.improvePassword",
-        fallback: locale.improvePassword
+      children: [/*#__PURE__*/_jsx(InternalTranslate, {
+        content: "FormFieldPassword.improvePassword"
       }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("ul", {
         children: result.suggestions.slice(0, 3).map((suggestion, index) =>
         /*#__PURE__*/
@@ -62,9 +58,8 @@ const PasswordMeter = _ref => {
           children: suggestion
         }, index.toString()))
       })]
-    }) : /*#__PURE__*/_jsx(Translate, {
-      content: "FormFieldPassword.yourPasswordIsStrong",
-      fallback: locale.yourPasswordIsStrong
+    }) : /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "FormFieldPassword.yourPasswordIsStrong"
     })]
   });
 };

package/esm/components/FormFieldPassword/estimatePassword.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-import Translate from '../Translate';
-import locale from './locale/en-US';
+import { InternalTranslate } from '../Translate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EXCLUSIONS = {
   numbers1: 'numbers3',
@@ -11,9 +10,8 @@ const EXCLUSIONS = {
 };
 export const DEFAULT_RULES = [{
   name: 'passwordTooShort',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.passwordTooShort`,
-    fallback: locale.passwordTooShort
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.passwordTooShort`
   }),
   score(passwd) {
     return passwd.length < 5 ? -1 : 0;
@@ -34,9 +32,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'lettersLowerCase',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.lettersLowerCase`,
-    fallback: locale.lettersLowerCase
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.lettersLowerCase`
   }),
   score(passwd) {
     // [verified] at least one lower case letter
@@ -44,9 +41,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'lettersUpperCase',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.lettersUpperCase`,
-    fallback: locale.lettersUpperCase
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.lettersUpperCase`
   }),
   score(passwd) {
     // [verified] at least one upper case letter
@@ -54,9 +50,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'numbers1',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.numbers1`,
-    fallback: locale.numbers1
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.numbers1`
   }),
   score(passwd) {
     // [verified] at least one number
@@ -64,9 +59,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'numbers3',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.numbers3`,
-    fallback: locale.numbers3
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.numbers3`
   }),
   score(passwd) {
     // [verified] at least three numbers
@@ -74,9 +68,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'specialChar1',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.specialChar1`,
-    fallback: locale.specialChar1
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.specialChar1`
   }),
   score(passwd) {
     // [verified] at least one special character
@@ -84,9 +77,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'specialChar2',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.specialChar2`,
-    fallback: locale.specialChar2
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.specialChar2`
   }),
   score(passwd) {
     // [verified] at least two special characters
@@ -94,9 +86,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'comboUpperAndLower',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.comboUpperAndLower`,
-    fallback: locale.comboUpperAndLower
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.comboUpperAndLower`
   }),
   score(passwd) {
     // [verified] both upper and lower case
@@ -104,9 +95,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'comboLettersAndNumbers',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.comboLettersAndNumbers`,
-    fallback: locale.comboLettersAndNumbers
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.comboLettersAndNumbers`
   }),
   score(passwd) {
     // [verified] both letters and numbers
@@ -114,9 +104,8 @@ export const DEFAULT_RULES = [{
   }
 }, {
   name: 'comboLettersNumbersSpecial',
-  suggestion: /*#__PURE__*/_jsx(Translate, {
-    content: `FormFieldPassword.comboLettersNumbersSpecial`,
-    fallback: locale.comboLettersNumbersSpecial
+  suggestion: /*#__PURE__*/_jsx(InternalTranslate, {
+    content: `FormFieldPassword.comboLettersNumbersSpecial`
   }),
   score(passwd) {
     // [verified] letters, numbers, and special characters