You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2023/01/05 15:43:03 UTC

[myfaces-tobago] branch main updated (93c53363e6 -> 53eaadd863)

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


    from 93c53363e6 build(deps): bump docker-maven-plugin from 0.40.2 to 0.40.3 (#3576)
     new fadd43dba5 refactor: Bootstrap SCSS for validation
     new 53eaadd863 build(theme): rebuild after refactor validation SCSS

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../internal/renderkit/renderer/DateRenderer.java  |   2 +-
 .../internal/renderkit/renderer/FileRenderer.java  |   2 +-
 .../internal/renderkit/renderer/InRenderer.java    |   2 +-
 .../renderer/SelectBooleanRendererBase.java        |   2 +-
 .../renderer/SelectManyCheckboxRenderer.java       |   2 +-
 .../renderer/SelectManyListboxRenderer.java        |   5 +-
 .../renderer/SelectManyShuttleRenderer.java        |   2 +-
 .../renderer/SelectOneChoiceRenderer.java          |   2 +-
 .../renderer/SelectOneListboxRenderer.java         |   2 +-
 .../renderkit/renderer/SelectOneRadioRenderer.java |   2 +-
 .../renderkit/renderer/TextareaRenderer.java       |   2 +-
 .../tobago/renderkit/css/BootstrapClass.java       |  10 +
 .../myfaces/tobago/renderkit/css/TobagoClass.java  |  52 ----
 .../resources/renderer/date/error-message.html     |   4 +-
 .../test/resources/renderer/in/error-message.html  |   4 +-
 .../selectBooleanCheckboxError.html                |   2 +-
 .../selectBooleanCheckboxFatal.html                |   2 +-
 .../selectBooleanCheckboxInfo.html                 |   2 +-
 .../selectBooleanCheckboxWarning.html              |   2 +-
 .../selectManyCheckboxFatal.html                   |   4 +-
 .../renderer/selectManyShuttle/error-message.html  |   4 +-
 .../content/170-validation/02/Severity.test.js     |   8 +-
 .../src/main/webapp/css/demo.css                   |   2 -
 tobago-theme/src/main/scss/_tobago.scss            | 108 ++------
 .../src/main/css/tobago.css                        | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../src/main/css/tobago.css                        | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../src/main/css/tobago.css                        | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  | 305 ++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 44 files changed, 875 insertions(+), 921 deletions(-)


[myfaces-tobago] 02/02: build(theme): rebuild after refactor validation SCSS

Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit 53eaadd863b7b7711ed46dd5ac9627004ab3a5ad
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Dec 5 12:07:56 2022 +0100

    build(theme): rebuild after refactor validation SCSS
---
 .../src/main/webapp/css/demo.css                   |   2 -
 .../src/main/css/tobago.css                        | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../src/main/css/tobago.css                        | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../src/main/css/tobago.css                        | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  | 305 ++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  | 308 +++++++++++----------
 .../src/main/css/tobago.css.map                    |   2 +-
 .../src/main/css/tobago.min.css                    |   2 +-
 .../src/main/css/tobago.min.css.map                |   2 +-
 21 files changed, 812 insertions(+), 757 deletions(-)

diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
index a57edcffa9..4e65edaffe 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
@@ -89,8 +89,6 @@ tobago-tree .tobago-selected {
 }
 tobago-tree .tobago-selected a {
   background-color: #ceecf5;
-  padding-left: 1px;
-  padding-right: 4px;
 }
 
 .testframe-wrapper {
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
index 28ecffff09..7cbdaa247d 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
@@ -10875,7 +10875,7 @@ textarea.form-control-lg {
   display: inline-block;
 }
 
-/* main ---------------------------------------------------------- */
+/* mixins ---------------------------------------------------------- */
 .tobago-auto-spacing {
   /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
   "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
@@ -11017,15 +11017,6 @@ tobago-date input {
 tobago-date input:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-date input.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-date input.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-date input.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 tobago-date input::-ms-clear {
   /* Remove IE10's "clear field" X button */
   display: none;
@@ -11069,37 +11060,13 @@ tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   margin-right: -10px;
 }
 
-/* figure -------------------------------------------------------------- */
-/* file -------------------------------------------------------------- */
 tobago-file {
   display: block;
 }
 tobago-file > .input-group {
   flex: 1 0 0px;
 }
-tobago-file input[type=file].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-file input[type=file].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-file input[type=file].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
-/*
-tobago-file[drop-zone] > .input-group {
-  input, label {
-    display: none !important;
-  }
-  border: 3px dotted $gray-500;
-  border-radius: 0.25rem;
-  text-align: center;
-  &:hover {
-    background-color: $gray-200;
-  }
-}
-*/
 /* flexLayout -------------------------------------------------------------- */
 tobago-flex-layout {
   display: flex;
@@ -11215,15 +11182,6 @@ tobago-image > img {
 tobago-in {
   display: block;
 }
-tobago-in input[type=text].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-in input[type=text].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-in input[type=text].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 tobago-in input[type=text]:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
@@ -11378,6 +11336,165 @@ button.nav-link { /* bootstrap don't know button.nav-link*/
   display: flex;
   align-items: flex-start;
 }
+.tobago-messages-container .error-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #ff00be;
+}
+.tobago-messages-container .error-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000000;
+  background-color: rgba(255, 0, 190, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-error ~ .error-feedback,
+.tobago-messages-container.is-error ~ .error-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-error {
+  border-color: #ff00be;
+}
+.tobago-messages-container .form-control.is-error:focus {
+  border-color: #ff00be;
+  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
+}
+.tobago-messages-container .form-select.is-error {
+  border-color: #ff00be;
+}
+.tobago-messages-container .form-select.is-error:focus {
+  border-color: #ff00be;
+  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error {
+  border-color: #ff00be;
+}
+.tobago-messages-container .form-check-input.is-error:checked {
+  background-color: #ff00be;
+}
+.tobago-messages-container .form-check-input.is-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error ~ .form-check-label {
+  color: #ff00be;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .error-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .warning-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #ff00be;
+}
+.tobago-messages-container .warning-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000000;
+  background-color: rgba(255, 0, 190, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-warning ~ .warning-feedback,
+.tobago-messages-container.is-warning ~ .warning-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-warning {
+  border-color: #ff00be;
+}
+.tobago-messages-container .form-control.is-warning:focus {
+  border-color: #ff00be;
+  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
+}
+.tobago-messages-container .form-select.is-warning {
+  border-color: #ff00be;
+}
+.tobago-messages-container .form-select.is-warning:focus {
+  border-color: #ff00be;
+  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning {
+  border-color: #ff00be;
+}
+.tobago-messages-container .form-check-input.is-warning:checked {
+  background-color: #ff00be;
+}
+.tobago-messages-container .form-check-input.is-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning ~ .form-check-label {
+  color: #ff00be;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .warning-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .info-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #389c30;
+}
+.tobago-messages-container .info-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000000;
+  background-color: rgba(56, 156, 48, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-info ~ .info-feedback,
+.tobago-messages-container.is-info ~ .info-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-info {
+  border-color: #389c30;
+}
+.tobago-messages-container .form-control.is-info:focus {
+  border-color: #389c30;
+  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
+}
+.tobago-messages-container .form-select.is-info {
+  border-color: #389c30;
+}
+.tobago-messages-container .form-select.is-info:focus {
+  border-color: #389c30;
+  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info {
+  border-color: #389c30;
+}
+.tobago-messages-container .form-check-input.is-info:checked {
+  background-color: #389c30;
+}
+.tobago-messages-container .form-check-input.is-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info ~ .form-check-label {
+  color: #389c30;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .info-feedback {
+  margin-left: 0.5em;
+}
 .tobago-messages-container .tobago-messages:first-child small label, .tobago-messages-container .tobago-messages:first-child .small label {
   margin-right: 0; /* for tc:in margin 5px is already set */
   margin-bottom: 5px;
@@ -11708,15 +11825,6 @@ tobago-select-boolean-checkbox .form-check-label:after {
 tobago-select-boolean-checkbox .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
 /* selectBooleanToggle ---------------------------------------------------- */
 tobago-select-boolean-toggle {
@@ -11728,43 +11836,13 @@ tobago-select-boolean-toggle .form-check-label:after {
 tobago-select-boolean-toggle .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-toggle input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
-/* selectOneChoice --------------------------------------------------------- */
 tobago-select-one-choice {
   display: block;
 }
 tobago-select-one-choice select:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-one-choice select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-one-choice select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-one-choice select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
-
-/* selectOneListbox -------------------------------------------------------- */
-.tobago-selectOneListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-.tobago-selectOneListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-.tobago-selectOneListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
 tobago-select-one-listbox {
   display: block;
@@ -11772,15 +11850,6 @@ tobago-select-one-listbox {
 tobago-select-one-listbox select:disabled option, tobago-select-one-listbox select option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-one-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-one-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-one-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
 /* selectOneRadio ---------------------------------------------------------- */
 tobago-select-one-radio {
@@ -11799,15 +11868,6 @@ tobago-select-one-radio.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-one-radio input[type=radio].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
 tobago-select-many-list {
   display: block;
@@ -11929,7 +11989,6 @@ tobago-select-many-list .tobago-options .table tr:last-of-type td {
   border-bottom-width: 0;
 }
 
-/* selectManyCheckbox ----------------------------------------------------- */
 tobago-select-many-checkbox {
   display: block;
 }
@@ -11946,42 +12005,13 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-many-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
-/* selectManyListbox ----------------------------------------------------------- */
 tobago-select-many-listbox {
   display: block;
 }
 tobago-select-many-listbox select:disabled option, tobago-select-many-listbox select option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-many-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-many-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-many-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
-
-.tobago-selectManyListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-.tobago-selectManyListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-.tobago-selectManyListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
@@ -11998,15 +12028,6 @@ tobago-select-many-shuttle .tobago-body .btn-group-vertical {
 tobago-select-many-shuttle .tobago-body .tobago-unselected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-unselected option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 tobago-select-many-shuttle .tobago-body .tobago-selected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-selected option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
@@ -12366,15 +12387,6 @@ tobago-tab-group tobago-tab > .nav-link > i + span {
 tobago-textarea {
   display: block;
 }
-tobago-textarea textarea.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-textarea textarea.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 0, 190, 0.25);
-}
-tobago-textarea textarea.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(56, 156, 48, 0.25);
-}
 tobago-textarea textarea:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
index b7145e2ae6..5340ec5e6d 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
index e171ae7752..b53ad45080 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#ff00be;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000000;--bs-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-gray-100:#f8f9fa;--bs-gray-200:#d0d0d0;--bs-gray-300:#dee2e6;--bs-gray-400:#a0a0a0;--bs-gray-500:#adb5bd;--bs-gray-600:#777777;--bs-gray-700:#495057;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#ff00be;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000000;--bs-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-gray-100:#f8f9fa;--bs-gray-200:#d0d0d0;--bs-gray-300:#dee2e6;--bs-gray-400:#a0a0a0;--bs-gray-500:#adb5bd;--bs-gray-600:#777777;--bs-gray-700:#495057;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
index e23b8d5666..81317ff68d 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9 [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9 [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
index 006d9e470a..6207b80557 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
@@ -10902,7 +10902,7 @@ textarea.form-control-lg {
   display: inline-block;
 }
 
-/* main ---------------------------------------------------------- */
+/* mixins ---------------------------------------------------------- */
 .tobago-auto-spacing {
   /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
   "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
@@ -11044,15 +11044,6 @@ tobago-date input {
 tobago-date input:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-date input.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-date input.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-date input.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 tobago-date input::-ms-clear {
   /* Remove IE10's "clear field" X button */
   display: none;
@@ -11096,37 +11087,13 @@ tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   margin-right: -10px;
 }
 
-/* figure -------------------------------------------------------------- */
-/* file -------------------------------------------------------------- */
 tobago-file {
   display: block;
 }
 tobago-file > .input-group {
   flex: 1 0 0px;
 }
-tobago-file input[type=file].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-file input[type=file].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-file input[type=file].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
-/*
-tobago-file[drop-zone] > .input-group {
-  input, label {
-    display: none !important;
-  }
-  border: 3px dotted $gray-500;
-  border-radius: 0.25rem;
-  text-align: center;
-  &:hover {
-    background-color: $gray-200;
-  }
-}
-*/
 /* flexLayout -------------------------------------------------------------- */
 tobago-flex-layout {
   display: flex;
@@ -11242,15 +11209,6 @@ tobago-image > img {
 tobago-in {
   display: block;
 }
-tobago-in input[type=text].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-in input[type=text].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-in input[type=text].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 tobago-in input[type=text]:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
@@ -11405,6 +11363,165 @@ button.nav-link { /* bootstrap don't know button.nav-link*/
   display: flex;
   align-items: flex-start;
 }
+.tobago-messages-container .error-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #ffb243;
+}
+.tobago-messages-container .error-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000000;
+  background-color: rgba(255, 178, 67, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-error ~ .error-feedback,
+.tobago-messages-container.is-error ~ .error-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-error {
+  border-color: #ffb243;
+}
+.tobago-messages-container .form-control.is-error:focus {
+  border-color: #ffb243;
+  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
+}
+.tobago-messages-container .form-select.is-error {
+  border-color: #ffb243;
+}
+.tobago-messages-container .form-select.is-error:focus {
+  border-color: #ffb243;
+  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error {
+  border-color: #ffb243;
+}
+.tobago-messages-container .form-check-input.is-error:checked {
+  background-color: #ffb243;
+}
+.tobago-messages-container .form-check-input.is-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error ~ .form-check-label {
+  color: #ffb243;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .error-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .warning-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #B26812;
+}
+.tobago-messages-container .warning-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000000;
+  background-color: rgba(178, 104, 18, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-warning ~ .warning-feedback,
+.tobago-messages-container.is-warning ~ .warning-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-warning {
+  border-color: #B26812;
+}
+.tobago-messages-container .form-control.is-warning:focus {
+  border-color: #B26812;
+  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
+}
+.tobago-messages-container .form-select.is-warning {
+  border-color: #B26812;
+}
+.tobago-messages-container .form-select.is-warning:focus {
+  border-color: #B26812;
+  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning {
+  border-color: #B26812;
+}
+.tobago-messages-container .form-check-input.is-warning:checked {
+  background-color: #B26812;
+}
+.tobago-messages-container .form-check-input.is-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning ~ .form-check-label {
+  color: #B26812;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .warning-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .info-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #130E8F;
+}
+.tobago-messages-container .info-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(19, 14, 143, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-info ~ .info-feedback,
+.tobago-messages-container.is-info ~ .info-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-info {
+  border-color: #130E8F;
+}
+.tobago-messages-container .form-control.is-info:focus {
+  border-color: #130E8F;
+  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
+}
+.tobago-messages-container .form-select.is-info {
+  border-color: #130E8F;
+}
+.tobago-messages-container .form-select.is-info:focus {
+  border-color: #130E8F;
+  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info {
+  border-color: #130E8F;
+}
+.tobago-messages-container .form-check-input.is-info:checked {
+  background-color: #130E8F;
+}
+.tobago-messages-container .form-check-input.is-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info ~ .form-check-label {
+  color: #130E8F;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .info-feedback {
+  margin-left: 0.5em;
+}
 .tobago-messages-container .tobago-messages:first-child small label, .tobago-messages-container .tobago-messages:first-child .small label {
   margin-right: 0; /* for tc:in margin 5px is already set */
   margin-bottom: 5px;
@@ -11735,15 +11852,6 @@ tobago-select-boolean-checkbox .form-check-label:after {
 tobago-select-boolean-checkbox .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
 /* selectBooleanToggle ---------------------------------------------------- */
 tobago-select-boolean-toggle {
@@ -11755,43 +11863,13 @@ tobago-select-boolean-toggle .form-check-label:after {
 tobago-select-boolean-toggle .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-toggle input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
-/* selectOneChoice --------------------------------------------------------- */
 tobago-select-one-choice {
   display: block;
 }
 tobago-select-one-choice select:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-one-choice select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-one-choice select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-one-choice select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
-
-/* selectOneListbox -------------------------------------------------------- */
-.tobago-selectOneListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-.tobago-selectOneListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-.tobago-selectOneListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
 tobago-select-one-listbox {
   display: block;
@@ -11799,15 +11877,6 @@ tobago-select-one-listbox {
 tobago-select-one-listbox select:disabled option, tobago-select-one-listbox select option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-one-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-one-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-one-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
 /* selectOneRadio ---------------------------------------------------------- */
 tobago-select-one-radio {
@@ -11826,15 +11895,6 @@ tobago-select-one-radio.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 2px);
   padding-bottom: calc(0.375rem + 2px);
 }
-tobago-select-one-radio input[type=radio].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
 tobago-select-many-list {
   display: block;
@@ -11956,7 +12016,6 @@ tobago-select-many-list .tobago-options .table tr:last-of-type td {
   border-bottom-width: 0;
 }
 
-/* selectManyCheckbox ----------------------------------------------------- */
 tobago-select-many-checkbox {
   display: block;
 }
@@ -11973,42 +12032,13 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 2px);
   padding-bottom: calc(0.375rem + 2px);
 }
-tobago-select-many-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
-/* selectManyListbox ----------------------------------------------------------- */
 tobago-select-many-listbox {
   display: block;
 }
 tobago-select-many-listbox select:disabled option, tobago-select-many-listbox select option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-many-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-many-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-many-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
-
-.tobago-selectManyListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-.tobago-selectManyListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-.tobago-selectManyListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
@@ -12025,15 +12055,6 @@ tobago-select-many-shuttle .tobago-body .btn-group-vertical {
 tobago-select-many-shuttle .tobago-body .tobago-unselected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-unselected option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 tobago-select-many-shuttle .tobago-body .tobago-selected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-selected option:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
@@ -12393,15 +12414,6 @@ tobago-tab-group tobago-tab > .nav-link > i + span {
 tobago-textarea {
   display: block;
 }
-tobago-textarea textarea.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 178, 67, 0.25);
-}
-tobago-textarea textarea.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(178, 104, 18, 0.25);
-}
-tobago-textarea textarea.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(19, 14, 143, 0.25);
-}
 tobago-textarea textarea:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
index 8bbb2ebfe5..d7c6c0ea8c 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
index f55fe27891..a25127508b 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url("../fonts/Amaranth-Regular.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url("../fonts/Amaranth-Bold.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url("../fonts/Amaranth-Italic.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url("../fonts/Amaranth-BoldItalic.otf") format( [...]
+@charset "UTF-8";@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url("../fonts/Amaranth-Regular.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url("../fonts/Amaranth-Bold.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url("../fonts/Amaranth-Italic.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url("../fonts/Amaranth-BoldItalic.otf") format( [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
index af7a9e83da..6cd8179c81 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAE/C,mBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAC [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAE/C,mBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAC [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
index 032e111502..4d26676dd5 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
@@ -10876,7 +10876,7 @@ textarea.form-control-lg {
   display: inline-block;
 }
 
-/* main ---------------------------------------------------------- */
+/* mixins ---------------------------------------------------------- */
 .tobago-auto-spacing {
   /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
   "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
@@ -11018,15 +11018,6 @@ tobago-date input {
 tobago-date input:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-date input.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-date input.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-date input.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-date input::-ms-clear {
   /* Remove IE10's "clear field" X button */
   display: none;
@@ -11070,37 +11061,13 @@ tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   margin-right: -10px;
 }
 
-/* figure -------------------------------------------------------------- */
-/* file -------------------------------------------------------------- */
 tobago-file {
   display: block;
 }
 tobago-file > .input-group {
   flex: 1 0 0px;
 }
-tobago-file input[type=file].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-file input[type=file].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-file input[type=file].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
-/*
-tobago-file[drop-zone] > .input-group {
-  input, label {
-    display: none !important;
-  }
-  border: 3px dotted $gray-500;
-  border-radius: 0.25rem;
-  text-align: center;
-  &:hover {
-    background-color: $gray-200;
-  }
-}
-*/
 /* flexLayout -------------------------------------------------------------- */
 tobago-flex-layout {
   display: flex;
@@ -11216,15 +11183,6 @@ tobago-image > img {
 tobago-in {
   display: block;
 }
-tobago-in input[type=text].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-in input[type=text].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-in input[type=text].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-in input[type=text]:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -11379,6 +11337,165 @@ button.nav-link { /* bootstrap don't know button.nav-link*/
   display: flex;
   align-items: flex-start;
 }
+.tobago-messages-container .error-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #dc3545;
+}
+.tobago-messages-container .error-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(220, 53, 69, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-error ~ .error-feedback,
+.tobago-messages-container.is-error ~ .error-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-error {
+  border-color: #dc3545;
+}
+.tobago-messages-container .form-control.is-error:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.tobago-messages-container .form-select.is-error {
+  border-color: #dc3545;
+}
+.tobago-messages-container .form-select.is-error:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error {
+  border-color: #dc3545;
+}
+.tobago-messages-container .form-check-input.is-error:checked {
+  background-color: #dc3545;
+}
+.tobago-messages-container .form-check-input.is-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error ~ .form-check-label {
+  color: #dc3545;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .error-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .warning-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #ffc107;
+}
+.tobago-messages-container .warning-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000;
+  background-color: rgba(255, 193, 7, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-warning ~ .warning-feedback,
+.tobago-messages-container.is-warning ~ .warning-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-warning {
+  border-color: #ffc107;
+}
+.tobago-messages-container .form-control.is-warning:focus {
+  border-color: #ffc107;
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
+}
+.tobago-messages-container .form-select.is-warning {
+  border-color: #ffc107;
+}
+.tobago-messages-container .form-select.is-warning:focus {
+  border-color: #ffc107;
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning {
+  border-color: #ffc107;
+}
+.tobago-messages-container .form-check-input.is-warning:checked {
+  background-color: #ffc107;
+}
+.tobago-messages-container .form-check-input.is-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning ~ .form-check-label {
+  color: #ffc107;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .warning-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .info-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #0dcaf0;
+}
+.tobago-messages-container .info-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000;
+  background-color: rgba(13, 202, 240, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-info ~ .info-feedback,
+.tobago-messages-container.is-info ~ .info-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-info {
+  border-color: #0dcaf0;
+}
+.tobago-messages-container .form-control.is-info:focus {
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
+}
+.tobago-messages-container .form-select.is-info {
+  border-color: #0dcaf0;
+}
+.tobago-messages-container .form-select.is-info:focus {
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info {
+  border-color: #0dcaf0;
+}
+.tobago-messages-container .form-check-input.is-info:checked {
+  background-color: #0dcaf0;
+}
+.tobago-messages-container .form-check-input.is-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info ~ .form-check-label {
+  color: #0dcaf0;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .info-feedback {
+  margin-left: 0.5em;
+}
 .tobago-messages-container .tobago-messages:first-child small label, .tobago-messages-container .tobago-messages:first-child .small label {
   margin-right: 0; /* for tc:in margin 5px is already set */
   margin-bottom: 5px;
@@ -11709,15 +11826,6 @@ tobago-select-boolean-checkbox .form-check-label:after {
 tobago-select-boolean-checkbox .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 /* selectBooleanToggle ---------------------------------------------------- */
 tobago-select-boolean-toggle {
@@ -11729,43 +11837,13 @@ tobago-select-boolean-toggle .form-check-label:after {
 tobago-select-boolean-toggle .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-toggle input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
-/* selectOneChoice --------------------------------------------------------- */
 tobago-select-one-choice {
   display: block;
 }
 tobago-select-one-choice select:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-one-choice select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-one-choice select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-one-choice select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
-
-/* selectOneListbox -------------------------------------------------------- */
-.tobago-selectOneListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-.tobago-selectOneListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-.tobago-selectOneListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 tobago-select-one-listbox {
   display: block;
@@ -11773,15 +11851,6 @@ tobago-select-one-listbox {
 tobago-select-one-listbox select:disabled option, tobago-select-one-listbox select option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-one-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-one-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-one-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 /* selectOneRadio ---------------------------------------------------------- */
 tobago-select-one-radio {
@@ -11800,15 +11869,6 @@ tobago-select-one-radio.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-one-radio input[type=radio].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 tobago-select-many-list {
   display: block;
@@ -11930,7 +11990,6 @@ tobago-select-many-list .tobago-options .table tr:last-of-type td {
   border-bottom-width: 0;
 }
 
-/* selectManyCheckbox ----------------------------------------------------- */
 tobago-select-many-checkbox {
   display: block;
 }
@@ -11947,42 +12006,13 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-many-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
-/* selectManyListbox ----------------------------------------------------------- */
 tobago-select-many-listbox {
   display: block;
 }
 tobago-select-many-listbox select:disabled option, tobago-select-many-listbox select option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-many-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-many-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-many-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
-
-.tobago-selectManyListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-.tobago-selectManyListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-.tobago-selectManyListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
@@ -11999,15 +12029,6 @@ tobago-select-many-shuttle .tobago-body .btn-group-vertical {
 tobago-select-many-shuttle .tobago-body .tobago-unselected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-unselected option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-select-many-shuttle .tobago-body .tobago-selected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-selected option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -12367,15 +12388,6 @@ tobago-tab-group tobago-tab > .nav-link > i + span {
 tobago-textarea {
   display: block;
 }
-tobago-textarea textarea.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-textarea textarea.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-textarea textarea.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-textarea textarea:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
index fc80abd8dc..b6f14967c4 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
index 1fe3fc2958..de0d3f5699 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
index 4412c85ead..177517a437 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,i [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,i [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
index 411764e46a..0f50b4235c 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
@@ -10602,7 +10602,7 @@ textarea.form-control-lg {
   display: inline-block;
 }
 
-/* main ---------------------------------------------------------- */
+/* mixins ---------------------------------------------------------- */
 .tobago-auto-spacing {
   /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
   "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
@@ -10744,15 +10744,6 @@ tobago-date input {
 tobago-date input:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-date input.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-date input.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-date input.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 tobago-date input::-ms-clear {
   /* Remove IE10's "clear field" X button */
   display: none;
@@ -10796,37 +10787,13 @@ tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   margin-right: -10px;
 }
 
-/* figure -------------------------------------------------------------- */
-/* file -------------------------------------------------------------- */
 tobago-file {
   display: block;
 }
 tobago-file > .input-group {
   flex: 1 0 0px;
 }
-tobago-file input[type=file].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-file input[type=file].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-file input[type=file].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
-/*
-tobago-file[drop-zone] > .input-group {
-  input, label {
-    display: none !important;
-  }
-  border: 3px dotted $gray-500;
-  border-radius: 0.25rem;
-  text-align: center;
-  &:hover {
-    background-color: $gray-200;
-  }
-}
-*/
 /* flexLayout -------------------------------------------------------------- */
 tobago-flex-layout {
   display: flex;
@@ -10942,15 +10909,6 @@ tobago-image > img {
 tobago-in {
   display: block;
 }
-tobago-in input[type=text].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-in input[type=text].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-in input[type=text].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 tobago-in input[type=text]:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -11104,6 +11062,162 @@ button.nav-link { /* bootstrap don't know button.nav-link*/
   display: flex;
   align-items: flex-start;
 }
+.tobago-messages-container .error-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: rgb(211, 0, 64);
+}
+.tobago-messages-container .error-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(211, 0, 64, 0.9);
+}
+.tobago-messages-container.is-error ~ .error-feedback,
+.tobago-messages-container.is-error ~ .error-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-error {
+  border-color: rgb(211, 0, 64);
+}
+.tobago-messages-container .form-control.is-error:focus {
+  border-color: rgb(211, 0, 64);
+  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
+}
+.tobago-messages-container .form-select.is-error {
+  border-color: rgb(211, 0, 64);
+}
+.tobago-messages-container .form-select.is-error:focus {
+  border-color: rgb(211, 0, 64);
+  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error {
+  border-color: rgb(211, 0, 64);
+}
+.tobago-messages-container .form-check-input.is-error:checked {
+  background-color: rgb(211, 0, 64);
+}
+.tobago-messages-container .form-check-input.is-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error ~ .form-check-label {
+  color: rgb(211, 0, 64);
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .error-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .warning-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #f0ad4e;
+}
+.tobago-messages-container .warning-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000;
+  background-color: rgba(240, 173, 78, 0.9);
+}
+.tobago-messages-container.is-warning ~ .warning-feedback,
+.tobago-messages-container.is-warning ~ .warning-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-warning {
+  border-color: #f0ad4e;
+}
+.tobago-messages-container .form-control.is-warning:focus {
+  border-color: #f0ad4e;
+  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
+}
+.tobago-messages-container .form-select.is-warning {
+  border-color: #f0ad4e;
+}
+.tobago-messages-container .form-select.is-warning:focus {
+  border-color: #f0ad4e;
+  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning {
+  border-color: #f0ad4e;
+}
+.tobago-messages-container .form-check-input.is-warning:checked {
+  background-color: #f0ad4e;
+}
+.tobago-messages-container .form-check-input.is-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning ~ .form-check-label {
+  color: #f0ad4e;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .warning-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .info-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #5bc0de;
+}
+.tobago-messages-container .info-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000;
+  background-color: rgba(91, 192, 222, 0.9);
+}
+.tobago-messages-container.is-info ~ .info-feedback,
+.tobago-messages-container.is-info ~ .info-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-info {
+  border-color: #5bc0de;
+}
+.tobago-messages-container .form-control.is-info:focus {
+  border-color: #5bc0de;
+  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
+}
+.tobago-messages-container .form-select.is-info {
+  border-color: #5bc0de;
+}
+.tobago-messages-container .form-select.is-info:focus {
+  border-color: #5bc0de;
+  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info {
+  border-color: #5bc0de;
+}
+.tobago-messages-container .form-check-input.is-info:checked {
+  background-color: #5bc0de;
+}
+.tobago-messages-container .form-check-input.is-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info ~ .form-check-label {
+  color: #5bc0de;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .info-feedback {
+  margin-left: 0.5em;
+}
 .tobago-messages-container .tobago-messages:first-child small label, .tobago-messages-container .tobago-messages:first-child .small label {
   margin-right: 0; /* for tc:in margin 5px is already set */
   margin-bottom: 5px;
@@ -11434,15 +11548,6 @@ tobago-select-boolean-checkbox .form-check-label:after {
 tobago-select-boolean-checkbox .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
 /* selectBooleanToggle ---------------------------------------------------- */
 tobago-select-boolean-toggle {
@@ -11454,43 +11559,13 @@ tobago-select-boolean-toggle .form-check-label:after {
 tobago-select-boolean-toggle .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-toggle input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
-/* selectOneChoice --------------------------------------------------------- */
 tobago-select-one-choice {
   display: block;
 }
 tobago-select-one-choice select:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-one-choice select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-one-choice select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-one-choice select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
-
-/* selectOneListbox -------------------------------------------------------- */
-.tobago-selectOneListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-.tobago-selectOneListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-.tobago-selectOneListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
 tobago-select-one-listbox {
   display: block;
@@ -11498,15 +11573,6 @@ tobago-select-one-listbox {
 tobago-select-one-listbox select:disabled option, tobago-select-one-listbox select option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-one-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-one-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-one-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
 /* selectOneRadio ---------------------------------------------------------- */
 tobago-select-one-radio {
@@ -11525,15 +11591,6 @@ tobago-select-one-radio.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-one-radio input[type=radio].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
 tobago-select-many-list {
   display: block;
@@ -11655,7 +11712,6 @@ tobago-select-many-list .tobago-options .table tr:last-of-type td {
   border-bottom-width: 0;
 }
 
-/* selectManyCheckbox ----------------------------------------------------- */
 tobago-select-many-checkbox {
   display: block;
 }
@@ -11672,42 +11728,13 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-many-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
-/* selectManyListbox ----------------------------------------------------------- */
 tobago-select-many-listbox {
   display: block;
 }
 tobago-select-many-listbox select:disabled option, tobago-select-many-listbox select option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-many-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-many-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-many-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
-
-.tobago-selectManyListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-.tobago-selectManyListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-.tobago-selectManyListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
@@ -11724,15 +11751,6 @@ tobago-select-many-shuttle .tobago-body .btn-group-vertical {
 tobago-select-many-shuttle .tobago-body .tobago-unselected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-unselected option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 tobago-select-many-shuttle .tobago-body .tobago-selected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-selected option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -12092,15 +12110,6 @@ tobago-tab-group tobago-tab > .nav-link > i + span {
 tobago-textarea {
   display: block;
 }
-tobago-textarea textarea.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 0, 64, 0.25);
-}
-tobago-textarea textarea.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(240, 173, 78, 0.25);
-}
-tobago-textarea textarea.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.25);
-}
 tobago-textarea textarea:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
index d61875ffc7..d5d211b46f 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_modules/bootstrap/scss/mixins/_lists.scss",".. [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_modules/bootstrap/scss/mixins/_lists.scss",".. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
index 580c93323d..1c6910ace2 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:rgb(58, 37, 100);--bs-pink:#d63384;--bs-red:rgb(211, 0, 64);--bs-orange:#d90;--bs-yellow:#ffc107;--bs-green:rgb(29, 163, 50);--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:rgb(120, 140, 148);--bs-gray-dark:#323232;--bs-gray-100:#f7f7f7;--bs-gray-200:#e3e4e5;--bs-gray-300:#d7d7d7;--bs-gray-400:#ced4da;--bs-gray-500:#acacac;--bs-gray-600:rgb(120, 140, 148);--bs-gray-700:#55595c;--bs-gray [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:rgb(58, 37, 100);--bs-pink:#d63384;--bs-red:rgb(211, 0, 64);--bs-orange:#d90;--bs-yellow:#ffc107;--bs-green:rgb(29, 163, 50);--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:rgb(120, 140, 148);--bs-gray-dark:#323232;--bs-gray-100:#f7f7f7;--bs-gray-200:#e3e4e5;--bs-gray-300:#d7d7d7;--bs-gray-400:#ced4da;--bs-gray-500:#acacac;--bs-gray-600:rgb(120, 140, 148);--bs-gray-700:#55595c;--bs-gray [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
index cd76408c6e..8e01291e03 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,iBACb,UAAW,QACX,SAAU,gBACV,YAAa,KACb,YAAa,QACb,WAAY,iBACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,mBACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,mBACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,gBACd,eAAgB,QAChB,aAAc,iBACd,UAAW,QACX,aAAc,QACd,YAAa,gBACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,EAAE,CAAE,GAC1B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,iBACb,UAAW,QACX,SAAU,gBACV,YAAa,KACb,YAAa,QACb,WAAY,iBACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,mBACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,mBACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,gBACd,eAAgB,QAChB,aAAc,iBACd,UAAW,QACX,aAAc,QACd,YAAa,gBACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,EAAE,CAAE,GAC1B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IA [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
index 2a41688acc..ff043790a8 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
@@ -10859,7 +10859,7 @@ textarea.form-control-lg {
   display: inline-block;
 }
 
-/* main ---------------------------------------------------------- */
+/* mixins ---------------------------------------------------------- */
 .tobago-auto-spacing {
   /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
   "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
@@ -11001,15 +11001,6 @@ tobago-date input {
 tobago-date input:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-date input.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-date input.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-date input.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-date input::-ms-clear {
   /* Remove IE10's "clear field" X button */
   display: none;
@@ -11053,37 +11044,13 @@ tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   margin-right: -10px;
 }
 
-/* figure -------------------------------------------------------------- */
-/* file -------------------------------------------------------------- */
 tobago-file {
   display: block;
 }
 tobago-file > .input-group {
   flex: 1 0 0px;
 }
-tobago-file input[type=file].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-file input[type=file].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-file input[type=file].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
-/*
-tobago-file[drop-zone] > .input-group {
-  input, label {
-    display: none !important;
-  }
-  border: 3px dotted $gray-500;
-  border-radius: 0.25rem;
-  text-align: center;
-  &:hover {
-    background-color: $gray-200;
-  }
-}
-*/
 /* flexLayout -------------------------------------------------------------- */
 tobago-flex-layout {
   display: flex;
@@ -11199,15 +11166,6 @@ tobago-image > img {
 tobago-in {
   display: block;
 }
-tobago-in input[type=text].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-in input[type=text].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-in input[type=text].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-in input[type=text]:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -11362,6 +11320,165 @@ button.nav-link { /* bootstrap don't know button.nav-link*/
   display: flex;
   align-items: flex-start;
 }
+.tobago-messages-container .error-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #dc3545;
+}
+.tobago-messages-container .error-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(220, 53, 69, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-error ~ .error-feedback,
+.tobago-messages-container.is-error ~ .error-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-error {
+  border-color: #dc3545;
+}
+.tobago-messages-container .form-control.is-error:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.tobago-messages-container .form-select.is-error {
+  border-color: #dc3545;
+}
+.tobago-messages-container .form-select.is-error:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error {
+  border-color: #dc3545;
+}
+.tobago-messages-container .form-check-input.is-error:checked {
+  background-color: #dc3545;
+}
+.tobago-messages-container .form-check-input.is-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.tobago-messages-container .form-check-input.is-error ~ .form-check-label {
+  color: #dc3545;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .error-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .warning-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #ffc107;
+}
+.tobago-messages-container .warning-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000;
+  background-color: rgba(255, 193, 7, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-warning ~ .warning-feedback,
+.tobago-messages-container.is-warning ~ .warning-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-warning {
+  border-color: #ffc107;
+}
+.tobago-messages-container .form-control.is-warning:focus {
+  border-color: #ffc107;
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
+}
+.tobago-messages-container .form-select.is-warning {
+  border-color: #ffc107;
+}
+.tobago-messages-container .form-select.is-warning:focus {
+  border-color: #ffc107;
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning {
+  border-color: #ffc107;
+}
+.tobago-messages-container .form-check-input.is-warning:checked {
+  background-color: #ffc107;
+}
+.tobago-messages-container .form-check-input.is-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
+}
+.tobago-messages-container .form-check-input.is-warning ~ .form-check-label {
+  color: #ffc107;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .warning-feedback {
+  margin-left: 0.5em;
+}
+.tobago-messages-container .info-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #0dcaf0;
+}
+.tobago-messages-container .info-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #000;
+  background-color: rgba(13, 202, 240, 0.9);
+  border-radius: 0.375rem;
+}
+.tobago-messages-container.is-info ~ .info-feedback,
+.tobago-messages-container.is-info ~ .info-tooltip {
+  display: block;
+}
+.tobago-messages-container .form-control.is-info {
+  border-color: #0dcaf0;
+}
+.tobago-messages-container .form-control.is-info:focus {
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
+}
+.tobago-messages-container .form-select.is-info {
+  border-color: #0dcaf0;
+}
+.tobago-messages-container .form-select.is-info:focus {
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info {
+  border-color: #0dcaf0;
+}
+.tobago-messages-container .form-check-input.is-info:checked {
+  background-color: #0dcaf0;
+}
+.tobago-messages-container .form-check-input.is-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
+}
+.tobago-messages-container .form-check-input.is-info ~ .form-check-label {
+  color: #0dcaf0;
+}
+.tobago-messages-container .form-check-inline .form-check-input ~ .info-feedback {
+  margin-left: 0.5em;
+}
 .tobago-messages-container .tobago-messages:first-child small label, .tobago-messages-container .tobago-messages:first-child .small label {
   margin-right: 0; /* for tc:in margin 5px is already set */
   margin-bottom: 5px;
@@ -11692,15 +11809,6 @@ tobago-select-boolean-checkbox .form-check-label:after {
 tobago-select-boolean-checkbox .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-boolean-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 /* selectBooleanToggle ---------------------------------------------------- */
 tobago-select-boolean-toggle {
@@ -11712,43 +11820,13 @@ tobago-select-boolean-toggle .form-check-label:after {
 tobago-select-boolean-toggle .form-check-label img {
   padding-right: 0.3em;
 }
-tobago-select-boolean-toggle input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-boolean-toggle input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
-/* selectOneChoice --------------------------------------------------------- */
 tobago-select-one-choice {
   display: block;
 }
 tobago-select-one-choice select:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-one-choice select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-one-choice select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-one-choice select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
-
-/* selectOneListbox -------------------------------------------------------- */
-.tobago-selectOneListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-.tobago-selectOneListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-.tobago-selectOneListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 tobago-select-one-listbox {
   display: block;
@@ -11756,15 +11834,6 @@ tobago-select-one-listbox {
 tobago-select-one-listbox select:disabled option, tobago-select-one-listbox select option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-one-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-one-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-one-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 /* selectOneRadio ---------------------------------------------------------- */
 tobago-select-one-radio {
@@ -11783,15 +11852,6 @@ tobago-select-one-radio.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-one-radio input[type=radio].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-one-radio input[type=radio].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 tobago-select-many-list {
   display: block;
@@ -11913,7 +11973,6 @@ tobago-select-many-list .tobago-options .table tr:last-of-type td {
   border-bottom-width: 0;
 }
 
-/* selectManyCheckbox ----------------------------------------------------- */
 tobago-select-many-checkbox {
   display: block;
 }
@@ -11930,42 +11989,13 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
 }
-tobago-select-many-checkbox input[type=checkbox].border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-many-checkbox input[type=checkbox].border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
-/* selectManyListbox ----------------------------------------------------------- */
 tobago-select-many-listbox {
   display: block;
 }
 tobago-select-many-listbox select:disabled option, tobago-select-many-listbox select option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-many-listbox select.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-many-listbox select.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-many-listbox select.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
-
-.tobago-selectManyListbox.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-.tobago-selectManyListbox.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-.tobago-selectManyListbox.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
@@ -11982,15 +12012,6 @@ tobago-select-many-shuttle .tobago-body .btn-group-vertical {
 tobago-select-many-shuttle .tobago-body .tobago-unselected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-unselected option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-select-many-shuttle .tobago-body .tobago-selected.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-select-many-shuttle .tobago-body .tobago-selected:disabled option, tobago-select-many-shuttle .tobago-body .tobago-selected option:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -12350,15 +12371,6 @@ tobago-tab-group tobago-tab > .nav-link > i + span {
 tobago-textarea {
   display: block;
 }
-tobago-textarea textarea.border-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
-}
-tobago-textarea textarea.border-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
-}
-tobago-textarea textarea.border-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
-}
 tobago-textarea textarea:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
index 9d560803d9..bde33bc579 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
index a82e742782..5325c351ab 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
index fd6242268f..218f59eeee 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAA [...]
\ No newline at end of file


[myfaces-tobago] 01/02: refactor: Bootstrap SCSS for validation

Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit fadd43dba528cd35f7157305900441a03e2d0f2e
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Jan 2 13:44:14 2023 +0100

    refactor: Bootstrap SCSS for validation
    
    * Generate validation CSS classes with Bootstrap to replace custom SCSS.
      New classes are: is-error, is-warning, is-info
      Those classes replace: border-danger, border-warning, border-info
    * adjust tests
    * cleanup
---
 .../internal/renderkit/renderer/DateRenderer.java  |   2 +-
 .../internal/renderkit/renderer/FileRenderer.java  |   2 +-
 .../internal/renderkit/renderer/InRenderer.java    |   2 +-
 .../renderer/SelectBooleanRendererBase.java        |   2 +-
 .../renderer/SelectManyCheckboxRenderer.java       |   2 +-
 .../renderer/SelectManyListboxRenderer.java        |   5 +-
 .../renderer/SelectManyShuttleRenderer.java        |   2 +-
 .../renderer/SelectOneChoiceRenderer.java          |   2 +-
 .../renderer/SelectOneListboxRenderer.java         |   2 +-
 .../renderkit/renderer/SelectOneRadioRenderer.java |   2 +-
 .../renderkit/renderer/TextareaRenderer.java       |   2 +-
 .../tobago/renderkit/css/BootstrapClass.java       |  10 ++
 .../myfaces/tobago/renderkit/css/TobagoClass.java  |  52 ----------
 .../resources/renderer/date/error-message.html     |   4 +-
 .../test/resources/renderer/in/error-message.html  |   4 +-
 .../selectBooleanCheckboxError.html                |   2 +-
 .../selectBooleanCheckboxFatal.html                |   2 +-
 .../selectBooleanCheckboxInfo.html                 |   2 +-
 .../selectBooleanCheckboxWarning.html              |   2 +-
 .../selectManyCheckboxFatal.html                   |   4 +-
 .../renderer/selectManyShuttle/error-message.html  |   4 +-
 .../content/170-validation/02/Severity.test.js     |   8 +-
 tobago-theme/src/main/scss/_tobago.scss            | 108 +++++----------------
 23 files changed, 63 insertions(+), 164 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
index a82d83eb97..98877666d3 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
@@ -130,7 +130,7 @@ public class DateRenderer<T extends AbstractUIDate> extends MessageLayoutRendere
     writer.writeAttribute(HtmlAttributes.MAX, convertToString(date.getMax()), true);
 
     writer.writeClassAttribute(
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(date)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(date)),
         BootstrapClass.FORM_CONTROL,
         date.getCustomClass());
 
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FileRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FileRenderer.java
index 0d765b3bde..b2c1de17eb 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FileRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FileRenderer.java
@@ -155,7 +155,7 @@ public class FileRenderer<T extends AbstractUIFile>
     writer.writeIdAttribute(fieldId);
     writer.writeClassAttribute(
         BootstrapClass.FORM_CONTROL,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)));
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)));
     writer.writeNameAttribute(clientId);
     // readonly seems not making sense in browsers.
     writer.writeAttribute(HtmlAttributes.DISABLED, disabled || readonly);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
index 38214b2d50..e80e011919 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
@@ -145,7 +145,7 @@ public class InRenderer<T extends AbstractUIIn> extends MessageLayoutRendererBas
 
     writer.writeClassAttribute(
         markup != null && markup.contains(Markup.NUMBER) ? TobagoClass.NUMBER : null,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)),
         BootstrapClass.FORM_CONTROL,
         component.getCustomClass());
 
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanRendererBase.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanRendererBase.java
index 1c95745c3a..3aa44fd850 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanRendererBase.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanRendererBase.java
@@ -102,7 +102,7 @@ public abstract class SelectBooleanRendererBase<T extends AbstractUISelectBoolea
     writer.startElement(HtmlElements.INPUT);
     writer.writeClassAttribute(
         BootstrapClass.FORM_CHECK_INPUT,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)));
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)));
     writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.CHECKBOX);
     writer.writeAttribute(HtmlAttributes.VALUE, "true", false);
     writer.writeNameAttribute(clientId);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
index 7b56c05b4f..d646c6a81a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
@@ -85,7 +85,7 @@ public class SelectManyCheckboxRenderer<T extends AbstractUISelectManyCheckbox>
         writer.startElement(HtmlElements.INPUT);
         writer.writeClassAttribute(
             BootstrapClass.FORM_CHECK_INPUT,
-            BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)));
+            BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)));
         writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.CHECKBOX);
         final String formattedValue = getFormattedValue(facesContext, component, item.getValue());
         final boolean checked;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListboxRenderer.java
index 30a3f04aec..4e6b23d137 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListboxRenderer.java
@@ -74,7 +74,7 @@ public class SelectManyListboxRenderer<T extends AbstractUISelectManyListbox> ex
 
     writer.writeClassAttribute(
         BootstrapClass.FORM_CONTROL,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)),
         component.getCustomClass(),
         markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
     writer.writeAttribute(HtmlAttributes.MULTIPLE, true);
@@ -83,8 +83,7 @@ public class SelectManyListboxRenderer<T extends AbstractUISelectManyListbox> ex
     final Object[] values = component.getSelectedValues();
     final String[] submittedValues = getSubmittedValues(component);
 
-    renderSelectItems(
-        component, TobagoClass.SELECT_MANY_LISTBOX__OPTION, items, values, submittedValues, writer, facesContext);
+    renderSelectItems(component, null, items, values, submittedValues, writer, facesContext);
   }
 
   @Override
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java
index 0a4b331ef6..f3e543d11c 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java
@@ -121,7 +121,7 @@ public class SelectManyShuttleRenderer<T extends AbstractUISelectManyShuttle> ex
     writer.writeAttribute(HtmlAttributes.TABINDEX, component.getTabIndex());
     writer.writeClassAttribute(
         TobagoClass.SELECTED,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)),
         BootstrapClass.FORM_CONTROL);
     writer.writeAttribute(HtmlAttributes.MULTIPLE, true);
     writer.writeAttribute(HtmlAttributes.SIZE, size);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneChoiceRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneChoiceRenderer.java
index b4e913b128..16f8827913 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneChoiceRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneChoiceRenderer.java
@@ -82,7 +82,7 @@ public class SelectOneChoiceRenderer<T extends AbstractUISelectOneChoice> extend
 
     writer.writeClassAttribute(
         BootstrapClass.FORM_SELECT,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)),
         component.getCustomClass());
     if (title != null) {
       writer.writeAttribute(HtmlAttributes.TITLE, title, true);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java
index 079d6fab5b..833eff85df 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java
@@ -73,7 +73,7 @@ public class SelectOneListboxRenderer<T extends AbstractUISelectOneListbox> exte
 
     writer.writeClassAttribute(
         BootstrapClass.FORM_CONTROL,
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)),
         component.getCustomClass(),
         markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
     final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
index 2859a57363..0f7dabe23d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
@@ -135,7 +135,7 @@ public class SelectOneRadioRenderer<T extends AbstractUISelectOneRadio> extends
         writer.startElement(HtmlElements.INPUT);
         writer.writeClassAttribute(
             BootstrapClass.FORM_CHECK_INPUT,
-            BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)));
+            BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)));
         writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.RADIO);
         final String formattedValue = getFormattedValue(facesContext, component, item.getValue());
         final boolean checked;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TextareaRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TextareaRenderer.java
index 1658633cde..72eabd236b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TextareaRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TextareaRenderer.java
@@ -104,7 +104,7 @@ public class TextareaRenderer<T extends AbstractUITextarea> extends MessageLayou
     }
 
     writer.writeClassAttribute(
-        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
+        BootstrapClass.validationColor(ComponentUtils.getMaximumSeverity(component)),
         BootstrapClass.FORM_CONTROL,
         component.getCustomClass(),
         markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
index ce5cfa19e7..903585b334 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
@@ -406,6 +406,9 @@ public enum BootstrapClass implements CssItem {
   INPUT_GROUP_PREPEND("input-group-prepend"),
   INPUT_GROUP_TEXT("input-group-text"),
   INVISIBLE("invisible"),
+  IS_ERROR("is-error"),
+  IS_INFO("is-info"),
+  IS_WARNING("is-warning"),
   JUSTIFY_CONTENT_AROUND("justify-content-around"),
   JUSTIFY_CONTENT_BETWEEN("justify-content-between"),
   JUSTIFY_CONTENT_CENTER("justify-content-center"),
@@ -659,6 +662,13 @@ public enum BootstrapClass implements CssItem {
     }
   }
 
+  public static CssItem validationColor(final FacesMessage.Severity severity) {
+    if (severity == null) {
+      return null;
+    }
+    return getSeverityCssItem(severity, IS_INFO, IS_WARNING, IS_ERROR);
+  }
+
   public static CssItem borderColor(final FacesMessage.Severity severity) {
     if (severity == null) {
       return null;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index 91af83d7ed..224a6cb706 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -28,13 +28,11 @@ public enum TobagoClass implements CssItem {
 
   ASCENDING("tobago-ascending"),
   AUTO__SPACING("tobago-auto-spacing"),
-  //  BADGE("tobago-badge"),
   BAR("tobago-bar"),
   BODY("tobago-body"),
   BOX__HEADER("tobago-box-header"),
   // tbd: can this be removed, when using <tobago-button>?
   BUTTON("tobago-button"),
-  //  BUTTONS("tobago-buttons"),
   CIRCLE__1("tobago-circle-1"),
   CIRCLE__2("tobago-circle-2"),
   CIRCLE__3("tobago-circle-3"),
@@ -45,25 +43,16 @@ public enum TobagoClass implements CssItem {
   CIRCLE__8("tobago-circle-8"),
   CIRCLE__9("tobago-circle-9"),
   COLLAPSED("tobago-collapsed"),
-  //  DATE("tobago-date"),
-//  DATE__PICKER("tobago-date-picker"),
   DELETED("tobago-deleted"),
   DESCENDING("tobago-descending"),
   DISABLED("tobago-disabled"),
   DISPLAY__INLINE__BLOCK("tobago-display-inline-block"),
   DROPDOWN__SUBMENU("tobago-dropdown-submenu"),
   EXPANDED("tobago-expanded"),
-  //  FILE("tobago-file"),
-//  FIGURE("tobago-figure"),
   FOCUS("tobago-focus"),
   FOLDER("tobago-folder"),
   FILTER("tobago-filter"),
   HEADER("tobago-header"),
-  //  IMAGE("tobago-image"),
-  // tbd: can be removed?
-//  IN("tobago-in"),
-//  INPUT__GROUP__OUTER("tobago-input-group-outer"),
-//  LABEL("tobago-label"),
   LABEL__CONTAINER("tobago-label-container"),
   LEVEL("tobago-level"),
   LINK("tobago-link"),
@@ -85,38 +74,8 @@ public enum TobagoClass implements CssItem {
   RESIZE("tobago-resize"),
   SECTION__CONTENT("tobago-section-content"),
   SELECT__FIELD("tobago-select-field"),
-  SELECT_MANY_LISTBOX__OPTION("tobago-selectManyListbox-option"),
-  //  SELECT_MANY_SHUTTLE("tobago-selectManyShuttle"),
-//  SELECT_MANY_SHUTTLE__ADD("tobago-selectManyShuttle-add"),
-//  SELECT_MANY_SHUTTLE__ADD_ALL("tobago-selectManyShuttle-addAll"),
-//  SELECT_MANY_SHUTTLE__HIDDEN("tobago-selectManyShuttle-hidden"),
-//  SELECT_MANY_SHUTTLE__OPTION("tobago-selectManyShuttle-option"),
-//  SELECT_MANY_SHUTTLE__REMOVE("tobago-selectManyShuttle-remove"),
-//  SELECT_MANY_SHUTTLE__REMOVE_ALL("tobago-selectManyShuttle-removeAll"),
-//  SELECT_MANY_SHUTTLE__SELECTED("tobago-selectManyShuttle-selected"),
-//  SELECT_MANY_SHUTTLE__SELECTED_LABEL("tobago-selectManyShuttle-selectedLabel"),
-//  SELECT_MANY_SHUTTLE__TOOL_BAR("tobago-selectManyShuttle-toolBar"),
-//  SELECT_MANY_SHUTTLE__UNSELECTED("tobago-selectManyShuttle-unselected"),
-//  SELECT_MANY_SHUTTLE__UNSELECTED_LABEL("tobago-selectManyShuttle-unselectedLabel"),
-  SELECT_ONE_LISTBOX("tobago-selectOneListbox"),
-  SELECT_ONE_LISTBOX__OPTION("tobago-selectOneListbox-option"),
   SELECTED("tobago-selected"),
   SEPARATOR("tobago-separator"),
-  //  SHEET("tobago-sheet"),
-//  SHEET__CELL("tobago-sheet-cell"),
-//  SHEET__FOOTER("tobago-sheet-footer"),
-//  SHEET__BODY("tobago-sheet-body"),
-//  SHEET__HEADER_CELL("tobago-sheet-headerCell"),
-//  SHEET__HEADER_RESIZE("tobago-sheet-headerResize"),
-//  SHEET__EXPANDED("tobago-sheet-expanded"),
-//  SHEET__PAGING_TEXT("tobago-sheet-pagingText"),
-//  SHEET__HEADER("tobago-sheet-header"),
-//  SHEET__BODY_TABLE("tobago-sheet-bodyTable"),
-//  SHEET__COLUMN_SELECTOR("tobago-sheet-columnSelector"),
-//  SHEET__HEADER_TABLE("tobago-sheet-headerTable"),
-//  SHEET__PAGING_INPUT("tobago-sheet-pagingInput"),
-//  SHEET__PAGING_OUTPUT("tobago-sheet-pagingOutput"),
-//  SHEET__ROW("tobago-sheet-row"),
   SORTABLE("tobago-sortable"),
   SPREAD("tobago-spread"),
   STARS("tobago-stars"),
@@ -127,21 +86,10 @@ public enum TobagoClass implements CssItem {
   STARS__SLIDER("tobago-stars-slider"),
   STARS__TOOLTIP("tobago-stars-tooltip"),
   STARS__UNSELECTED("tobago-stars-unselected"),
-  //  TAB("tobago-tab"),
-//  TAB__BAR_FACET("tobago-tab-barFacet"),
-//  TAB__CONTENT("tobago-tab-content"),
-//  TAB_GROUP("tobago-tabGroup"),
   TABLE_LAYOUT__FIXED("tobago-tableLayout-fixed"),
   TEXT__JUSTIFY("tobago-text-justify"),
   TOGGLE("tobago-toggle"),
   TOOLTIP("tobago-tooltip"),
-  //  TREE_LABEL("tobago-treeLabel"),
-//  TREE_LISTBOX("tobago-treeListbox");
-//  TREE_LISTBOX__LEVEL("tobago-treeListbox-level"),
-//  TREE_LISTBOX__SELECT("tobago-treeListbox-select"),
-//  TREE_NODE("tobago-treeNode"),
-//  TREE_SELECT("tobago-treeSelect");
-//  TREE_SELECT__LABEL("tobago-treeSelect-label");
   UNSELECTED("tobago-unselected");
 
   private final String name;
diff --git a/tobago-core/src/test/resources/renderer/date/error-message.html b/tobago-core/src/test/resources/renderer/date/error-message.html
index 1fb1c1325f..160c282281 100644
--- a/tobago-core/src/test/resources/renderer/date/error-message.html
+++ b/tobago-core/src/test/resources/renderer/date/error-message.html
@@ -18,10 +18,10 @@
 <tobago-date id='id' class='tobago-auto-spacing'>
   <div class='tobago-messages-container'>
     <div class='input-group'>
-      <input type='date' name='id' id='id::field' title='a test' class='border-danger form-control' autofocus='autofocus'>
+      <input type='date' name='id' id='id::field' title='a test' class='is-error form-control' autofocus='autofocus'>
     </div>
     <tobago-popover data-bs-toggle='popover' title='Error' data-bs-content='a test' data-bs-trigger='focus'>
       <a tabindex='0' role='button' class='btn btn-danger'><i class='bi-exclamation-lg'></i></a>
     </tobago-popover>
   </div>
-</tobago-date>
\ No newline at end of file
+</tobago-date>
diff --git a/tobago-core/src/test/resources/renderer/in/error-message.html b/tobago-core/src/test/resources/renderer/in/error-message.html
index 537a7fabd5..132f9be199 100644
--- a/tobago-core/src/test/resources/renderer/in/error-message.html
+++ b/tobago-core/src/test/resources/renderer/in/error-message.html
@@ -18,9 +18,9 @@
 <tobago-in id='id' class='tobago-label-container tobago-auto-spacing'>
   <label for='id::field' class='col-form-label'>label</label>
   <div class='tobago-messages-container'>
-    <input type='text' name='id' id='id::field' title='a test' class='border-danger form-control' autofocus='autofocus'>
+    <input type='text' name='id' id='id::field' title='a test' class='is-error form-control' autofocus='autofocus'>
     <tobago-popover data-bs-toggle='popover' title='Error' data-bs-content='a test' data-bs-trigger='focus'>
       <a tabindex='0' role='button' class='btn btn-danger'><i class='bi-exclamation-lg'></i></a>
     </tobago-popover>
   </div>
-</tobago-in>
\ No newline at end of file
+</tobago-in>
diff --git a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxError.html b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxError.html
index 87d416b58e..23684c6ff8 100644
--- a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxError.html
+++ b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxError.html
@@ -18,7 +18,7 @@
 <tobago-select-boolean-checkbox id='id' class='tobago-auto-spacing'>
   <div class='tobago-messages-container'>
     <div class='form-check col-form-label' title='This is a custom error'>
-      <input class='form-check-input border-danger' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
+      <input class='form-check-input is-error' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
       <label class='form-check-label' for='id::field'></label>
     </div>
     <tobago-popover data-bs-toggle='popover' title='Error' data-bs-content='This is a custom error' data-bs-trigger='focus'>
diff --git a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxFatal.html b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxFatal.html
index 8f299d4cd6..18fa4c6bfc 100644
--- a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxFatal.html
+++ b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxFatal.html
@@ -18,7 +18,7 @@
 <tobago-select-boolean-checkbox id='id' class='tobago-auto-spacing'>
   <div class='tobago-messages-container'>
     <div class='form-check col-form-label' title='This is a custom fatal error'>
-      <input class='form-check-input border-danger' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
+      <input class='form-check-input is-error' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
       <label class='form-check-label' for='id::field'></label>
     </div>
     <tobago-popover data-bs-toggle='popover' title='Fatal' data-bs-content='This is a custom fatal error' data-bs-trigger='focus'>
diff --git a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxInfo.html b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxInfo.html
index 5a7360c712..8f14af4d7c 100644
--- a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxInfo.html
+++ b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxInfo.html
@@ -18,7 +18,7 @@
 <tobago-select-boolean-checkbox id='id' class='tobago-auto-spacing'>
   <div class='tobago-messages-container'>
     <div class='form-check col-form-label' title='This is a custom information'>
-      <input class='form-check-input border-info' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
+      <input class='form-check-input is-info' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
       <label class='form-check-label' for='id::field'></label>
     </div>
     <tobago-popover data-bs-toggle='popover' title='Information' data-bs-content='This is a custom information' data-bs-trigger='focus'>
diff --git a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxWarning.html b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxWarning.html
index 2060485c52..8bf12390c3 100644
--- a/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxWarning.html
+++ b/tobago-core/src/test/resources/renderer/selectBooleanCheckbox/selectBooleanCheckboxWarning.html
@@ -18,7 +18,7 @@
 <tobago-select-boolean-checkbox id='id' class='tobago-auto-spacing'>
   <div class='tobago-messages-container'>
     <div class='form-check col-form-label' title='This is a custom warning'>
-      <input class='form-check-input border-warning' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
+      <input class='form-check-input is-warning' type='checkbox' value='true' name='id' id='id::field' autofocus='autofocus'>
       <label class='form-check-label' for='id::field'></label>
     </div>
     <tobago-popover data-bs-toggle='popover' title='Warning' data-bs-content='This is a custom warning' data-bs-trigger='focus'>
diff --git a/tobago-core/src/test/resources/renderer/selectManyCheckbox/selectManyCheckboxFatal.html b/tobago-core/src/test/resources/renderer/selectManyCheckbox/selectManyCheckboxFatal.html
index 6f672527fd..80620beab9 100644
--- a/tobago-core/src/test/resources/renderer/selectManyCheckbox/selectManyCheckboxFatal.html
+++ b/tobago-core/src/test/resources/renderer/selectManyCheckbox/selectManyCheckboxFatal.html
@@ -19,11 +19,11 @@
   <div class='tobago-messages-container'>
     <div title='This is a custom fatal error'>
       <div class='form-check'>
-        <input class='form-check-input border-danger' type='checkbox' name='id' id='id::0' value='' autofocus='autofocus'>
+        <input class='form-check-input is-error' type='checkbox' name='id' id='id::0' value='' autofocus='autofocus'>
         <label class='form-check-label' for='id::0'>Entry One</label>
       </div>
       <div class='form-check'>
-        <input class='form-check-input border-danger' type='checkbox' name='id' id='id::1' value=''>
+        <input class='form-check-input is-error' type='checkbox' name='id' id='id::1' value=''>
         <label class='form-check-label' for='id::1'>Entry Two</label>
       </div>
     </div>
diff --git a/tobago-core/src/test/resources/renderer/selectManyShuttle/error-message.html b/tobago-core/src/test/resources/renderer/selectManyShuttle/error-message.html
index 27621f4660..3ad5a23987 100644
--- a/tobago-core/src/test/resources/renderer/selectManyShuttle/error-message.html
+++ b/tobago-core/src/test/resources/renderer/selectManyShuttle/error-message.html
@@ -31,7 +31,7 @@
           <button type='button' class='btn btn-secondary' id='id::removeAll'><i class='bi-chevron-double-left'></i></button>
         </div>
       </div>
-      <select id='id::selected' class='tobago-selected border-danger form-control' multiple='multiple' size='2'></select>
+      <select id='id::selected' class='tobago-selected is-error form-control' multiple='multiple' size='2'></select>
       <select class='d-none' id='id::hidden' name='id' multiple='multiple'>
         <option value=''>Value 1
         </option>
@@ -42,4 +42,4 @@
       <a tabindex='0' role='button' class='btn btn-danger'><i class='bi-exclamation-lg'></i></a>
     </tobago-popover>
   </div>
-</tobago-select-many-shuttle>
\ No newline at end of file
+</tobago-select-many-shuttle>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/170-validation/02/Severity.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/170-validation/02/Severity.test.js
index 9e3f6fbf11..cc989ded57 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/170-validation/02/Severity.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/170-validation/02/Severity.test.js
@@ -32,10 +32,10 @@ it("Check severity CSS classes", function (done) {
 
   let test = new JasmineTestTool(done);
   test.setup(() => alertsFn().length > 0, null, "click", submitFn);
-  test.do(() => expect(fatalInputFieldFn().classList).toContain("border-danger"));
-  test.do(() => expect(errorInputFieldFn().classList).toContain("border-danger"));
-  test.do(() => expect(warnInputFieldFn().classList).toContain("border-warning"));
-  test.do(() => expect(infoInputFieldFn().classList).toContain("border-info"));
+  test.do(() => expect(fatalInputFieldFn().classList).toContain("is-error"));
+  test.do(() => expect(errorInputFieldFn().classList).toContain("is-error"));
+  test.do(() => expect(warnInputFieldFn().classList).toContain("is-warning"));
+  test.do(() => expect(infoInputFieldFn().classList).toContain("is-info"));
   test.do(() => expect(fatalButtonFn().classList).toContain("btn-danger"));
   test.do(() => expect(errorButtonFn().classList).toContain("btn-danger"));
   test.do(() => expect(warnButtonFn().classList).toContain("btn-warning"));
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index ecb0d9346c..dd6234c28b 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -16,6 +16,7 @@
  */
 
 @import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins/forms";
 
 /* used bootstrap icons ---------------------------------------------------- */
 
@@ -58,7 +59,7 @@ $form-select-disabled-color: rgba($form-select-color, $tobago-form-disabled-alph
   display: inline-block;
 }
 
-/* main ---------------------------------------------------------- */
+/* mixins ---------------------------------------------------------- */
 @mixin adjustCustomControlLabel() {
   .form-check-label {
     &:after {
@@ -150,20 +151,6 @@ $form-select-disabled-color: rgba($form-select-color, $tobago-form-disabled-alph
   }
 }
 
-@mixin messageShadow() {
-  &.border-danger:focus {
-    box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity);
-  }
-
-  &.border-warning:focus {
-    box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($warning, $input-btn-focus-color-opacity);
-  }
-
-  &.border-info:focus {
-    box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($info, $input-btn-focus-color-opacity);
-  }
-}
-
 @mixin radioCheckboxInline() {
   label + .form-check-inline {
     display: block; // must be 'block' to make labelLayout=top work for inline=true
@@ -317,8 +304,6 @@ tobago-date {
 
   input {
     @include formControlDisabled();
-    @include messageShadow();
-
     min-width: 7em;
 
     &::-ms-clear {
@@ -373,35 +358,13 @@ tobago-dropdown {
   // deprecated; must be added for test
 }
 
-/* figure -------------------------------------------------------------- */
-
-/* file -------------------------------------------------------------- */
-
 tobago-file {
   display: block;
 
   > .input-group {
     flex: 1 0 0px;
   }
-
-  input[type='file'] {
-    @include messageShadow();
-  }
-}
-
-/*
-tobago-file[drop-zone] > .input-group {
-  input, label {
-    display: none !important;
-  }
-  border: 3px dotted $gray-500;
-  border-radius: 0.25rem;
-  text-align: center;
-  &:hover {
-    background-color: $gray-200;
-  }
 }
-*/
 
 /* flexLayout -------------------------------------------------------------- */
 
@@ -544,7 +507,6 @@ tobago-in {
   display: block;
 
   input[type='text'] {
-    @include messageShadow();
     @include formControlDisabled();
   }
 
@@ -717,7 +679,30 @@ button {
 }
 
 /* messages / help text ----------------------------------------------- */
+$enable-validation-icons: false;
 .tobago-messages-container {
+  @function exclamation-circle-icon($color) {
+    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>");
+  }
+  $tobago-form-validation-states: (
+      "error": (
+          "color": $danger,
+          "icon": exclamation-circle-icon($danger)
+      ),
+      "warning": (
+          "color": $warning,
+          "icon": exclamation-circle-icon($warning)
+      ),
+      "info": (
+          "color": $info,
+          "icon": exclamation-circle-icon($info)
+      )
+  );
+
+  @each $state, $data in $tobago-form-validation-states {
+    @include form-validation-state($state, $data...);
+  }
+
   display: flex;
   align-items: flex-start;
 
@@ -1121,49 +1106,27 @@ tobago-stars {
 tobago-select-boolean-checkbox {
   display: block;
   @include adjustCustomControlLabel();
-
-  input[type='checkbox'] {
-    @include messageShadow();
-  }
 }
 
 /* selectBooleanToggle ---------------------------------------------------- */
 tobago-select-boolean-toggle {
   display: block;
   @include adjustCustomControlLabel();
-
-  input[type='checkbox'] {
-    @include messageShadow();
-  }
 }
 
-/* selectOneChoice --------------------------------------------------------- */
 tobago-select-one-choice {
   display: block;
 
   select {
     @include formControlDisabled();
-    @include messageShadow();
   }
 }
 
-/* selectOneListbox -------------------------------------------------------- */
-
-//xxx remove me
-.tobago-selectOneListbox {
-  @include messageShadow();
-}
-
-//xxx remove me
-.tobago-selectOneListbox-option {
-}
-
 tobago-select-one-listbox {
   display: block;
 
   select {
     @include formControlSelectListDisabled();
-    @include messageShadow();
   }
 }
 
@@ -1178,10 +1141,6 @@ tobago-select-one-radio {
       @include inlinePadding();
     }
   }
-
-  input[type='radio'] {
-    @include messageShadow();
-  }
 }
 
 tobago-select-many-list {
@@ -1323,7 +1282,6 @@ tobago-select-many-list {
   }
 }
 
-/* selectManyCheckbox ----------------------------------------------------- */
 tobago-select-many-checkbox {
   display: block;
   @include adjustCustomControlLabel();
@@ -1334,33 +1292,19 @@ tobago-select-many-checkbox {
       @include inlinePadding();
     }
   }
-
-  input[type='checkbox'] {
-    @include messageShadow();
-  }
 }
 
 .tobago-selectManyCheckbox {
 }
 
-/* selectManyListbox ----------------------------------------------------------- */
 tobago-select-many-listbox {
   display: block;
 
   select {
     @include formControlSelectListDisabled();
-    @include messageShadow();
   }
 }
 
-.tobago-selectManyListbox,
-.tobago-selectManyListbox-option {
-}
-
-.tobago-selectManyListbox {
-  @include messageShadow();
-}
-
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -1379,7 +1323,6 @@ tobago-select-many-shuttle {
     }
 
     .tobago-selected {
-      @include messageShadow();
       @include formControlSelectListDisabled();
     }
   }
@@ -1698,7 +1641,6 @@ tobago-textarea {
   display: block;
 
   textarea {
-    @include messageShadow();
     @include formControlDisabled();
   }
 }