You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by bo...@apache.org on 2020/12/01 18:08:51 UTC

[myfaces-tobago] 04/04: rebuild themes

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

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

commit 1dd861a1de10fc8488923a53d75cced487ffbb2d
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Tue Dec 1 16:28:05 2020 +0100

    rebuild themes
---
 .../npm/dist/css/tobago.css                        | 290 +++++++++++----------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 .../npm/dist/css/tobago.css                        | 290 +++++++++++----------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 .../npm/dist/css/tobago.css                        | 290 +++++++++++----------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 .../tobago-theme-speyside/npm/dist/css/tobago.css  | 290 +++++++++++----------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 .../tobago-theme-standard/npm/dist/css/tobago.css  | 290 +++++++++++----------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 20 files changed, 770 insertions(+), 710 deletions(-)

diff --git a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
index aa03a39..61c3481 100644
--- a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
@@ -10629,11 +10629,6 @@ tobago-box > .card-body {
   padding: 0;
 }
 
-/* buttons, links ------------------------------------------------------- */
-tobago-buttons > .tobago-button {
-  display: inline-block;
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button:disabled {
   pointer-events: auto;
@@ -10643,11 +10638,11 @@ tobago-buttons > .tobago-button {
   cursor: not-allowed;
 }
 
-.tobago-button > img + span, .tobago-link > img + span {
+.tobago-button > img + span {
   margin-left: .4em;
 }
 
-.tobago-button > i + span, .tobago-link > i + span {
+.tobago-button > i + span {
   margin-left: .4em;
 }
 
@@ -10670,6 +10665,10 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
   pointer-events: none;
 }
 
+tobago-buttons > .tobago-button {
+  display: inline-block;
+}
+
 /* collapsible -------------------------------------------------------------- */
 tobago-box.tobago-collapsed .card-body,
 tobago-section.tobago-collapsed .tobago-section-content,
@@ -10678,6 +10677,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
+.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-date-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-date-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(56, 156, 48, 0.25);
+}
+
 tobago-date {
   display: block;
 }
@@ -10707,6 +10718,42 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
+tobago-dropdown.tobago-dropdown-submenu {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  float: right;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  top: 0;
+  left: 100%;
+  margin-top: -0.5rem;
+  margin-left: -1px;
+}
+
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
+  content: " ";
+  float: right;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 7px;
+  margin-right: -10px;
+}
+
 /* figure -------------------------------------------------------------- */
 /* file -------------------------------------------------------------- */
 tobago-file {
@@ -10751,6 +10798,11 @@ tobago-flex-layout > tobago-flex-layout {
 }
 
 /* flowLayout ---------------------------------------------------------- */
+tobago-flow-layout.tobago-text-justify {
+  /* added here, because Bootstrap has removed .text-justify */
+  text-align: justify !important;
+}
+
 /* focus --------------------------------------------------------------- */
 tobago-focus {
   display: none;
@@ -10817,6 +10869,18 @@ tobago-in {
   display: block;
 }
 
+.tobago-in-markup-fatal.border-danger:focus, .tobago-in-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-in-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-in-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(56, 156, 48, 0.25);
+}
+
 .tobago-in:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
@@ -10835,6 +10899,14 @@ tobago-in {
   white-space: nowrap;
 }
 
+.tobago-link > img + span {
+  margin-left: .4em;
+}
+
+.tobago-link > i + span {
+  margin-left: .4em;
+}
+
 .tobago-link span {
   white-space: normal;
 }
@@ -10929,6 +11001,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
+.tobago-margin-bottom {
+  /* 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
+  custom styling is much more complicated. */
+  margin-bottom: 1rem;
+}
+
 .tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
@@ -10979,42 +11058,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-tobago-dropdown.tobago-dropdown-submenu {
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-  float: right;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover {
-  background-color: #f8f9fa;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-  top: 0;
-  left: 100%;
-  margin-top: -0.5rem;
-  margin-left: -1px;
-}
-
-tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
-  content: " ";
-  float: right;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 7px;
-  margin-right: -10px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -11113,6 +11156,21 @@ tobago-page {
   overflow-y: auto;
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 1060;
+}
+
+.tobago-page-menuStore .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
 /* panel ------------------------------------------------------------- */
 tobago-panel {
   display: block;
@@ -11126,6 +11184,24 @@ tobago-panel {
 
 /* progress ---------------------------------------------------------- */
 /* range ---------------------------------------------------------- */
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: #ff00be;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
+  /* to separate the icon from the rest of the title */
+  margin-right: 0.7em;
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -11247,18 +11323,6 @@ tobago-stars {
   display: none;
 }
 
-/* section ----------------------------------------------------------- */
-tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-}
-
-tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
-  /* to separate the icon from the rest of the title */
-  margin-right: 0.7em;
-}
-
 /* select ----------------------------------------------------------- */
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
@@ -11288,6 +11352,18 @@ tobago-select-boolean-toggle .form-check-label img {
 
 /* selectOneChoice --------------------------------------------------------- */
 /* selectOneListbox -------------------------------------------------------- */
+.tobago-selectOneListbox-markup-fatal.border-danger:focus, .tobago-selectOneListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-selectOneListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-selectOneListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(56, 156, 48, 0.25);
+}
+
 tobago-select-one-listbox {
   display: block;
 }
@@ -11329,6 +11405,18 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
 }
 
 /* selectManyListbox ----------------------------------------------------------- */
+.tobago-selectManyListbox-markup-fatal.border-danger:focus, .tobago-selectManyListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-selectManyListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
+}
+
+.tobago-selectManyListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(56, 156, 48, 0.25);
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -11872,6 +11960,11 @@ tobago-tab-group {
   margin-bottom: 1rem;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree .tobago-treeNode {
   cursor: default;
@@ -12010,100 +12103,19 @@ tobago-tree-listbox .tobago-treeListbox-select, .tobago-treeListbox .tobago-tree
 }
 
 /* textarea --------------------------------------------------------- */
-tobago-textarea textarea:disabled {
-  color: rgba(160, 160, 160, 0.5);
-}
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus,
-.tobago-in-markup-fatal.border-danger:focus,
-.tobago-in-markup-error.border-danger:focus,
-.tobago-selectManyListbox-markup-fatal.border-danger:focus,
-.tobago-selectManyListbox-markup-error.border-danger:focus,
-.tobago-selectOneListbox-markup-fatal.border-danger:focus,
-.tobago-selectOneListbox-markup-error.border-danger:focus,
-tobago-textarea textarea-markup-fatal.border-danger:focus,
-tobago-textarea textarea-markup-error.border-danger:focus {
+tobago-textarea textarea-markup-fatal.border-danger:focus, tobago-textarea textarea-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
 }
 
-.tobago-date-markup-warn.border-warning:focus,
-.tobago-in-markup-warn.border-warning:focus,
-.tobago-selectManyListbox-markup-warn.border-warning:focus,
-.tobago-selectOneListbox-markup-warn.border-warning:focus,
 tobago-textarea textarea-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
 }
 
-.tobago-date-markup-info.border-info:focus,
-.tobago-in-markup-info.border-info:focus,
-.tobago-selectManyListbox-markup-info.border-info:focus,
-.tobago-selectOneListbox-markup-info.border-info:focus,
 tobago-textarea textarea-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(56, 156, 48, 0.25);
 }
 
-/* menuStore -------------------------------------------------------- */
-.tobago-page-menuStore {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: 1060;
-}
-
-.tobago-page-menuStore .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
-    width: auto;
-}
-*/
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-.form-horizontal > * {
-  /* fixes vertical space, todo: why is is needed? is there a better way? */
-  margin-top: 10px;
-  margin-bottom: 5px;
-  /* XXX MUST BE REMOVED */
-}
-
-.form-horizontal .control-label {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
-  display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
-  content: "*";
-  color: #ff00be;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
-  text-align: justify !important;
-}
-
-.tobago-margin-bottom {
-  /* 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
-  custom styling is much more complicated. */
-  margin-bottom: 1rem;
+tobago-textarea textarea:disabled {
+  color: rgba(160, 160, 160, 0.5);
 }
 /*# sourceMappingURL=tobago.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css.map b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css.map
index abdd325..d602cc6 100644
--- a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../scss/_custom.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/m [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../scss/_custom.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/m [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css
index 390074d..127b0b5 100644
--- a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-charlotteville/npm/dist/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-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-primary:#529696;--bs-secondary:#b2a76d;--bs-success:#abf5ff;--bs-info:#389c30;--bs-warning:#ff00be;--bs-danger:#ff00be;--bs-light:#ffffff;--bs-dark:#529696;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Robo [...]
+@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-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-primary:#529696;--bs-secondary:#b2a76d;--bs-success:#abf5ff;--bs-info:#389c30;--bs-warning:#ff00be;--bs-danger:#ff00be;--bs-light:#ffffff;--bs-dark:#529696;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Robo [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css.map b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css.map
index 4f9d14e..2a5a053 100644
--- a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_mod [...]
\ No newline at end of file
+{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_mod [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
index 85ecb18..0e9c093 100644
--- a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
@@ -10655,11 +10655,6 @@ tobago-box > .card-body {
   padding: 0;
 }
 
-/* buttons, links ------------------------------------------------------- */
-tobago-buttons > .tobago-button {
-  display: inline-block;
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button:disabled {
   pointer-events: auto;
@@ -10669,11 +10664,11 @@ tobago-buttons > .tobago-button {
   cursor: not-allowed;
 }
 
-.tobago-button > img + span, .tobago-link > img + span {
+.tobago-button > img + span {
   margin-left: .4em;
 }
 
-.tobago-button > i + span, .tobago-link > i + span {
+.tobago-button > i + span {
   margin-left: .4em;
 }
 
@@ -10696,6 +10691,10 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
   pointer-events: none;
 }
 
+tobago-buttons > .tobago-button {
+  display: inline-block;
+}
+
 /* collapsible -------------------------------------------------------------- */
 tobago-box.tobago-collapsed .card-body,
 tobago-section.tobago-collapsed .tobago-section-content,
@@ -10704,6 +10703,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
+.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 178, 67, 0.25);
+}
+
+.tobago-date-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(178, 104, 18, 0.25);
+}
+
+.tobago-date-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(19, 14, 143, 0.25);
+}
+
 tobago-date {
   display: block;
 }
@@ -10733,6 +10744,42 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
+tobago-dropdown.tobago-dropdown-submenu {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  float: right;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  top: 0;
+  left: 100%;
+  margin-top: -0.5rem;
+  margin-left: -1px;
+}
+
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
+  content: " ";
+  float: right;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 7px;
+  margin-right: -10px;
+}
+
 /* figure -------------------------------------------------------------- */
 /* file -------------------------------------------------------------- */
 tobago-file {
@@ -10777,6 +10824,11 @@ tobago-flex-layout > tobago-flex-layout {
 }
 
 /* flowLayout ---------------------------------------------------------- */
+tobago-flow-layout.tobago-text-justify {
+  /* added here, because Bootstrap has removed .text-justify */
+  text-align: justify !important;
+}
+
 /* focus --------------------------------------------------------------- */
 tobago-focus {
   display: none;
@@ -10843,6 +10895,18 @@ tobago-in {
   display: block;
 }
 
+.tobago-in-markup-fatal.border-danger:focus, .tobago-in-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 178, 67, 0.25);
+}
+
+.tobago-in-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(178, 104, 18, 0.25);
+}
+
+.tobago-in-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(19, 14, 143, 0.25);
+}
+
 .tobago-in:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
@@ -10861,6 +10925,14 @@ tobago-in {
   white-space: nowrap;
 }
 
+.tobago-link > img + span {
+  margin-left: .4em;
+}
+
+.tobago-link > i + span {
+  margin-left: .4em;
+}
+
 .tobago-link span {
   white-space: normal;
 }
@@ -10955,6 +11027,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
+.tobago-margin-bottom {
+  /* 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
+  custom styling is much more complicated. */
+  margin-bottom: 1rem;
+}
+
 .tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
@@ -11005,42 +11084,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-tobago-dropdown.tobago-dropdown-submenu {
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-  float: right;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover {
-  background-color: #f8f9fa;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-  top: 0;
-  left: 100%;
-  margin-top: -0.5rem;
-  margin-left: -1px;
-}
-
-tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
-  content: " ";
-  float: right;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 7px;
-  margin-right: -10px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -11139,6 +11182,21 @@ tobago-page {
   overflow-y: auto;
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 1060;
+}
+
+.tobago-page-menuStore .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
 /* panel ------------------------------------------------------------- */
 tobago-panel {
   display: block;
@@ -11152,6 +11210,24 @@ tobago-panel {
 
 /* progress ---------------------------------------------------------- */
 /* range ---------------------------------------------------------- */
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: #ffb243;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
+  /* to separate the icon from the rest of the title */
+  margin-right: 0.7em;
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -11273,18 +11349,6 @@ tobago-stars {
   display: none;
 }
 
-/* section ----------------------------------------------------------- */
-tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-}
-
-tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
-  /* to separate the icon from the rest of the title */
-  margin-right: 0.7em;
-}
-
 /* select ----------------------------------------------------------- */
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
@@ -11314,6 +11378,18 @@ tobago-select-boolean-toggle .form-check-label img {
 
 /* selectOneChoice --------------------------------------------------------- */
 /* selectOneListbox -------------------------------------------------------- */
+.tobago-selectOneListbox-markup-fatal.border-danger:focus, .tobago-selectOneListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 178, 67, 0.25);
+}
+
+.tobago-selectOneListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(178, 104, 18, 0.25);
+}
+
+.tobago-selectOneListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(19, 14, 143, 0.25);
+}
+
 tobago-select-one-listbox {
   display: block;
 }
@@ -11355,6 +11431,18 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
 }
 
 /* selectManyListbox ----------------------------------------------------------- */
+.tobago-selectManyListbox-markup-fatal.border-danger:focus, .tobago-selectManyListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 178, 67, 0.25);
+}
+
+.tobago-selectManyListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(178, 104, 18, 0.25);
+}
+
+.tobago-selectManyListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(19, 14, 143, 0.25);
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -11898,6 +11986,11 @@ tobago-tab-group {
   margin-bottom: 1rem;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree .tobago-treeNode {
   cursor: default;
@@ -12036,100 +12129,19 @@ tobago-tree-listbox .tobago-treeListbox-select, .tobago-treeListbox .tobago-tree
 }
 
 /* textarea --------------------------------------------------------- */
-tobago-textarea textarea:disabled {
-  color: rgba(160, 160, 160, 0.5);
-}
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus,
-.tobago-in-markup-fatal.border-danger:focus,
-.tobago-in-markup-error.border-danger:focus,
-.tobago-selectManyListbox-markup-fatal.border-danger:focus,
-.tobago-selectManyListbox-markup-error.border-danger:focus,
-.tobago-selectOneListbox-markup-fatal.border-danger:focus,
-.tobago-selectOneListbox-markup-error.border-danger:focus,
-tobago-textarea textarea-markup-fatal.border-danger:focus,
-tobago-textarea textarea-markup-error.border-danger:focus {
+tobago-textarea textarea-markup-fatal.border-danger:focus, tobago-textarea textarea-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 178, 67, 0.25);
 }
 
-.tobago-date-markup-warn.border-warning:focus,
-.tobago-in-markup-warn.border-warning:focus,
-.tobago-selectManyListbox-markup-warn.border-warning:focus,
-.tobago-selectOneListbox-markup-warn.border-warning:focus,
 tobago-textarea textarea-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(178, 104, 18, 0.25);
 }
 
-.tobago-date-markup-info.border-info:focus,
-.tobago-in-markup-info.border-info:focus,
-.tobago-selectManyListbox-markup-info.border-info:focus,
-.tobago-selectOneListbox-markup-info.border-info:focus,
 tobago-textarea textarea-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(19, 14, 143, 0.25);
 }
 
-/* menuStore -------------------------------------------------------- */
-.tobago-page-menuStore {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: 1060;
-}
-
-.tobago-page-menuStore .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
-    width: auto;
-}
-*/
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-.form-horizontal > * {
-  /* fixes vertical space, todo: why is is needed? is there a better way? */
-  margin-top: 10px;
-  margin-bottom: 5px;
-  /* XXX MUST BE REMOVED */
-}
-
-.form-horizontal .control-label {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
-  display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
-  content: "*";
-  color: #ffb243;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
-  text-align: justify !important;
-}
-
-.tobago-margin-bottom {
-  /* 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
-  custom styling is much more complicated. */
-  margin-bottom: 1rem;
+tobago-textarea textarea:disabled {
+  color: rgba(160, 160, 160, 0.5);
 }
 /*# sourceMappingURL=tobago.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css.map b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css.map
index 389b083..c6e02cc 100644
--- a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../scss/_custom.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/m [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../scss/_custom.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/m [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css
index ab1d48c..2187da7 100644
--- a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-roxborough/npm/dist/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("opentyp [...]
+@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("opentyp [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css.map b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css.map
index 5503676..b90d271 100644
--- a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/_custom.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_i [...]
\ No newline at end of file
+{"version":3,"sources":["../../scss/_custom.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_i [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
index d177b42..61f0e7b 100644
--- a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
@@ -10647,11 +10647,6 @@ tobago-box > .card-body {
   padding: 0;
 }
 
-/* buttons, links ------------------------------------------------------- */
-tobago-buttons > .tobago-button {
-  display: inline-block;
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button:disabled {
   pointer-events: auto;
@@ -10661,11 +10656,11 @@ tobago-buttons > .tobago-button {
   cursor: not-allowed;
 }
 
-.tobago-button > img + span, .tobago-link > img + span {
+.tobago-button > img + span {
   margin-left: .4em;
 }
 
-.tobago-button > i + span, .tobago-link > i + span {
+.tobago-button > i + span {
   margin-left: .4em;
 }
 
@@ -10688,6 +10683,10 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
   pointer-events: none;
 }
 
+tobago-buttons > .tobago-button {
+  display: inline-block;
+}
+
 /* collapsible -------------------------------------------------------------- */
 tobago-box.tobago-collapsed .card-body,
 tobago-section.tobago-collapsed .tobago-section-content,
@@ -10696,6 +10695,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
+.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-date-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-date-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 tobago-date {
   display: block;
 }
@@ -10725,6 +10736,42 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
+tobago-dropdown.tobago-dropdown-submenu {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  float: right;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  top: 0;
+  left: 100%;
+  margin-top: -0.5rem;
+  margin-left: -1px;
+}
+
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
+  content: " ";
+  float: right;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 7px;
+  margin-right: -10px;
+}
+
 /* figure -------------------------------------------------------------- */
 /* file -------------------------------------------------------------- */
 tobago-file {
@@ -10769,6 +10816,11 @@ tobago-flex-layout > tobago-flex-layout {
 }
 
 /* flowLayout ---------------------------------------------------------- */
+tobago-flow-layout.tobago-text-justify {
+  /* added here, because Bootstrap has removed .text-justify */
+  text-align: justify !important;
+}
+
 /* focus --------------------------------------------------------------- */
 tobago-focus {
   display: none;
@@ -10835,6 +10887,18 @@ tobago-in {
   display: block;
 }
 
+.tobago-in-markup-fatal.border-danger:focus, .tobago-in-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-in-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-in-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 .tobago-in:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -10853,6 +10917,14 @@ tobago-in {
   white-space: nowrap;
 }
 
+.tobago-link > img + span {
+  margin-left: .4em;
+}
+
+.tobago-link > i + span {
+  margin-left: .4em;
+}
+
 .tobago-link span {
   white-space: normal;
 }
@@ -10947,6 +11019,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
+.tobago-margin-bottom {
+  /* 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
+  custom styling is much more complicated. */
+  margin-bottom: 1rem;
+}
+
 .tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
@@ -10997,42 +11076,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-tobago-dropdown.tobago-dropdown-submenu {
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-  float: right;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover {
-  background-color: #f8f9fa;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-  top: 0;
-  left: 100%;
-  margin-top: -0.5rem;
-  margin-left: -1px;
-}
-
-tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
-  content: " ";
-  float: right;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 7px;
-  margin-right: -10px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -11131,6 +11174,21 @@ tobago-page {
   overflow-y: auto;
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 1060;
+}
+
+.tobago-page-menuStore .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
 /* panel ------------------------------------------------------------- */
 tobago-panel {
   display: block;
@@ -11144,6 +11202,24 @@ tobago-panel {
 
 /* progress ---------------------------------------------------------- */
 /* range ---------------------------------------------------------- */
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: #dc3545;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
+  /* to separate the icon from the rest of the title */
+  margin-right: 0.7em;
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -11265,18 +11341,6 @@ tobago-stars {
   display: none;
 }
 
-/* section ----------------------------------------------------------- */
-tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-}
-
-tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
-  /* to separate the icon from the rest of the title */
-  margin-right: 0.7em;
-}
-
 /* select ----------------------------------------------------------- */
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
@@ -11306,6 +11370,18 @@ tobago-select-boolean-toggle .form-check-label img {
 
 /* selectOneChoice --------------------------------------------------------- */
 /* selectOneListbox -------------------------------------------------------- */
+.tobago-selectOneListbox-markup-fatal.border-danger:focus, .tobago-selectOneListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-selectOneListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-selectOneListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 tobago-select-one-listbox {
   display: block;
 }
@@ -11347,6 +11423,18 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
 }
 
 /* selectManyListbox ----------------------------------------------------------- */
+.tobago-selectManyListbox-markup-fatal.border-danger:focus, .tobago-selectManyListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-selectManyListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-selectManyListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -11890,6 +11978,11 @@ tobago-tab-group {
   margin-bottom: 1rem;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree .tobago-treeNode {
   cursor: default;
@@ -12028,100 +12121,19 @@ tobago-tree-listbox .tobago-treeListbox-select, .tobago-treeListbox .tobago-tree
 }
 
 /* textarea --------------------------------------------------------- */
-tobago-textarea textarea:disabled {
-  color: rgba(33, 37, 41, 0.5);
-}
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus,
-.tobago-in-markup-fatal.border-danger:focus,
-.tobago-in-markup-error.border-danger:focus,
-.tobago-selectManyListbox-markup-fatal.border-danger:focus,
-.tobago-selectManyListbox-markup-error.border-danger:focus,
-.tobago-selectOneListbox-markup-fatal.border-danger:focus,
-.tobago-selectOneListbox-markup-error.border-danger:focus,
-tobago-textarea textarea-markup-fatal.border-danger:focus,
-tobago-textarea textarea-markup-error.border-danger:focus {
+tobago-textarea textarea-markup-fatal.border-danger:focus, tobago-textarea textarea-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 
-.tobago-date-markup-warn.border-warning:focus,
-.tobago-in-markup-warn.border-warning:focus,
-.tobago-selectManyListbox-markup-warn.border-warning:focus,
-.tobago-selectOneListbox-markup-warn.border-warning:focus,
 tobago-textarea textarea-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
 }
 
-.tobago-date-markup-info.border-info:focus,
-.tobago-in-markup-info.border-info:focus,
-.tobago-selectManyListbox-markup-info.border-info:focus,
-.tobago-selectOneListbox-markup-info.border-info:focus,
 tobago-textarea textarea-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
 }
 
-/* menuStore -------------------------------------------------------- */
-.tobago-page-menuStore {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: 1060;
-}
-
-.tobago-page-menuStore .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
-    width: auto;
-}
-*/
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-.form-horizontal > * {
-  /* fixes vertical space, todo: why is is needed? is there a better way? */
-  margin-top: 10px;
-  margin-bottom: 5px;
-  /* XXX MUST BE REMOVED */
-}
-
-.form-horizontal .control-label {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
-  display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
-  content: "*";
-  color: #dc3545;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
-  text-align: justify !important;
-}
-
-.tobago-margin-bottom {
-  /* 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
-  custom styling is much more complicated. */
-  margin-bottom: 1rem;
+tobago-textarea textarea:disabled {
+  color: rgba(33, 37, 41, 0.5);
 }
 /*# sourceMappingURL=tobago.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css.map b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css.map
index 96f7126..a251d76 100644
--- a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/_functions.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../nod [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/_functions.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../nod [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css
index 9d71bfe..7a9ae6a 100644
--- a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-scarborough/npm/dist/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-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto, [...]
+@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-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto, [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css.map b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css.map
index ff33e32..71f999a 100644
--- a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_mod [...]
\ No newline at end of file
+{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_mod [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
index 2559d32..e88c777 100644
--- a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
@@ -10326,11 +10326,6 @@ tobago-box > .card-body {
   padding: 0;
 }
 
-/* buttons, links ------------------------------------------------------- */
-tobago-buttons > .tobago-button {
-  display: inline-block;
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button:disabled {
   pointer-events: auto;
@@ -10340,11 +10335,11 @@ tobago-buttons > .tobago-button {
   cursor: not-allowed;
 }
 
-.tobago-button > img + span, .tobago-link > img + span {
+.tobago-button > img + span {
   margin-left: .4em;
 }
 
-.tobago-button > i + span, .tobago-link > i + span {
+.tobago-button > i + span {
   margin-left: .4em;
 }
 
@@ -10367,6 +10362,10 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
   pointer-events: none;
 }
 
+tobago-buttons > .tobago-button {
+  display: inline-block;
+}
+
 /* collapsible -------------------------------------------------------------- */
 tobago-box.tobago-collapsed .card-body,
 tobago-section.tobago-collapsed .tobago-section-content,
@@ -10375,6 +10374,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
+.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(211, 0, 64, 0.25);
+}
+
+.tobago-date-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.25);
+}
+
+.tobago-date-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.25);
+}
+
 tobago-date {
   display: block;
 }
@@ -10404,6 +10415,42 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
+tobago-dropdown.tobago-dropdown-submenu {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  float: right;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f7f7f7;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  top: 0;
+  left: 100%;
+  margin-top: -0.5rem;
+  margin-left: -1px;
+}
+
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
+  content: " ";
+  float: right;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 7px;
+  margin-right: -10px;
+}
+
 /* figure -------------------------------------------------------------- */
 /* file -------------------------------------------------------------- */
 tobago-file {
@@ -10448,6 +10495,11 @@ tobago-flex-layout > tobago-flex-layout {
 }
 
 /* flowLayout ---------------------------------------------------------- */
+tobago-flow-layout.tobago-text-justify {
+  /* added here, because Bootstrap has removed .text-justify */
+  text-align: justify !important;
+}
+
 /* focus --------------------------------------------------------------- */
 tobago-focus {
   display: none;
@@ -10514,6 +10566,18 @@ tobago-in {
   display: block;
 }
 
+.tobago-in-markup-fatal.border-danger:focus, .tobago-in-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(211, 0, 64, 0.25);
+}
+
+.tobago-in-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.25);
+}
+
+.tobago-in-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.25);
+}
+
 .tobago-in:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -10532,6 +10596,14 @@ tobago-in {
   white-space: nowrap;
 }
 
+.tobago-link > img + span {
+  margin-left: .4em;
+}
+
+.tobago-link > i + span {
+  margin-left: .4em;
+}
+
 .tobago-link span {
   white-space: normal;
 }
@@ -10626,6 +10698,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
+.tobago-margin-bottom {
+  /* 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
+  custom styling is much more complicated. */
+  margin-bottom: 1rem;
+}
+
 .tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
@@ -10676,42 +10755,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-tobago-dropdown.tobago-dropdown-submenu {
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-  float: right;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover {
-  background-color: #f7f7f7;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-  top: 0;
-  left: 100%;
-  margin-top: -0.5rem;
-  margin-left: -1px;
-}
-
-tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
-  content: " ";
-  float: right;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 7px;
-  margin-right: -10px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -10810,6 +10853,21 @@ tobago-page {
   overflow-y: auto;
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 1060;
+}
+
+.tobago-page-menuStore .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
 /* panel ------------------------------------------------------------- */
 tobago-panel {
   display: block;
@@ -10823,6 +10881,24 @@ tobago-panel {
 
 /* progress ---------------------------------------------------------- */
 /* range ---------------------------------------------------------- */
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: #d30040;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
+  /* to separate the icon from the rest of the title */
+  margin-right: 0.7em;
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -10944,18 +11020,6 @@ tobago-stars {
   display: none;
 }
 
-/* section ----------------------------------------------------------- */
-tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-}
-
-tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
-  /* to separate the icon from the rest of the title */
-  margin-right: 0.7em;
-}
-
 /* select ----------------------------------------------------------- */
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
@@ -10985,6 +11049,18 @@ tobago-select-boolean-toggle .form-check-label img {
 
 /* selectOneChoice --------------------------------------------------------- */
 /* selectOneListbox -------------------------------------------------------- */
+.tobago-selectOneListbox-markup-fatal.border-danger:focus, .tobago-selectOneListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(211, 0, 64, 0.25);
+}
+
+.tobago-selectOneListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.25);
+}
+
+.tobago-selectOneListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.25);
+}
+
 tobago-select-one-listbox {
   display: block;
 }
@@ -11026,6 +11102,18 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
 }
 
 /* selectManyListbox ----------------------------------------------------------- */
+.tobago-selectManyListbox-markup-fatal.border-danger:focus, .tobago-selectManyListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(211, 0, 64, 0.25);
+}
+
+.tobago-selectManyListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.25);
+}
+
+.tobago-selectManyListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.25);
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -11569,6 +11657,11 @@ tobago-tab-group {
   margin-bottom: 1rem;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree .tobago-treeNode {
   cursor: default;
@@ -11707,101 +11800,20 @@ tobago-tree-listbox .tobago-treeListbox-select, .tobago-treeListbox .tobago-tree
 }
 
 /* textarea --------------------------------------------------------- */
-tobago-textarea textarea:disabled {
-  color: rgba(33, 37, 41, 0.5);
-}
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus,
-.tobago-in-markup-fatal.border-danger:focus,
-.tobago-in-markup-error.border-danger:focus,
-.tobago-selectManyListbox-markup-fatal.border-danger:focus,
-.tobago-selectManyListbox-markup-error.border-danger:focus,
-.tobago-selectOneListbox-markup-fatal.border-danger:focus,
-.tobago-selectOneListbox-markup-error.border-danger:focus,
-tobago-textarea textarea-markup-fatal.border-danger:focus,
-tobago-textarea textarea-markup-error.border-danger:focus {
+tobago-textarea textarea-markup-fatal.border-danger:focus, tobago-textarea textarea-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(211, 0, 64, 0.25);
 }
 
-.tobago-date-markup-warn.border-warning:focus,
-.tobago-in-markup-warn.border-warning:focus,
-.tobago-selectManyListbox-markup-warn.border-warning:focus,
-.tobago-selectOneListbox-markup-warn.border-warning:focus,
 tobago-textarea textarea-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.25);
 }
 
-.tobago-date-markup-info.border-info:focus,
-.tobago-in-markup-info.border-info:focus,
-.tobago-selectManyListbox-markup-info.border-info:focus,
-.tobago-selectOneListbox-markup-info.border-info:focus,
 tobago-textarea textarea-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.25);
 }
 
-/* menuStore -------------------------------------------------------- */
-.tobago-page-menuStore {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: 1060;
-}
-
-.tobago-page-menuStore .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
-    width: auto;
-}
-*/
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-.form-horizontal > * {
-  /* fixes vertical space, todo: why is is needed? is there a better way? */
-  margin-top: 10px;
-  margin-bottom: 5px;
-  /* XXX MUST BE REMOVED */
-}
-
-.form-horizontal .control-label {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
-  display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
-  content: "*";
-  color: #d30040;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
-  text-align: justify !important;
-}
-
-.tobago-margin-bottom {
-  /* 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
-  custom styling is much more complicated. */
-  margin-bottom: 1rem;
+tobago-textarea textarea:disabled {
+  color: rgba(33, 37, 41, 0.5);
 }
 
 /*
diff --git a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css.map b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css.map
index 2f0f90c..4bde141 100644
--- a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../scss/_custom.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.s [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../scss/_custom.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.s [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css
index dfe4b7f..e77418c 100644
--- a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#3a2564;--bs-pink:#d63384;--bs-red:#d30040;--bs-orange:#d90;--bs-yellow:#ffc107;--bs-green:#1da332;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#788c94;--bs-gray-dark:#323232;--bs-primary:#185722;--bs-secondary:#d7d7d7;--bs-success:#1da332;--bs-info:#5bc0de;--bs-warning:#f0ad4e;--bs-danger:#d30040;--bs-light:#f7f7f7;--bs-dark:#323232;--bs-font-sans-serif:verdana,sans-serif;--bs-font-monospace:SFMono [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#3a2564;--bs-pink:#d63384;--bs-red:#d30040;--bs-orange:#d90;--bs-yellow:#ffc107;--bs-green:#1da332;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#788c94;--bs-gray-dark:#323232;--bs-primary:#185722;--bs-secondary:#d7d7d7;--bs-success:#1da332;--bs-info:#5bc0de;--bs-warning:#f0ad4e;--bs-danger:#d30040;--bs-light:#f7f7f7;--bs-dark:#323232;--bs-font-sans-serif:verdana,sans-serif;--bs-font-monospace:SFMono [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css.map b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css.map
index 055bc6f..a7bedef 100644
--- a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_modules/bootstrap/scss/_containers.scss","../../node_modules/boots [...]
\ No newline at end of file
+{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_modules/bootstrap/scss/_containers.scss","../../node_modules/boots [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
index d3dc016..925e63a 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
@@ -10608,11 +10608,6 @@ tobago-box > .card-body {
   padding: 0;
 }
 
-/* buttons, links ------------------------------------------------------- */
-tobago-buttons > .tobago-button {
-  display: inline-block;
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button:disabled {
   pointer-events: auto;
@@ -10622,11 +10617,11 @@ tobago-buttons > .tobago-button {
   cursor: not-allowed;
 }
 
-.tobago-button > img + span, .tobago-link > img + span {
+.tobago-button > img + span {
   margin-left: .4em;
 }
 
-.tobago-button > i + span, .tobago-link > i + span {
+.tobago-button > i + span {
   margin-left: .4em;
 }
 
@@ -10649,6 +10644,10 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
   pointer-events: none;
 }
 
+tobago-buttons > .tobago-button {
+  display: inline-block;
+}
+
 /* collapsible -------------------------------------------------------------- */
 tobago-box.tobago-collapsed .card-body,
 tobago-section.tobago-collapsed .tobago-section-content,
@@ -10657,6 +10656,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
+.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-date-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-date-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 tobago-date {
   display: block;
 }
@@ -10686,6 +10697,42 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
+tobago-dropdown.tobago-dropdown-submenu {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  float: right;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
+}
+
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  top: 0;
+  left: 100%;
+  margin-top: -0.5rem;
+  margin-left: -1px;
+}
+
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
+  content: " ";
+  float: right;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 7px;
+  margin-right: -10px;
+}
+
 /* figure -------------------------------------------------------------- */
 /* file -------------------------------------------------------------- */
 tobago-file {
@@ -10730,6 +10777,11 @@ tobago-flex-layout > tobago-flex-layout {
 }
 
 /* flowLayout ---------------------------------------------------------- */
+tobago-flow-layout.tobago-text-justify {
+  /* added here, because Bootstrap has removed .text-justify */
+  text-align: justify !important;
+}
+
 /* focus --------------------------------------------------------------- */
 tobago-focus {
   display: none;
@@ -10796,6 +10848,18 @@ tobago-in {
   display: block;
 }
 
+.tobago-in-markup-fatal.border-danger:focus, .tobago-in-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-in-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-in-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 .tobago-in:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
@@ -10814,6 +10878,14 @@ tobago-in {
   white-space: nowrap;
 }
 
+.tobago-link > img + span {
+  margin-left: .4em;
+}
+
+.tobago-link > i + span {
+  margin-left: .4em;
+}
+
 .tobago-link span {
   white-space: normal;
 }
@@ -10908,6 +10980,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
+.tobago-margin-bottom {
+  /* 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
+  custom styling is much more complicated. */
+  margin-bottom: 1rem;
+}
+
 .tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
@@ -10958,42 +11037,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-tobago-dropdown.tobago-dropdown-submenu {
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-  float: right;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover {
-  background-color: #f8f9fa;
-}
-
-tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-  top: 0;
-  left: 100%;
-  margin-top: -0.5rem;
-  margin-left: -1px;
-}
-
-tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
-  content: " ";
-  float: right;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 7px;
-  margin-right: -10px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -11092,6 +11135,21 @@ tobago-page {
   overflow-y: auto;
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 1060;
+}
+
+.tobago-page-menuStore .dropdown-menu .form-check {
+  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+  padding-left: 2.5rem;
+}
+
 /* panel ------------------------------------------------------------- */
 tobago-panel {
   display: block;
@@ -11105,6 +11163,24 @@ tobago-panel {
 
 /* progress ---------------------------------------------------------- */
 /* range ---------------------------------------------------------- */
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: #dc3545;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
+  /* to separate the icon from the rest of the title */
+  margin-right: 0.7em;
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -11226,18 +11302,6 @@ tobago-stars {
   display: none;
 }
 
-/* section ----------------------------------------------------------- */
-tobago-section > div > h1, tobago-section > div > .h1, tobago-section > div > h2, tobago-section > div > .h2, tobago-section > div > h3, tobago-section > div > .h3, tobago-section > div > h4, tobago-section > div > .h4, tobago-section > div > h5, tobago-section > div > .h5, tobago-section > div > h6, tobago-section > div > .h6 {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-}
-
-tobago-section > div > h1 > .fa:first-child, tobago-section > div > .h1 > .fa:first-child, tobago-section > div > h1 > img, tobago-section > div > .h1 > img, tobago-section > div > h2 > .fa:first-child, tobago-section > div > .h2 > .fa:first-child, tobago-section > div > h2 > img, tobago-section > div > .h2 > img, tobago-section > div > h3 > .fa:first-child, tobago-section > div > .h3 > .fa:first-child, tobago-section > div > h3 > img, tobago-section > div > .h3 > img, tobago-section > d [...]
-  /* to separate the icon from the rest of the title */
-  margin-right: 0.7em;
-}
-
 /* select ----------------------------------------------------------- */
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
@@ -11267,6 +11331,18 @@ tobago-select-boolean-toggle .form-check-label img {
 
 /* selectOneChoice --------------------------------------------------------- */
 /* selectOneListbox -------------------------------------------------------- */
+.tobago-selectOneListbox-markup-fatal.border-danger:focus, .tobago-selectOneListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-selectOneListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-selectOneListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 tobago-select-one-listbox {
   display: block;
 }
@@ -11308,6 +11384,18 @@ tobago-select-many-checkbox.tobago-label-container .form-check-inline {
 }
 
 /* selectManyListbox ----------------------------------------------------------- */
+.tobago-selectManyListbox-markup-fatal.border-danger:focus, .tobago-selectManyListbox-markup-error.border-danger:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.tobago-selectManyListbox-markup-warn.border-warning:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.tobago-selectManyListbox-markup-info.border-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -11851,6 +11939,11 @@ tobago-tab-group {
   margin-bottom: 1rem;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree .tobago-treeNode {
   cursor: default;
@@ -11989,100 +12082,19 @@ tobago-tree-listbox .tobago-treeListbox-select, .tobago-treeListbox .tobago-tree
 }
 
 /* textarea --------------------------------------------------------- */
-tobago-textarea textarea:disabled {
-  color: rgba(33, 37, 41, 0.5);
-}
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus,
-.tobago-in-markup-fatal.border-danger:focus,
-.tobago-in-markup-error.border-danger:focus,
-.tobago-selectManyListbox-markup-fatal.border-danger:focus,
-.tobago-selectManyListbox-markup-error.border-danger:focus,
-.tobago-selectOneListbox-markup-fatal.border-danger:focus,
-.tobago-selectOneListbox-markup-error.border-danger:focus,
-tobago-textarea textarea-markup-fatal.border-danger:focus,
-tobago-textarea textarea-markup-error.border-danger:focus {
+tobago-textarea textarea-markup-fatal.border-danger:focus, tobago-textarea textarea-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 
-.tobago-date-markup-warn.border-warning:focus,
-.tobago-in-markup-warn.border-warning:focus,
-.tobago-selectManyListbox-markup-warn.border-warning:focus,
-.tobago-selectOneListbox-markup-warn.border-warning:focus,
 tobago-textarea textarea-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
 }
 
-.tobago-date-markup-info.border-info:focus,
-.tobago-in-markup-info.border-info:focus,
-.tobago-selectManyListbox-markup-info.border-info:focus,
-.tobago-selectOneListbox-markup-info.border-info:focus,
 tobago-textarea textarea-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
 }
 
-/* menuStore -------------------------------------------------------- */
-.tobago-page-menuStore {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: 1060;
-}
-
-.tobago-page-menuStore .dropdown-menu .form-check {
-  /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
-  padding-left: 2.5rem;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
-    width: auto;
-}
-*/
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-.form-horizontal > * {
-  /* fixes vertical space, todo: why is is needed? is there a better way? */
-  margin-top: 10px;
-  margin-bottom: 5px;
-  /* XXX MUST BE REMOVED */
-}
-
-.form-horizontal .control-label {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
-  display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
-  content: "*";
-  color: #dc3545;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
-  text-align: justify !important;
-}
-
-.tobago-margin-bottom {
-  /* 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
-  custom styling is much more complicated. */
-  margin-bottom: 1rem;
+tobago-textarea textarea:disabled {
+  color: rgba(33, 37, 41, 0.5);
 }
 /*# sourceMappingURL=tobago.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css.map b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css.map
index 6d5e951..1c188b7 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/_functions.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../nod [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/_functions.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../nod [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css
index e206808..18582e6 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-standard/npm/dist/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-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto, [...]
+@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-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto, [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css.map b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css.map
index 91e47b0..5419c8f 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_mod [...]
\ No newline at end of file
+{"version":3,"sources":["../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","dist/css/tobago.css","../../node_modules/bootstrap/scss/vendor/_rfs.scss","tobago.css","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_mod [...]
\ No newline at end of file