Validation messages

<dt-validation-messages
  id="sample--02"
  :validationMessages=`[{"message":"Positive validation message","type":"success"}]`
/>

<div class="base-input__messages d-validation-message__container">
  <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--success d-validation-message--success">
    <p>Positive validation message</p>
  </div>
</div>

<dt-validation-messages
  id="sample--03"
  :validationMessages=`[{"message":"Critical validation message","type":"error"}]`
/>

<div class="base-input__messages d-validation-message__container">
  <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--error d-validation-message--error">
    <p>Critical validation message</p>
  </div>
</div>

<dt-validation-messages
  id="sample--04"
  :validationMessages=`[{"message":"Warning validation message","type":"warning"}]`
/>

<div class="base-input__messages d-validation-message__container">
  <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--warning d-validation-message--warning">
    <p>Warning validation message</p>
  </div>
</div>